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

Add: hook exclusion UI

Browse Source
This commit is contained in:
eight 2019-02-11 12:30:16 +08:00
parent 56659bcbc1
commit 84fdd5cfd6
2 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
popup.html
View File

@ -56,7 +56,7 @@
<label class="menu-item exclude-by-domain button"> <label class="menu-item exclude-by-domain button">
<div class="menu-icon"> <div class="menu-icon">
<div class="checkbox-container"> <div class="checkbox-container">
<input type="checkbox" class="checker"> <input type="checkbox" class="exclude-by-domain-checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</div> </div>
</div> </div>
@ -65,7 +65,7 @@
<label class="menu-item exclude-by-url button"> <label class="menu-item exclude-by-url button">
<div class="menu-icon"> <div class="menu-icon">
<div class="checkbox-container"> <div class="checkbox-container">
<input type="checkbox" class="checker"> <input type="checkbox" class="exclude-by-url-checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</div> </div>
</div> </div>

29
popup/popup.js
View File

@ -311,6 +311,9 @@ function createStyleElement(style) {
$('.main-controls', entry).appendChild(indicator); $('.main-controls', entry).appendChild(indicator);
$('.menu-button', entry).onclick = handleEvent.toggleMenu; $('.menu-button', entry).onclick = handleEvent.toggleMenu;
$('.exclude-by-domain-checkbox').onchange = e => handleEvent.toggleExclude(e, 'domain');
$('.exclude-by-url-checkbox').onchange = e => handleEvent.toggleExclude(e, 'url');
} }
style = Object.assign(entry.styleMeta, style); style = Object.assign(entry.styleMeta, style);
@ -331,9 +334,26 @@ function createStyleElement(style) {
entry.classList.toggle('not-applied', style.excluded || style.sloppy); entry.classList.toggle('not-applied', style.excluded || style.sloppy);
entry.classList.toggle('regexp-partial', style.sloppy); entry.classList.toggle('regexp-partial', style.sloppy);
$('.exclude-by-domain-checkbox', entry).checked = styleExcluded(style, 'domain');
$('.exclude-by-url-checkbox', entry).checked = styleExcluded(style, 'url');
return entry; return entry;
} }
function styleExcluded({exclusions}, type) {
if (!exclusions) {
return false;
}
const rule = getExcludeRule(type);
return exclusions.includes(rule);
}
function getExcludeRule(type) {
if (type === 'domain') {
return new URL(tabURL).origin + '/*';
}
return tabURL + '*';
}
Object.assign(handleEvent, { Object.assign(handleEvent, {
@ -358,6 +378,15 @@ Object.assign(handleEvent, {
.then(sortStylesInPlace); .then(sortStylesInPlace);
}, },
toggleExclude(event, type) {
const entry = handleEvent.getClickedStyleElement(event);
if ($(`.exclude-by-${type}-checkbox`, entry).checked) {
API.removeExclusion(entry.styleMeta.id, getExcludeRule(type));
} else {
API.addExclusion(entry.styleMeta.id, getExcludeRule(type));
}
},
toggleMenu(event) { toggleMenu(event) {
const entry = handleEvent.getClickedStyleElement(event); const entry = handleEvent.getClickedStyleElement(event);
entry.classList.toggle('menu-active'); entry.classList.toggle('menu-active');