Don't show disabled-looking controls for disabled styles, code cleanup #20

This commit is contained in:
Jason Barnabe 2014-10-06 11:13:05 -05:00
parent 61c59af2ba
commit 09384b1d57
2 changed files with 7 additions and 18 deletions

View File

@ -7,9 +7,6 @@
#no-styles { #no-styles {
font-style: italic; font-style: italic;
} }
.disabled {
color: #BBB;
}
.checker { .checker {
display: inline; display: inline;
} }

View File

@ -1,5 +1,5 @@
var styleTemplate = document.createElement("div"); var styleTemplate = document.createElement("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>"; styleTemplate.innerHTML = "<input class='checker' type='checkbox'><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);
@ -19,12 +19,7 @@ function showStyles(styles) {
function createStyleElement(style) { function createStyleElement(style) {
var e = styleTemplate.cloneNode(true); var e = styleTemplate.cloneNode(true);
var checkbox = e.querySelector(".checker"); var checkbox = e.querySelector(".checker");
if (style.enabled == "true") { checkbox.checked = 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);
@ -34,14 +29,11 @@ function createStyleElement(style) {
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);
if (checkbox.checked) { // the checkbox will not toggle itself after clicking the name, but calling enable will regenerate it
styleName.addEventListener("click", function() { enable(event, false); }, false); styleName.addEventListener("click", function() { enable(event, !event.target.previousSibling.checked); }, false);
checkbox.addEventListener("click", function() { enable(event, false); }, false); // clicking the checkbox will toggle it, and this will run after that happens
} checkbox.addEventListener("click", function() { enable(event, event.target.checked); }, false);
else {
styleName.addEventListener("click", function() { enable(event, true); }, false);
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;
} }