Display profile panel (#1178)

* Expose Display.displayGenerator

* Update search when assigning options context

* Don't clear selection unless the popup changes

* Merge search styles

* Create panel for changing the profile

3 files changed, 114 insertions, 0 deletions

diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index 1ccd5941..d25b7def 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -121,6 +121,10 @@ class DisplayGenerator {
         return this._templates.instantiate('footer-notification');
     }
 
+    createProfileListItem() {
+        return this._templates.instantiate('profile-list-item');
+    }
+
     // Private
 
     _createTermExpression(details) {
diff --git a/ext/mixed/js/display-profile-selection.js b/ext/mixed/js/display-profile-selection.js
new file mode 100644
index 00000000..b66099ff
--- /dev/null
+++ b/ext/mixed/js/display-profile-selection.js
@@ -0,0 +1,105 @@
+/*
+ * Copyright (C) 2020  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/>.
+ */
+
+/* global
+ * PanelElement
+ * api
+ */
+
+class DisplayProfileSelection {
+    constructor(display) {
+        this._display = display;
+        this._profielList = document.querySelector('#profile-list');
+        this._profileButton = document.querySelector('#profile-button');
+        this._profilePanel = new PanelElement({
+            node: document.querySelector('#profile-panel'),
+            closingAnimationDuration: 375 // Milliseconds; includes buffer
+        });
+        this._profileListNeedsUpdate = false;
+        this._eventListeners = new EventListenerCollection();
+        this._source = generateId(16);
+    }
+
+    async prepare() {
+        yomichan.on('optionsUpdated', this._onOptionsUpdated.bind(this));
+        this._profileButton.addEventListener('click', this._onProfileButtonClick.bind(this), false);
+        this._profileListNeedsUpdate = true;
+    }
+
+    // Private
+
+    _onOptionsUpdated({source}) {
+        if (source === this._source) { return; }
+        this._profileListNeedsUpdate = true;
+        if (this._profilePanel.isVisible()) {
+            this._updateProfileList();
+        }
+    }
+
+    _onProfileButtonClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._setProfilePanelVisible(!this._profilePanel.isVisible());
+    }
+
+    _setProfilePanelVisible(visible) {
+        this._profilePanel.setVisible(visible);
+        this._profileButton.classList.toggle('sidebar-button-highlight', visible);
+        if (visible && this._profileListNeedsUpdate) {
+            this._updateProfileList();
+        }
+    }
+
+    async _updateProfileList() {
+        this._profileListNeedsUpdate = false;
+        const options = await api.optionsGetFull();
+
+        this._eventListeners.removeAllEventListeners();
+        const displayGenerator = this._display.displayGenerator;
+
+        const {profileCurrent, profiles} = options;
+        const fragment = document.createDocumentFragment();
+        for (let i = 0, ii = profiles.length; i < ii; ++i) {
+            const {name} = profiles[i];
+            const entry = displayGenerator.createProfileListItem();
+            const radio = entry.querySelector('.profile-entry-is-default-radio');
+            radio.checked = (i === profileCurrent);
+            const nameNode = entry.querySelector('.profile-list-item-name');
+            nameNode.textContent = name;
+            fragment.appendChild(entry);
+            this._eventListeners.addEventListener(radio, 'change', this._onProfileRadioChange.bind(this, i), false);
+        }
+        this._profielList.textContent = '';
+        this._profielList.appendChild(fragment);
+    }
+
+    _onProfileRadioChange(index, e) {
+        if (e.currentTarget.checked) {
+            this._setProfileCurrent(index);
+        }
+    }
+
+    async _setProfileCurrent(index) {
+        await api.modifySettings([{
+            action: 'set',
+            path: 'profileCurrent',
+            value: index,
+            scope: 'global'
+        }], this._source);
+        this._setProfilePanelVisible(false);
+    }
+}
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index b9ea3802..c0d84dce 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -170,6 +170,10 @@ class Display extends EventDispatcher {
         ]);
     }
 
+    get displayGenerator() {
+        return this._displayGenerator;
+    }
+
     get autoPlayAudioDelay() {
         return this._autoPlayAudioDelay;
     }
@@ -523,6 +527,7 @@ class Display extends EventDispatcher {
 
     _onMessageSetOptionsContext({optionsContext}) {
         this.setOptionsContext(optionsContext);
+        this.searchLast();
     }
 
     _onMessageSetContent({details}) {