Popup action search (#1678)

* Set up search page in the action popup

* Fix a style causing incorrect overflow

* Fix error when trying to take a screenshot

* Fix popup size on Firefox
This commit is contained in:
toasted-nutbread 2021-05-15 16:30:33 -04:00 committed by GitHub
parent bc6fb4e7d7
commit 2c752fd89d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 84 additions and 7 deletions

View File

@ -130,7 +130,7 @@ h1 {
.search-options { .search-options {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
margin: 0.5em -1em; margin: 0.5em calc(-1 * var(--main-content-horizontal-padding));
align-items: center; align-items: center;
} }
.search-option { .search-option {
@ -167,4 +167,12 @@ h1 {
#intro>p { #intro>p {
margin: 0; margin: 0;
} }
:root[data-search-mode=action-popup] #intro,
:root[data-search-mode=action-popup] #search-option-clipboard-monitor-container {
display: none;
}
:root[data-search-mode=action-popup],
:root[data-search-mode=action-popup] body {
width: 640px;
height: 480px;
}

View File

@ -1571,7 +1571,11 @@ class Display extends EventDispatcher {
audioDetails = {sources: sources2, preferredAudioIndex, customSourceUrl, customSourceType}; audioDetails = {sources: sources2, preferredAudioIndex, customSourceUrl, customSourceType};
} }
const screenshotDetails = (AnkiUtil.fieldsObjectContainsMarker(fields, 'screenshot') ? {tabId: this._contentOriginTabId, frameId: this._contentOriginFrameId, format, quality} : null); const screenshotDetails = (
AnkiUtil.fieldsObjectContainsMarker(fields, 'screenshot') && typeof this._contentOriginTabId === 'number' ?
{tabId: this._contentOriginTabId, frameId: this._contentOriginFrameId, format, quality} :
null
);
const clipboardDetails = { const clipboardDetails = {
image: AnkiUtil.fieldsObjectContainsMarker(fields, 'clipboard-image'), image: AnkiUtil.fieldsObjectContainsMarker(fields, 'clipboard-image'),

View File

@ -0,0 +1,35 @@
/*
* Copyright (C) 2021 Yomichan Authors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
class SearchActionPopupController {
constructor(searchPersistentStateController) {
this._searchPersistentStateController = searchPersistentStateController;
}
prepare() {
const searchParams = new URLSearchParams(location.search);
if (searchParams.get('action-popup') !== 'true') { return; }
searchParams.delete('action-popup');
let search = searchParams.toString();
if (search.length > 0) { search = `?${search}`; }
const url = `${location.protocol}//${location.host}${location.pathname}${search}${location.hash}`;
history.replaceState(history.state, '', url);
this._searchPersistentStateController.mode = 'action-popup';
}
}

View File

@ -84,6 +84,10 @@ class SearchDisplayController {
this._onDisplayOptionsUpdated({options: this._display.getOptions()}); this._onDisplayOptionsUpdated({options: this._display.getOptions()});
} }
setMode(mode) {
this._setMode(mode, true);
}
// Actions // Actions
_onActionFocusSearchBox() { _onActionFocusSearchBox() {
@ -329,13 +333,23 @@ class SearchDisplayController {
_updateClipboardMonitorEnabled() { _updateClipboardMonitorEnabled() {
const enabled = this._clipboardMonitorEnabled; const enabled = this._clipboardMonitorEnabled;
this._clipboardMonitorEnableCheckbox.checked = enabled; this._clipboardMonitorEnableCheckbox.checked = enabled;
if (enabled && this._searchPersistentStateController.mode !== 'popup') { if (enabled && this._canEnableClipboardMonitor()) {
this._clipboardMonitor.start(); this._clipboardMonitor.start();
} else { } else {
this._clipboardMonitor.stop(); this._clipboardMonitor.stop();
} }
} }
_canEnableClipboardMonitor() {
switch (this._searchPersistentStateController.mode) {
case 'popup':
case 'action-popup':
return false;
default:
return true;
}
}
_requestPermissions(permissions) { _requestPermissions(permissions) {
return new Promise((resolve) => { return new Promise((resolve) => {
chrome.permissions.request( chrome.permissions.request(

View File

@ -20,6 +20,7 @@
* DocumentFocusController * DocumentFocusController
* HotkeyHandler * HotkeyHandler
* JapaneseUtil * JapaneseUtil
* SearchActionPopupController
* SearchDisplayController * SearchDisplayController
* SearchPersistentStateController * SearchPersistentStateController
* wanakana * wanakana
@ -33,6 +34,9 @@
const searchPersistentStateController = new SearchPersistentStateController(); const searchPersistentStateController = new SearchPersistentStateController();
searchPersistentStateController.prepare(); searchPersistentStateController.prepare();
const searchActionPopupController = new SearchActionPopupController(searchPersistentStateController);
searchActionPopupController.prepare();
await yomichan.prepare(); await yomichan.prepare();
const {tabId, frameId} = await yomichan.api.frameInformationGet(); const {tabId, frameId} = await yomichan.api.frameInformationGet();

View File

@ -31,7 +31,7 @@ class DisplayController {
this._showExtensionInfo(manifest); this._showExtensionInfo(manifest);
this._setupEnvironment(); this._setupEnvironment();
this._setupButtonEvents('.action-open-search', 'openSearchPage', chrome.runtime.getURL('/search.html')); this._setupButtonEvents('.action-open-search', 'openSearchPage', chrome.runtime.getURL('/search.html'), this._onSearchClick.bind(this));
this._setupButtonEvents('.action-open-info', 'openInfoPage', chrome.runtime.getURL('/info.html')); this._setupButtonEvents('.action-open-info', 'openInfoPage', chrome.runtime.getURL('/info.html'));
const optionsFull = await yomichan.api.optionsGetFull(); const optionsFull = await yomichan.api.optionsGetFull();
@ -60,6 +60,13 @@ class DisplayController {
// Private // Private
_onSearchClick(e) {
if (!e.shiftKey) { return; }
e.preventDefault();
location.href = '/search.html?action-popup=true';
return false;
}
_showExtensionInfo(manifest) { _showExtensionInfo(manifest) {
const node = document.getElementById('extension-info'); const node = document.getElementById('extension-info');
if (node === null) { return; } if (node === null) { return; }
@ -67,12 +74,16 @@ class DisplayController {
node.textContent = `${manifest.name} v${manifest.version}`; node.textContent = `${manifest.name} v${manifest.version}`;
} }
_setupButtonEvents(selector, command, url) { _setupButtonEvents(selector, command, url, customHandler) {
const nodes = document.querySelectorAll(selector); const nodes = document.querySelectorAll(selector);
for (const node of nodes) { for (const node of nodes) {
if (typeof command === 'string') { if (typeof command === 'string') {
node.addEventListener('click', (e) => { node.addEventListener('click', (e) => {
if (e.button !== 0) { return; } if (e.button !== 0) { return; }
if (typeof customHandler === 'function') {
const result = customHandler(e);
if (typeof result !== 'undefined') { return; }
}
yomichan.api.commandExec(command, {mode: e.ctrlKey ? 'newTab' : 'existingOrNewTab'}); yomichan.api.commandExec(command, {mode: e.ctrlKey ? 'newTab' : 'existingOrNewTab'});
e.preventDefault(); e.preventDefault();
}, false); }, false);

View File

@ -36,7 +36,7 @@
<label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> <label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
<span class="search-option-label">Automatic kana conversion</span> <span class="search-option-label">Automatic kana conversion</span>
</label> </label>
<label class="search-option"> <label class="search-option" id="search-option-clipboard-monitor-container">
<label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> <label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
<span class="search-option-label">Clipboard monitor</span> <span class="search-option-label">Clipboard monitor</span>
</label> </label>
@ -92,6 +92,7 @@
<script src="/js/display/element-overflow-controller.js"></script> <script src="/js/display/element-overflow-controller.js"></script>
<script src="/js/display/option-toggle-hotkey-handler.js"></script> <script src="/js/display/option-toggle-hotkey-handler.js"></script>
<script src="/js/display/query-parser.js"></script> <script src="/js/display/query-parser.js"></script>
<script src="/js/display/search-action-popup-controller.js"></script>
<script src="/js/display/search-display-controller.js"></script> <script src="/js/display/search-display-controller.js"></script>
<script src="/js/display/search-persistent-state-controller.js"></script> <script src="/js/display/search-persistent-state-controller.js"></script>
<script src="/js/dom/document-focus-controller.js"></script> <script src="/js/dom/document-focus-controller.js"></script>