Clipboard settings organization (#1319)
* Create clipboard icon * Move clipboard options * Update clipboard options * Update labels * Add info * Update all clipboard settings to request permissions
This commit is contained in:
toasted-nutbread
GitHub
parent
8d292363d4
commit
898498c8a3
@ -15,14 +15,22 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
/* global
|
||||
* ObjectPropertyAccessor
|
||||
*/
|
||||
|
||||
class ClipboardPopupsController {
|
||||
constructor(settingsController) {
|
||||
this._settingsController = settingsController;
|
||||
this._checkbox = document.querySelector('#clipboard-enable-background-monitor');
|
||||
this._toggles = null;
|
||||
}
|
||||
|
||||
async prepare() {
|
||||
this._checkbox.addEventListener('change', this._onEnableBackgroundMonitorChanged.bind(this), false);
|
||||
this._toggles = document.querySelectorAll('.clipboard-toggle');
|
||||
|
||||
for (const toggle of this._toggles) {
|
||||
toggle.addEventListener('change', this._onClipboardToggleChange.bind(this), false);
|
||||
}
|
||||
this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
|
||||
|
||||
const options = await this._settingsController.getOptions();
|
||||
@ -32,10 +40,20 @@ class ClipboardPopupsController {
|
||||
// Private
|
||||
|
||||
_onOptionsChanged({options}) {
|
||||
this._checkbox.checked = options.clipboard.enableBackgroundMonitor;
|
||||
const accessor = new ObjectPropertyAccessor(options);
|
||||
for (const toggle of this._toggles) {
|
||||
const path = ObjectPropertyAccessor.getPathArray(toggle.dataset.clipboardSetting);
|
||||
let value;
|
||||
try {
|
||||
value = accessor.get(path, path.length);
|
||||
} catch (e) {
|
||||
continue;
|
||||
}
|
||||
toggle.checked = !!value;
|
||||
}
|
||||
}
|
||||
|
||||
async _onEnableBackgroundMonitorChanged(e) {
|
||||
async _onClipboardToggleChange(e) {
|
||||
const checkbox = e.currentTarget;
|
||||
let value = checkbox.checked;
|
||||
|
||||
|
||||
@ -162,7 +162,7 @@
|
||||
</div>
|
||||
|
||||
<div class="checkbox options-advanced ignore-form-changes" data-hide-for-browser="firefox-mobile">
|
||||
<label><input type="checkbox" id="clipboard-enable-background-monitor"> Enable native popups when copying Japanese text</label>
|
||||
<label><input type="checkbox" class="clipboard-toggle" data-clipboard-setting="clipboard.enableBackgroundMonitor"> Enable native popups when copying Japanese text</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox options-advanced">
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
<a href="#!sentence-parsing" class="outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="sentence-parsing"></span></span><span class="outline-item-label">Sentence Parsing</span></a>
|
||||
<a href="#!translation" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="translation"></span></span><span class="outline-item-label">Translation</span></a>
|
||||
<a href="#!anki" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="note-card"></span></span><span class="outline-item-label">Anki</span></a>
|
||||
<a href="#!clipboard" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="clipboard"></span></span><span class="outline-item-label">Clipboard</span></a>
|
||||
<a href="#!shortcuts" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="keyboard"></span></span><span class="outline-item-label">Shortcuts</span></a>
|
||||
<a href="#!backup" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="backup"></span></span><span class="outline-item-label">Backup</span></a>
|
||||
<a href="#!security" class="outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="lock"></span></span><span class="outline-item-label">Security</span></a>
|
||||
@ -951,69 +952,6 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<div class="settings-item-inner">
|
||||
<div class="settings-item-left">
|
||||
<div class="settings-item-label">
|
||||
Open a native browser window when copying Japanese text
|
||||
<a class="more-toggle more-only" data-parent-distance="4">(?)</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-item-right">
|
||||
<label class="toggle"><input type="checkbox" id="clipboard-enable-background-monitor"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-item-children more" hidden>
|
||||
<p>
|
||||
When Japanese text is copied to the clipboard, a browser window popup searching for the clipboard
|
||||
text will be opened.
|
||||
This can be useful for using Yomichan to scan text from external applications.
|
||||
</p>
|
||||
<p>
|
||||
This feature requires Yomichan to have clipboard reading permissions, and when this option is enabled,
|
||||
the clipboard will be frequently polled for new text.
|
||||
</p>
|
||||
<p>
|
||||
Alternatively, this feature can be enabled only on the search page, and clipboard contents polling will
|
||||
only be performed when the search page is already open.
|
||||
</p>
|
||||
<p>
|
||||
<a class="more-toggle" data-parent-distance="3">Less…</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
|
||||
<div class="settings-item-left">
|
||||
<div class="settings-item-label">Maximum clipboard text search length</div>
|
||||
<div class="settings-item-description">Limit the number of text characters used when searching clipboard content.</div>
|
||||
</div>
|
||||
<div class="settings-item-right">
|
||||
<input type="number" min="0" step="1" data-setting="clipboard.maximumSearchLength">
|
||||
</div>
|
||||
</div></div>
|
||||
<div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
|
||||
<div class="settings-item-left">
|
||||
<div class="settings-item-label">Clipboard text search mode</div>
|
||||
<div class="settings-item-description">Change how the search page reacts to new text in the clipboard.</div>
|
||||
</div>
|
||||
<div class="settings-item-right">
|
||||
<select data-setting="clipboard.autoSearchContent"
|
||||
data-transform='[
|
||||
{
|
||||
"step": "pre",
|
||||
"type": "toBoolean"
|
||||
},
|
||||
{
|
||||
"step": "post",
|
||||
"type": "toString"
|
||||
}
|
||||
]'
|
||||
>
|
||||
<option value="true">Search for definitions</option>
|
||||
<option value="false">Update search query only</option>
|
||||
</select>
|
||||
</div>
|
||||
</div></div>
|
||||
<div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
|
||||
<div class="settings-item-left">
|
||||
<div class="settings-item-label">Size</div>
|
||||
@ -1605,6 +1543,81 @@
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<!-- Clipboard -->
|
||||
<div>
|
||||
<div class="heading-container">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="clipboard"></span></div>
|
||||
<div class="heading-container-left"><h2 id="clipboard"><a href="#!clipboard">Clipboard</a></h2></div>
|
||||
<div class="heading-container-right"><a class="more-toggle more-only heading-link-light" data-parent-distance="3">Info…</a></div>
|
||||
</div>
|
||||
<div class="heading-description more" hidden>
|
||||
<p>
|
||||
Yomichan can watch the system copy clipboard for Japanese text and automatically search the
|
||||
text on the search page.
|
||||
This can be useful for using Yomichan to scan text from external applications.
|
||||
</p>
|
||||
<p>
|
||||
This feature requires Yomichan to have clipboard reading permissions, and when this option is enabled,
|
||||
the clipboard will be frequently checked for new text.
|
||||
</p>
|
||||
<p>
|
||||
<a class="more-toggle" data-parent-distance="3">Less…</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<div class="settings-item"><div class="settings-item-inner">
|
||||
<div class="settings-item-left">
|
||||
<div class="settings-item-label">Enable background clipboard text monitoring</div>
|
||||
<div class="settings-item-description">Open the search page in a new window when the clipboard contains Japanese text.</div>
|
||||
</div>
|
||||
<div class="settings-item-right">
|
||||
<label class="toggle"><input type="checkbox" class="clipboard-toggle" data-clipboard-setting="clipboard.enableBackgroundMonitor"><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">
|
||||
<div class="settings-item-left">
|
||||
<div class="settings-item-label">Enable search page clipboard text monitoring</div>
|
||||
<div class="settings-item-description">The query on the search page will be automatically updated with text in the clipboard.</div>
|
||||
</div>
|
||||
<div class="settings-item-right">
|
||||
<label class="toggle"><input type="checkbox" class="clipboard-toggle" data-clipboard-setting="clipboard.enableSearchPageMonitor"><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 settings-item-inner-wrappable">
|
||||
<div class="settings-item-left">
|
||||
<div class="settings-item-label">Maximum clipboard text search length</div>
|
||||
<div class="settings-item-description">Limit the number of characters used when searching clipboard text.</div>
|
||||
</div>
|
||||
<div class="settings-item-right">
|
||||
<input type="number" min="0" step="1" data-setting="clipboard.maximumSearchLength">
|
||||
</div>
|
||||
</div></div>
|
||||
<div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
|
||||
<div class="settings-item-left">
|
||||
<div class="settings-item-label">Clipboard text search mode</div>
|
||||
<div class="settings-item-description">Change how the search page reacts to new text in the clipboard.</div>
|
||||
</div>
|
||||
<div class="settings-item-right">
|
||||
<select data-setting="clipboard.autoSearchContent"
|
||||
data-transform='[
|
||||
{
|
||||
"step": "pre",
|
||||
"type": "toBoolean"
|
||||
},
|
||||
{
|
||||
"step": "post",
|
||||
"type": "toString"
|
||||
}
|
||||
]'
|
||||
>
|
||||
<option value="true">Search for definitions</option>
|
||||
<option value="false">Update query only</option>
|
||||
</select>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<!-- Shortcuts -->
|
||||
<div class="heading-container">
|
||||
<div class="heading-container-icon"><span class="icon" data-icon="keyboard"></span></div>
|
||||
|
||||
@ -214,6 +214,7 @@
|
||||
.icon[data-icon=left-chevron] { --icon-image: url(/mixed/img/left-chevron.svg); }
|
||||
.icon[data-icon=right-chevron] { --icon-image: url(/mixed/img/right-chevron.svg); }
|
||||
.icon[data-icon=plus-thick] { --icon-image: url(/mixed/img/plus-thick.svg); }
|
||||
.icon[data-icon=clipboard] { --icon-image: url(/mixed/img/clipboard.svg); }
|
||||
.icon[data-icon=material-down-arrow] {
|
||||
--icon-image: url(/mixed/img/material-down-arrow.svg);
|
||||
--icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1);
|
||||
|
||||
1
ext/mixed/img/clipboard.svg
Normal file
1
ext/mixed/img/clipboard.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 .5c-.41421 0-.75.33579-.75.75 0 .25-.25.25-.75.25-.554 0-1 .446-1 1V3h5v-.5c0-.554-.446-1-1-1-.5 0-.75 0-.75-.25C8.75.83579 8.41421.5 8 .5zM2.5 2v13h11V2h-2.5938c.05663.15724.09375.32437.09375.5V3h1.5v11h-9V3h1.5v-.5c0-.17563.03712-.34276.09375-.5zm2 3v1h7V5zm0 2v1h7V7zm0 2v1h7V9zm0 2v1h5v-1z"/></svg>
|
||||
|
After Width: | Height: | Size: 415 B |
@ -1,6 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
@ -14,7 +12,7 @@
|
||||
inkscape:export-ydpi="192"
|
||||
inkscape:export-xdpi="192"
|
||||
sodipodi:docname="icons.svg"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)"
|
||||
id="svg8"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 16"
|
||||
@ -27,11 +25,11 @@
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="45.254834"
|
||||
inkscape:cx="8.4539164"
|
||||
inkscape:cy="8.0625778"
|
||||
inkscape:zoom="32"
|
||||
inkscape:cx="7.2634756"
|
||||
inkscape:cy="9.0903162"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer49"
|
||||
inkscape:current-layer="layer50"
|
||||
showgrid="true"
|
||||
units="px"
|
||||
inkscape:snap-center="true"
|
||||
@ -48,7 +46,8 @@
|
||||
inkscape:snap-intersection-paths="true"
|
||||
inkscape:object-paths="true"
|
||||
inkscape:snap-others="true"
|
||||
inkscape:snap-nodes="true">
|
||||
inkscape:snap-nodes="true"
|
||||
inkscape:document-rotation="0">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid815"
|
||||
@ -64,6 +63,40 @@
|
||||
</sodipodi:namedview>
|
||||
<defs
|
||||
id="defs2">
|
||||
<inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect1089"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
satellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,1,1,0,0.5,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,1,1,0,0.5,0,1 @ F,0,0,1,0,0,0,1"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
radius="0.5"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="true"
|
||||
hide_knots="false" />
|
||||
<inkscape:path-effect
|
||||
effect="fillet_chamfer"
|
||||
id="path-effect1087"
|
||||
is_visible="false"
|
||||
lpeversion="1"
|
||||
satellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
|
||||
unit="px"
|
||||
method="auto"
|
||||
mode="F"
|
||||
radius="0.5"
|
||||
chamfer_steps="1"
|
||||
flexible="false"
|
||||
use_knot_distance="true"
|
||||
apply_no_radius="true"
|
||||
apply_with_radius="true"
|
||||
only_selected="true"
|
||||
hide_knots="false" />
|
||||
<linearGradient
|
||||
id="linearGradient5225"
|
||||
inkscape:collect="always">
|
||||
@ -1098,7 +1131,7 @@
|
||||
inkscape:groupmode="layer"
|
||||
id="layer34"
|
||||
inkscape:label="Note Card"
|
||||
style="display:none"
|
||||
style="display:none;opacity:1"
|
||||
sodipodi:insensitive="true">
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
@ -1550,10 +1583,22 @@
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer49"
|
||||
inkscape:label="Plus Thick">
|
||||
inkscape:label="Plus Thick"
|
||||
style="display:none">
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
d="M 6 2 L 6 6 L 2 6 L 2 10 L 6 10 L 6 14 L 10 14 L 10 10 L 14 10 L 14 6 L 10 6 L 10 2 L 6 2 z "
|
||||
id="rect1068" />
|
||||
d="M 6,2 V 6 H 2 v 4 h 4 v 4 h 4 v -4 h 4 V 6 H 10 V 2 Z"
|
||||
id="rect1068"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer50"
|
||||
inkscape:label="Clipboard">
|
||||
<path
|
||||
id="rect1074"
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
d="M 8,0.5 C 7.5857864,0.5 7.25,0.83578644 7.25,1.25 7.25,1.5 7,1.5 6.5,1.5 c -0.554,0 -1,0.446 -1,1 V 3 h 5 V 2.5 c 0,-0.554 -0.446,-1 -1,-1 C 9,1.5 8.75,1.5 8.75,1.25 8.75,0.83578644 8.4142136,0.5 8,0.5 Z M 2.5,2 v 13 h 11 V 2 H 10.90625 C 10.962878,2.1572391 11,2.3243683 11,2.5 V 3 h 1.5 v 11 h -9 V 3 H 5 V 2.5 C 5,2.3243683 5.0371223,2.1572391 5.09375,2 Z m 2,3 v 1 h 7 V 5 Z m 0,2 v 1 h 7 V 7 Z m 0,2 v 1 h 7 V 9 Z m 0,2 v 1 h 5 v -1 z"
|
||||
sodipodi:nodetypes="ssssccsssscccccsccccccscccccccccccccccccccccc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 96 KiB |
Loading…
Reference in New Issue
Block a user