open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Checkbox for enabling/disabling styles

Browse Source 
This fixes #17
This commit is contained in:
Baegus 2014-10-01 21:51:25 +02:00
parent 1a2075771d
commit 40da07846b
2 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
popup.html
View File

@ -10,13 +10,11 @@
.disabled { .disabled {
color: #BBB; color: #BBB;
} }
.disabled .disable { .checker {
display: none; display: inline;
}
.enabled .enable {
display: none;
} }
.style-name { .style-name {
display: inline;
font-weight: bold; font-weight: bold;
} }
.actions { .actions {
@ -53,4 +51,4 @@
<script src="popup.js"></script> <script src="popup.js"></script>
</body> </body>
</html> </html>

21
popup.js
View File

@ -1,5 +1,5 @@
var styleTemplate = document.createElement("div"); var styleTemplate = document.createElement("div");
styleTemplate.innerHTML = "<div class='style-name'></div><div class='actions'><a class='style-edit-link' href='edit.html?id='>" + t('editStyleLabel') + "</a> <a href='#' class='enable'>" + t('enableStyleLabel') + "</a> <a href='#' class='disable'>" + t('disableStyleLabel') + "</a> <a href='#' class='delete'>" + t('deleteStyleLabel') + "</a></div>"; styleTemplate.innerHTML = "<input class='checker' type='checkbox'></input><div class='style-name'></div><div class='actions'><a class='style-edit-link' href='edit.html?id='>" + t('editStyleLabel') + "</a> <a href='#' class='delete'>" + t('deleteStyleLabel') + "</a></div>";
chrome.tabs.getSelected(null, function(tab) { chrome.tabs.getSelected(null, function(tab) {
chrome.extension.sendMessage({method: "getStyles", matchUrl: tab.url}, showStyles); chrome.extension.sendMessage({method: "getStyles", matchUrl: tab.url}, showStyles);
@ -18,6 +18,16 @@ function showStyles(styles) {
function createStyleElement(style) { function createStyleElement(style) {
var e = styleTemplate.cloneNode(true); var e = styleTemplate.cloneNode(true);
var checkbox = e.querySelector(".checker");
checkbox.setAttribute("type","checkbox");
checkbox.setAttribute("class","checker")
if (style.enabled == "true") {
checkbox.checked = true;
}
else {
checkbox.checked = false;
}
e.setAttribute("class", "entry " + (style.enabled == "true" ? "enabled" : "disabled")); e.setAttribute("class", "entry " + (style.enabled == "true" ? "enabled" : "disabled"));
e.setAttribute("style-id", style.id); e.setAttribute("style-id", style.id);
var styleName = e.querySelector(".style-name"); var styleName = e.querySelector(".style-name");
@ -25,8 +35,13 @@ function createStyleElement(style) {
var editLink = e.querySelector(".style-edit-link"); var editLink = e.querySelector(".style-edit-link");
editLink.setAttribute("href", editLink.getAttribute("href") + style.id); editLink.setAttribute("href", editLink.getAttribute("href") + style.id);
editLink.addEventListener("click", openLink, false); editLink.addEventListener("click", openLink, false);
e.querySelector(".enable").addEventListener("click", function() { enable(event, true); }, false);
e.querySelector(".disable").addEventListener("click", function() { enable(event, false); }, false); if (checkbox.checked == true) {
(checkbox).addEventListener("click", function() { enable(event, false); }, false);
}
else {
(checkbox).addEventListener("click", function() { enable(event, true); }, false);
}
e.querySelector(".delete").addEventListener("click", function() { doDelete(event, false); }, false); e.querySelector(".delete").addEventListener("click", function() { doDelete(event, false); }, false);
return e; return e;
} }