diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2020-12-31 13:38:51 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-12-31 13:38:51 -0500 |
| commit | 1b4ba1fb006a6e6dda7f19c797b204c43900df4a (patch) | |
| tree | cd1529f5c2b448ef2d2f9673b20435c94b91f44a | |
| parent | 1ac4e979e49cf65fbda1ad8f9a92b22b5b22bccf (diff) | |
Simplify glossary layout setting (#1188)
* Add conditionalConvert transform
* Convert glossaryLayoutMode option to a toggle
| -rw-r--r-- | ext/bg/js/settings/generic-setting-controller.js | 18 | ||||
| -rw-r--r-- | ext/bg/settings2.html | 32 |
2 files changed, 42 insertions, 8 deletions
diff --git a/ext/bg/js/settings/generic-setting-controller.js b/ext/bg/js/settings/generic-setting-controller.js index 04cad67d..b669cab9 100644 --- a/ext/bg/js/settings/generic-setting-controller.js +++ b/ext/bg/js/settings/generic-setting-controller.js @@ -36,7 +36,8 @@ class GenericSettingController { ['splitTags', this._splitTags.bind(this)], ['joinTags', this._joinTags.bind(this)], ['toNumber', this._toNumber.bind(this)], - ['toString', this._toString.bind(this)] + ['toString', this._toString.bind(this)], + ['conditionalConvert', this._conditionalConvert.bind(this)] ]); } @@ -208,4 +209,19 @@ class GenericSettingController { _toString(value) { return `${value}`; } + + _conditionalConvert(value, data) { + const {cases} = data; + if (Array.isArray(cases)) { + for (const {op, value: value2, default: isDefault, result} of cases) { + if (isDefault === true) { + value = result; + } else if (this._evaluateSimpleOperation(op, value, value2)) { + value = result; + break; + } + } + } + return value; + } } diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html index be6e01e1..07bcb6ca 100644 --- a/ext/bg/settings2.html +++ b/ext/bg/settings2.html @@ -611,16 +611,34 @@ </div> </div> </div> - <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable"> + <div class="settings-item"><div class="settings-item-inner"> <div class="settings-item-left"> - <div class="settings-item-label">Glossary layout</div> - <div class="settings-item-description">Configure how term glossaries are displayed.</div> + <div class="settings-item-label">Compact glossaries</div> + <div class="settings-item-description">Display term glossaries using a more compact layout.</div> </div> <div class="settings-item-right"> - <select data-setting="general.glossaryLayoutMode"> - <option value="default">Default</option> - <option value="compact">Compact</option> - </select> + <label class="toggle"><input type="checkbox" data-setting="general.glossaryLayoutMode" + data-transform='[ + { + "step": "pre", + "type": "conditionalConvert", + "cases": [ + {"op": "===", "value": false, "result": "default"}, + {"op": "===", "value": true, "result": "compact"}, + {"default": true, "result": "default"} + ] + }, + { + "step": "post", + "type": "conditionalConvert", + "cases": [ + {"op": "===", "value": "default", "result": false}, + {"op": "===", "value": "compact", "result": true}, + {"default": true, "result": false} + ] + } + ]' + ><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> </div> </div></div> <div class="settings-item"><div class="settings-item-inner"> |