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

popup: show style numbers, add more hotkeys

Browse Source 
numpad 0-9 same as 0-9
numpad + enables all listed
numpad - disables all listed
numpad * and ` (backtick) - toggles initially enabled styles;
         doesn't apply to subsequently enabled styles while the popup is open
         so you can restore the initial selection after testing stuff:
         simply disable all, then toggle i.e. numpad -, numpad *
This commit is contained in:
tophf 2017-11-29 01:46:42 +03:00
parent 362d944428
commit c0a227fa39
4 changed files with 117 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
popup.html
View File

@ -86,6 +86,7 @@
<script src="js/prefs.js"></script> <script src="js/prefs.js"></script>
<script src="content/apply.js"></script> <script src="content/apply.js"></script>
<script src="popup/popup.js"></script> <script src="popup/popup.js"></script>
<script src="popup/hotkeys.js"></script>
</head> </head>
<body id="stylus-popup"> <body id="stylus-popup">

105
popup/hotkeys.js Normal file
View File

@ -0,0 +1,105 @@
/* global applyOnMessage installed */
'use strict';
window.addEventListener('showStyles:done', function _() {
window.removeEventListener('showStyles:done', _);
let togglablesShown = true;
let togglables = getTogglables();
window.addEventListener('keydown', onKeyDown);
return;
function onKeyDown(event) {
if (event.ctrlKey || event.altKey || event.metaKey) {
return;
}
let entry;
const k = event.which;
if (k >= 48 && k <= 57 || k >= 96 && k <= 105) {
// 0-9, numpad 0-9
entry = installed.children[k === 48 || k === 96 ? 9 : k - (k > 96 ? 97 : 49)];
} else if (k >= 65 && k <= 90) {
// a-z
const letter = new RegExp('^\\x' + k.toString(16), 'i');
entry = [...installed.children].find(entry => letter.test(entry.textContent));
} else if (k === 192 || k === 106) {
// backtick ` and numpad *
invertTogglables();
} else if (k === 109) {
// numpad -
toggleState(installed.children, 'enabled', false);
} else if (k === 107) {
// numpad +
toggleState(installed.children, 'disabled', true);
}
if (!entry) {
return;
}
const target = $(event.shiftKey ? '.style-edit-link' : '.checker', entry);
target.dispatchEvent(new MouseEvent('click'));
}
function getTogglables() {
const all = [...installed.children];
const enabled = [];
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() {
let num = 0;
for (const id of togglables) {
num += $(`#${id}`).classList.contains('enabled');
}
return num;
}
function invertTogglables() {
togglables = togglables.length ? togglables : getTogglables();
togglablesShown = countEnabledTogglables() > togglables.length / 2;
toggleState(togglables, null, !togglablesShown);
togglablesShown = !togglablesShown;
}
function toggleState(list, match, enable) {
const results = [];
let task = Promise.resolve();
for (let entry of list) {
entry = typeof entry === 'string' ? $('#' + entry) : entry;
if (!match && $('.checker', entry).checked !== enable || entry.classList.contains(match)) {
results.push(entry.id);
task = task.then(() => saveStyleSafe({
id: entry.styleId,
enabled: enable,
notify: false,
}));
}
}
if (results.length) {
task.then(refreshAllTabs);
}
return results;
}
function refreshAllTabs() {
getStylesSafe({matchUrl: location.href, enabled: true, asHash: true})
.then(styles => applyOnMessage({method: 'styleReplaceAll', styles}));
queryTabs().then(tabs => {
for (const tab of tabs) {
// skip lazy-loaded aka unloaded tabs that seem to start loading on message in FF
if (!FIREFOX || tab.width) {
getStylesSafe({matchUrl: tab.url, enabled: true, asHash: true}).then(styles => {
const message = {method: 'styleReplaceAll', styles, tabId: tab.id};
invokeOrPostpone(tab.active, sendMessage, message, ignoreChromeError);
setTimeout(BG.updateIcon, 0, tab, styles);
});
}
}
});
}
});

10
popup/popup.css
View File

@ -82,6 +82,7 @@ body.blocked > DIV {
padding-top: 2px; padding-top: 2px;
max-height: 445px; max-height: 445px;
overflow-y: auto; overflow-y: auto;
counter-reset: style-number;
} }
#installed.disabled .style-name { #installed.disabled .style-name {
@ -114,6 +115,15 @@ body.blocked > DIV {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
} }
.entry:nth-child(-n+10):before {
counter-increment: style-number;
content: counter(style-number);
position: absolute;
right: 5px;
margin-top: 1px;
color: #aaa;
}
.entry .style-edit-link { .entry .style-edit-link {
margin-right: 2px; margin-right: 2px;
} }

21
popup/popup.js
View File

@ -189,26 +189,6 @@ function initPopup(url) {
matchTargets.appendChild(matchTargets.removeChild(matchTargets.firstElementChild)); matchTargets.appendChild(matchTargets.removeChild(matchTargets.firstElementChild));
} }
writeStyle.appendChild(matchWrapper); writeStyle.appendChild(matchWrapper);
// hotkeys
window.addEventListener('keydown', event => {
if (event.ctrlKey || event.altKey || event.metaKey) {
return;
}
const k = event.which;
let entry;
if (k >= 48 && k <= 57) {
entry = installed.children[k === 48 ? 9 : k - 49];
} else if (k >= 65 && k <= 90) {
const letter = new RegExp('^\\x' + k.toString(16), 'i');
entry = [...installed.children].find(entry => letter.test(entry.textContent));
}
if (!entry) {
return;
}
const target = $(event.shiftKey ? '.style-edit-link' : '.checker', entry);
target.dispatchEvent(new MouseEvent('click'));
});
} }
@ -248,6 +228,7 @@ function showStyles(styles) {
}); });
} }
} }
window.dispatchEvent(new Event('showStyles:done'));
}); });
} }