diff --git a/js/dom.js b/js/dom.js index 83470aa6..1b764e7f 100644 --- a/js/dom.js +++ b/js/dom.js @@ -404,10 +404,10 @@ function moveFocus(rootElement, step) { // and establishes a two-way connection between the document elements and the actual prefs function setupLivePrefs( IDs = Object.getOwnPropertyNames(prefs.defaults) - .filter(id => $('#' + id)) + .filter(id => $(`#${CSS.escape(id)}, [name=${CSS.escape(id)}]`)) ) { for (const id of IDs) { - const elements = [$('#' + id), ...$$(`[name=${id}]`)]; + const elements = $$(`#${CSS.escape(id)}, [name=${CSS.escape(id)}]`); for (const element of elements) { updateElement({id, elements: [element], force: true}); element.addEventListener('change', onChange); @@ -416,6 +416,9 @@ function setupLivePrefs( prefs.subscribe(IDs, (id, value) => updateElement({id, value})); function onChange() { + if (!this.checkValidity()) { + return; + } const key = this.id || this.name; const value = getInputValue(this); if (value !== undefined && prefs.get(key) !== value) { @@ -425,7 +428,7 @@ function setupLivePrefs( function updateElement({ id, value = prefs.get(id), - elements = [$('#' + id), ...$$(`[name=${id}]`)], + elements = $$(`#${CSS.escape(id)}, [name=${CSS.escape(id)}]`), force, }) { // FIXME: this has no effect. `updateElement` is not a listener @@ -447,13 +450,19 @@ function setupLivePrefs( if (input.type === 'radio' && !input.checked) { return undefined; } + // FIXME: use a string value for iconset + if (input.name === 'iconset') { + return Number(input.value); + } return input.value; } function setInputValue(input, value, force = false) { let oldValue, newValue; if (input.type === 'radio') { oldValue = input.checked; - newValue = input.checked = value === input.value; + // FIXME: use == because we use number value in iconset + newValue = input.checked = value == input.value; + console.log(value, input.value); } else if (input.type === 'checkbox') { oldValue = input.checked; newValue = input.checked = value; diff --git a/options/options.js b/options/options.js index cf805ffe..d5a11881 100644 --- a/options/options.js +++ b/options/options.js @@ -5,7 +5,6 @@ 'use strict'; setupLivePrefs(); -setupRadioButtons(); enforceInputRange($('#popupWidth')); setTimeout(splitLongTooltips); @@ -113,29 +112,6 @@ function checkUpdates() { } } -function setupRadioButtons() { - const sets = {}; - const onChange = function () { - const newValue = sets[this.name].indexOf(this); - if (newValue >= 0 && prefs.get(this.name) !== newValue) { - prefs.set(this.name, newValue); - } - }; - // group all radio-inputs by name="prefName" attribute - for (const el of $$('input[type="radio"][name]')) { - (sets[el.name] = sets[el.name] || []).push(el); - el.addEventListener('change', onChange); - } - // select the input corresponding to the actual pref value - for (const name in sets) { - sets[name][prefs.get(name)].checked = true; - } - // listen to pref changes and update the values - prefs.subscribe(Object.keys(sets), (key, value) => { - sets[key][value].checked = true; - }); -} - function splitLongTooltips() { for (const el of $$('[title]')) { if (el.title.length < 50) {