Move mixed/js (#1383)

* Move mixed/js/core.js to js/core.js

* Move mixed/js/yomichan.js to js/yomichan.js

* Move mixed/js/timer.js to js/debug/timer.js

* Move mixed/js/hotkey-handler.js to js/input/hotkey-handler.js

* Move mixed/js/hotkey-help-controller.js to js/input/hotkey-help-controller.js

* Move mixed/js/hotkey-util.js to js/input/hotkey-util.js

* Move mixed/js/audio-system.js to js/input/audio-system.js

* Move mixed/js/media-loader.js to js/input/media-loader.js

* Move mixed/js/text-to-speech-audio.js to js/input/text-to-speech-audio.js

* Move mixed/js/comm.js to js/comm/cross-frame-api.js

* Move mixed/js/api.js to js/comm/api.js

* Move mixed/js/frame-client.js to js/comm/frame-client.js

* Move mixed/js/frame-endpoint.js to js/comm/frame-endpoint.js

* Move mixed/js/display.js to js/display/display.js

* Move mixed/js/display-audio.js to js/display/display-audio.js

* Move mixed/js/display-generator.js to js/display/display-generator.js

* Move mixed/js/display-history.js to js/display/display-history.js

* Move mixed/js/display-notification.js to js/display/display-notification.js

* Move mixed/js/display-profile-selection.js to js/display/display-profile-selection.js

* Move mixed/js/japanese.js to js/language/japanese-util.js

* Move mixed/js/dictionary-data-util.js to js/language/dictionary-data-util.js

* Move mixed/js/document-focus-controller.js to js/dom/document-focus-controller.js

* Move mixed/js/document-util.js to js/dom/document-util.js

* Move mixed/js/dom-data-binder.js to js/dom/dom-data-binder.js

* Move mixed/js/html-template-collection.js to js/dom/html-template-collection.js

* Move mixed/js/panel-element.js to js/dom/panel-element.js

* Move mixed/js/popup-menu.js to js/dom/popup-menu.js

* Move mixed/js/selector-observer.js to js/dom/selector-observer.js

* Move mixed/js/scroll.js to js/dom/window-scroll.js

* Move mixed/js/text-scanner.js to js/language/text-scanner.js

* Move mixed/js/cache-map.js to js/general/cache-map.js

* Move mixed/js/object-property-accessor.js to js/general/object-property-accessor.js

* Move mixed/js/task-accumulator.js to js/general/task-accumulator.js

* Move mixed/js/environment.js to js/background/environment.js

* Move mixed/js/dynamic-loader.js to js/scripting/dynamic-loader.js

* Move mixed/js/dynamic-loader-sentinel.js to js/scripting/dynamic-loader-sentinel.js

1 files changed, 106 insertions, 0 deletions

diff --git a/ext/js/display/display-profile-selection.js b/ext/js/display/display-profile-selection.js
new file mode 100644
index 00000000..0a44392e
--- /dev/null
+++ b/ext/js/display/display-profile-selection.js
@@ -0,0 +1,106 @@
+/*
+ * Copyright (C) 2020-2021  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);
+        document.documentElement.dataset.profilePanelVisible = `${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);
+    }
+}