alex/yomichan
1
Fork 0
Code Releases Activity

Improve settings transforms (#1187)

Browse Source
This commit is contained in:
toasted-nutbread 2020-12-31 13:10:23 -05:00 committed by GitHub
parent 6c46afedf7
commit 1ac4e979e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 144 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
ext/bg/js/settings/generic-setting-controller.js
View File

@ -31,8 +31,7 @@ class GenericSettingController {
setValues: this._setValues.bind(this) setValues: this._setValues.bind(this)
}); });
this._transforms = new Map([ this._transforms = new Map([
['setDocumentAttribute', this._setDocumentAttribute.bind(this)], ['setAttribute', this._setAttribute.bind(this)],
['setRelativeAttribute', this._setRelativeAttribute.bind(this)],
['setVisibility', this._setVisibility.bind(this)], ['setVisibility', this._setVisibility.bind(this)],
['splitTags', this._splitTags.bind(this)], ['splitTags', this._splitTags.bind(this)],
['joinTags', this._joinTags.bind(this)], ['joinTags', this._joinTags.bind(this)],
@ -57,12 +56,19 @@ class GenericSettingController {
} }
_createElementMetadata(element) { _createElementMetadata(element) {
const {dataset: {setting: path, scope, transform, transformPre, transformPost}} = element; const {dataset: {setting: path, scope, transform: transformRaw}} = element;
let transforms;
if (typeof transformRaw === 'string') {
transforms = JSON.parse(transformRaw);
if (!Array.isArray(transforms)) { transforms = [transforms]; }
} else {
transforms = [];
}
return { return {
path, path,
scope, scope,
transformPre: typeof transformPre === 'string' ? transformPre : transform, transforms,
transformPost: typeof transformPost === 'string' ? transformPost : transform transformRaw
}; };
} }
@ -70,8 +76,7 @@ class GenericSettingController {
return ( return (
metadata1.path === metadata2.path && metadata1.path === metadata2.path &&
metadata1.scope === metadata2.scope && metadata1.scope === metadata2.scope &&
metadata1.transformPre === metadata2.transformPre && metadata1.transformRaw === metadata2.transformRaw
metadata1.transformPost === metadata2.transformPost
); );
} }
@ -91,13 +96,13 @@ class GenericSettingController {
async _setValues(targets) { async _setValues(targets) {
const defaultScope = this._defaultScope; const defaultScope = this._defaultScope;
const settingsTargets = []; const settingsTargets = [];
for (const {metadata, value, element} of targets) { for (const {metadata: {path, scope, transforms}, value, element} of targets) {
const {path, scope, transformPre} = metadata; const transformedValue = this._applyTransforms(value, transforms, 'pre', element);
const target = { const target = {
path, path,
scope: scope || defaultScope, scope: scope || defaultScope,
action: 'set', action: 'set',
value: this._transform(value, transformPre, metadata, element) value: transformedValue
}; };
settingsTargets.push(target); settingsTargets.push(target);
} }
@ -108,64 +113,50 @@ class GenericSettingController {
return values.map((value, i) => { return values.map((value, i) => {
const error = value.error; const error = value.error;
if (error) { return jsonToError(error); } if (error) { return jsonToError(error); }
const {metadata, element} = targets[i]; const {metadata: {transforms}, element} = targets[i];
const result = this._transform(value.result, metadata.transformPost, metadata, element); const result = this._applyTransforms(value.result, transforms, 'post', element);
return {result}; return {result};
}); });
} }
_transform(value, transform, metadata, element) { _applyTransforms(value, transforms, step, element) {
if (typeof transform === 'string') { for (const transform of transforms) {
const transformFunction = this._transforms.get(transform); const transformStep = transform.step;
if (typeof transformFunction !== 'undefined') { if (typeof transformStep !== 'undefined' && transformStep !== step) { continue; }
value = transformFunction(value, metadata, element);
} const transformFunction = this._transforms.get(transform.type);
if (typeof transformFunction === 'undefined') { continue; }
value = transformFunction(value, transform, element);
} }
return value; return value;
} }
_getAncestor(node, ancestorDistance) { _getAncestor(node, ancestorDistance) {
if (typeof ancestorDistance === 'string') { if (ancestorDistance < 0) {
const ii = Number.parseInt(ancestorDistance, 10); return document.documentElement;
if (Number.isFinite(ii)) { }
if (ii < 0) { for (let i = 0; i < ancestorDistance && node !== null; ++i) {
node = document.documentElement;
} else {
for (let i = 0; i < ii && node !== null; ++i) {
node = node.parentNode; node = node.parentNode;
} }
}
}
}
return node; return node;
} }
_getElementRelativeToAncestor(node, ancestorDistance, relativeSelector) { _getRelativeElement(node, ancestorDistance, selector) {
const relativeElement = this._getAncestor(node, ancestorDistance); const selectorRoot = (
if (relativeElement === null) { return null; } typeof ancestorDistance === 'number' ?
this._getAncestor(node, ancestorDistance) :
document
);
if (selectorRoot === null) { return null; }
return ( return (
typeof relativeSelector === 'string' ? typeof selector === 'string' ?
relativeElement.querySelector(relativeSelector) : selectorRoot.querySelector(selector) :
relativeElement (selectorRoot === document ? document.documentElement : selectorRoot)
); );
} }
_getConditionalResult(value, conditionString) {
let op = '!!';
let rhsOperand = null;
try {
if (typeof conditionString === 'string') {
const {op: op2, value: value2} = JSON.parse(conditionString);
op = (typeof op2 === 'string' ? op2 : '===');
rhsOperand = value2;
}
} catch (e) {
// NOP
}
return this._evaluateSimpleOperation(op, value, rhsOperand);
}
_evaluateSimpleOperation(operation, lhs, rhs) { _evaluateSimpleOperation(operation, lhs, rhs) {
switch (operation) { switch (operation) {
case '!': return !lhs; case '!': return !lhs;
@ -182,25 +173,20 @@ class GenericSettingController {
// Transforms // Transforms
_setDocumentAttribute(value, metadata, element) { _setAttribute(value, data, element) {
document.documentElement.setAttribute(element.dataset.documentAttribute, `${value}`); const {ancestorDistance, selector, attribute} = data;
return value; const relativeElement = this._getRelativeElement(element, ancestorDistance, selector);
}
_setRelativeAttribute(value, metadata, element) {
const {ancestorDistance, relativeSelector, relativeAttribute} = element.dataset;
const relativeElement = this._getElementRelativeToAncestor(element, ancestorDistance, relativeSelector);
if (relativeElement !== null) { if (relativeElement !== null) {
relativeElement.setAttribute(relativeAttribute, `${value}`); relativeElement.setAttribute(attribute, `${value}`);
} }
return value; return value;
} }
_setVisibility(value, metadata, element) { _setVisibility(value, data, element) {
const {ancestorDistance, relativeSelector, visbilityCondition} = element.dataset; const {ancestorDistance, selector, condition} = data;
const relativeElement = this._getElementRelativeToAncestor(element, ancestorDistance, relativeSelector); const relativeElement = this._getRelativeElement(element, ancestorDistance, selector);
if (relativeElement !== null) { if (relativeElement !== null) {
relativeElement.hidden = !this._getConditionalResult(value, visbilityCondition); relativeElement.hidden = !this._evaluateSimpleOperation(condition.op, value, condition.value);
} }
return value; return value;
} }
@ -213,8 +199,10 @@ class GenericSettingController {
return value.join(' '); return value.join(' ');
} }
_toNumber(value, metadata, element) { _toNumber(value, data) {
return DOMDataBinder.convertToNumber(value, element.dataset); let {constraints} = data;
if (!isObject(constraints)) { constraints = {}; }
return DOMDataBinder.convertToNumber(value, constraints);
} }
_toString(value) { _toString(value) {

48
ext/bg/settings.html
View File

@ -151,7 +151,13 @@
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label><input type="checkbox" id="show-advanced-options" data-setting="general.showAdvanced" data-transform-pre="setDocumentAttribute" data-transform-post="setDocumentAttribute" data-document-attribute="data-options-general-show-advanced"> Show advanced options</label> <label><input type="checkbox" id="show-advanced-options" data-setting="general.showAdvanced"
data-transform='{
"type": "setAttribute",
"selector": ":root",
"attribute": "data-options-general-show-advanced"
}'
> Show advanced options</label>
</div> </div>
<div class="checkbox options-advanced ignore-form-changes" data-hide-for-browser="firefox-mobile"> <div class="checkbox options-advanced ignore-form-changes" data-hide-for-browser="firefox-mobile">
@ -195,7 +201,13 @@
</div> </div>
<div class="checkbox options-advanced"> <div class="checkbox options-advanced">
<label><input type="checkbox" id="show-debug-info" data-setting="general.debugInfo" data-transform-pre="setDocumentAttribute" data-transform-post="setDocumentAttribute" data-document-attribute="data-options-general-debug-info"> Show debug information</label> <label><input type="checkbox" id="show-debug-info" data-setting="general.debugInfo"
data-transform='{
"type": "setAttribute",
"selector": ":root",
"attribute": "data-options-general-debug-info"
}'
> Show debug information</label>
</div> </div>
<div class="checkbox options-advanced"> <div class="checkbox options-advanced">
@ -204,7 +216,13 @@
<div class="form-group"> <div class="form-group">
<label for="result-output-mode">Result grouping</label> <label for="result-output-mode">Result grouping</label>
<select class="form-control" id="result-output-mode" data-setting="general.resultOutputMode" data-transform-pre="setDocumentAttribute" data-transform-post="setDocumentAttribute" data-document-attribute="data-options-general-result-output-mode"> <select class="form-control" id="result-output-mode" data-setting="general.resultOutputMode"
data-transform='{
"type": "setAttribute",
"selector": ":root",
"attribute": "data-options-general-result-output-mode"
}'
>
<option value="group">Group results by term-reading pairs</option> <option value="group">Group results by term-reading pairs</option>
<option value="merge">Group results by main dictionary entry</option> <option value="merge">Group results by main dictionary entry</option>
<option value="split">Split definitions to their own results</option> <option value="split">Split definitions to their own results</option>
@ -498,10 +516,11 @@
<label class="scan-input-toggle scan-input-type"><input type="checkbox" class="scan-input-settings-checkbox" data-property="types.touch"><span>Touch</span></label> <label class="scan-input-toggle scan-input-type"><input type="checkbox" class="scan-input-settings-checkbox" data-property="types.touch"><span>Touch</span></label>
<label class="scan-input-toggle scan-input-type"><input type="checkbox" class="scan-input-settings-checkbox" data-property="types.pen"><span>Pen</span></label> <label class="scan-input-toggle scan-input-type"><input type="checkbox" class="scan-input-settings-checkbox" data-property="types.pen"><span>Pen</span></label>
<label class="scan-input-toggle scan-input-type"><input type="checkbox" class="scan-input-settings-checkbox" data-property="options.showAdvanced" <label class="scan-input-toggle scan-input-type"><input type="checkbox" class="scan-input-settings-checkbox" data-property="options.showAdvanced"
data-transform-pre="setRelativeAttribute" data-transform='{
data-transform-post="setRelativeAttribute" "type": "setAttribute",
data-ancestor-distance="7" "ancestorDistance": 7,
data-relative-attribute="data-show-advanced" "attribute": "data-show-advanced"
}'
><span>Advanced</span></label> ><span>Advanced</span></label>
</div></div> </div></div>
</div></div> </div></div>
@ -899,7 +918,13 @@
</p> </p>
<div class="checkbox"> <div class="checkbox">
<label><input type="checkbox" id="anki-enable" data-setting="anki.enable" data-transform="setDocumentAttribute" data-document-attribute="data-options-anki-enable"> Enable Anki integration</label> <label><input type="checkbox" id="anki-enable" data-setting="anki.enable"
data-transform='{
"type": "setAttribute",
"selector": ":root",
"attribute": "data-options-anki-enable"
}'
> Enable Anki integration</label>
</div> </div>
<div id="anki-general"> <div id="anki-general">
@ -925,7 +950,12 @@
<div class="form-group"> <div class="form-group">
<label for="card-tags">Card tags <span class="label-light">(comma or space separated)</span></label> <label for="card-tags">Card tags <span class="label-light">(comma or space separated)</span></label>
<input type="text" id="card-tags" class="form-control" data-setting="anki.tags" data-transform-pre="splitTags" data-transform-post="joinTags"> <input type="text" id="card-tags" class="form-control" data-setting="anki.tags"
data-transform='[
{"type": "splitTags", "step": "pre"},
{"type": "joinTags", "step": "post"}
]'
>
</div> </div>
<div class="form-group options-advanced"> <div class="form-group options-advanced">

55
ext/bg/settings2.html
View File

@ -39,7 +39,13 @@
</div> </div>
<div class="sidebar-bottom"> <div class="sidebar-bottom">
<label class="outline-item"><span class="outline-item-left"> <label class="outline-item"><span class="outline-item-left">
<label class="toggle"><input id="advanced-checkbox" type="checkbox" data-setting="general.showAdvanced" data-transform="setDocumentAttribute" data-document-attribute="data-advanced"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> <label class="toggle"><input id="advanced-checkbox" type="checkbox" data-setting="general.showAdvanced"
data-transform='{
"type": "setAttribute",
"selector": ":root",
"attribute": "data-advanced"
}'
><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
</span><span class="outline-item-label">Advanced</span></label> </span><span class="outline-item-label">Advanced</span></label>
<a href="/bg/info.html" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="question-mark"></span></span><span class="outline-item-label">About Yomichan</span></a> <a href="/bg/info.html" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="question-mark"></span></span><span class="outline-item-label">About Yomichan</span></a>
</div> </div>
@ -216,7 +222,13 @@
</div> </div>
</div> </div>
<div class="settings-item-right"> <div class="settings-item-right">
<select data-setting="general.resultOutputMode" data-transform="setVisibility" data-ancestor-distance="-1" data-relative-selector="#main-dictionary-container" data-visbility-condition='{"op":"===","value":"merge"}'> <select data-setting="general.resultOutputMode"
data-transform='{
"type": "setVisibility",
"selector": "#main-dictionary-container",
"condition": {"op": "===", "value": "merge"}
}'
>
<option value="split">No grouping</option> <option value="split">No grouping</option>
<option value="group">Group term-reading pairs</option> <option value="group">Group term-reading pairs</option>
<option value="merge">Group related terms</option> <option value="merge">Group related terms</option>
@ -375,7 +387,13 @@
<div class="settings-item-description">When no text or definitions are found, the popup will automatically hide.</div> <div class="settings-item-description">When no text or definitions are found, the popup will automatically hide.</div>
</div> </div>
<div class="settings-item-right"> <div class="settings-item-right">
<label class="toggle"><input type="checkbox" data-setting="scanning.autoHideResults" data-transform="setVisibility" data-ancestor-distance="-1" data-relative-selector="#auto-hide-search-popup-options" data-visbility-condition='{"op":"===","value":true}'><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> <label class="toggle"><input type="checkbox" data-setting="scanning.autoHideResults"
data-transform='{
"type": "setVisibility",
"selector": "#auto-hide-search-popup-options",
"condition": {"op": "===", "value": true}
}'
><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
</div> </div>
</div> </div>
<div class="settings-item-children settings-item-children-group" id="auto-hide-search-popup-options" hidden> <div class="settings-item-children settings-item-children-group" id="auto-hide-search-popup-options" hidden>
@ -737,7 +755,12 @@
<div class="settings-item-description">Control the scaling factor of the popup.</div> <div class="settings-item-description">Control the scaling factor of the popup.</div>
</div> </div>
<div class="settings-item-right"> <div class="settings-item-right">
<select data-setting="general.popupScalingFactor" data-transform-pre="toNumber" data-transform-post="toString" data-min="0.25"> <select data-setting="general.popupScalingFactor"
data-transform='[
{"type": "toNumber", "step": "pre", "constraints": {"min": 0.25}},
{"type": "toString", "step": "post"}
]'
>
<option value="0.25">25%</option> <option value="0.25">25%</option>
<option value="0.33">33%</option> <option value="0.33">33%</option>
<option value="0.5">50%</option> <option value="0.5">50%</option>
@ -1253,7 +1276,12 @@
<div class="settings-item-description">List of space or comma separated tags to add to the card.</div> <div class="settings-item-description">List of space or comma separated tags to add to the card.</div>
</div> </div>
<div class="settings-item-right"> <div class="settings-item-right">
<input type="text" spellcheck="false" autocomplete="off" data-setting="anki.tags" data-transform-pre="splitTags" data-transform-post="joinTags"> <input type="text" spellcheck="false" autocomplete="off" data-setting="anki.tags"
data-transform='[
{"type": "splitTags", "step": "pre"},
{"type": "joinTags", "step": "post"}
]'
>
</div> </div>
</div></div> </div></div>
<div class="settings-item advanced-only"> <div class="settings-item advanced-only">
@ -1263,7 +1291,13 @@
<div class="settings-item-description">When a card is detected as a duplicate, the add buttons will be disabled.</div> <div class="settings-item-description">When a card is detected as a duplicate, the add buttons will be disabled.</div>
</div> </div>
<div class="settings-item-right"> <div class="settings-item-right">
<label class="toggle"><input type="checkbox" data-setting="anki.checkForDuplicates" data-transform="setVisibility" data-ancestor-distance="-1" data-relative-selector="#anki-card-duplicate-options" data-visbility-condition='{"op":"===","value":true}'><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> <label class="toggle"><input type="checkbox" data-setting="anki.checkForDuplicates"
data-transform='{
"type": "setVisibility",
"selector": "#anki-card-duplicate-options",
"condition": {"op": "===", "value": true}
}'
><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
</div> </div>
</div> </div>
<div class="settings-item-children settings-item-children-group" id="anki-card-duplicate-options" hidden> <div class="settings-item-children settings-item-children-group" id="anki-card-duplicate-options" hidden>
@ -1316,10 +1350,11 @@
<div class="settings-item-group-item"> <div class="settings-item-group-item">
<div class="settings-item-group-item-label">Format</div> <div class="settings-item-group-item-label">Format</div>
<select class="short-width short-height" data-setting="anki.screenshot.format" <select class="short-width short-height" data-setting="anki.screenshot.format"
data-transform="setVisibility" data-transform='{
data-ancestor-distance="-1" "type": "setVisibility",
data-relative-selector="#anki-screenshot-quality" "selector": "#anki-screenshot-quality",
data-visbility-condition='{"op":"===","value":"jpeg"}' "condition": {"op": "===", "value": "jpeg"}
}'
> >
<option value="png">PNG</option> <option value="png">PNG</option>
<option value="jpeg">JPEG</option> <option value="jpeg">JPEG</option>

8
ext/bg/welcome.html
View File

@ -132,7 +132,13 @@
<div class="settings-item-description">When no text or definitions are found, the popup will automatically hide.</div> <div class="settings-item-description">When no text or definitions are found, the popup will automatically hide.</div>
</div> </div>
<div class="settings-item-right"> <div class="settings-item-right">
<label class="toggle"><input type="checkbox" data-setting="scanning.autoHideResults" data-transform="setVisibility" data-ancestor-distance="-1" data-relative-selector="#auto-hide-search-popup-options" data-visbility-condition='{"op":"===","value":true}'><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> <label class="toggle"><input type="checkbox" data-setting="scanning.autoHideResults"
data-transform='{
"type": "setVisibility",
"selector": "#auto-hide-search-popup-options",
"condition": {"op": "===", "value": true}
}'
><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
</div> </div>
</div> </div>
<div class="settings-item-children settings-item-children-group" id="auto-hide-search-popup-options" hidden> <div class="settings-item-children settings-item-children-group" id="auto-hide-search-popup-options" hidden>