linkify numbers in option labels

pull/1409/merge
tophf 2 years ago
parent 48d90544f6
commit 3aae3f181a

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

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

@ -1,7 +1,7 @@
/* global API */// msg.js
/* global prefs */
/* global t */// localization.js
/* global $ $$ getEventKeyName messageBoxProxy setupLivePrefs */// dom.js
/* global $ $$ $create getEventKeyName messageBoxProxy setInputValue setupLivePrefs */// dom.js
/* global
CHROME_POPUP_BORDER_BUG
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() {
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) {
const min = Number(element.min);
const max = Number(element.max);

Loading…
Cancel
Save