Change: move setupLivePrefs to dom.js. Remove prefs.js dependencies
This commit is contained in:
parent
dd2b8ed091
commit
10f9449144
52
js/dom.js
52
js/dom.js
|
@ -392,3 +392,55 @@ function moveFocus(rootElement, step) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Accepts an array of pref names (values are fetched via prefs.get)
|
||||||
|
// and establishes a two-way connection between the document elements and the actual prefs
|
||||||
|
function setupLivePrefs(
|
||||||
|
IDs = Object.getOwnPropertyNames(prefs.defaults)
|
||||||
|
.filter(id => $('#' + id))
|
||||||
|
) {
|
||||||
|
for (const id of IDs) {
|
||||||
|
const element = $('#' + id);
|
||||||
|
updateElement({id, element, force: true});
|
||||||
|
element.addEventListener('change', onChange);
|
||||||
|
}
|
||||||
|
prefs.subscribe(IDs, (id, value) => updateElement({id, value}));
|
||||||
|
|
||||||
|
function onChange() {
|
||||||
|
const value = getInputValue(this);
|
||||||
|
if (prefs.get(this.id) !== value) {
|
||||||
|
prefs.set(this.id, value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function updateElement({
|
||||||
|
id,
|
||||||
|
value = prefs.get(id),
|
||||||
|
element = $('#' + id),
|
||||||
|
force,
|
||||||
|
}) {
|
||||||
|
if (!element) {
|
||||||
|
prefs.unsubscribe(IDs, updateElement);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setInputValue(element, value, force);
|
||||||
|
}
|
||||||
|
function getInputValue(input) {
|
||||||
|
if (input.type === 'checkbox') {
|
||||||
|
return input.checked;
|
||||||
|
}
|
||||||
|
if (input.type === 'number') {
|
||||||
|
return Number(input.value);
|
||||||
|
}
|
||||||
|
return input.value;
|
||||||
|
}
|
||||||
|
function setInputValue(input, value, force = false) {
|
||||||
|
if (force || getInputValue(input) !== value) {
|
||||||
|
if (input.type === 'checkbox') {
|
||||||
|
input.checked = value;
|
||||||
|
} else {
|
||||||
|
input.value = value;
|
||||||
|
}
|
||||||
|
input.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
76
js/prefs.js
76
js/prefs.js
|
@ -113,6 +113,8 @@ var prefs = (() => {
|
||||||
initializing.then(() => setAll(changes.settings.newValue, true));
|
initializing.then(() => setAll(changes.settings.newValue, true));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let timer;
|
||||||
|
|
||||||
// coalesce multiple pref changes in broadcast
|
// coalesce multiple pref changes in broadcast
|
||||||
// let changes = {};
|
// let changes = {};
|
||||||
|
|
||||||
|
@ -217,11 +219,10 @@ var prefs = (() => {
|
||||||
}
|
}
|
||||||
values[key] = value;
|
values[key] = value;
|
||||||
emitChange(key, value);
|
emitChange(key, value);
|
||||||
if (synced) {
|
if (synced || timer) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// changes[key] = value;
|
timer = setTimeout(syncPrefs);
|
||||||
debounce(syncPrefs);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function emitChange(key, value) {
|
function emitChange(key, value) {
|
||||||
|
@ -241,6 +242,7 @@ var prefs = (() => {
|
||||||
function syncPrefs() {
|
function syncPrefs() {
|
||||||
// FIXME: we always set the entire object? Ideally, this should only use `changes`.
|
// FIXME: we always set the entire object? Ideally, this should only use `changes`.
|
||||||
chrome.storage.sync.set({settings: values});
|
chrome.storage.sync.set({settings: values});
|
||||||
|
timer = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function equal(a, b) {
|
function equal(a, b) {
|
||||||
|
@ -263,7 +265,7 @@ var prefs = (() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
function contextDeleteMissing() {
|
function contextDeleteMissing() {
|
||||||
return CHROME && (
|
return /Chrome\/\d+/.test(navigator.userAgent) && (
|
||||||
// detect browsers without Delete by looking at the end of UA string
|
// detect browsers without Delete by looking at the end of UA string
|
||||||
/Vivaldi\/[\d.]+$/.test(navigator.userAgent) ||
|
/Vivaldi\/[\d.]+$/.test(navigator.userAgent) ||
|
||||||
// Chrome and co.
|
// Chrome and co.
|
||||||
|
@ -272,57 +274,17 @@ var prefs = (() => {
|
||||||
!Array.from(navigator.plugins).some(p => p.name === 'Shockwave Flash')
|
!Array.from(navigator.plugins).some(p => p.name === 'Shockwave Flash')
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function deepCopy(obj) {
|
||||||
|
if (!obj || typeof obj !== 'object') {
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
if (Array.isArray(obj)) {
|
||||||
|
return obj.map(deepCopy);
|
||||||
|
}
|
||||||
|
return Object.keys(obj).reduce((output, key) => {
|
||||||
|
output[key] = deepCopy(obj[key]);
|
||||||
|
return output;
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
|
||||||
// Accepts an array of pref names (values are fetched via prefs.get)
|
|
||||||
// and establishes a two-way connection between the document elements and the actual prefs
|
|
||||||
function setupLivePrefs(
|
|
||||||
IDs = Object.getOwnPropertyNames(prefs.defaults)
|
|
||||||
.filter(id => $('#' + id))
|
|
||||||
) {
|
|
||||||
for (const id of IDs) {
|
|
||||||
const element = $('#' + id);
|
|
||||||
updateElement({id, element, force: true});
|
|
||||||
element.addEventListener('change', onChange);
|
|
||||||
}
|
|
||||||
prefs.subscribe(IDs, (id, value) => updateElement({id, value}));
|
|
||||||
|
|
||||||
function onChange() {
|
|
||||||
const value = getInputValue(this);
|
|
||||||
if (prefs.get(this.id) !== value) {
|
|
||||||
prefs.set(this.id, value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function updateElement({
|
|
||||||
id,
|
|
||||||
value = prefs.get(id),
|
|
||||||
element = $('#' + id),
|
|
||||||
force,
|
|
||||||
}) {
|
|
||||||
if (!element) {
|
|
||||||
prefs.unsubscribe(IDs, updateElement);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setInputValue(element, value, force);
|
|
||||||
}
|
|
||||||
function getInputValue(input) {
|
|
||||||
if (input.type === 'checkbox') {
|
|
||||||
return input.checked;
|
|
||||||
}
|
|
||||||
if (input.type === 'number') {
|
|
||||||
return Number(input.value);
|
|
||||||
}
|
|
||||||
return input.value;
|
|
||||||
}
|
|
||||||
function setInputValue(input, value, force = false) {
|
|
||||||
if (force || getInputValue(input) !== value) {
|
|
||||||
if (input.type === 'checkbox') {
|
|
||||||
input.checked = value;
|
|
||||||
} else {
|
|
||||||
input.value = value;
|
|
||||||
}
|
|
||||||
input.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user