Skip to content

Commit

Permalink
Fix bugs, remove prefixfree dependency
Browse files Browse the repository at this point in the history
  • Loading branch information
@LeaVerou
LeaVerou committed Nov 1, 2018
1 parent c9146d8 commit 8b43d80
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 51 deletions.
28 changes: 16 additions & 12 deletions css3patterns.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ var patterns = document.querySelectorAll("#patterns > li"),
currentPattern = null;

for (var i=0; i<patterns.length; i++) {
var pattern = patterns[i];
let pattern = patterns[i];

var div = document.createElement("div"),
let div = document.createElement("div"),
heading = div.appendChild(document.createElement("h2")),
code = document.createElement("textarea"),
title = pattern.getAttribute("title"),
Expand All @@ -18,15 +18,24 @@ for (var i=0; i<patterns.length; i++) {
heading.innerHTML = '<a href="#' + pattern.id + '">' + title + "</a>";

code.value = pattern.getAttribute("style");
code.setAttribute("data-subject", "#patterns li:nth-child(" + (i+1) + ")");
code.setAttribute("wrap", "off");
code.oninput = function() {

code.addEventListener("input", function(evt) {
var byteSize = this.parentNode.querySelector(".bytesize");

if (byteSize) {
byteSize.innerHTML = ByteSize.format(ByteSize.count(this.value), true);
}
};

pattern.setAttribute("style", this.value);

if (currentPattern === pattern) {
// A pattern is opened
document.body.setAttribute("style", this.value);
}

code.style.setProperty("--lines", this.value.trim().split(/\r?\n|\r/).length);
});

close.className = "close";
close.href = "#";
Expand Down Expand Up @@ -54,9 +63,9 @@ for (var i=0; i<patterns.length; i++) {
}
};

pattern.snippet = new CSSSnippet(code);

window.Incrementable && new Incrementable(code);

code.dispatchEvent(new InputEvent("input"));
}

(onhashchange = function() {
Expand All @@ -65,15 +74,10 @@ for (var i=0; i<patterns.length; i++) {
if (pattern) {
recentPattern = currentPattern = pattern;
document.body.setAttribute("style", pattern.getAttribute("style"));
pattern.snippet.subjects[1] = document.body;
}
else {
currentPattern = null;
document.body.removeAttribute("style");

if (recentPattern) {
delete recentPattern.snippet.subjects[1];
}
}
})();

Expand Down
16 changes: 1 addition & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,7 @@ <h1>CSS3 Patterns Gallery</h1>
background-size: 25px 25px;"
title="Chocolate Weave" data-author="Paul Salentiny"></li>

<li style="background:
<li style="background:
radial-gradient(black 3px, transparent 4px),
radial-gradient(black 3px, transparent 4px),
linear-gradient(#fff 4px, transparent 0),
Expand Down Expand Up @@ -397,20 +397,6 @@ <h2 id="new-submissions">Submission guidelines</h2>
&bull; If no other author is mentioned, the pattern is created by <a href="http://lea.verou.me">Lea Verou</a>
</p>

<script src="https://leaverou.github.io/prefixfree/prefixfree.min.js"></script>
<script>
StyleFix.register(function(css, raw) {
if (PrefixFree.functions.indexOf('radial-gradient') > -1) {
css = css.replace(/radial-gradient\(([a-z-\s]+\s+)?at ([^,]+)(?=,)/g, function($0, shape, center){
return 'radial-gradient(' + center + (shape? ', ' + shape : '');
});
}

return css;
});
</script>
<script src="https://leaverou.github.io/csss/plugins/css-edit.js"></script>
<script src="https://leaverou.github.io/csss/plugins/css-snippets.js"></script>
<script src="https://leaverou.github.io/incrementable/incrementable.js"></script>
<script src="http://bytesizematters.com/bytesize.js"></script>
<script src="css3patterns.js"></script>
Expand Down
49 changes: 25 additions & 24 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,14 +73,14 @@ body > p > a:hover {
list-style:none;
text-shadow: 0 1px white;
}

#help > li + li:before {
content: '● ';
opacity:.4;
}

#patterns {

}

#patterns:after {
Expand All @@ -97,7 +97,7 @@ body > p > a:hover {
float:left;
list-style:none;
}

#patterns > li:not(:target) {
cursor:pointer;
background-color:gray;
Expand All @@ -111,15 +111,15 @@ body > p > a:hover {
0 0 0 1px rgba(0,0,0,.5),
2px 2px 10px rgba(0,0,0,.6);
}

#patterns > li:target {
background: none !important;
}

body[style] #patterns > li:not(:target) {
display:none;
}

#patterns > li > div {
position:absolute;
top:235px;
Expand All @@ -133,7 +133,7 @@ body > p > a:hover {
background:currentColor;
box-shadow: 2px 2px 10px rgba(0,0,0,.5);
}

#patterns > li:target > div {
position:fixed;
top:auto;
Expand All @@ -145,7 +145,7 @@ body > p > a:hover {
padding:10px;
font-size:200%;
}

#patterns > li > div:after {
content: "";
position:absolute;
Expand All @@ -155,64 +155,65 @@ body > p > a:hover {
border-bottom-color:currentColor;
border-left-width:0;
}

#patterns > li:target > div:after {
border-width:30px;
border-left-width:0;
top:-60px;
left:60px;
}

#patterns > li h2,
#patterns > li p,
#patterns > li textarea {
color:white;
text-shadow: .05em .05em .1em rgba(0,0,0,.4);
}

#patterns > li h2 {
font-size:140%;
}

#patterns > li:target h2 {
float: left;
margin-bottom: .3em;
}

#patterns > li .bytesize {
font-weight:normal;
opacity:.7;
}

#patterns > li p {
font-size:85%;
line-height:1.8;
opacity:.7;
text-shadow: none;
}

#patterns > li:target p {
float: right;
}

#patterns > li textarea {
display:none;
width:100%;
max-height: 50vh;
color:white;
background: #333538;
padding: .5em;
border:0;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
font: 100%/1.5 Consolas, Monaco, 'Andale Mono', monospace;
resize:vertical;
box-sizing: border-box;
box-shadow: 1px 1px 10px black inset;
border-radius: 1px; /* Opera bug fix */
height: calc(var(--lines, 1) * 1.5em + 1em + 16px);
}

#patterns > li:target textarea {
display:block;
}

#patterns > li .close {
display:none;
position:absolute;
Expand All @@ -230,15 +231,15 @@ body > p > a:hover {
border-radius:1em;
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}

#patterns > li .close:hover {
background:black;
}

#patterns > li:target .close {
display:block;
}

#social {
position: fixed;
top: 10px;
Expand All @@ -249,7 +250,7 @@ body > p > a:hover {
#social iframe {
margin-top: .5em;
}

#footer {
clear:both;
text-align:center;
Expand Down

0 comments on commit 8b43d80

Please sign in to comment.