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

linkify numbers in option labels

Browse Source
This commit is contained in:
tophf 2022-09-05 23:08:03 +03:00
parent 48d90544f6
commit 3aae3f181a
3 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
options.html
View File

@ -66,7 +66,7 @@
<h1 i18n="optionsCustomizeUpdate"></h1> <h1 i18n="optionsCustomizeUpdate"></h1>
<div class="items"> <div class="items">
<label> <label>
<span i18n="optionsUpdateInterval"> <span i18n="optionsUpdateInterval" data-clickable="0">
<a i18n="title:optionsUpdateImportNote" <a i18n="title:optionsUpdateImportNote"
data-cmd="note" class="svg-inline-wrapper" tabindex="0"> data-cmd="note" class="svg-inline-wrapper" tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
@ -241,7 +241,7 @@
<h1 i18n="openManage"></h1> <h1 i18n="openManage"></h1>
<div class="items"> <div class="items">
<label> <label>
<span i18n="manageMinColumnWidth"></span> <span i18n="manageMinColumnWidth" data-clickable="9999"></span>
<input id="manage.minColumnWidth" type="number" min="300" max="9999"> <input id="manage.minColumnWidth" type="number" min="300" max="9999">
</label> </label>
<label> <label>

5
options/options.css
View File

@ -47,6 +47,11 @@ a:hover .svg-icon,
fill: var(--fg); fill: var(--fg);
} }
.clickable {
text-decoration: underline dotted;
cursor: pointer;
}
.svg-inline-wrapper .svg-icon { .svg-inline-wrapper .svg-icon {
pointer-events: none; pointer-events: none;
} }

14
options/options.js
View File

@ -1,7 +1,7 @@
/* global API */// msg.js /* global API */// msg.js
/* global prefs */ /* global prefs */
/* global t */// localization.js /* global t */// localization.js
/* global $ $$ getEventKeyName messageBoxProxy setupLivePrefs */// dom.js /* global $ $$ $create getEventKeyName messageBoxProxy setInputValue setupLivePrefs */// dom.js
/* global /* global
CHROME_POPUP_BORDER_BUG CHROME_POPUP_BORDER_BUG
FIREFOX FIREFOX
@ -44,6 +44,14 @@ $('#reset').onclick = async () => {
} }
} }
}; };
$$('[data-clickable]').forEach(el => {
const input = $('input', el.closest('label'));
const value = el.dataset.clickable;
const rx = new RegExp(`\\b(${value})\\b`, 'g');
const onclick = () => setInputValue(input, value);
const parts = elementize(el.textContent, rx, s => $create('span.clickable', {onclick}, s));
el.firstChild.replaceWith(...parts);
});
function customizeHotkeys() { function customizeHotkeys() {
messageBoxProxy.show({ messageBoxProxy.show({
@ -73,6 +81,10 @@ function customizeHotkeys() {
} }
} }
function elementize(str, rx, cb) {
return str.split(rx).map((s, i) => i % 2 ? cb(s) : s).filter(Boolean);
}
function enforceInputRange(element) { function enforceInputRange(element) {
const min = Number(element.min); const min = Number(element.min);
const max = Number(element.max); const max = Number(element.max);