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

Make style names in popup toggle the styles

Browse Source
This commit is contained in:
Jason 2015-04-08 14:14:16 -05:00
parent 32584911ea
commit cf4da22a0a
2 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
popup.html
View File

@ -14,6 +14,7 @@
cursor: default; cursor: default;
font-weight: bold; font-weight: bold;
margin-bottom: 2px; margin-bottom: 2px;
display: block;
} }
.actions { .actions {
font-size: x-small; font-size: x-small;

4
popup.js
View File

@ -1,5 +1,5 @@
var styleTemplate = document.createElement("div"); var styleTemplate = document.createElement("div");
styleTemplate.innerHTML = "<div class='left-gutter'><input class='checker' type='checkbox'></div><div class='main-controls'><div class='style-name'></div><div class='actions'><a href='#' class='enable'>" + t('enableStyleLabel') + "</a> <a href='#' class='disable'>" + t('disableStyleLabel') + "</a> <a class='style-edit-link' href='edit.html?id='>" + t('editStyleLabel') + "</a> <a href='#' class='delete'>" + t('deleteStyleLabel') + "</a></div></div>"; styleTemplate.innerHTML = "<div class='left-gutter'><input class='checker' type='checkbox'></div><div class='main-controls'><label class='style-name'></label><div class='actions'><a href='#' class='enable'>" + t('enableStyleLabel') + "</a> <a href='#' class='disable'>" + t('disableStyleLabel') + "</a> <a class='style-edit-link' href='edit.html?id='>" + t('editStyleLabel') + "</a> <a href='#' class='delete'>" + t('deleteStyleLabel') + "</a></div></div>";
var writeStyleTemplate = document.createElement("a"); var writeStyleTemplate = document.createElement("a");
writeStyleTemplate.className = "write-style-link"; writeStyleTemplate.className = "write-style-link";
@ -100,12 +100,14 @@ 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");
checkbox.id = "style-" + style.id;
checkbox.checked = style.enabled == "true"; checkbox.checked = style.enabled == "true";
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");
styleName.appendChild(document.createTextNode(style.name)); styleName.appendChild(document.createTextNode(style.name));
styleName.setAttribute("for", "style-" + style.id);
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", openLinkInTabOrWindow, false); editLink.addEventListener("click", openLinkInTabOrWindow, false);