diff options
Diffstat (limited to 'ext/js')
| -rw-r--r-- | ext/js/display/display-anki.js | 58 | ||||
| -rw-r--r-- | ext/js/display/display-audio.js | 108 | ||||
| -rw-r--r-- | ext/js/display/display.js | 199 | ||||
| -rw-r--r-- | ext/js/display/popup-main.js | 8 | ||||
| -rw-r--r-- | ext/js/display/search-display-controller.js | 19 | ||||
| -rw-r--r-- | ext/js/display/search-main.js | 10 | 
6 files changed, 203 insertions, 199 deletions
| diff --git a/ext/js/display/display-anki.js b/ext/js/display/display-anki.js index 216e3108..46e88ae0 100644 --- a/ext/js/display/display-anki.js +++ b/ext/js/display/display-anki.js @@ -23,8 +23,9 @@   */  class DisplayAnki { -    constructor(display, japaneseUtil) { +    constructor(display, displayAudio, japaneseUtil) {          this._display = display; +        this._displayAudio = displayAudio;          this._ankiFieldTemplates = null;          this._ankiFieldTemplatesDefault = null;          this._ankiNoteBuilder = new AnkiNoteBuilder({japaneseUtil}); @@ -70,28 +71,11 @@ class DisplayAnki {              ['viewNote',          this._viewNoteForSelectedEntry.bind(this)]          ]);          this._display.on('optionsUpdated', this._onOptionsUpdated.bind(this)); -    } - -    cleanupEntries() { -        this._updateDictionaryEntryDetailsToken = null; -        this._dictionaryEntryDetails = null; -        this._hideAnkiNoteErrors(false); -    } - -    setupEntriesBegin() { -        this._noteContext = this._getNoteContext(); -    } - -    setupEntry(entry) { -        this._addMultipleEventListeners(entry, '.action-view-tags', 'click', this._onShowTagsBind); -        this._addMultipleEventListeners(entry, '.action-add-note', 'click', this._onNoteAddBind); -        this._addMultipleEventListeners(entry, '.action-view-note', 'click', this._onViewNoteButtonClickBind); -        this._addMultipleEventListeners(entry, '.action-view-note', 'contextmenu', this._onViewNoteButtonContextMenuBind); -        this._addMultipleEventListeners(entry, '.action-view-note', 'menuClose', this._onViewNoteButtonMenuCloseBind); -    } - -    setupEntriesComplete() { -        this._updateDictionaryEntryDetails(); +        this._display.on('contentClear', this._onContentClear.bind(this)); +        this._display.on('contentUpdateStart', this._onContentUpdateStart.bind(this)); +        this._display.on('contentUpdateEntry', this._onContentUpdateEntry.bind(this)); +        this._display.on('contentUpdateComplete', this._onContentUpdateComplete.bind(this)); +        this._display.on('logDictionaryEntryData', this._onLogDictionaryEntryData.bind(this));      }      async getLogData(dictionaryEntry) { @@ -173,6 +157,32 @@ class DisplayAnki {          this._updateAnkiFieldTemplates(options);      } +    _onContentClear() { +        this._updateDictionaryEntryDetailsToken = null; +        this._dictionaryEntryDetails = null; +        this._hideAnkiNoteErrors(false); +    } + +    _onContentUpdateStart() { +        this._noteContext = this._getNoteContext(); +    } + +    _onContentUpdateEntry({element}) { +        this._addMultipleEventListeners(element, '.action-view-tags', 'click', this._onShowTagsBind); +        this._addMultipleEventListeners(element, '.action-add-note', 'click', this._onNoteAddBind); +        this._addMultipleEventListeners(element, '.action-view-note', 'click', this._onViewNoteButtonClickBind); +        this._addMultipleEventListeners(element, '.action-view-note', 'contextmenu', this._onViewNoteButtonContextMenuBind); +        this._addMultipleEventListeners(element, '.action-view-note', 'menuClose', this._onViewNoteButtonMenuCloseBind); +    } + +    _onContentUpdateComplete() { +        this._updateDictionaryEntryDetails(); +    } + +    _onLogDictionaryEntryData({dictionaryEntry, promises}) { +        promises.push(this.getLogData(dictionaryEntry)); +    } +      _onNoteAdd(e) {          e.preventDefault();          const node = e.currentTarget; @@ -526,7 +536,7 @@ class DisplayAnki {          const fields = Object.entries(modeOptions.fields);          const contentOrigin = this._display.getContentOrigin();          const details = this._ankiNoteBuilder.getDictionaryEntryDetailsForNote(dictionaryEntry); -        const audioDetails = (details.type === 'term' ? this._display.getAnkiNoteMediaAudioDetails(details.term, details.reading) : null); +        const audioDetails = (details.type === 'term' ? this._displayAudio.getAnkiNoteMediaAudioDetails(details.term, details.reading) : null);          const optionsContext = this._display.getOptionsContext();          const {note, errors, requirements: outputRequirements} = await this._ankiNoteBuilder.createNote({ diff --git a/ext/js/display/display-audio.js b/ext/js/display/display-audio.js index 3a6b7a50..0bc95abb 100644 --- a/ext/js/display/display-audio.js +++ b/ext/js/display/display-audio.js @@ -56,49 +56,21 @@ class DisplayAudio {      prepare() {          this._audioSystem.prepare(); +        this._display.hotkeyHandler.registerActions([ +            ['playAudio',           this._onHotkeyActionPlayAudio.bind(this)], +            ['playAudioFromSource', this._onHotkeyActionPlayAudioFromSource.bind(this)] +        ]); +        this._display.registerDirectMessageHandlers([ +            ['clearAutoPlayTimer', {async: false, handler: this._onMessageClearAutoPlayTimer.bind(this)}] +        ]);          this._display.on('optionsUpdated', this._onOptionsUpdated.bind(this)); +        this._display.on('contentClear', this._onContentClear.bind(this)); +        this._display.on('contentUpdateEntry', this._onContentUpdateEntry.bind(this)); +        this._display.on('contentUpdateComplete', this._onContentUpdateComplete.bind(this)); +        this._display.on('frameVisibilityChange', this._onFrameVisibilityChange.bind(this));          this._onOptionsUpdated({options: this._display.getOptions()});      } -    cleanupEntries() { -        this._entriesToken = {}; -        this._cache.clear(); -        this.clearAutoPlayTimer(); -        this._eventListeners.removeAllEventListeners(); -    } - -    setupEntry(entry, dictionaryEntryIndex) { -        for (const button of entry.querySelectorAll('.action-play-audio')) { -            const headwordIndex = this._getAudioPlayButtonHeadwordIndex(button); -            this._eventListeners.addEventListener(button, 'click', this._onAudioPlayButtonClick.bind(this, dictionaryEntryIndex, headwordIndex), false); -            this._eventListeners.addEventListener(button, 'contextmenu', this._onAudioPlayButtonContextMenu.bind(this, dictionaryEntryIndex, headwordIndex), false); -            this._eventListeners.addEventListener(button, 'menuClose', this._onAudioPlayMenuCloseClick.bind(this, dictionaryEntryIndex, headwordIndex), false); -        } -    } - -    setupEntriesComplete() { -        if (!this._autoPlay || !this._display.frameVisible) { return; } - -        this.clearAutoPlayTimer(); - -        const {dictionaryEntries} = this._display; -        if (dictionaryEntries.length === 0) { return; } - -        const firstDictionaryEntries = dictionaryEntries[0]; -        if (firstDictionaryEntries.type === 'kanji') { return; } - -        const callback = () => { -            this._autoPlayAudioTimer = null; -            this.playAudio(0, 0); -        }; - -        if (this._autoPlayAudioDelay > 0) { -            this._autoPlayAudioTimer = setTimeout(callback, this._autoPlayAudioDelay); -        } else { -            callback(); -        } -    } -      clearAutoPlayTimer() {          if (this._autoPlayAudioTimer === null) { return; }          clearTimeout(this._autoPlayAudioTimer); @@ -171,6 +143,64 @@ class DisplayAudio {          this._cache.clear();      } +    _onContentClear() { +        this._entriesToken = {}; +        this._cache.clear(); +        this.clearAutoPlayTimer(); +        this._eventListeners.removeAllEventListeners(); +    } + +    _onContentUpdateEntry({element, index}) { +        for (const button of element.querySelectorAll('.action-play-audio')) { +            const headwordIndex = this._getAudioPlayButtonHeadwordIndex(button); +            this._eventListeners.addEventListener(button, 'click', this._onAudioPlayButtonClick.bind(this, index, headwordIndex), false); +            this._eventListeners.addEventListener(button, 'contextmenu', this._onAudioPlayButtonContextMenu.bind(this, index, headwordIndex), false); +            this._eventListeners.addEventListener(button, 'menuClose', this._onAudioPlayMenuCloseClick.bind(this, index, headwordIndex), false); +        } +    } + +    _onContentUpdateComplete() { +        if (!this._autoPlay || !this._display.frameVisible) { return; } + +        this.clearAutoPlayTimer(); + +        const {dictionaryEntries} = this._display; +        if (dictionaryEntries.length === 0) { return; } + +        const firstDictionaryEntries = dictionaryEntries[0]; +        if (firstDictionaryEntries.type === 'kanji') { return; } + +        const callback = () => { +            this._autoPlayAudioTimer = null; +            this.playAudio(0, 0); +        }; + +        if (this._autoPlayAudioDelay > 0) { +            this._autoPlayAudioTimer = setTimeout(callback, this._autoPlayAudioDelay); +        } else { +            callback(); +        } +    } + +    _onFrameVisibilityChange({value}) { +        if (!value) { +            this.clearAutoPlayTimer(); +            this.stopAudio(); +        } +    } + +    _onHotkeyActionPlayAudio() { +        this.playAudio(this._display.selectedIndex, 0); +    } + +    _onHotkeyActionPlayAudioFromSource(source) { +        this.playAudio(this._display.selectedIndex, 0, source); +    } + +    _onMessageClearAutoPlayTimer() { +        this.clearAutoPlayTimer(); +    } +      _addAudioSourceInfo(type, url, voice, isInOptions, nameMap) {          const index = this._audioSources.length;          const downloadable = this._sourceIsDownloadable(type); diff --git a/ext/js/display/display.js b/ext/js/display/display.js index 5e35a9de..ed1af17e 100644 --- a/ext/js/display/display.js +++ b/ext/js/display/display.js @@ -16,8 +16,6 @@   */  /* global - * DisplayAnki - * DisplayAudio   * DisplayGenerator   * DisplayHistory   * DisplayNotification @@ -106,10 +104,8 @@ class Display extends EventDispatcher {          this._contentTextScanner = null;          this._tagNotification = null;          this._footerNotificationContainer = document.querySelector('#content-footer'); -        this._displayAudio = new DisplayAudio(this);          this._optionToggleHotkeyHandler = new OptionToggleHotkeyHandler(this);          this._elementOverflowController = new ElementOverflowController(); -        this._displayAnki = new DisplayAnki(this, japaneseUtil);          this._frameVisible = (pageType === 'search');          this._hotkeyHandler.registerActions([ @@ -120,8 +116,6 @@ class Display extends EventDispatcher {              ['firstEntry',        () => { this._focusEntry(0, 0, true); }],              ['historyBackward',   () => { this._sourceTermView(); }],              ['historyForward',    () => { this._nextTermView(); }], -            ['playAudio',         () => { this._playAudioCurrent(); }], -            ['playAudioFromSource', this._onHotkeyActionPlayAudioFromSource.bind(this)],              ['copyHostSelection', () => this._copyHostSelection()],              ['nextEntryDifferentDictionary',     () => { this._focusEntryWithDifferentDictionary(1, true); }],              ['previousEntryDifferentDictionary', () => { this._focusEntryWithDifferentDictionary(-1, true); }] @@ -129,7 +123,6 @@ class Display extends EventDispatcher {          this.registerDirectMessageHandlers([              ['setOptionsContext',  {async: false, handler: this._onMessageSetOptionsContext.bind(this)}],              ['setContent',         {async: false, handler: this._onMessageSetContent.bind(this)}], -            ['clearAutoPlayTimer', {async: false, handler: this._onMessageClearAutoPlayTimer.bind(this)}],              ['setCustomCss',       {async: false, handler: this._onMessageSetCustomCss.bind(this)}],              ['setContentScale',    {async: false, handler: this._onMessageSetContentScale.bind(this)}],              ['configure',          {async: true,  handler: this._onMessageConfigure.bind(this)}], @@ -144,14 +137,6 @@ class Display extends EventDispatcher {          return this._displayGenerator;      } -    get autoPlayAudioDelay() { -        return this._displayAudio.autoPlayAudioDelay; -    } - -    set autoPlayAudioDelay(value) { -        this._displayAudio.autoPlayAudioDelay = value; -    } -      get queryParserVisible() {          return this._queryParserVisible;      } @@ -230,8 +215,6 @@ class Display extends EventDispatcher {          // Prepare          await this._hotkeyHelpController.prepare();          await this._displayGenerator.prepare(); -        this._displayAudio.prepare(); -        this._displayAnki.prepare();          this._queryParser.prepare();          this._history.prepare();          this._optionToggleHotkeyHandler.prepare(); @@ -345,10 +328,6 @@ class Display extends EventDispatcher {          this.trigger('optionsUpdated', {options});      } -    clearAutoPlayTimer() { -        this._displayAudio.clearAutoPlayTimer(); -    } -      setContent(details) {          const {focus, params, state, content} = details;          const historyMode = this._historyHasChanged ? details.historyMode : 'clear'; @@ -468,10 +447,6 @@ class Display extends EventDispatcher {          return Number.isFinite(index) ? index : -1;      } -    getAnkiNoteMediaAudioDetails(term, reading) { -        return this._displayAudio.getAnkiNoteMediaAudioDetails(term, reading); -    } -      // Message handlers      _onDirectMessage(data) { @@ -511,10 +486,6 @@ class Display extends EventDispatcher {          this.setContent(details);      } -    _onMessageClearAutoPlayTimer() { -        this.clearAutoPlayTimer(); -    } -      _onMessageSetCustomCss({css}) {          this.setCustomCss(css);      } @@ -534,10 +505,7 @@ class Display extends EventDispatcher {      _onMessageVisibilityChanged({value}) {          this._frameVisible = value; -        if (!value) { -            this._displayAudio.clearAutoPlayTimer(); -            this._displayAudio.stopAudio(); -        } +        this.trigger('frameVisibilityChange', {value});      }      _onMessageExtensionUnloaded() { @@ -568,9 +536,8 @@ class Display extends EventDispatcher {              this._closeAllPopupMenus();              this._eventListeners.removeAllEventListeners();              this._mediaLoader.unloadAll(); -            this._displayAudio.cleanupEntries(); -            this._displayAnki.cleanupEntries();              this._hideTagNotification(false); +            this._triggerContentClear();              this._dictionaryEntries = [];              this._dictionaryEntryNodes = [];              this._elementOverflowController.clearElements(); @@ -582,62 +549,25 @@ class Display extends EventDispatcher {              const fullVisible = urlSearchParams.get('full-visible');              this._queryParserVisibleOverride = (fullVisible === null ? null : (fullVisible !== 'false')); -            this._updateQueryParser(); -            let clear = true;              this._historyHasChanged = true;              this._contentType = type; -            this._query = ''; -            const eventArgs = {type, urlSearchParams, token};              // Set content              switch (type) {                  case 'terms':                  case 'kanji': -                    { -                        const query = urlSearchParams.get('query'); -                        if (query === null) { break; } - -                        this._query = query; -                        clear = false; -                        const isTerms = (type === 'terms'); -                        let queryFull = urlSearchParams.get('full'); -                        queryFull = (queryFull !== null ? queryFull : query); -                        let queryOffset = urlSearchParams.get('offset'); -                        if (queryOffset !== null) { -                            queryOffset = Number.parseInt(queryOffset, 10); -                            if (!Number.isFinite(queryOffset)) { queryOffset = null; } -                        } -                        const wildcardsEnabled = (urlSearchParams.get('wildcards') !== 'off'); -                        const lookup = (urlSearchParams.get('lookup') !== 'false'); -                        await this._setContentTermsOrKanji(token, isTerms, query, queryFull, queryOffset, lookup, wildcardsEnabled, eventArgs); -                    } +                    await this._setContentTermsOrKanji(type, urlSearchParams, token);                      break;                  case 'unloaded': -                    { -                        clear = false; -                        const {content} = this._history; -                        eventArgs.content = content; -                        this.trigger('contentUpdating', eventArgs); -                        this._setContentExtensionUnloaded(); -                    } +                    this._setContentExtensionUnloaded(); +                    break; +                default: +                    type = 'clear'; +                    this._contentType = type; +                    this._clearContent();                      break;              } - -            // Clear -            if (clear) { -                type = 'clear'; -                this._contentType = type; -                const {content} = this._history; -                eventArgs.type = type; -                eventArgs.content = content; -                this.trigger('contentUpdating', eventArgs); -                this._clearContent(); -            } - -            const stale = (this._setContentToken !== token); -            eventArgs.stale = stale; -            this.trigger('contentUpdated', eventArgs);          } catch (e) {              this.onError(e);          } @@ -874,8 +804,11 @@ class Display extends EventDispatcher {          document.documentElement.dataset.theme = themeName;      } -    async _findDictionaryEntries(isTerms, source, wildcardsEnabled, optionsContext) { -        if (isTerms) { +    async _findDictionaryEntries(isKanji, source, wildcardsEnabled, optionsContext) { +        if (isKanji) { +            const dictionaryEntries = await yomichan.api.kanjiFind(source, optionsContext); +            return dictionaryEntries; +        } else {              const findDetails = {};              if (wildcardsEnabled) {                  const match = /^([*\uff0a]*)([\w\W]*?)([*\uff0a]*)$/.exec(source); @@ -891,13 +824,24 @@ class Display extends EventDispatcher {              const {dictionaryEntries} = await yomichan.api.termsFind(source, findDetails, optionsContext);              return dictionaryEntries; -        } else { -            const dictionaryEntries = await yomichan.api.kanjiFind(source, optionsContext); -            return dictionaryEntries;          }      } -    async _setContentTermsOrKanji(token, isTerms, query, queryFull, queryOffset, lookup, wildcardsEnabled, eventArgs) { +    async _setContentTermsOrKanji(type, urlSearchParams, token) { +        const lookup = (urlSearchParams.get('lookup') !== 'false'); +        const wildcardsEnabled = (urlSearchParams.get('wildcards') !== 'off'); + +        // Set query +        const query = urlSearchParams.get('query'); +        let queryFull = urlSearchParams.get('full'); +        queryFull = (queryFull !== null ? queryFull : query); +        let queryOffset = urlSearchParams.get('offset'); +        if (queryOffset !== null) { +            queryOffset = Number.parseInt(queryOffset, 10); +            queryOffset = Number.isFinite(queryOffset) ? Math.max(0, Math.min(queryFull.length - query.length, queryOffset)) : null; +        } +        this._setQuery(query, queryFull, queryOffset); +          let {state, content} = this._history;          let changeHistory = false;          if (!isObject(content)) { @@ -909,12 +853,7 @@ class Display extends EventDispatcher {              changeHistory = true;          } -        let { -            focusEntry=null, -            scrollX=null, -            scrollY=null, -            optionsContext=null -        } = state; +        let {focusEntry, scrollX, scrollY, optionsContext} = state;          if (typeof focusEntry !== 'number') { focusEntry = 0; }          if (!(typeof optionsContext === 'object' && optionsContext !== null)) {              optionsContext = this.getOptionsContext(); @@ -922,16 +861,9 @@ class Display extends EventDispatcher {              changeHistory = true;          } -        if (queryOffset !== null) { -            queryOffset = Math.max(0, Math.min(queryFull.length - query.length, queryOffset)); -        } - -        this._setFullQuery(queryFull, queryOffset); -        this._setTitleText(query); -          let {dictionaryEntries} = content;          if (!Array.isArray(dictionaryEntries)) { -            dictionaryEntries = lookup && query.length > 0 ? await this._findDictionaryEntries(isTerms, query, wildcardsEnabled, optionsContext) : []; +            dictionaryEntries = lookup && query.length > 0 ? await this._findDictionaryEntries(type === 'kanji', query, wildcardsEnabled, optionsContext) : [];              if (this._setContentToken !== token) { return; }              content.dictionaryEntries = dictionaryEntries;              changeHistory = true; @@ -964,10 +896,6 @@ class Display extends EventDispatcher {              this._replaceHistoryStateNoNavigate(state, content);          } -        eventArgs.source = query; -        eventArgs.content = content; -        this.trigger('contentUpdating', eventArgs); -          this._dictionaryEntries = dictionaryEntries;          this._updateNavigation(this._history.hasPrevious(), this._history.hasNext()); @@ -976,7 +904,7 @@ class Display extends EventDispatcher {          const container = this._container;          container.textContent = ''; -        this._displayAnki.setupEntriesBegin(); +        this._triggerContentUpdateStart();          for (let i = 0, ii = dictionaryEntries.length; i < ii; ++i) {              if (i > 0) { @@ -986,15 +914,14 @@ class Display extends EventDispatcher {              const dictionaryEntry = dictionaryEntries[i];              const entry = ( -                isTerms ? +                dictionaryEntry.type === 'term' ?                  this._displayGenerator.createTermEntry(dictionaryEntry) :                  this._displayGenerator.createKanjiEntry(dictionaryEntry)              );              entry.dataset.index = `${i}`;              this._dictionaryEntryNodes.push(entry);              this._addEntryEventListeners(entry); -            this._displayAudio.setupEntry(entry, i); -            this._displayAnki.setupEntry(entry, i); +            this._triggerContentUpdateEntry(dictionaryEntry, entry, i);              container.appendChild(entry);              if (focusEntry === i) {                  this._focusEntry(i, 0, false); @@ -1011,8 +938,7 @@ class Display extends EventDispatcher {              this._windowScroll.to(x, y);          } -        this._displayAudio.setupEntriesComplete(); -        this._displayAnki.setupEntriesComplete(); +        this._triggerContentUpdateComplete();      }      _setContentExtensionUnloaded() { @@ -1028,14 +954,18 @@ class Display extends EventDispatcher {          this._updateNavigation(false, false);          this._setNoContentVisible(false); -        this._setTitleText(''); -        this._setFullQuery('', 0); +        this._setQuery('', '', 0); + +        this._triggerContentUpdateStart(); +        this._triggerContentUpdateComplete();      }      _clearContent() {          this._container.textContent = ''; -        this._setTitleText(''); -        this._setFullQuery('', 0); +        this._setQuery('', '', 0); + +        this._triggerContentUpdateStart(); +        this._triggerContentUpdateComplete();      }      _setNoContentVisible(visible) { @@ -1046,10 +976,12 @@ class Display extends EventDispatcher {          }      } -    _setFullQuery(text, offset) { -        this._fullQuery = text; -        this._queryOffset = offset; +    _setQuery(query, fullQuery, queryOffset) { +        this._query = query; +        this._fullQuery = fullQuery; +        this._queryOffset = queryOffset;          this._updateQueryParser(); +        this._setTitleText(query);      }      _updateQueryParser() { @@ -1219,10 +1151,6 @@ class Display extends EventDispatcher {          }      } -    async _playAudioCurrent() { -        await this._displayAudio.playAudio(this._index, 0); -    } -      _getEntry(index) {          const entries = this._dictionaryEntryNodes;          return index >= 0 && index < entries.length ? entries[index] : null; @@ -1575,10 +1503,6 @@ class Display extends EventDispatcher {          this._focusEntry(this._index + count * sign, 0, true);      } -    _onHotkeyActionPlayAudioFromSource(source) { -        this._displayAudio.playAudio(this._index, 0, source); -    } -      _closeAllPopupMenus() {          for (const popupMenu of PopupMenu.openMenus) {              popupMenu.close(); @@ -1598,9 +1522,32 @@ class Display extends EventDispatcher {          const dictionaryEntry = this._dictionaryEntries[index];          const result = {dictionaryEntry}; -        const result2 = await this._displayAnki.getLogData(dictionaryEntry); -        Object.assign(result, result2); +        const promises = []; +        this.trigger('logDictionaryEntryData', {dictionaryEntry, promises}); +        if (promises.length > 0) { +            for (const result2 of await Promise.all(promises)) { +                Object.assign(result, result2); +            } +        }          console.log(result);      } + +    _triggerContentClear() { +        this.trigger('contentClear', {}); +    } + +    _triggerContentUpdateStart() { +        let {content} = this._history; +        if (typeof content !== 'object' || content === null) { content = {}; } +        this.trigger('contentUpdateStart', {type: this._contentType, query: this._query, content}); +    } + +    _triggerContentUpdateEntry(dictionaryEntry, element, index) { +        this.trigger('contentUpdateEntry', {dictionaryEntry, element, index}); +    } + +    _triggerContentUpdateComplete() { +        this.trigger('contentUpdateComplete', {type: this._contentType}); +    }  } diff --git a/ext/js/display/popup-main.js b/ext/js/display/popup-main.js index 0b5e338d..8621e200 100644 --- a/ext/js/display/popup-main.js +++ b/ext/js/display/popup-main.js @@ -17,6 +17,8 @@  /* global   * Display + * DisplayAnki + * DisplayAudio   * DisplayProfileSelection   * DisplayResizer   * DocumentFocusController @@ -41,6 +43,12 @@          const display = new Display(tabId, frameId, 'popup', japaneseUtil, documentFocusController, hotkeyHandler);          await display.prepare(); +        const displayAudio = new DisplayAudio(display); +        displayAudio.prepare(); + +        const displayAnki = new DisplayAnki(display, displayAudio, japaneseUtil); +        displayAnki.prepare(); +          const displayProfileSelection = new DisplayProfileSelection(display);          displayProfileSelection.prepare(); diff --git a/ext/js/display/search-display-controller.js b/ext/js/display/search-display-controller.js index 489a9fa3..2b97479e 100644 --- a/ext/js/display/search-display-controller.js +++ b/ext/js/display/search-display-controller.js @@ -21,10 +21,11 @@   */  class SearchDisplayController { -    constructor(tabId, frameId, display, japaneseUtil, searchPersistentStateController) { +    constructor(tabId, frameId, display, displayAudio, japaneseUtil, searchPersistentStateController) {          this._tabId = tabId;          this._frameId = frameId;          this._display = display; +        this._displayAudio = displayAudio;          this._searchPersistentStateController = searchPersistentStateController;          this._searchButton = document.querySelector('#search-button');          this._queryInput = document.querySelector('#search-textbox'); @@ -56,7 +57,7 @@ class SearchDisplayController {          yomichan.on('optionsUpdated', this._onOptionsUpdated.bind(this));          this._display.on('optionsUpdated', this._onDisplayOptionsUpdated.bind(this)); -        this._display.on('contentUpdating', this._onContentUpdating.bind(this)); +        this._display.on('contentUpdateStart', this._onContentUpdateStart.bind(this));          this._display.hotkeyHandler.registerActions([              ['focusSearchBox', this._onActionFocusSearchBox.bind(this)] @@ -69,7 +70,7 @@ class SearchDisplayController {          this._updateClipboardMonitorEnabled(); -        this._display.autoPlayAudioDelay = 0; +        this._displayAudio.autoPlayAudioDelay = 0;          this._display.queryParserVisible = true;          this._display.setHistorySettings({useBrowserHistory: true}); @@ -145,27 +146,27 @@ class SearchDisplayController {          this._setWanakanaEnabled(enableWanakana);      } -    _onContentUpdating({type, content, source}) { +    _onContentUpdateStart({type, query, content}) {          let animate = false;          let valid = false;          switch (type) {              case 'terms':              case 'kanji':                  animate = !!content.animate; -                valid = (typeof source === 'string' && source.length > 0); +                valid = (typeof query === 'string' && query.length > 0);                  this._display.blurElement(this._queryInput);                  break;              case 'clear':                  valid = false;                  animate = true; -                source = ''; +                query = '';                  break;          } -        if (typeof source !== 'string') { source = ''; } +        if (typeof query !== 'string') { query = ''; } -        if (this._queryInput.value !== source) { -            this._queryInput.value = source; +        if (this._queryInput.value !== query) { +            this._queryInput.value = query;              this._updateSearchHeight(true);          }          this._setIntroVisible(!valid, animate); diff --git a/ext/js/display/search-main.js b/ext/js/display/search-main.js index 7d39b3b7..a6479c86 100644 --- a/ext/js/display/search-main.js +++ b/ext/js/display/search-main.js @@ -17,6 +17,8 @@  /* global   * Display + * DisplayAnki + * DisplayAudio   * DocumentFocusController   * HotkeyHandler   * JapaneseUtil @@ -49,7 +51,13 @@          const display = new Display(tabId, frameId, 'search', japaneseUtil, documentFocusController, hotkeyHandler);          await display.prepare(); -        const searchDisplayController = new SearchDisplayController(tabId, frameId, display, japaneseUtil, searchPersistentStateController); +        const displayAudio = new DisplayAudio(display); +        displayAudio.prepare(); + +        const displayAnki = new DisplayAnki(display, displayAudio, japaneseUtil); +        displayAnki.prepare(); + +        const searchDisplayController = new SearchDisplayController(tabId, frameId, display, displayAudio, japaneseUtil, searchPersistentStateController);          await searchDisplayController.prepare();          display.initializeState(); |