More scanning options (#815)
* Reorganize options * Add advanced options * Add a setting transform 'setRelativeAttribute' * Add advanced options to HTML/CSS
This commit is contained in:
toasted-nutbread
GitHub
parent
41db9ec89b
commit
c98aa9ad47
@ -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 {
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user