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

fixup dc126e1b: more adjustments for persistent child in #installed

Browse Source 
* use .entry collection instead of installed.children
* adjust CSS counters

also:

* KeyboardEvent#code is checked first now - available since Chrome48 and FF32
* synthetic click event is cancelable, otherwise FF would open the editor in popup
This commit is contained in:
tophf 2017-12-14 05:50:58 +03:00
parent 1283e85a8e
commit 8dbdbe988f
2 changed files with 39 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
popup/hotkeys.js
View File

@ -3,6 +3,7 @@
// eslint-disable-next-line no-var // eslint-disable-next-line no-var
var hotkeys = (() => { var hotkeys = (() => {
const entries = document.getElementsByClassName('entry');
let togglablesShown; let togglablesShown;
let togglables; let togglables;
let enabled = false; let enabled = false;
@ -36,41 +37,46 @@ var hotkeys = (() => {
return; return;
} }
let entry; let entry;
const {which: k, key} = event; const {which: k, key, code} = event;
if (key ? key >= '0' && key <= '9' : k >= 48 && k <= 57 || k >= 96 && k <= 105) {
// 0-9, numpad 0-9 if (code.startsWith('Digit') || code.startsWith('Numpad') && code.length === 7) {
const i = key === '0' ? 9 : key ? Number(key) - 1 : k === 48 || k === 96 ? 9 : k - (k > 96 ? 97 : 49); entry = entries[(Number(code.slice(-1)) || 10) - 1];
entry = installed.children[i];
} else if (key ? key === '`' || key === '*' && !event.shiftKey : k === 192 || k === 106) { } else if (
// backtick ` and numpad * code === 'Backquote' || code === 'NumpadMultiply' ||
key && (key === '`' || key === '*') ||
k === 192 || k === 106) {
invertTogglables(); invertTogglables();
} else if (key ? key === '-' : k === 109) {
// numpad - } else if (
toggleState(installed.children, 'enabled', false); code === 'NumpadSubtract' ||
} else if (key ? key === '+' : k === 107) { key && key === '-' ||
// numpad + k === 109) {
toggleState(installed.children, 'disabled', true); toggleState(entries, 'enabled', false);
} else if (key ? key.length === 1 : k >= 65 && k <= 90) {
} else if (
code === 'NumpadAdd' ||
key && key === '+' ||
k === 107) {
toggleState(entries, 'disabled', true);
} else if (
// any single character // any single character
key && key.length === 1 ||
k >= 65 && k <= 90) {
const letter = new RegExp(key ? '^' + key : '^\\x' + k.toString(16), 'i'); const letter = new RegExp(key ? '^' + key : '^\\x' + k.toString(16), 'i');
entry = [...installed.children].find(entry => letter.test(entry.textContent)); entry = [...entries].find(entry => letter.test(entry.textContent));
} }
if (!entry) { if (!entry) {
return; return;
} }
const target = $(event.shiftKey ? '.style-edit-link' : '.checker', entry); const target = $(event.shiftKey ? '.style-edit-link' : '.checker', entry);
target.dispatchEvent(new MouseEvent('click')); target.dispatchEvent(new MouseEvent('click', {cancelable: true}));
} }
function getTogglables() { function getTogglables() {
const all = [...installed.children]; const enabledOrAll = $('.entry.enabled') ? $$('.entry.enabled') : [...entries];
const enabled = []; return enabledOrAll.map(entry => entry.id);
for (const entry of all) {
if (entry.classList.contains('enabled')) {
enabled.push(entry.id);
}
}
return enabled.length ? enabled : all.map(entry => entry.id);
} }
function countEnabledTogglables() { function countEnabledTogglables() {

15
popup/popup.css
View File

@ -184,11 +184,6 @@ html[style] .entry {
padding: 0 14px; padding: 0 14px;
} }
html[style] .entry:nth-child(-n+10):before,
html[style] .entry:nth-child(10):before {
right: 7px;
}
.entry .actions { .entry .actions {
display: inline-flex; display: inline-flex;
} }
@ -220,7 +215,7 @@ html[style] .entry:nth-child(10):before {
} }
.entry:nth-child(-n+10):before, .entry:nth-child(-n+10):before,
.entry:nth-child(10):before { .entry:nth-child(11):before {
counter-increment: style-number; counter-increment: style-number;
content: counter(style-number); content: counter(style-number);
position: absolute; position: absolute;
@ -229,10 +224,16 @@ html[style] .entry:nth-child(10):before {
color: #aaa; color: #aaa;
} }
.entry:nth-child(10):before { .entry:nth-child(11):before {
content: "0"; content: "0";
} }
html[style*="border"] .entry:nth-child(-n+10):before,
html[style*="border"] .entry:nth-child(11):before {
/* the "show side borders" option adds 2px */
right: 7px;
}
.entry .actions { .entry .actions {
margin-left: -1px; margin-left: -1px;
margin-right: -1px; margin-right: -1px;