add profile switching between matching profiles

FooSoft · Mar 5, 2020 · c7d0df4 · c7d0df4
1 parent f41326a
commit c7d0df4
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 15 deletions.
diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
@@ -269,17 +269,21 @@ class DisplaySearch extends Display {
         }
     }
 
-    async updateOptions() {
-        await super.updateOptions();
-        this.queryParser.setOptions(this.profileSwitcher);
-
+    onProfileChanged(profileIndex) {
+        super.onProfileChanged(profileIndex);
         const query = this.query.value;
         if (query) {
             this.setQuery(query);
             this.onSearchQueryUpdated(query, false);
         }
     }
 
+    async updateOptions() {
+        await super.updateOptions();
+        this.queryParser.setOptions(this.profileSwitcher);
+        this.onProfileChanged(0);
+    }
+
     isWanakanaEnabled() {
         return this.wanakanaEnable !== null && this.wanakanaEnable.checked;
     }

diff --git a/ext/bg/search.html b/ext/bg/search.html
@@ -59,6 +59,8 @@ <h1>Yomichan Search</h1>
                 <button class="action-button action-next"><img src="/mixed/img/source-term.svg" class="icon-image" title="Next term (Alt + F)" alt></button>
             </div></div><div class="navigation-header-spacer"></div>
 
+            <div id="profile-select"></div>
+
             <div id="content"></div>
 
             <div id="no-results" hidden>

diff --git a/ext/fg/float.html b/ext/fg/float.html
@@ -22,6 +22,8 @@
             <button class="action-button action-next"><img src="/mixed/img/source-term.svg" class="icon-image" title="Next term (Alt + F)" alt></button>
         </div></div><div class="navigation-header-spacer"></div>
 
+        <div id="profile-select"></div>
+
         <div id="definitions"></div>
 
         <div id="no-results" hidden>

diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
@@ -118,6 +118,11 @@ class DisplayFloat extends Display {
         }
     }
 
+    onProfileChanged(profileIndex) {
+        super.onProfileChanged(profileIndex);
+        apiForward('profileChanged', {profileIndex, targetPopupId: this._popupId});
+    }
+
     async getMessageToken() {
         // this._messageTokenPromise is used to ensure that only one call to apiGetMessageToken is made.
         if (this._messageTokenPromise === null) {
@@ -142,6 +147,10 @@ class DisplayFloat extends Display {
         handler(params);
     }
 
+    async updateOptions() {
+        await super.updateOptions();
+    }
+
     autoPlayAudio() {
         this.clearAutoPlayTimer();
         this.autoPlayAudioTimer = window.setTimeout(() => super.autoPlayAudio(), 400);

diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
@@ -46,7 +46,8 @@ class Frontend extends TextScanner {
         ]);
 
         this._runtimeMessageHandlers = new Map([
-            ['popupSetVisibleOverride', ({visible}) => { this.popup.setVisibleOverride(visible); }]
+            ['popupSetVisibleOverride', ({visible}) => { this.popup.setVisibleOverride(visible); }],
+            ['profileChanged', ({profileIndex}) => { this.onProfileChanged(profileIndex); }]
         ]);
     }
 
@@ -127,6 +128,11 @@ class Frontend extends TextScanner {
         this.optionsContext.url = this.popup.url;
         const profileSwitcher = new ProfileSwitcher(await apiProfilesGetMatching(this.optionsContext));
         this.setOptions(profileSwitcher);
+        await this.onProfileChanged(0);
+    }
+
+    async onProfileChanged(profileIndex) {
+        this.profileSwitcher.setIndex(profileIndex);
         await this.popup.setOptions(this.profileSwitcher.options);
         this._updateContentScale();
         if (this.textSourceCurrent !== null && this.causeCurrent !== null) {
@@ -213,7 +219,7 @@ class Frontend extends TextScanner {
 
     getOptionsContext() {
         return {
-            id: this.profileSwitcher.globalProfileIndex
+            index: this.profileSwitcher.globalProfileIndex
         };
     }
 

diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
@@ -277,6 +277,23 @@ class DisplayGenerator {
         return node;
     }
 
+    createProfileSelect(profiles, currentProfileIndex) {
+        const select = document.createElement('select');
+
+        let profileIndex = 0;
+        for (const profile of profiles) {
+            const option = document.createElement('option');
+            option.textContent = profile.name;
+            option.value = profileIndex;
+            select.appendChild(option);
+            ++profileIndex;
+        }
+
+        select.selectedIndex = currentProfileIndex;
+
+        return select;
+    }
+
     _appendKanjiLinks(container, text) {
         let part = '';
         for (const c of text) {

diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
@@ -155,9 +155,8 @@ class Display {
 
     async prepare() {
         await yomichan.prepare();
-        const displayGeneratorPromise = this.displayGenerator.prepare();
-        const updateOptionsPromise = this.updateOptions();
-        await Promise.all([displayGeneratorPromise, updateOptionsPromise]);
+        await this.displayGenerator.prepare();
+        await this.updateOptions();
         yomichan.on('optionsUpdated', () => this.updateOptions());
     }
 
@@ -356,21 +355,33 @@ class Display {
         }
     }
 
-    getOptionsContext() {
-        return {
-            id: this.profileSwitcher.globalProfileIndex
-        };
+    onProfileSelect(e) {
+        const select = e.target;
+        const profileIndex = select.value;
+        this.onProfileChanged(profileIndex);
     }
 
-    async updateOptions() {
-        this.profileSwitcher = new ProfileSwitcher(await apiProfilesGetMatching(this.optionsContext));
+    onProfileChanged(profileIndex) {
+        this.profileSwitcher.setIndex(profileIndex);
         const options = this.profileSwitcher.options;
         this.updateDocumentOptions(options);
         this.updateTheme(options.general.popupTheme);
         this.setCustomCss(options.general.customPopupCss);
         audioPrepareTextToSpeech(options);
     }
 
+    getOptionsContext() {
+        return {
+            index: this.profileSwitcher.globalProfileIndex
+        };
+    }
+
+    async updateOptions() {
+        this.profileSwitcher = new ProfileSwitcher(await apiProfilesGetMatching(this.optionsContext));
+        this.onProfileChanged(0);
+        this.renderProfileSelect(this.profileSwitcher.getProfiles());
+    }
+
     updateDocumentOptions(options) {
         const data = document.documentElement.dataset;
         data.ankiEnabled = `${options.anki.enable}`;
@@ -404,6 +415,15 @@ class Display {
         }
     }
 
+    renderProfileSelect(profiles) {
+        const profileSelectContainer = document.querySelector('#profile-select');
+        profileSelectContainer.textContent = '';
+        if (profiles.length <= 1) { return; }
+        const profileSelect = this.displayGenerator.createProfileSelect(profiles, this.profileIndex);
+        profileSelect.addEventListener('change', this.onProfileSelect.bind(this));
+        profileSelectContainer.appendChild(profileSelect);
+    }
+
     setInteractive(interactive) {
         interactive = !!interactive;
         if (this.interactive === interactive) { return; }