Permalink
Browse files

Now remembers selected pattern and css selector.; Credit Subtle Patterns

  • Loading branch information...
1 parent 1f39281 commit 9c4c3f6130b9ab2d159c4ba339b75fa84384956f @overra committed Sep 24, 2012
Showing with 45 additions and 15 deletions.
  1. +6 −2 extension/background.js
  2. +20 −8 extension/popup.css
  3. +3 −0 extension/popup.html
  4. +16 −5 extension/popup.js
View
@@ -1,17 +1,21 @@
var raw_url = 'https://raw.github.com/subtlepatterns/SubtlePatterns/master/',
patterns = [],
page = 0,
- selector;
+ selector,
+ selected;
chrome.extension.onMessage.addListener(function(message, info, cb) {
if (message == 'getPatterns') {
cb({
patterns: patterns,
- page: page
+ page: page,
+ selector: selector,
+ selected: selected
});
}
else if (message.pattern) {
selector = message.selector||'body';
+ selected = message.pattern;
chrome.tabs.insertCSS({
code: selector + ' { background-image: url(' + raw_url + message.pattern + ') !important; }'
});
View
@@ -1,8 +1,9 @@
body {
background: #f0f0f0;
+ color: #666;
font-family: Helvetica, sans-serif;
font-size: 10pt;
- height: 245px;
+ height: 275px;
margin: 5px;
padding: 0px;
width: 265px;
@@ -25,8 +26,7 @@ body {
.pattern {
background-color: #fff;
background-position: center center;
- box-shadow: inset 0px 1px 2px rgba(0,0,0,.2),
- 1px 1px 1px rgba(255,255,255,.2);
+ box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,.2);
display: inline-block;
height: 60px;
margin: 5px;
@@ -42,20 +42,19 @@ body {
}
.pattern.selected {
- box-shadow: inset 0px 1px 2px rgba(0,0,0,.2),
- 0px 0px 2px 1px rgba(0,0,255,1);
+ box-shadow: 0px 0px 2px 1px rgba(0,0,255,1);
}
#details {
position: relative;
- height: 25px;
+ height: 20px;
+ margin: 5px 0px;
}
#details button,
#details div {
outline: none;
position: absolute;
- top: 4px;
}
#details #prev {
@@ -71,4 +70,17 @@ body {
line-height: 20px;
right: 30px;
text-align: center;
-}
+}
+
+.credit {
+ border-top: 1px #ccc solid;
+ padding-top: 5px;
+ height: 20px;
+ line-height: 20px;
+ text-align: center;
+}
+
+.credit a {
+ color: #444;
+ text-decoration: none;
+}
View
@@ -15,6 +15,9 @@
<div id="name"></div>
<button id="next">Next</button>
</div>
+ <div class="credit">
+ Patterns provided by <a href="http://subtlepatterns.com" target="_blank">Subtle Patterns</a>.
+ </div>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
View
@@ -7,6 +7,7 @@ var raw_url = 'https://raw.github.com/subtlepatterns/SubtlePatterns/master/',
patterns,
page,
selected,
+ selectedName,
pageMax;
function loadPatterns() {
@@ -38,6 +39,10 @@ function loadPatterns() {
x = i%12;
pattern = document.createElement('div');
pattern.className = 'pattern';
+ if (selectedName===file.name) {
+ pattern.className += ' selected';
+ selected = pattern;
+ }
pattern.style.backgroundImage = 'url(' + raw_url + file.name + ')';
pattern.style.top = ((x - x%4) / 4) * 65 + 'px';
pattern.style.left = (x%4) * 65 + 'px';
@@ -54,9 +59,10 @@ function loadPatterns() {
}
this.className = 'pattern selected';
selected = this;
+ selectedName = this.getAttribute('data-name');
chrome.extension.sendMessage({
- pattern: this.getAttribute('data-name'),
- selector: target_div.value
+ pattern: selectedName,
+ selector: target_div.value,
});
};
patterns_div.appendChild(pattern);
@@ -75,8 +81,13 @@ next_btn.onclick = function() {
};
chrome.extension.sendMessage('getPatterns', function(p) {
- patterns = p.patterns;
- page = p.page;
- pageMax = Math.floor(patterns.length / 12);
+ patterns = p.patterns;
+ selectedName = p.selected;
+ page = p.page;
+ pageMax = Math.floor(patterns.length / 12);
+ if (p.selector) {
+ target_div.value = p.selector;
+ }
+
loadPatterns();
});

0 comments on commit 9c4c3f6

Please sign in to comment.