diff options
| -rw-r--r-- | ext/bg/js/search.js | 6 | ||||
| -rw-r--r-- | ext/mixed/css/display.css | 11 | ||||
| -rw-r--r-- | ext/mixed/js/display-generator.js | 4 | ||||
| -rw-r--r-- | ext/mixed/js/display.js | 106 |
4 files changed, 58 insertions, 69 deletions
diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index bd840981..1dda0f43 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -44,7 +44,7 @@ class DisplaySearch extends Display { }); this._onKeyDownIgnoreKeys = new Map([ ['ANY_MOD', new Set([ - 'Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'PageDown', 'PageUp', 'Home', 'End', 'Enter', + 'Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'PageDown', 'PageUp', 'Home', 'End', 'Enter', 'Escape', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12', 'F13', 'F14', 'F15', 'F16', 'F17', 'F18', 'F19', 'F20', 'F21', 'F22', 'F23', 'F24' @@ -157,7 +157,7 @@ class DisplaySearch extends Display { case 'kanji': animate = content.animate; valid = content.definitions.length > 0; - this._queryInput.blur(); + this.blurElement(this._queryInput); break; case 'clear': valid = false; @@ -183,7 +183,7 @@ class DisplaySearch extends Display { // Search e.preventDefault(); e.stopImmediatePropagation(); - e.currentTarget.blur(); + this.blurElement(e.currentTarget); this._search(); } diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index 997aa40a..1e502b71 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -240,15 +240,16 @@ a { .content { width: 100%; height: 100%; - display: flex; - flex-flow: column nowrap; position: relative; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + grid-template-areas: "main"; + justify-items: stretch; align-items: stretch; - justify-content: flex-start; } .content-scroll { - width: 100%; - height: 100%; + grid-area: main; display: flex; flex-flow: column nowrap; overflow-x: hidden; diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js index 5a563024..e90d003a 100644 --- a/ext/mixed/js/display-generator.js +++ b/ext/mixed/js/display-generator.js @@ -473,11 +473,15 @@ class DisplayGenerator { _appendMultiple(container, createItem, detailsArray, ...args) { let count = 0; + const {ELEMENT_NODE} = Node; if (Array.isArray(detailsArray)) { for (const details of detailsArray) { const item = createItem(details, ...args); if (item === null) { continue; } container.appendChild(item); + if (item.nodeType === ELEMENT_NODE) { + item.dataset.index = `${count}`; + } ++count; } } diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 9297f46b..19df9a61 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -183,8 +183,6 @@ class Display extends EventDispatcher { ['popupMessage', {async: 'dynamic', handler: this._onDirectMessage.bind(this)}] ]); window.addEventListener('focus', this._onWindowFocus.bind(this), false); - document.documentElement.addEventListener('focusin', this._onDocumentFocusIn.bind(this), false); - document.documentElement.addEventListener('focusout', this._onDocumentFocusOut.bind(this), false); this._updateFocusedElement(); this._progressIndicatorVisible.on('change', this._onProgressIndicatorVisibleChanged.bind(this)); } @@ -283,11 +281,7 @@ class Display extends EventDispatcher { if (this._definitions.length === 0) { return; } - const definition = this._definitions[0]; - const expressionIndex = this._getFirstExpressionIndex(); - const callback = () => { - this._audioPlay(definition, expressionIndex, 0); - }; + const callback = () => this._playAudio(0, 0); if (this._autoPlayAudioDelay > 0) { this._autoPlayAudioTimer = setTimeout(callback, this._autoPlayAudioDelay); @@ -413,6 +407,11 @@ class Display extends EventDispatcher { // NOP } + blurElement(element) { + element.blur(); + this._updateFocusedElement(); + } + // Message handlers _onMessage({action, params}, sender, callback) { @@ -588,14 +587,6 @@ class Display extends EventDispatcher { this._updateFocusedElement(); } - _onDocumentFocusIn() { - this._updateFocusedElement(); - } - - _onDocumentFocusOut() { - this._updateFocusedElement(); - } - async _onKanjiLookup(e) { try { e.preventDefault(); @@ -604,7 +595,7 @@ class Display extends EventDispatcher { const link = e.target; const {state} = this._history; - state.focusEntry = this._entryIndexFind(link); + state.focusEntry = this._getClosestDefinitionIndex(link); state.scrollX = this._windowScroll.x; state.scrollY = this._windowScroll.y; this._historyStateUpdate(state); @@ -664,7 +655,7 @@ class Display extends EventDispatcher { const layoutAwareScan = this._options.scanning.layoutAwareScan; const sentence = this._documentUtil.extractSentence(textSource, sentenceExtent, layoutAwareScan); - state.focusEntry = this._entryIndexFind(scannedElement); + state.focusEntry = this._getClosestDefinitionIndex(scannedElement); state.scrollX = this._windowScroll.x; state.scrollY = this._windowScroll.y; this._historyStateUpdate(state); @@ -715,23 +706,16 @@ class Display extends EventDispatcher { _onAudioPlay(e) { e.preventDefault(); const link = e.currentTarget; - const entry = link.closest('.entry'); - const index = this._entryIndexFind(entry); - if (index < 0 || index >= this._definitions.length) { return; } - - const expressionIndex = this._indexOf(entry.querySelectorAll('.term-expression .action-play-audio'), link); - this._audioPlay( - this._definitions[index], - // expressionIndex is used in audioPlay to detect result output mode - Math.max(expressionIndex, this._options.general.resultOutputMode === 'merge' ? 0 : -1), - index - ); + const definitionIndex = this._getClosestDefinitionIndex(link); + if (definitionIndex < 0) { return; } + const expressionIndex = Math.max(0, this._getClosestExpressionIndex(link)); + this._playAudio(definitionIndex, expressionIndex); } _onNoteAdd(e) { e.preventDefault(); const link = e.currentTarget; - const index = this._entryIndexFind(link); + const index = this._getClosestDefinitionIndex(link); if (index < 0 || index >= this._definitions.length) { return; } this._noteAdd(this._definitions[index], link.dataset.mode); @@ -770,7 +754,7 @@ class Display extends EventDispatcher { _onDebugLogClick(e) { const link = e.currentTarget; - const index = this._entryIndexFind(link); + const index = this._getClosestDefinitionIndex(link); if (index < 0 || index >= this._definitions.length) { return; } const definition = this._definitions[index]; console.log(definition); @@ -937,6 +921,7 @@ class Display extends EventDispatcher { this._displayGenerator.createTermEntry(definitions[i]) : this._displayGenerator.createKanjiEntry(definitions[i]) ); + entry.dataset.index = `${i}`; container.appendChild(entry); } @@ -1187,11 +1172,19 @@ class Display extends EventDispatcher { } } - async _audioPlay(definition, expressionIndex, entryIndex) { + async _playAudio(definitionIndex, expressionIndex) { + if (definitionIndex < 0 || definitionIndex >= this._definitions.length) { return; } + + const definition = this._definitions[definitionIndex]; + if (definition.type === 'kanji') { return; } + + const {expressions} = definition; + if (expressionIndex < 0 || expressionIndex >= expressions.length) { return; } + + const {expression, reading} = expressions[expressionIndex]; + const overrideToken = this._progressIndicatorVisible.setOverride(true); try { - const {expression, reading} = expressionIndex === -1 ? definition : definition.expressions[expressionIndex]; - this._stopPlayingAudio(); let audio, info; @@ -1208,7 +1201,7 @@ class Display extends EventDispatcher { info = 'Could not find audio'; } - const button = this._audioButtonFindImage(entryIndex, expressionIndex); + const button = this._audioButtonFindImage(definitionIndex, expressionIndex); if (button !== null) { let titleDefault = button.dataset.titleDefault; if (!titleDefault) { @@ -1239,6 +1232,10 @@ class Display extends EventDispatcher { } } + async _playAudioCurrent() { + return await this._playAudio(this._index, 0); + } + _stopPlayingAudio() { if (this._audioPlaying !== null) { this._audioPlaying.pause(); @@ -1246,10 +1243,6 @@ class Display extends EventDispatcher { } } - _getFirstExpressionIndex() { - return this._options.general.resultOutputMode === 'merge' ? 0 : -1; - } - _getEntry(index) { const entries = this._container.querySelectorAll('.entry'); return index >= 0 && index < entries.length ? entries[index] : null; @@ -1271,9 +1264,19 @@ class Display extends EventDispatcher { }; } - _entryIndexFind(element) { - const entry = element.closest('.entry'); - return entry !== null ? this._indexOf(this._container.querySelectorAll('.entry'), entry) : -1; + _getClosestDefinitionIndex(element) { + return this._getClosestIndex(element, '.entry'); + } + + _getClosestExpressionIndex(element) { + return this._getClosestIndex(element, '.term-expression'); + } + + _getClosestIndex(element, selector) { + const node = element.closest(selector); + if (node === null) { return -1; } + const index = parseInt(node.dataset.index, 10); + return Number.isFinite(index) ? index : -1; } _adderButtonFind(index, mode) { @@ -1307,15 +1310,6 @@ class Display extends EventDispatcher { return container !== null ? container.querySelector('.action-play-audio>img') : null; } - _indexOf(nodeList, node) { - for (let i = 0, ii = nodeList.length; i < ii; ++i) { - if (nodeList[i] === node) { - return i; - } - } - return -1; - } - _getElementTop(element) { const elementRect = element.getBoundingClientRect(); const documentRect = this._contentScrollBodyElement.getBoundingClientRect(); @@ -1331,16 +1325,6 @@ class Display extends EventDispatcher { }; } - _playAudioCurrent() { - const index = this._index; - if (index < 0 || index >= this._definitions.length) { return; } - - const entry = this._getEntry(index); - if (entry !== null && entry.dataset.type === 'term') { - this._audioPlay(this._definitions[index], this._getFirstExpressionIndex(), index); - } - } - _historyHasState() { return isObject(this._history.state); } @@ -1581,7 +1565,7 @@ class Display extends EventDispatcher { activeElement === document.documentElement || activeElement === document.body ) { - target.focus(); + target.focus({preventScroll: true}); } } } |