aboutsummaryrefslogtreecommitdiff
path: root/ext/js/display/display-profile-selection.js
diff options
context:
space:
mode:
Diffstat (limited to 'ext/js/display/display-profile-selection.js')
-rw-r--r--ext/js/display/display-profile-selection.js50
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);
}
}