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

Fix: valueAsNumber doesn't work for all inputs

Browse Source
This commit is contained in:
eight04 2021-10-20 21:18:37 +08:00
parent d0b83573bf
commit 1e575985e3
2 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
js/dom.js
View File

@ -299,7 +299,6 @@ function setupLivePrefs(ids = prefs.knownKeys.filter(id => $(`#${CSS.escape(id)}
for (const id of ids) { for (const id of ids) {
const elements = $$(`#${CSS.escape(id)}, [name=${CSS.escape(id)}]`); const elements = $$(`#${CSS.escape(id)}, [name=${CSS.escape(id)}]`);
for (const element of elements) { for (const element of elements) {
updateElement({id, elements: [element], force: true});
element.addEventListener('change', onChange); element.addEventListener('change', onChange);
} }
} }
@ -311,33 +310,45 @@ function setupLivePrefs(ids = prefs.knownKeys.filter(id => $(`#${CSS.escape(id)}
if (this.type === 'radio' && !this.checked) { if (this.type === 'radio' && !this.checked) {
return; return;
} }
prefs.set(this.id || this.name, this[getPropName(this)]); prefs.set(this.id || this.name, getValue(this));
} }
function getPropName(el) { function getValue(el) {
const type = el.dataset.valueType || el.type; const type = el.dataset.valueType || el.type;
return type === 'checkbox' ? 'checked' return type === 'checkbox' ? el.checked :
: type === 'number' ? 'valueAsNumber' : // https://stackoverflow.com/questions/18062069/why-does-valueasnumber-return-nan-as-a-value
'value'; // valueAsNumber is not applicable for input[text/radio] or select
type === 'number' ? Number(el.value) :
el.value;
} }
function isSame(el, propName, value) { function isSame(el, oldValue, value) {
return el[propName] === value || return oldValue === value ||
typeof value === 'boolean' && typeof value === 'boolean' &&
el.tagName === 'SELECT' && el.tagName === 'SELECT' &&
el[propName] === `${value}`; oldValue === `${value}` ||
el.type === 'radio' && (oldValue === value) === el.checked;
} }
function updateElement(id, value) { function updateElement(id, value) {
const el = $('#' + id); const els = $$(`#${CSS.escape(id)}, [name=${CSS.escape(id)}]`);
if (el) { if (!els.length) {
const prop = getPropName(el); // FIXME: why do we unsub all ids when a single id is missing from the page
if (!isSame(el, prop, value) || forceUpdate) { prefs.unsubscribe(ids, updateElement);
el[prop] = value; return;
}
for (const el of els) {
const oldValue = getValue(el);
if (!isSame(el, oldValue, value) || forceUpdate) {
if (el.type === 'radio') {
el.checked = value === oldValue;
} else if (el.type === 'checkbox') {
el.checked = value;
} else {
el.value = value;
}
el.dispatchEvent(new Event('change', {bubbles: true})); el.dispatchEvent(new Event('change', {bubbles: true}));
} }
} else {
prefs.unsubscribe(ids, updateElement);
} }
} }
} }

2
options.html
View File

@ -61,7 +61,7 @@
<label> <label>
<span i18n-text="optionsIconLight"></span> <span i18n-text="optionsIconLight"></span>
<div class="iconset"> <div class="iconset">
<input type="radio" name="iconset" value="0" data-value-type="number"> <input type="radio" name="iconset" value="1" data-value-type="number">
<img src="/images/icon/light/16.png"> <img src="/images/icon/light/16.png">
<img src="/images/icon/light/16w.png"> <img src="/images/icon/light/16w.png">
<img src="/images/icon/light/16x.png"> <img src="/images/icon/light/16x.png">