From 8cf10d685d52d5ae75d65c4aea4adcb6d101e9a4 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 8 Nov 2020 12:34:23 -0500 Subject: [PATCH] Search and display style updates (#1005) * Use same selectors * Use consistent stylesheet declaration * Fix query parser not being cleared * Set property upon load * Don't focus for Enter key press * Update search page styles * Update indent and nodes * Support dark style * Add missing var --- ext/bg/js/search-main.js | 1 + ext/bg/js/search.js | 91 ++++++----- ext/bg/search.html | 174 ++++++++++---------- ext/fg/float.html | 135 ++++++++-------- ext/fg/js/float.js | 2 +- ext/mixed/css/display.css | 17 -- ext/mixed/css/search.css | 326 ++++++++++++++++++++++++++++++++++++++ ext/mixed/js/display.js | 11 +- 8 files changed, 538 insertions(+), 219 deletions(-) create mode 100644 ext/mixed/css/search.css diff --git a/ext/bg/js/search-main.js b/ext/bg/js/search-main.js index cf9282fd..07130631 100644 --- a/ext/bg/js/search-main.js +++ b/ext/bg/js/search-main.js @@ -28,6 +28,7 @@ const displaySearch = new DisplaySearch(); await displaySearch.prepare(); + document.documentElement.dataset.loaded = 'true'; yomichan.ready(); } catch (e) { yomichan.logError(e); diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index af88bb76..bd840981 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -25,12 +25,14 @@ class DisplaySearch extends Display { constructor() { - super(document.querySelector('#spinner'), document.querySelector('#content')); - this._searchButton = document.querySelector('#search'); - this._queryInput = document.querySelector('#query'); + super(); + this._searchButton = document.querySelector('#search-button'); + this._queryInput = document.querySelector('#search-textbox'); this._introElement = document.querySelector('#intro'); this._clipboardMonitorEnableCheckbox = document.querySelector('#clipboard-monitor-enable'); this._wanakanaEnableCheckbox = document.querySelector('#wanakana-enable'); + this._queryInputEvents = new EventListenerCollection(); + this._wanakanaEnabled = false; this._isPrepared = false; this._introVisible = true; this._introAnimationTimer = null; @@ -42,7 +44,7 @@ class DisplaySearch extends Display { }); this._onKeyDownIgnoreKeys = new Map([ ['ANY_MOD', new Set([ - 'Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'PageDown', 'PageUp', 'Home', 'End', + 'Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'PageDown', 'PageUp', 'Home', 'End', 'Enter', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12', 'F13', 'F14', 'F15', 'F16', 'F17', 'F18', 'F19', 'F20', 'F21', 'F22', 'F23', 'F24' @@ -71,22 +73,16 @@ class DisplaySearch extends Display { this.queryParserVisible = true; this.setHistorySettings({useBrowserHistory: true}); - const options = this.getOptions(); - if (options.general.enableWanakana === true) { - this._wanakanaEnableCheckbox.checked = true; - wanakana.bind(this._queryInput); - } else { - this._wanakanaEnableCheckbox.checked = false; - } + const enableWanakana = !!this.getOptions().general.enableWanakana; + this._wanakanaEnableCheckbox.checked = enableWanakana; + this._setWanakanaEnabled(enableWanakana); this._searchButton.addEventListener('click', this._onSearch.bind(this), false); - this._queryInput.addEventListener('input', this._onSearchInput.bind(this), false); this._wanakanaEnableCheckbox.addEventListener('change', this._onWanakanaEnableChange.bind(this)); window.addEventListener('copy', this._onCopy.bind(this)); this._clipboardMonitor.on('change', this._onExternalSearchUpdate.bind(this)); this._clipboardMonitorEnableCheckbox.addEventListener('change', this._onClipboardMonitorEnableChange.bind(this)); - this._updateSearchButton(); this._onModeChange(); await this._prepareNestedPopups(); @@ -141,7 +137,7 @@ class DisplaySearch extends Display { } postProcessQuery(query) { - if (this._isWanakanaEnabled()) { + if (this._wanakanaEnabled) { try { query = wanakana.toKana(query); } catch (e) { @@ -173,28 +169,27 @@ class DisplaySearch extends Display { if (typeof source !== 'string') { source = ''; } this._queryInput.value = source; + this._updateSearchHeight(); this._setIntroVisible(!valid, animate); - this._updateSearchButton(); } _onSearchInput() { - this._updateSearchButton(); + this._updateSearchHeight(); + } - const queryElementRect = this._queryInput.getBoundingClientRect(); - if (queryElementRect.top < 0 || queryElementRect.bottom > window.innerHeight) { - this._queryInput.scrollIntoView(); - } + _onSearchKeydown(e) { + if (e.code !== 'Enter' || e.shiftKey) { return; } + + // Search + e.preventDefault(); + e.stopImmediatePropagation(); + e.currentTarget.blur(); + this._search(); } _onSearch(e) { - if (this._queryInput === null) { - return; - } - e.preventDefault(); - - const query = this._queryInput.value; - this._onSearchQueryUpdated(query, true); + this._search(); } _onCopy() { @@ -228,11 +223,7 @@ class DisplaySearch extends Display { _onWanakanaEnableChange(e) { const value = e.target.checked; - if (value) { - wanakana.bind(this._queryInput); - } else { - wanakana.unbind(this._queryInput); - } + this._setWanakanaEnabled(value); api.modifySettings([{ action: 'set', path: 'general.enableWanakana', @@ -254,8 +245,22 @@ class DisplaySearch extends Display { this._updateClipboardMonitorEnabled(); } - _isWanakanaEnabled() { - return this._wanakanaEnableCheckbox !== null && this._wanakanaEnableCheckbox.checked; + _setWanakanaEnabled(enabled) { + const input = this._queryInput; + this._queryInputEvents.removeAllEventListeners(); + + this._queryInputEvents.addEventListener(input, 'keydown', this._onSearchKeydown.bind(this), false); + + if (this._wanakanaEnabled !== enabled) { + this._wanakanaEnabled = enabled; + if (enabled) { + wanakana.bind(input); + } else { + wanakana.unbind(input); + } + } + + this._queryInputEvents.addEventListener(input, 'input', this._onSearchInput.bind(this), false); } _setIntroVisible(visible, animate) { @@ -314,10 +319,6 @@ class DisplaySearch extends Display { this._introElement.style.height = '0'; } - _updateSearchButton() { - this._searchButton.disabled = this._introVisible && (this._queryInput === null || this._queryInput.value.length === 0); - } - async _prepareNestedPopups() { let complete = false; @@ -388,4 +389,18 @@ class DisplaySearch extends Display { ); }); } + + _search() { + const query = this._queryInput.value; + this._onSearchQueryUpdated(query, true); + } + + _updateSearchHeight() { + const node = this._queryInput; + const {scrollHeight} = node; + const currentHeight = node.getBoundingClientRect().height; + if (scrollHeight >= currentHeight - 1) { + node.style.height = `${scrollHeight}px`; + } + } } diff --git a/ext/bg/search.html b/ext/bg/search.html index 8df20581..6988a235 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -1,105 +1,95 @@ - - - - Yomichan Search - - - - - - - - - - - - -
-
-
-

Yomichan Search

-
-

Search your installed dictionaries by entering a Japanese expression into the field below.

-
+ + + + Yomichan Search + + + + + + + + + + + -
-
- - - - - - - - -
+
-
- - - - -
-
+
+

Yomichan Search

+
- - -
-
-
-
- -
- -
- -
- - +
+
+ +
+
+ + +
+
- + - - - - - +
+
+
+
- - - - - - - - - - - - - - - - +
- - + - - - - +
- - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/fg/float.html b/ext/fg/float.html index 4a7cb616..d5172145 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -1,80 +1,81 @@ - - - - Yomichan Search - - - - - - - - - - - + + + + Yomichan Search + + + + + + + + + + -
+ -