add per-style setting for autoupdate checks

This commit is contained in:
tophf 2022-01-19 22:21:54 +03:00
parent f041f2265a
commit ce9e74e2a0
4 changed files with 71 additions and 43 deletions

View File

@ -63,7 +63,7 @@ const updateMan = (() => {
checkingAll = true;
const port = observe && chrome.runtime.connect({name: 'updater'});
const styles = (await API.styles.getAll())
.filter(style => style.updateUrl);
.filter(style => style.updateUrl && style.updatable !== false);
if (port) port.postMessage({count: styles.length});
log('');
log(`${save ? 'Scheduled' : 'Manual'} update check for ${styles.length} styles`);

View File

@ -23,10 +23,13 @@
.style-settings input[type=radio] {
margin-left: -.5em; /* compensate for label's 16px margin in edit.css */
}
.style-settings input[type=text],
.style-settings input[type=number],
.style-settings select,
.style-settings textarea {
.style-settings input:disabled ~ label {
opacity: .5;
}
.style-settings .rel {
position: relative;
}
.style-settings .w100 {
display: block;
width: 100%;
margin-top: .25em;

View File

@ -1,8 +1,11 @@
<div>
<fieldset class="style-settings can-close-on-esc">
<label i18n-text="styleUpdateUrlLabel">
<input id="ss-update-url" type="text">
</label>
<div class="rel">
<input id="ss-updatable" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<label i18n-text="installUpdateFromLabel" for="ss-updatable"></label>
<input id="ss-update-url" type="url" class="w100" i18n-placeholder="styleUpdateUrlLabel">
</div>
<div id="ss-scheme">
<div i18n-text="installPreferSchemeLabel"></div>
<label i18n-text-append="installPreferSchemeNone">
@ -16,11 +19,11 @@
</label>
</div>
<label i18n-text="styleIncludeLabel">
<textarea id="ss-inclusions" spellcheck="false"
<textarea id="ss-inclusions" spellcheck="false" class="w100"
placeholder="*://site1.com/*&#10;*://site2.com/*"></textarea>
</label>
<label i18n-text="styleExcludeLabel">
<textarea id="ss-exclusions" spellcheck="false"
<textarea id="ss-exclusions" spellcheck="false" class="w100"
placeholder="*://site1.com/*&#10;*://site2.com/*"></textarea>
</label>
</fieldset>

View File

@ -1,26 +1,32 @@
/* global $ $$ moveFocus setupLivePrefs */// dom.js
/* global $ moveFocus setupLivePrefs */// dom.js
/* global API */// msg.js
/* global editor */
/* global helpPopup */// util.js
/* global t */// localization.js
/* global debounce */// toolbox.js
/* global debounce tryURL */// toolbox.js
/* exported StyleSettings */
'use strict';
async function StyleSettings() {
const AUTOSAVE_DELAY = 500; // same as config-dialog.js
const SS_ID = 'styleSettings';
const PASS = val => val;
await t.fetchTemplate('/edit/settings.html', SS_ID);
const {style} = editor;
const ui = t.template[SS_ID].cloneNode(true);
const elAuto = $('#config\\.autosave', ui);
const elSave = $('#ss-save', ui);
const elUpd = $('#ss-updatable', ui);
const pendingSetters = new Map();
const updaters = [
initInput('#ss-update-url', () => style.updateUrl || '',
val => API.styles.config(style.id, 'updateUrl', val)),
initRadio('ss-scheme', () => style.preferScheme || 'none',
val => API.styles.config(style.id, 'preferScheme', val)),
initCheckbox(elUpd, 'updatable', tryURL(style.updateUrl).href),
initInput('#ss-update-url', 'updateUrl', '', {
validate(el) {
elUpd.disabled = !el.value || !el.validity.valid;
return el.validity.valid;
},
}),
initRadio('ss-scheme', 'preferScheme', 'none'),
initArea('inclusions'),
initArea('exclusions'),
];
@ -43,51 +49,67 @@ async function StyleSettings() {
}
function initArea(type) {
const selector = `#ss-${type}`;
const el = $(selector, ui);
el.oninput = () => {
const val = el.value;
el.rows = val.match(/^/gm).length + !val.endsWith('\n');
};
return initInput(selector,
() => {
const list = style[type] || [];
const text = list.join('\n');
el.rows = (list.length || 1) + 1;
return text;
return initInput(`#ss-${type}`, type, [], {
get: textToList,
set: list => list.join('\n'),
validate(el) {
const val = el.value;
el.rows = val.match(/^/gm).length + !val.endsWith('\n');
},
val => API.styles.config(style.id, type, textToList(val))
);
});
}
function initInput(selector, getter, setter) {
const el = $(selector, ui);
el.oninput = () => autosave(el, setter);
function initCheckbox(el, key, defVal) {
return initInput(el, key, Boolean(defVal), {dom: 'checked'});
}
function initInput(el, key, defVal, {
dom = 'value', // DOM property name
get = PASS, // transformer function(val) after getting DOM value
set = PASS, // transformer function(val) before setting DOM value
validate = PASS, // function(el) - return `false` to prevent saving
} = {}) {
if (typeof el === 'string') {
el = $(el, ui);
}
el.oninput = () => {
if (validate(el) !== false) {
autosave(el, {dom, get, key});
}
};
return () => {
const val = getter();
let val = style[key];
val = set(val != null ? val : defVal);
// Skipping if unchanged to preserve the Undo history of the input
if (el.value !== val) el.value = val;
if (el[dom] !== val) el[dom] = val;
validate(el);
};
}
function initRadio(name, getter, setter) {
for (const el of $$(`[name="${name}"]`, ui)) {
el.onchange = () => {
if (el.checked) autosave(el, setter);
};
}
function initRadio(name, key, defVal) {
$(`#${name}`, ui).oninput = e => {
if (e.target.checked) {
autosave(e.target, {key});
}
};
return () => {
$(`[name="${name}"][value="${getter()}"]`, ui).checked = true;
const val = style[key] || defVal;
const el = $(`[name="${name}"][value="${val}"]`, ui);
el.checked = true;
};
}
function save() {
pendingSetters.forEach((fn, el) => fn(el.value));
pendingSetters.forEach(saveValue);
pendingSetters.clear();
helpPopup.div.classList.remove('dirty');
elSave.disabled = true;
}
function saveValue({dom = 'value', get = PASS, key}, el) {
return API.styles.config(style.id, key, get(el[dom]));
}
function textToList(text) {
return text.split(/\n/).map(s => s.trim()).filter(Boolean);
}