diff options
Diffstat (limited to 'ext/js/display/display-profile-selection.js')
-rw-r--r-- | ext/js/display/display-profile-selection.js | 50 |
1 files changed, 41 insertions, 9 deletions
diff --git a/ext/js/display/display-profile-selection.js b/ext/js/display/display-profile-selection.js index d8b7185c..c5cb7d06 100644 --- a/ext/js/display/display-profile-selection.js +++ b/ext/js/display/display-profile-selection.js @@ -21,19 +21,30 @@ import {PanelElement} from '../dom/panel-element.js'; import {yomitan} from '../yomitan.js'; export class DisplayProfileSelection { + /** + * @param {import('./display.js').Display} display + */ constructor(display) { + /** @type {import('./display.js').Display} */ this._display = display; - this._profielList = document.querySelector('#profile-list'); - this._profileButton = document.querySelector('#profile-button'); + /** @type {HTMLElement} */ + this._profielList = /** @type {HTMLElement} */ (document.querySelector('#profile-list')); + /** @type {HTMLButtonElement} */ + this._profileButton = /** @type {HTMLButtonElement} */ (document.querySelector('#profile-button')); + /** @type {PanelElement} */ this._profilePanel = new PanelElement({ - node: document.querySelector('#profile-panel'), + node: /** @type {HTMLElement} */ (document.querySelector('#profile-panel')), closingAnimationDuration: 375 // Milliseconds; includes buffer }); + /** @type {boolean} */ this._profileListNeedsUpdate = false; + /** @type {EventListenerCollection} */ this._eventListeners = new EventListenerCollection(); + /** @type {string} */ this._source = generateId(16); } + /** */ async prepare() { yomitan.on('optionsUpdated', this._onOptionsUpdated.bind(this)); this._profileButton.addEventListener('click', this._onProfileButtonClick.bind(this), false); @@ -42,6 +53,9 @@ export class DisplayProfileSelection { // Private + /** + * @param {{source: string}} details + */ _onOptionsUpdated({source}) { if (source === this._source) { return; } this._profileListNeedsUpdate = true; @@ -50,12 +64,18 @@ export class DisplayProfileSelection { } } + /** + * @param {MouseEvent} e + */ _onProfileButtonClick(e) { e.preventDefault(); e.stopPropagation(); this._setProfilePanelVisible(!this._profilePanel.isVisible()); } + /** + * @param {boolean} visible + */ _setProfilePanelVisible(visible) { this._profilePanel.setVisible(visible); this._profileButton.classList.toggle('sidebar-button-highlight', visible); @@ -65,6 +85,7 @@ export class DisplayProfileSelection { } } + /** */ async _updateProfileList() { this._profileListNeedsUpdate = false; const options = await yomitan.api.optionsGetFull(); @@ -77,9 +98,9 @@ export class DisplayProfileSelection { 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'); + const radio = /** @type {HTMLInputElement} */ (entry.querySelector('.profile-entry-is-default-radio')); radio.checked = (i === profileCurrent); - const nameNode = entry.querySelector('.profile-list-item-name'); + const nameNode = /** @type {Element} */ (entry.querySelector('.profile-list-item-name')); nameNode.textContent = name; fragment.appendChild(entry); this._eventListeners.addEventListener(radio, 'change', this._onProfileRadioChange.bind(this, i), false); @@ -88,19 +109,30 @@ export class DisplayProfileSelection { this._profielList.appendChild(fragment); } + /** + * @param {number} index + * @param {Event} e + */ _onProfileRadioChange(index, e) { - if (e.currentTarget.checked) { + const element = /** @type {HTMLInputElement} */ (e.currentTarget); + if (element.checked) { this._setProfileCurrent(index); } } + /** + * @param {number} index + */ async _setProfileCurrent(index) { - await yomitan.api.modifySettings([{ + /** @type {import('settings-modifications').ScopedModificationSet} */ + const modification = { action: 'set', path: 'profileCurrent', value: index, - scope: 'global' - }], this._source); + scope: 'global', + optionsContext: null + }; + await yomitan.api.modifySettings([modification], this._source); this._setProfilePanelVisible(false); } } |