diff options
-rw-r--r-- | ext/bg/css/settings.css | 39 | ||||
-rw-r--r-- | ext/bg/data/options-schema.json | 30 | ||||
-rw-r--r-- | ext/bg/js/options.js | 15 | ||||
-rw-r--r-- | ext/bg/js/settings/generic-setting-controller.js | 27 | ||||
-rw-r--r-- | ext/bg/js/settings/scan-inputs-controller.js | 14 | ||||
-rw-r--r-- | ext/bg/settings.html | 21 |
6 files changed, 123 insertions, 23 deletions
diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css index a66a0455..17bb4ac0 100644 --- a/ext/bg/css/settings.css +++ b/ext/bg/css/settings.css @@ -138,9 +138,6 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group width: 100%; margin-bottom: 8px; } -.scan-input-index-cell { - grid-area: 1/1/4/1; -} .scan-input-index { height: 100%; width: 40px; @@ -185,6 +182,9 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group .scan-input-prefix-cell[data-property=types] { grid-area: 3/2/3/2; } +.scan-input-prefix-cell[data-property=options] { + grid-area: 4/2/4/2; +} .scan-input-content-cell[data-property=include] { grid-area: 1/3/1/3; } @@ -194,9 +194,15 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group .scan-input-content-cell[data-property=types] { grid-area: 3/3/3/3; } +.scan-input-content-cell[data-property=options] { + grid-area: 4/3/4/3; +} .scan-input-suffix-cell { grid-area: 1/4/1/4; } +.scan-input-index-cell { + grid-area: 1/1/5/1; +} .scan-input-suffix-cell>button { height: 100%; } @@ -221,24 +227,33 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group padding-top: 5px; padding-bottom: 5px; } +.scan-input-toggle { + font-weight: normal; + margin: 0; +} +.scan-input-toggle>input[type=checkbox] { + margin: 0 0.375em 0 0; + padding: 0; + vertical-align: middle; +} +.scan-input-toggle>span { + vertical-align: middle; +} .scan-input-type-list { display: flex; flex-flow: row wrap; margin-left: -1em; } .scan-input-type { - font-weight: normal; - margin: 0; - white-space: nowrap; margin-left: 1em; + white-space: nowrap; } -.scan-input-type>input[type=checkbox] { - margin: 0 0.375em 0 0; - padding: 0; - vertical-align: middle; +.scan-input:not([data-show-advanced=true]) .scan-input-prefix-cell[data-property=options], +.scan-input:not([data-show-advanced=true]) .scan-input-content-cell[data-property=options] { + display: none; } -.scan-input-type>span { - vertical-align: middle; +.scan-input[data-show-advanced=true] .scan-input-content-cell[data-property=types] .scan-input-input-cell-inner>.scan-input-type-list-container { + border-bottom-right-radius: 0; } .generic-input-list { diff --git a/ext/bg/data/options-schema.json b/ext/bg/data/options-schema.json index e9677e95..9cc8837d 100644 --- a/ext/bg/data/options-schema.json +++ b/ext/bg/data/options-schema.json @@ -362,7 +362,8 @@ "required": [ "include", "exclude", - "types" + "types", + "options" ], "properties": { "include": { @@ -394,6 +395,33 @@ "default": true } } + }, + "options": { + "type": "object", + "required": [ + "showAdvanced", + "scanOnPenHover", + "scanOnPenPress", + "scanOnPenRelease" + ], + "properties": { + "showAdvanced": { + "type": "boolean", + "default": false + }, + "scanOnPenHover": { + "type": "boolean", + "default": true + }, + "scanOnPenPress": { + "type": "boolean", + "default": true + }, + "scanOnPenRelease": { + "type": "boolean", + "default": false + } + } } } } diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js index d3220194..3470da58 100644 --- a/ext/bg/js/options.js +++ b/ext/bg/js/options.js @@ -517,6 +517,12 @@ class OptionsUtil { } } } + const createInputDefaultOptions = () => ({ + showAdvanced: false, + scanOnPenHover: true, + scanOnPenPress: true, + scanOnPenRelease: false + }); for (const {options: profileOptions} of options.profiles) { profileOptions.general.usePopupWindow = false; profileOptions.scanning.hideDelay = 0; @@ -538,20 +544,23 @@ class OptionsUtil { scanningInputs.push({ include: modifierInput, exclude: '', - types: {mouse: true, touch: false, pen: false} + types: {mouse: true, touch: false, pen: false}, + options: createInputDefaultOptions() }); if (middleMouse) { scanningInputs.push({ include: 'mouse2', exclude: '', - types: {mouse: true, touch: false, pen: false} + types: {mouse: true, touch: false, pen: false}, + options: createInputDefaultOptions() }); } if (touchInputEnabled) { scanningInputs.push({ include: '', exclude: '', - types: {mouse: false, touch: true, pen: true} + types: {mouse: false, touch: true, pen: true}, + options: createInputDefaultOptions() }); } profileOptions.scanning.inputs = scanningInputs; diff --git a/ext/bg/js/settings/generic-setting-controller.js b/ext/bg/js/settings/generic-setting-controller.js index bdea8e3d..de218816 100644 --- a/ext/bg/js/settings/generic-setting-controller.js +++ b/ext/bg/js/settings/generic-setting-controller.js @@ -32,6 +32,7 @@ class GenericSettingController { }); this._transforms = new Map([ ['setDocumentAttribute', this._setDocumentAttribute.bind(this)], + ['setRelativeAttribute', this._setRelativeAttribute.bind(this)], ['splitTags', this._splitTags.bind(this)], ['joinTags', this._joinTags.bind(this)] ]); @@ -122,6 +123,20 @@ class GenericSettingController { return value; } + _setRelativeAttribute(value, metadata, element) { + const {ancestorDistance, relativeSelector, relativeAttribute} = element.dataset; + let relativeElement = this._getAncestor(element, ancestorDistance); + if (relativeElement !== null) { + if (typeof relativeSelector === 'string') { + relativeElement = relativeElement.querySelector(relativeSelector); + } + if (relativeElement !== null) { + relativeElement.setAttribute(relativeAttribute, `${value}`); + } + } + return value; + } + _splitTags(value) { return `${value}`.split(/[,; ]+/).filter((v) => !!v); } @@ -129,4 +144,16 @@ class GenericSettingController { _joinTags(value) { return value.join(' '); } + + _getAncestor(node, ancestorDistance) { + if (typeof ancestorDistance === 'string') { + const ii = Number.parseInt(ancestorDistance, 10); + if (Number.isFinite(ii)) { + for (let i = 0; i < ii && node !== null; ++i) { + node = node.parentNode; + } + } + } + return node; + } } diff --git a/ext/bg/js/settings/scan-inputs-controller.js b/ext/bg/js/settings/scan-inputs-controller.js index 5895ccea..09decaf3 100644 --- a/ext/bg/js/settings/scan-inputs-controller.js +++ b/ext/bg/js/settings/scan-inputs-controller.js @@ -96,7 +96,13 @@ class ScanInputsController { items: [{ include, exclude, - types: {mouse: true, touch: false, pen: false} + types: {mouse: true, touch: false, pen: false}, + options: { + showAdvanced: false, + scanOnPenHover: true, + scanOnPenPress: true, + scanOnPenRelease: false + } }] }]); } @@ -148,9 +154,9 @@ class ScanInputField { this._eventListeners.on(this._excludeInputField, 'change', this._onExcludeValueChange.bind(this)); this._eventListeners.addEventListener(removeButton, 'click', this._onRemoveClick.bind(this)); - for (const typeCheckbox of node.querySelectorAll('.scan-input-type-checkbox')) { + for (const typeCheckbox of node.querySelectorAll('.scan-input-settings-checkbox')) { const {property} = typeCheckbox.dataset; - typeCheckbox.dataset.setting = `scanning.inputs[${this._index}].types.${property}`; + typeCheckbox.dataset.setting = `scanning.inputs[${this._index}].${property}`; } } @@ -188,7 +194,7 @@ class ScanInputField { _isPointerTypeSupported(pointerType) { if (this._node === null) { return false; } - const node = this._node.querySelector(`input.scan-input-type-checkbox[data-type=${pointerType}]`); + const node = this._node.querySelector(`input.scan-input-settings-checkbox[data-property="types.${pointerType}"]`); return node !== null && node.checked; } } diff --git a/ext/bg/settings.html b/ext/bg/settings.html index e934a92c..cc6f93e0 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -453,9 +453,24 @@ <div class="scan-input-prefix-cell" data-property="types"><div class="scan-input-prefix">Types</div></div> <div class="scan-input-content-cell" data-property="types"><div class="scan-input-input-cell-inner"> <div class="scan-input-type-list-container form-control"><div class="scan-input-type-list"> - <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-property="mouse"><span>Mouse</span></label> - <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-property="touch"><span>Touch</span></label> - <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-property="pen"><span>Pen</span></label> + <label class="scan-input-toggle scan-input-type"><input type="checkbox" class="scan-input-settings-checkbox" data-property="types.mouse"><span>Mouse</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="options.showAdvanced" + data-transform-pre="setRelativeAttribute" + data-transform-post="setRelativeAttribute" + data-ancestor-distance="7" + data-relative-attribute="data-show-advanced" + ><span>Advanced</span></label> + </div></div> + </div></div> + + <div class="scan-input-prefix-cell" data-property="options"><div class="scan-input-prefix">Options</div></div> + <div class="scan-input-content-cell" data-property="options"><div class="scan-input-input-cell-inner"> + <div class="scan-input-type-list-container form-control"><div> + <div><label class="scan-input-toggle"><input type="checkbox" class="scan-input-settings-checkbox" data-property="options.scanOnPenHover"><span>Scan on pen hover</span></label></div> + <div><label class="scan-input-toggle"><input type="checkbox" class="scan-input-settings-checkbox" data-property="options.scanOnPenPress"><span>Scan on pen press</span></label></div> + <div><label class="scan-input-toggle"><input type="checkbox" class="scan-input-settings-checkbox" data-property="options.scanOnPenRelease"><span>Scan on pen release</span></label></div> </div></div> </div></div> </div> |