diff options
Diffstat (limited to 'ext/js/pages')
34 files changed, 8255 insertions, 0 deletions
diff --git a/ext/js/pages/settings/anki-controller.js b/ext/js/pages/settings/anki-controller.js new file mode 100644 index 00000000..26cab68f --- /dev/null +++ b/ext/js/pages/settings/anki-controller.js @@ -0,0 +1,729 @@ +/* + * Copyright (C) 2019-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 + * AnkiConnect + * AnkiNoteBuilder + * ObjectPropertyAccessor + * SelectorObserver + */ + +class AnkiController { + constructor(settingsController) { + this._settingsController = settingsController; + this._ankiConnect = new AnkiConnect(); + this._ankiNoteBuilder = new AnkiNoteBuilder(false); + this._selectorObserver = new SelectorObserver({ + selector: '.anki-card', + ignoreSelector: null, + onAdded: this._createCardController.bind(this), + onRemoved: this._removeCardController.bind(this), + isStale: this._isCardControllerStale.bind(this) + }); + this._stringComparer = new Intl.Collator(); // Locale does not matter + this._getAnkiDataPromise = null; + this._ankiErrorContainer = null; + this._ankiErrorMessageNode = null; + this._ankiErrorMessageNodeDefaultContent = ''; + this._ankiErrorMessageDetailsNode = null; + this._ankiErrorMessageDetailsContainer = null; + this._ankiErrorMessageDetailsToggle = null; + this._ankiErrorInvalidResponseInfo = null; + this._ankiCardPrimary = null; + this._ankiCardPrimaryType = null; + this._validateFieldsToken = null; + } + + get settingsController() { + return this._settingsController; + } + + async prepare() { + this._ankiErrorContainer = document.querySelector('#anki-error'); + this._ankiErrorMessageNode = document.querySelector('#anki-error-message'); + this._ankiErrorMessageNodeDefaultContent = this._ankiErrorMessageNode.textContent; + this._ankiErrorMessageDetailsNode = document.querySelector('#anki-error-message-details'); + this._ankiErrorMessageDetailsContainer = document.querySelector('#anki-error-message-details-container'); + this._ankiErrorMessageDetailsToggle = document.querySelector('#anki-error-message-details-toggle'); + this._ankiErrorInvalidResponseInfo = document.querySelector('#anki-error-invalid-response-info'); + this._ankiEnableCheckbox = document.querySelector('[data-setting="anki.enable"]'); + this._ankiCardPrimary = document.querySelector('#anki-card-primary'); + this._ankiCardPrimaryType = document.querySelector('#anki-card-primary-type'); + + this._setupFieldMenus(); + + this._ankiErrorMessageDetailsToggle.addEventListener('click', this._onAnkiErrorMessageDetailsToggleClick.bind(this), false); + if (this._ankiEnableCheckbox !== null) { this._ankiEnableCheckbox.addEventListener('settingChanged', this._onAnkiEnableChanged.bind(this), false); } + if (this._ankiCardPrimaryType !== null) { this._ankiCardPrimaryType.addEventListener('change', this._onAnkiCardPrimaryTypeChange.bind(this), false); } + + const options = await this._settingsController.getOptions(); + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + this._onOptionsChanged({options}); + } + + getFieldMarkers(type) { + switch (type) { + case 'terms': + return [ + 'audio', + 'clipboard-image', + 'clipboard-text', + 'cloze-body', + 'cloze-prefix', + 'cloze-suffix', + 'conjugation', + 'dictionary', + 'document-title', + 'expression', + 'frequencies', + 'furigana', + 'furigana-plain', + 'glossary', + 'glossary-brief', + 'glossary-no-dictionary', + 'pitch-accents', + 'pitch-accent-graphs', + 'pitch-accent-positions', + 'reading', + 'screenshot', + 'sentence', + 'tags', + 'url' + ]; + case 'kanji': + return [ + 'character', + 'clipboard-image', + 'clipboard-text', + 'cloze-body', + 'cloze-prefix', + 'cloze-suffix', + 'dictionary', + 'document-title', + 'glossary', + 'kunyomi', + 'onyomi', + 'screenshot', + 'sentence', + 'stroke-count', + 'tags', + 'url' + ]; + default: + return []; + } + } + + getFieldMarkersHtml(markers) { + const fragment = document.createDocumentFragment(); + for (const marker of markers) { + const markerNode = this._settingsController.instantiateTemplate('anki-card-field-marker'); + markerNode.querySelector('.marker-link').textContent = marker; + fragment.appendChild(markerNode); + } + return fragment; + } + + async getAnkiData() { + let promise = this._getAnkiDataPromise; + if (promise === null) { + promise = this._getAnkiData(); + this._getAnkiDataPromise = promise; + promise.finally(() => { this._getAnkiDataPromise = null; }); + } + return promise; + } + + async getModelFieldNames(model) { + return await this._ankiConnect.getModelFieldNames(model); + } + + getRequiredPermissions(fieldValue) { + return this._settingsController.permissionsUtil.getRequiredPermissionsForAnkiFieldValue(fieldValue); + } + + containsAnyMarker(field) { + return this._ankiNoteBuilder.containsAnyMarker(field); + } + + // Private + + async _onOptionsChanged({options: {anki}}) { + this._ankiConnect.server = anki.server; + this._ankiConnect.enabled = anki.enable; + + this._selectorObserver.disconnect(); + this._selectorObserver.observe(document.documentElement, true); + } + + _onAnkiErrorMessageDetailsToggleClick() { + const node = this._ankiErrorMessageDetailsContainer; + node.hidden = !node.hidden; + } + + _onAnkiEnableChanged({detail: {value}}) { + if (this._ankiConnect.server === null) { return; } + this._ankiConnect.enabled = value; + + for (const cardController of this._selectorObserver.datas()) { + cardController.updateAnkiState(); + } + } + + _onAnkiCardPrimaryTypeChange(e) { + if (this._ankiCardPrimary === null) { return; } + const node = e.currentTarget; + let ankiCardMenu; + if (node.selectedIndex >= 0) { + const option = node.options[node.selectedIndex]; + ankiCardMenu = option.dataset.ankiCardMenu; + } + + this._ankiCardPrimary.dataset.ankiCardType = node.value; + if (typeof ankiCardMenu !== 'undefined') { + this._ankiCardPrimary.dataset.ankiCardMenu = ankiCardMenu; + } else { + delete this._ankiCardPrimary.dataset.ankiCardMenu; + } + } + + _createCardController(node) { + const cardController = new AnkiCardController(this._settingsController, this, node); + cardController.prepare(); + return cardController; + } + + _removeCardController(node, cardController) { + cardController.cleanup(); + } + + _isCardControllerStale(node, cardController) { + return cardController.isStale(); + } + + _setupFieldMenus() { + const fieldMenuTargets = [ + [['terms'], '#anki-card-terms-field-menu-template'], + [['kanji'], '#anki-card-kanji-field-menu-template'], + [['terms', 'kanji'], '#anki-card-all-field-menu-template'] + ]; + for (const [types, selector] of fieldMenuTargets) { + const element = document.querySelector(selector); + if (element === null) { continue; } + + let markers = []; + for (const type of types) { + markers.push(...this.getFieldMarkers(type)); + } + markers = [...new Set(markers)]; + + const container = element.content.querySelector('.popup-menu-body'); + if (container === null) { return; } + + const fragment = document.createDocumentFragment(); + for (const marker of markers) { + const option = document.createElement('button'); + option.textContent = marker; + option.className = 'popup-menu-item'; + option.dataset.menuAction = 'setFieldMarker'; + option.dataset.marker = marker; + fragment.appendChild(option); + } + container.appendChild(fragment); + } + } + + async _getAnkiData() { + this._setAnkiStatusChanging(); + const [ + [deckNames, error1], + [modelNames, error2] + ] = await Promise.all([ + this._getDeckNames(), + this._getModelNames() + ]); + + if (error1 !== null) { + this._showAnkiError(error1); + } else if (error2 !== null) { + this._showAnkiError(error2); + } else { + this._hideAnkiError(); + } + + return {deckNames, modelNames}; + } + + async _getDeckNames() { + try { + const result = await this._ankiConnect.getDeckNames(); + this._sortStringArray(result); + return [result, null]; + } catch (e) { + return [[], e]; + } + } + + async _getModelNames() { + try { + const result = await this._ankiConnect.getModelNames(); + this._sortStringArray(result); + return [result, null]; + } catch (e) { + return [[], e]; + } + } + + _setAnkiStatusChanging() { + this._ankiErrorMessageNode.textContent = this._ankiErrorMessageNodeDefaultContent; + this._ankiErrorMessageNode.classList.remove('danger-text'); + } + + _hideAnkiError() { + if (this._ankiErrorContainer !== null) { + this._ankiErrorContainer.hidden = true; + } + this._ankiErrorMessageDetailsContainer.hidden = true; + this._ankiErrorMessageDetailsToggle.hidden = true; + this._ankiErrorInvalidResponseInfo.hidden = true; + this._ankiErrorMessageNode.textContent = (this._ankiConnect.enabled ? 'Connected' : 'Not enabled'); + this._ankiErrorMessageNode.classList.remove('danger-text'); + this._ankiErrorMessageDetailsNode.textContent = ''; + } + + _showAnkiError(error) { + let errorString = typeof error === 'object' && error !== null ? error.message : null; + if (!errorString) { errorString = `${error}`; } + if (!/[.!?]$/.test(errorString)) { errorString += '.'; } + this._ankiErrorMessageNode.textContent = errorString; + this._ankiErrorMessageNode.classList.add('danger-text'); + + const data = error.data; + let details = ''; + if (typeof data !== 'undefined') { + details += `${JSON.stringify(data, null, 4)}\n\n`; + } + details += `${error.stack}`.trimRight(); + this._ankiErrorMessageDetailsNode.textContent = details; + + if (this._ankiErrorContainer !== null) { + this._ankiErrorContainer.hidden = false; + } + this._ankiErrorMessageDetailsContainer.hidden = true; + this._ankiErrorInvalidResponseInfo.hidden = (errorString.indexOf('Invalid response') < 0); + this._ankiErrorMessageDetailsToggle.hidden = false; + } + + _sortStringArray(array) { + const stringComparer = this._stringComparer; + array.sort((a, b) => stringComparer.compare(a, b)); + } +} + +class AnkiCardController { + constructor(settingsController, ankiController, node) { + this._settingsController = settingsController; + this._ankiController = ankiController; + this._node = node; + this._cardType = node.dataset.ankiCardType; + this._cardMenu = node.dataset.ankiCardMenu; + this._eventListeners = new EventListenerCollection(); + this._fieldEventListeners = new EventListenerCollection(); + this._deck = null; + this._model = null; + this._fields = null; + this._modelChangingTo = null; + this._ankiCardDeckSelect = null; + this._ankiCardModelSelect = null; + this._ankiCardFieldsContainer = null; + this._cleaned = false; + this._fieldEntries = []; + } + + async prepare() { + const options = await this._settingsController.getOptions(); + const ankiOptions = options.anki; + if (this._cleaned) { return; } + + const cardOptions = this._getCardOptions(ankiOptions, this._cardType); + if (cardOptions === null) { return; } + const {deck, model, fields} = cardOptions; + this._deck = deck; + this._model = model; + this._fields = fields; + + this._ankiCardDeckSelect = this._node.querySelector('.anki-card-deck'); + this._ankiCardModelSelect = this._node.querySelector('.anki-card-model'); + this._ankiCardFieldsContainer = this._node.querySelector('.anki-card-fields'); + + this._setupSelects([], []); + this._setupFields(); + + this._eventListeners.addEventListener(this._ankiCardDeckSelect, 'change', this._onCardDeckChange.bind(this), false); + this._eventListeners.addEventListener(this._ankiCardModelSelect, 'change', this._onCardModelChange.bind(this), false); + this._eventListeners.on(this._settingsController, 'permissionsChanged', this._onPermissionsChanged.bind(this)); + + await this.updateAnkiState(); + } + + cleanup() { + this._cleaned = true; + this._fieldEntries = []; + this._eventListeners.removeAllEventListeners(); + } + + async updateAnkiState() { + if (this._fields === null) { return; } + const {deckNames, modelNames} = await this._ankiController.getAnkiData(); + if (this._cleaned) { return; } + this._setupSelects(deckNames, modelNames); + } + + isStale() { + return (this._cardType !== this._node.dataset.ankiCardType); + } + + // Private + + _onCardDeckChange(e) { + this._setDeck(e.currentTarget.value); + } + + _onCardModelChange(e) { + this._setModel(e.currentTarget.value); + } + + _onFieldChange(index, e) { + const node = e.currentTarget; + this._validateFieldPermissions(node, index, true); + this._validateField(node, index); + } + + _onFieldInput(index, e) { + const node = e.currentTarget; + this._validateField(node, index); + } + + _onFieldSettingChanged(index, e) { + const node = e.currentTarget; + this._validateFieldPermissions(node, index, false); + } + + _onFieldMenuClose({currentTarget: button, detail: {action, item}}) { + switch (action) { + case 'setFieldMarker': + this._setFieldMarker(button, item.dataset.marker); + break; + } + } + + _onFieldMarkerLinkClick(e) { + e.preventDefault(); + const link = e.currentTarget; + this._setFieldMarker(link, link.textContent); + } + + _validateField(node, index) { + let valid = (node.dataset.hasPermissions !== 'false'); + if (valid && index === 0 && !this._ankiController.containsAnyMarker(node.value)) { + valid = false; + } + node.dataset.invalid = `${!valid}`; + } + + _setFieldMarker(element, marker) { + const input = element.closest('.anki-card-field-value-container').querySelector('.anki-card-field-value'); + input.value = `{${marker}}`; + input.dispatchEvent(new Event('change')); + } + + _getCardOptions(ankiOptions, cardType) { + switch (cardType) { + case 'terms': return ankiOptions.terms; + case 'kanji': return ankiOptions.kanji; + default: return null; + } + } + + _setupSelects(deckNames, modelNames) { + const deck = this._deck; + const model = this._model; + if (!deckNames.includes(deck)) { deckNames = [...deckNames, deck]; } + if (!modelNames.includes(model)) { modelNames = [...modelNames, model]; } + + this._setSelectOptions(this._ankiCardDeckSelect, deckNames); + this._ankiCardDeckSelect.value = deck; + + this._setSelectOptions(this._ankiCardModelSelect, modelNames); + this._ankiCardModelSelect.value = model; + } + + _setSelectOptions(select, optionValues) { + const fragment = document.createDocumentFragment(); + for (const optionValue of optionValues) { + const option = document.createElement('option'); + option.value = optionValue; + option.textContent = optionValue; + fragment.appendChild(option); + } + select.textContent = ''; + select.appendChild(fragment); + } + + _setupFields() { + this._fieldEventListeners.removeAllEventListeners(); + + const markers = this._ankiController.getFieldMarkers(this._cardType); + const totalFragment = document.createDocumentFragment(); + this._fieldEntries = []; + let index = 0; + for (const [fieldName, fieldValue] of Object.entries(this._fields)) { + const content = this._settingsController.instantiateTemplateFragment('anki-card-field'); + + const fieldNameContainerNode = content.querySelector('.anki-card-field-name-container'); + fieldNameContainerNode.dataset.index = `${index}`; + const fieldNameNode = content.querySelector('.anki-card-field-name'); + fieldNameNode.textContent = fieldName; + + const valueContainer = content.querySelector('.anki-card-field-value-container'); + valueContainer.dataset.index = `${index}`; + + const inputField = content.querySelector('.anki-card-field-value'); + inputField.value = fieldValue; + inputField.dataset.setting = ObjectPropertyAccessor.getPathString(['anki', this._cardType, 'fields', fieldName]); + this._validateFieldPermissions(inputField, index, false); + + this._fieldEventListeners.addEventListener(inputField, 'change', this._onFieldChange.bind(this, index), false); + this._fieldEventListeners.addEventListener(inputField, 'input', this._onFieldInput.bind(this, index), false); + this._fieldEventListeners.addEventListener(inputField, 'settingChanged', this._onFieldSettingChanged.bind(this, index), false); + this._validateField(inputField, index); + + const markerList = content.querySelector('.anki-card-field-marker-list'); + if (markerList !== null) { + const markersFragment = this._ankiController.getFieldMarkersHtml(markers); + for (const element of markersFragment.querySelectorAll('.marker-link')) { + this._fieldEventListeners.addEventListener(element, 'click', this._onFieldMarkerLinkClick.bind(this), false); + } + markerList.appendChild(markersFragment); + } + + const menuButton = content.querySelector('.anki-card-field-value-menu-button'); + if (menuButton !== null) { + if (typeof this._cardMenu !== 'undefined') { + menuButton.dataset.menu = this._cardMenu; + } else { + delete menuButton.dataset.menu; + } + this._fieldEventListeners.addEventListener(menuButton, 'menuClose', this._onFieldMenuClose.bind(this), false); + } + + totalFragment.appendChild(content); + this._fieldEntries.push({fieldName, inputField, fieldNameContainerNode}); + + ++index; + } + + const ELEMENT_NODE = Node.ELEMENT_NODE; + const container = this._ankiCardFieldsContainer; + for (const node of [...container.childNodes]) { + if (node.nodeType === ELEMENT_NODE && node.dataset.persistent === 'true') { continue; } + container.removeChild(node); + } + container.appendChild(totalFragment); + + this._validateFields(); + } + + async _validateFields() { + const token = {}; + this._validateFieldsToken = token; + + let fieldNames; + try { + fieldNames = await this._ankiController.getModelFieldNames(this._model); + } catch (e) { + return; + } + + if (token !== this._validateFieldsToken) { return; } + + const fieldNamesSet = new Set(fieldNames); + let index = 0; + for (const {fieldName, fieldNameContainerNode} of this._fieldEntries) { + fieldNameContainerNode.dataset.invalid = `${!fieldNamesSet.has(fieldName)}`; + fieldNameContainerNode.dataset.orderMatches = `${index < fieldNames.length && fieldName === fieldNames[index]}`; + ++index; + } + } + + async _setDeck(value) { + if (this._deck === value) { return; } + this._deck = value; + + await this._settingsController.modifyProfileSettings([{ + action: 'set', + path: ObjectPropertyAccessor.getPathString(['anki', this._cardType, 'deck']), + value + }]); + } + + async _setModel(value) { + if (this._modelChangingTo !== null) { + // Revert + this._ankiCardModelSelect.value = this._modelChangingTo; + return; + } + if (this._model === value) { return; } + + let fieldNames; + let options; + try { + this._modelChangingTo = value; + fieldNames = await this._ankiController.getModelFieldNames(value); + options = await this._ankiController.settingsController.getOptions(); + } catch (e) { + // Revert + this._ankiCardModelSelect.value = this._model; + return; + } finally { + this._modelChangingTo = null; + } + + const cardType = this._cardType; + const cardOptions = this._getCardOptions(options.anki, cardType); + const oldFields = cardOptions !== null ? cardOptions.fields : null; + + const fields = {}; + for (let i = 0, ii = fieldNames.length; i < ii; ++i) { + const fieldName = fieldNames[i]; + fields[fieldName] = this._getDefaultFieldValue(fieldName, i, cardType, oldFields); + } + + const targets = [ + { + action: 'set', + path: ObjectPropertyAccessor.getPathString(['anki', this._cardType, 'model']), + value + }, + { + action: 'set', + path: ObjectPropertyAccessor.getPathString(['anki', this._cardType, 'fields']), + value: fields + } + ]; + + this._model = value; + this._fields = fields; + + await this._settingsController.modifyProfileSettings(targets); + + this._setupFields(); + } + + async _requestPermissions(permissions) { + try { + await this._settingsController.permissionsUtil.setPermissionsGranted({permissions}, true); + } catch (e) { + log.error(e); + } + } + + async _validateFieldPermissions(node, index, request) { + const fieldValue = node.value; + const permissions = this._ankiController.getRequiredPermissions(fieldValue); + if (permissions.length > 0) { + node.dataset.requiredPermission = permissions.join(' '); + const hasPermissions = await ( + request ? + this._settingsController.permissionsUtil.setPermissionsGranted({permissions}, true) : + this._settingsController.permissionsUtil.hasPermissions({permissions}) + ); + node.dataset.hasPermissions = `${hasPermissions}`; + } else { + delete node.dataset.requiredPermission; + delete node.dataset.hasPermissions; + } + + this._validateField(node, index); + } + + _onPermissionsChanged({permissions: {permissions}}) { + const permissionsSet = new Set(permissions); + for (let i = 0, ii = this._fieldEntries.length; i < ii; ++i) { + const {inputField} = this._fieldEntries[i]; + let {requiredPermission} = inputField.dataset; + if (typeof requiredPermission !== 'string') { continue; } + requiredPermission = (requiredPermission.length === 0 ? [] : requiredPermission.split(' ')); + + let hasPermissions = true; + for (const permission of requiredPermission) { + if (!permissionsSet.has(permission)) { + hasPermissions = false; + break; + } + } + + inputField.dataset.hasPermissions = `${hasPermissions}`; + this._validateField(inputField, i); + } + } + + _getDefaultFieldValue(fieldName, index, cardType, oldFields) { + if ( + typeof oldFields === 'object' && + oldFields !== null && + Object.prototype.hasOwnProperty.call(oldFields, fieldName) + ) { + return oldFields[fieldName]; + } + + if (index === 0) { + return (cardType === 'kanji' ? '{character}' : '{expression}'); + } + + const markers = this._ankiController.getFieldMarkers(cardType); + const markerAliases = new Map([ + ['glossary', ['definition', 'meaning']], + ['audio', ['sound']], + ['dictionary', ['dict']] + ]); + + const hyphenPattern = /-/g; + for (const marker of markers) { + const names = [marker]; + const aliases = markerAliases.get(marker); + if (typeof aliases !== 'undefined') { + names.push(...aliases); + } + + let pattern = '^(?:'; + for (let i = 0, ii = names.length; i < ii; ++i) { + const name = names[i]; + if (i > 0) { pattern += '|'; } + pattern += name.replace(hyphenPattern, '[-_ ]*'); + } + pattern += ')$'; + pattern = new RegExp(pattern, 'i'); + + if (pattern.test(fieldName)) { + return `{${marker}}`; + } + } + + return ''; + } +} diff --git a/ext/js/pages/settings/anki-templates-controller.js b/ext/js/pages/settings/anki-templates-controller.js new file mode 100644 index 00000000..8e3a1a70 --- /dev/null +++ b/ext/js/pages/settings/anki-templates-controller.js @@ -0,0 +1,227 @@ +/* + * Copyright (C) 2019-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 + * AnkiNoteBuilder + */ + +class AnkiTemplatesController { + constructor(settingsController, modalController, ankiController) { + this._settingsController = settingsController; + this._modalController = modalController; + this._ankiController = ankiController; + this._cachedDefinitionValue = null; + this._cachedDefinitionText = null; + this._defaultFieldTemplates = null; + this._fieldTemplatesTextarea = null; + this._compileResultInfo = null; + this._renderFieldInput = null; + this._renderResult = null; + this._fieldTemplateResetModal = null; + this._ankiNoteBuilder = new AnkiNoteBuilder(true); + } + + async prepare() { + this._defaultFieldTemplates = await yomichan.api.getDefaultAnkiFieldTemplates(); + + this._fieldTemplatesTextarea = document.querySelector('#anki-card-templates-textarea'); + this._compileResultInfo = document.querySelector('#anki-card-templates-compile-result'); + this._renderFieldInput = document.querySelector('#anki-card-templates-test-field-input'); + this._renderTextInput = document.querySelector('#anki-card-templates-test-text-input'); + this._renderResult = document.querySelector('#anki-card-templates-render-result'); + const menuButton = document.querySelector('#anki-card-templates-test-field-menu-button'); + const testRenderButton = document.querySelector('#anki-card-templates-test-render-button'); + const resetButton = document.querySelector('#anki-card-templates-reset-button'); + const resetConfirmButton = document.querySelector('#anki-card-templates-reset-button-confirm'); + const fieldList = document.querySelector('#anki-card-templates-field-list'); + this._fieldTemplateResetModal = this._modalController.getModal('anki-card-templates-reset'); + + const markers = new Set([ + ...this._ankiController.getFieldMarkers('terms'), + ...this._ankiController.getFieldMarkers('kanji') + ]); + + if (fieldList !== null) { + const fragment = this._ankiController.getFieldMarkersHtml(markers); + fieldList.appendChild(fragment); + for (const node of fieldList.querySelectorAll('.marker-link')) { + node.addEventListener('click', this._onMarkerClicked.bind(this), false); + } + } + + this._fieldTemplatesTextarea.addEventListener('change', this._onChanged.bind(this), false); + testRenderButton.addEventListener('click', this._onRender.bind(this), false); + resetButton.addEventListener('click', this._onReset.bind(this), false); + resetConfirmButton.addEventListener('click', this._onResetConfirm.bind(this), false); + if (menuButton !== null) { + menuButton.addEventListener('menuClose', this._onFieldMenuClose.bind(this), false); + } + + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + + const options = await this._settingsController.getOptions(); + this._onOptionsChanged({options}); + } + + // Private + + _onOptionsChanged({options}) { + let templates = options.anki.fieldTemplates; + if (typeof templates !== 'string') { templates = this._defaultFieldTemplates; } + this._fieldTemplatesTextarea.value = templates; + + this._onValidateCompile(); + } + + _onReset(e) { + e.preventDefault(); + this._fieldTemplateResetModal.setVisible(true); + } + + _onResetConfirm(e) { + e.preventDefault(); + + this._fieldTemplateResetModal.setVisible(false); + + const value = this._defaultFieldTemplates; + + this._fieldTemplatesTextarea.value = value; + this._fieldTemplatesTextarea.dispatchEvent(new Event('change')); + } + + async _onChanged(e) { + // Get value + let templates = e.currentTarget.value; + if (templates === this._defaultFieldTemplates) { + // Default + templates = null; + } + + // Overwrite + await this._settingsController.setProfileSetting('anki.fieldTemplates', templates); + + // Compile + this._onValidateCompile(); + } + + _onValidateCompile() { + this._validate(this._compileResultInfo, '{expression}', 'term-kanji', false, true); + } + + _onMarkerClicked(e) { + e.preventDefault(); + this._renderFieldInput.value = `{${e.target.textContent}}`; + } + + _onRender(e) { + e.preventDefault(); + + const field = this._renderFieldInput.value; + const infoNode = this._renderResult; + infoNode.hidden = true; + this._cachedDefinitionText = null; + this._validate(infoNode, field, 'term-kanji', true, false); + } + + _onFieldMenuClose({currentTarget: button, detail: {action, item}}) { + switch (action) { + case 'setFieldMarker': + this._setFieldMarker(button, item.dataset.marker); + break; + } + } + + _setFieldMarker(element, marker) { + const input = this._renderFieldInput; + input.value = `{${marker}}`; + input.dispatchEvent(new Event('change')); + } + + async _getDefinition(text, optionsContext) { + if (this._cachedDefinitionText !== text) { + const {definitions} = await yomichan.api.termsFind(text, {}, optionsContext); + if (definitions.length === 0) { return null; } + + this._cachedDefinitionValue = definitions[0]; + this._cachedDefinitionText = text; + } + return this._cachedDefinitionValue; + } + + async _validate(infoNode, field, mode, showSuccessResult, invalidateInput) { + const text = this._renderTextInput.value || ''; + const errors = []; + let result = `No definition found for ${text}`; + try { + const optionsContext = this._settingsController.getOptionsContext(); + const definition = await this._getDefinition(text, optionsContext); + if (definition !== null) { + const options = await this._settingsController.getOptions(); + const context = { + url: window.location.href, + sentence: {text: definition.rawSource, offset: 0}, + documentTitle: document.title + }; + let templates = options.anki.fieldTemplates; + if (typeof templates !== 'string') { templates = this._defaultFieldTemplates; } + const {general: {resultOutputMode, glossaryLayoutMode, compactTags}} = options; + const note = await this._ankiNoteBuilder.createNote({ + definition, + mode, + context, + templates, + deckName: '', + modelName: '', + fields: [ + ['field', field] + ], + resultOutputMode, + glossaryLayoutMode, + compactTags, + errors + }); + result = note.fields.field; + } + } catch (e) { + errors.push(e); + } + + const errorToMessageString = (e) => { + if (isObject(e)) { + let v = e.data; + if (isObject(v)) { + v = v.error; + if (isObject(v)) { + e = v; + } + } + + v = e.message; + if (typeof v === 'string') { return v; } + } + return `${e}`; + }; + + const hasError = errors.length > 0; + infoNode.hidden = !(showSuccessResult || hasError); + infoNode.textContent = hasError ? errors.map(errorToMessageString).join('\n') : (showSuccessResult ? result : ''); + infoNode.classList.toggle('text-danger', hasError); + if (invalidateInput) { + this._fieldTemplatesTextarea.dataset.invalid = `${hasError}`; + } + } +} diff --git a/ext/js/pages/settings/audio-controller.js b/ext/js/pages/settings/audio-controller.js new file mode 100644 index 00000000..e62383a8 --- /dev/null +++ b/ext/js/pages/settings/audio-controller.js @@ -0,0 +1,234 @@ +/* + * Copyright (C) 2019-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 + * AudioSystem + */ + +class AudioController { + constructor(settingsController) { + this._settingsController = settingsController; + this._audioSystem = new AudioSystem(); + this._audioSourceContainer = null; + this._audioSourceAddButton = null; + this._audioSourceEntries = []; + this._ttsVoiceTestTextInput = null; + } + + async prepare() { + this._audioSystem.prepare(); + + this._ttsVoiceTestTextInput = document.querySelector('#text-to-speech-voice-test-text'); + this._audioSourceContainer = document.querySelector('#audio-source-list'); + this._audioSourceAddButton = document.querySelector('#audio-source-add'); + this._audioSourceContainer.textContent = ''; + + this._audioSourceAddButton.addEventListener('click', this._onAddAudioSource.bind(this), false); + + if (typeof speechSynthesis !== 'undefined') { + speechSynthesis.addEventListener('voiceschanged', this._updateTextToSpeechVoices.bind(this), false); + } + this._updateTextToSpeechVoices(); + + document.querySelector('#text-to-speech-voice-test').addEventListener('click', this._onTestTextToSpeech.bind(this), false); + + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + + const options = await this._settingsController.getOptions(); + this._onOptionsChanged({options}); + } + + // Private + + _onOptionsChanged({options}) { + for (let i = this._audioSourceEntries.length - 1; i >= 0; --i) { + this._cleanupAudioSourceEntry(i); + } + + for (const audioSource of options.audio.sources) { + this._createAudioSourceEntry(audioSource); + } + } + + _onTestTextToSpeech() { + try { + const text = this._ttsVoiceTestTextInput.value || ''; + const voiceUri = document.querySelector('[data-setting="audio.textToSpeechVoice"]').value; + + const audio = this._audioSystem.createTextToSpeechAudio(text, voiceUri); + audio.volume = 1.0; + audio.play(); + } catch (e) { + // NOP + } + } + + _updateTextToSpeechVoices() { + const voices = ( + typeof speechSynthesis !== 'undefined' ? + [...speechSynthesis.getVoices()].map((voice, index) => ({ + voice, + isJapanese: this._languageTagIsJapanese(voice.lang), + index + })) : + [] + ); + voices.sort(this._textToSpeechVoiceCompare.bind(this)); + + for (const select of document.querySelectorAll('[data-setting="audio.textToSpeechVoice"]')) { + const fragment = document.createDocumentFragment(); + + let option = document.createElement('option'); + option.value = ''; + option.textContent = 'None'; + fragment.appendChild(option); + + for (const {voice} of voices) { + option = document.createElement('option'); + option.value = voice.voiceURI; + option.textContent = `${voice.name} (${voice.lang})`; + fragment.appendChild(option); + } + + select.textContent = ''; + select.appendChild(fragment); + } + } + + _textToSpeechVoiceCompare(a, b) { + if (a.isJapanese) { + if (!b.isJapanese) { return -1; } + } else { + if (b.isJapanese) { return 1; } + } + + if (a.voice.default) { + if (!b.voice.default) { return -1; } + } else { + if (b.voice.default) { return 1; } + } + + return a.index - b.index; + } + + _languageTagIsJapanese(languageTag) { + return ( + languageTag.startsWith('ja_') || + languageTag.startsWith('ja-') || + languageTag.startsWith('jpn-') + ); + } + + _getUnusedAudioSource() { + const audioSourcesAvailable = [ + 'jpod101', + 'jpod101-alternate', + 'jisho', + 'custom' + ]; + for (const source of audioSourcesAvailable) { + if (!this._audioSourceEntries.some((metadata) => metadata.value === source)) { + return source; + } + } + return audioSourcesAvailable[0]; + } + + _createAudioSourceEntry(value) { + const eventListeners = new EventListenerCollection(); + const container = this._settingsController.instantiateTemplate('audio-source'); + const select = container.querySelector('.audio-source-select'); + const removeButton = container.querySelector('.audio-source-remove'); + const menuButton = container.querySelector('.audio-source-menu-button'); + + select.value = value; + + const entry = { + container, + eventListeners, + value + }; + + eventListeners.addEventListener(select, 'change', this._onAudioSourceSelectChange.bind(this, entry), false); + if (removeButton !== null) { + eventListeners.addEventListener(removeButton, 'click', this._onAudioSourceRemoveClicked.bind(this, entry), false); + } + if (menuButton !== null) { + eventListeners.addEventListener(menuButton, 'menuClose', this._onMenuClose.bind(this, entry), false); + } + + this._audioSourceContainer.appendChild(container); + this._audioSourceEntries.push(entry); + } + + async _removeAudioSourceEntry(entry) { + const index = this._audioSourceEntries.indexOf(entry); + if (index < 0) { return; } + + this._cleanupAudioSourceEntry(index); + await this._settingsController.modifyProfileSettings([{ + action: 'splice', + path: 'audio.sources', + start: index, + deleteCount: 1, + items: [] + }]); + } + + _cleanupAudioSourceEntry(index) { + const {container, eventListeners} = this._audioSourceEntries[index]; + if (container.parentNode !== null) { + container.parentNode.removeChild(container); + } + eventListeners.removeAllEventListeners(); + this._audioSourceEntries.splice(index, 1); + } + + async _onAddAudioSource() { + const audioSource = this._getUnusedAudioSource(); + const index = this._audioSourceEntries.length; + this._createAudioSourceEntry(audioSource); + await this._settingsController.modifyProfileSettings([{ + action: 'splice', + path: 'audio.sources', + start: index, + deleteCount: 0, + items: [audioSource] + }]); + } + + async _onAudioSourceSelectChange(entry, event) { + const index = this._audioSourceEntries.indexOf(entry); + if (index < 0) { return; } + + const value = event.currentTarget.value; + entry.value = value; + await this._settingsController.setProfileSetting(`audio.sources[${index}]`, value); + } + + _onAudioSourceRemoveClicked(entry) { + this._removeAudioSourceEntry(entry); + } + + _onMenuClose(entry, e) { + switch (e.detail.action) { + case 'remove': + this._removeAudioSourceEntry(entry); + break; + } + } +} diff --git a/ext/js/pages/settings/backup-controller.js b/ext/js/pages/settings/backup-controller.js new file mode 100644 index 00000000..649645d4 --- /dev/null +++ b/ext/js/pages/settings/backup-controller.js @@ -0,0 +1,418 @@ +/* + * Copyright (C) 2019-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. 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 + * DictionaryController + * OptionsUtil + */ + +class BackupController { + constructor(settingsController, modalController) { + this._settingsController = settingsController; + this._modalController = modalController; + this._settingsExportToken = null; + this._settingsExportRevoke = null; + this._currentVersion = 0; + this._settingsResetModal = null; + this._settingsImportErrorModal = null; + this._settingsImportWarningModal = null; + this._optionsUtil = null; + try { + this._optionsUtil = new OptionsUtil(); + } catch (e) { + // NOP + } + } + + async prepare() { + if (this._optionsUtil !== null) { + await this._optionsUtil.prepare(); + } + + if (this._modalController !== null) { + this._settingsResetModal = this._modalController.getModal('settings-reset'); + this._settingsImportErrorModal = this._modalController.getModal('settings-import-error'); + this._settingsImportWarningModal = this._modalController.getModal('settings-import-warning'); + } + + this._addNodeEventListener('#settings-export-button', 'click', this._onSettingsExportClick.bind(this), false); + this._addNodeEventListener('#settings-import-button', 'click', this._onSettingsImportClick.bind(this), false); + this._addNodeEventListener('#settings-import-file', 'change', this._onSettingsImportFileChange.bind(this), false); + this._addNodeEventListener('#settings-reset-button', 'click', this._onSettingsResetClick.bind(this), false); + this._addNodeEventListener('#settings-reset-confirm-button', 'click', this._onSettingsResetConfirmClick.bind(this), false); + } + + // Private + + _addNodeEventListener(selector, ...args) { + const node = document.querySelector(selector); + if (node === null) { return; } + + node.addEventListener(...args); + } + + _getSettingsExportDateString(date, dateSeparator, dateTimeSeparator, timeSeparator, resolution) { + const values = [ + date.getUTCFullYear().toString(), + dateSeparator, + (date.getUTCMonth() + 1).toString().padStart(2, '0'), + dateSeparator, + date.getUTCDate().toString().padStart(2, '0'), + dateTimeSeparator, + date.getUTCHours().toString().padStart(2, '0'), + timeSeparator, + date.getUTCMinutes().toString().padStart(2, '0'), + timeSeparator, + date.getUTCSeconds().toString().padStart(2, '0') + ]; + return values.slice(0, resolution * 2 - 1).join(''); + } + + async _getSettingsExportData(date) { + const optionsFull = await this._settingsController.getOptionsFull(); + const environment = await yomichan.api.getEnvironmentInfo(); + const fieldTemplatesDefault = await yomichan.api.getDefaultAnkiFieldTemplates(); + const permissions = await this._settingsController.permissionsUtil.getAllPermissions(); + + // Format options + for (const {options} of optionsFull.profiles) { + if (options.anki.fieldTemplates === fieldTemplatesDefault || !options.anki.fieldTemplates) { + options.anki.fieldTemplates = null; + } + } + + const data = { + version: this._currentVersion, + date: this._getSettingsExportDateString(date, '-', ' ', ':', 6), + url: chrome.runtime.getURL('/'), + manifest: chrome.runtime.getManifest(), + environment, + userAgent: navigator.userAgent, + permissions, + options: optionsFull + }; + + return data; + } + + _saveBlob(blob, fileName) { + if (typeof navigator === 'object' && typeof navigator.msSaveBlob === 'function') { + if (navigator.msSaveBlob(blob)) { + return; + } + } + + const blobUrl = URL.createObjectURL(blob); + + const a = document.createElement('a'); + a.href = blobUrl; + a.download = fileName; + a.rel = 'noopener'; + a.target = '_blank'; + + const revoke = () => { + URL.revokeObjectURL(blobUrl); + a.href = ''; + this._settingsExportRevoke = null; + }; + this._settingsExportRevoke = revoke; + + a.dispatchEvent(new MouseEvent('click')); + setTimeout(revoke, 60000); + } + + async _onSettingsExportClick() { + if (this._settingsExportRevoke !== null) { + this._settingsExportRevoke(); + this._settingsExportRevoke = null; + } + + const date = new Date(Date.now()); + + const token = {}; + this._settingsExportToken = token; + const data = await this._getSettingsExportData(date); + if (this._settingsExportToken !== token) { + // A new export has been started + return; + } + this._settingsExportToken = null; + + const fileName = `yomichan-settings-${this._getSettingsExportDateString(date, '-', '-', '-', 6)}.json`; + const blob = new Blob([JSON.stringify(data, null, 4)], {type: 'application/json'}); + this._saveBlob(blob, fileName); + } + + _readFileArrayBuffer(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => resolve(reader.result); + reader.onerror = () => reject(reader.error); + reader.readAsArrayBuffer(file); + }); + } + + // Importing + + async _settingsImportSetOptionsFull(optionsFull) { + await this._settingsController.setAllSettings(optionsFull); + } + + _showSettingsImportError(error) { + log.error(error); + document.querySelector('#settings-import-error-message').textContent = `${error}`; + this._settingsImportErrorModal.setVisible(true); + } + + async _showSettingsImportWarnings(warnings) { + const modal = this._settingsImportWarningModal; + const buttons = document.querySelectorAll('.settings-import-warning-import-button'); + const messageContainer = document.querySelector('#settings-import-warning-message'); + if (buttons.length === 0 || messageContainer === null) { + return {result: false}; + } + + // Set message + const fragment = document.createDocumentFragment(); + for (const warning of warnings) { + const node = document.createElement('li'); + node.textContent = `${warning}`; + fragment.appendChild(node); + } + messageContainer.textContent = ''; + messageContainer.appendChild(fragment); + + // Show modal + modal.setVisible(true); + + // Wait for modal to close + return new Promise((resolve) => { + const onButtonClick = (e) => { + e.preventDefault(); + complete({ + result: true, + sanitize: e.currentTarget.dataset.importSanitize === 'true' + }); + modal.setVisible(false); + }; + const onModalVisibilityChanged = ({visible}) => { + if (visible) { return; } + complete({result: false}); + }; + + let completed = false; + const complete = (result) => { + if (completed) { return; } + completed = true; + + modal.off('visibilityChanged', onModalVisibilityChanged); + for (const button of buttons) { + button.removeEventListener('click', onButtonClick, false); + } + + resolve(result); + }; + + // Hook events + modal.on('visibilityChanged', onModalVisibilityChanged); + for (const button of buttons) { + button.addEventListener('click', onButtonClick, false); + } + }); + } + + _isLocalhostUrl(urlString) { + try { + const url = new URL(urlString); + switch (url.hostname.toLowerCase()) { + case 'localhost': + case '127.0.0.1': + case '[::1]': + switch (url.protocol.toLowerCase()) { + case 'http:': + case 'https:': + return true; + } + break; + } + } catch (e) { + // NOP + } + return false; + } + + _settingsImportSanitizeProfileOptions(options, dryRun) { + const warnings = []; + + const anki = options.anki; + if (isObject(anki)) { + const fieldTemplates = anki.fieldTemplates; + if (typeof fieldTemplates === 'string') { + warnings.push('anki.fieldTemplates contains a non-default value'); + if (!dryRun) { + anki.fieldTemplates = null; + } + } + const server = anki.server; + if (typeof server === 'string' && server.length > 0 && !this._isLocalhostUrl(server)) { + warnings.push('anki.server uses a non-localhost URL'); + if (!dryRun) { + anki.server = 'http://127.0.0.1:8765'; + } + } + } + + const audio = options.audio; + if (isObject(audio)) { + const customSourceUrl = audio.customSourceUrl; + if (typeof customSourceUrl === 'string' && customSourceUrl.length > 0 && !this._isLocalhostUrl(customSourceUrl)) { + warnings.push('audio.customSourceUrl uses a non-localhost URL'); + if (!dryRun) { + audio.customSourceUrl = ''; + } + } + } + + return warnings; + } + + _settingsImportSanitizeOptions(optionsFull, dryRun) { + const warnings = new Set(); + + const profiles = optionsFull.profiles; + if (Array.isArray(profiles)) { + for (const profile of profiles) { + if (!isObject(profile)) { continue; } + const options = profile.options; + if (!isObject(options)) { continue; } + + const warnings2 = this._settingsImportSanitizeProfileOptions(options, dryRun); + for (const warning of warnings2) { + warnings.add(warning); + } + } + } + + return warnings; + } + + _utf8Decode(arrayBuffer) { + try { + return new TextDecoder('utf-8').decode(arrayBuffer); + } catch (e) { + const binaryString = String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)); + return decodeURIComponent(escape(binaryString)); + } + } + + async _importSettingsFile(file) { + const dataString = this._utf8Decode(await this._readFileArrayBuffer(file)); + const data = JSON.parse(dataString); + + // Type check + if (!isObject(data)) { + throw new Error(`Invalid data type: ${typeof data}`); + } + + // Version check + const version = data.version; + if (!( + typeof version === 'number' && + Number.isFinite(version) && + version === Math.floor(version) + )) { + throw new Error(`Invalid version: ${version}`); + } + + if (!( + version >= 0 && + version <= this._currentVersion + )) { + throw new Error(`Unsupported version: ${version}`); + } + + // Verify options exists + let optionsFull = data.options; + if (!isObject(optionsFull)) { + throw new Error(`Invalid options type: ${typeof optionsFull}`); + } + + // Upgrade options + optionsFull = await this._optionsUtil.update(optionsFull); + + // Check for warnings + const sanitizationWarnings = this._settingsImportSanitizeOptions(optionsFull, true); + + // Show sanitization warnings + if (sanitizationWarnings.size > 0) { + const {result, sanitize} = await this._showSettingsImportWarnings(sanitizationWarnings); + if (!result) { return; } + + if (sanitize !== false) { + this._settingsImportSanitizeOptions(optionsFull, false); + } + } + + // Assign options + await this._settingsImportSetOptionsFull(optionsFull); + } + + _onSettingsImportClick() { + document.querySelector('#settings-import-file').click(); + } + + async _onSettingsImportFileChange(e) { + const files = e.target.files; + if (files.length === 0) { return; } + + const file = files[0]; + e.target.value = null; + try { + await this._importSettingsFile(file); + } catch (error) { + this._showSettingsImportError(error); + } + } + + // Resetting + + _onSettingsResetClick() { + this._settingsResetModal.setVisible(true); + } + + async _onSettingsResetConfirmClick() { + this._settingsResetModal.setVisible(false); + + // Get default options + const optionsFull = this._optionsUtil.getDefault(); + + // Update dictionaries + const dictionaries = await this._settingsController.getDictionaryInfo(); + for (const {options: {dictionaries: optionsDictionaries}} of optionsFull.profiles) { + for (const {title} of dictionaries) { + optionsDictionaries[title] = DictionaryController.createDefaultDictionarySettings(); + } + } + + // Assign options + try { + await this._settingsImportSetOptionsFull(optionsFull); + } catch (e) { + log.error(e); + } + } +} diff --git a/ext/js/pages/settings/dictionary-controller.js b/ext/js/pages/settings/dictionary-controller.js new file mode 100644 index 00000000..e12017f2 --- /dev/null +++ b/ext/js/pages/settings/dictionary-controller.js @@ -0,0 +1,557 @@ +/* + * 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 + * DictionaryDatabase + * ObjectPropertyAccessor + */ + +class DictionaryEntry { + constructor(dictionaryController, node, dictionaryInfo) { + this._dictionaryController = dictionaryController; + this._node = node; + this._dictionaryInfo = dictionaryInfo; + this._eventListeners = new EventListenerCollection(); + this._detailsContainer = null; + this._hasDetails = false; + this._hasCounts = false; + } + + get node() { + return this._node; + } + + get dictionaryTitle() { + return this._dictionaryInfo.title; + } + + prepare() { + const node = this._node; + const {title, revision, prefixWildcardsSupported, version} = this._dictionaryInfo; + + this._detailsContainer = node.querySelector('.dictionary-details'); + + const enabledCheckbox = node.querySelector('.dictionary-enabled'); + const allowSecondarySearchesCheckbox = node.querySelector('.dictionary-allow-secondary-searches'); + const priorityInput = node.querySelector('.dictionary-priority'); + const deleteButton = node.querySelector('.dictionary-delete-button'); + const menuButton = node.querySelector('.dictionary-menu-button'); + const detailsTable = node.querySelector('.dictionary-details-table'); + const detailsToggleLink = node.querySelector('.dictionary-details-toggle-link'); + const outdatedContainer = node.querySelector('.dictionary-outdated-notification'); + const titleNode = node.querySelector('.dictionary-title'); + const versionNode = node.querySelector('.dictionary-version'); + const wildcardSupportedCheckbox = node.querySelector('.dictionary-prefix-wildcard-searches-supported'); + + const hasDetails = (detailsTable !== null && this._setupDetails(detailsTable)); + this._hasDetails = hasDetails; + + titleNode.textContent = title; + versionNode.textContent = `rev.${revision}`; + if (wildcardSupportedCheckbox !== null) { + wildcardSupportedCheckbox.checked = !!prefixWildcardsSupported; + } + if (outdatedContainer !== null) { + outdatedContainer.hidden = (version >= 3); + } + if (detailsToggleLink !== null) { + detailsToggleLink.hidden = !hasDetails; + } + if (enabledCheckbox !== null) { + enabledCheckbox.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'enabled']); + this._eventListeners.addEventListener(enabledCheckbox, 'settingChanged', this._onEnabledChanged.bind(this), false); + } + if (priorityInput !== null) { + priorityInput.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'priority']); + } + if (allowSecondarySearchesCheckbox !== null) { + allowSecondarySearchesCheckbox.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'allowSecondarySearches']); + } + if (deleteButton !== null) { + this._eventListeners.addEventListener(deleteButton, 'click', this._onDeleteButtonClicked.bind(this), false); + } + if (menuButton !== null) { + this._eventListeners.addEventListener(menuButton, 'menuOpen', this._onMenuOpen.bind(this), false); + this._eventListeners.addEventListener(menuButton, 'menuClose', this._onMenuClose.bind(this), false); + } + if (detailsToggleLink !== null && this._detailsContainer !== null) { + this._eventListeners.addEventListener(detailsToggleLink, 'click', this._onDetailsToggleLinkClicked.bind(this), false); + } + } + + cleanup() { + this._eventListeners.removeAllEventListeners(); + const node = this._node; + if (node.parentNode !== null) { + node.parentNode.removeChild(node); + } + } + + setCounts(counts) { + const node = this._node.querySelector('.dictionary-counts'); + node.textContent = JSON.stringify({info: this._dictionaryInfo, counts}, null, 4); + node.hidden = false; + this._hasCounts = true; + } + + // Private + + _onDeleteButtonClicked(e) { + e.preventDefault(); + this._delete(); + } + + _onMenuOpen(e) { + const bodyNode = e.detail.menu.bodyNode; + const showDetails = bodyNode.querySelector('.popup-menu-item[data-menu-action="showDetails"]'); + const hideDetails = bodyNode.querySelector('.popup-menu-item[data-menu-action="hideDetails"]'); + const hasDetails = (this._detailsContainer !== null); + const detailsVisible = (hasDetails && !this._detailsContainer.hidden); + if (showDetails !== null) { + showDetails.hidden = detailsVisible; + showDetails.disabled = !hasDetails; + } + if (hideDetails !== null) { + hideDetails.hidden = !detailsVisible; + hideDetails.disabled = !hasDetails; + } + } + + _onMenuClose(e) { + switch (e.detail.action) { + case 'delete': + this._delete(); + break; + case 'showDetails': + if (this._detailsContainer !== null) { this._detailsContainer.hidden = false; } + break; + case 'hideDetails': + if (this._detailsContainer !== null) { this._detailsContainer.hidden = true; } + break; + } + } + + _onDetailsToggleLinkClicked(e) { + e.preventDefault(); + this._detailsContainer.hidden = !this._detailsContainer.hidden; + } + + _onEnabledChanged(e) { + const {detail: {value}} = e; + this._node.dataset.enabled = `${value}`; + this._dictionaryController.updateDictionariesEnabled(); + } + + _setupDetails(detailsTable) { + const targets = [ + ['Author', 'author'], + ['URL', 'url'], + ['Description', 'description'], + ['Attribution', 'attribution'] + ]; + + const dictionaryInfo = this._dictionaryInfo; + const fragment = document.createDocumentFragment(); + let any = false; + for (const [label, key] of targets) { + const info = dictionaryInfo[key]; + if (typeof info !== 'string') { continue; } + + const details = this._dictionaryController.instantiateTemplate('dictionary-details-entry'); + details.dataset.type = key; + details.querySelector('.dictionary-details-entry-label').textContent = `${label}:`; + details.querySelector('.dictionary-details-entry-info').textContent = info; + fragment.appendChild(details); + + any = true; + } + + detailsTable.appendChild(fragment); + return any; + } + + _delete() { + this._dictionaryController.deleteDictionary(this.dictionaryTitle); + } +} + +class DictionaryController { + constructor(settingsController, modalController, storageController, statusFooter) { + this._settingsController = settingsController; + this._modalController = modalController; + this._storageController = storageController; + this._statusFooter = statusFooter; + this._dictionaries = null; + this._dictionaryEntries = []; + this._databaseStateToken = null; + this._checkingIntegrity = false; + this._checkIntegrityButton = null; + this._dictionaryEntryContainer = null; + this._integrityExtraInfoContainer = null; + this._dictionaryInstallCountNode = null; + this._dictionaryEnabledCountNode = null; + this._noDictionariesInstalledWarnings = null; + this._noDictionariesEnabledWarnings = null; + this._deleteDictionaryModal = null; + this._integrityExtraInfoNode = null; + this._isDeleting = false; + } + + async prepare() { + this._checkIntegrityButton = document.querySelector('#dictionary-check-integrity'); + this._dictionaryEntryContainer = document.querySelector('#dictionary-list'); + this._integrityExtraInfoContainer = document.querySelector('#dictionary-list-extra'); + this._dictionaryInstallCountNode = document.querySelector('#dictionary-install-count'); + this._dictionaryEnabledCountNode = document.querySelector('#dictionary-enabled-count'); + this._noDictionariesInstalledWarnings = document.querySelectorAll('.no-dictionaries-installed-warning'); + this._noDictionariesEnabledWarnings = document.querySelectorAll('.no-dictionaries-enabled-warning'); + this._deleteDictionaryModal = this._modalController.getModal('dictionary-confirm-delete'); + + yomichan.on('databaseUpdated', this._onDatabaseUpdated.bind(this)); + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + + document.querySelector('#dictionary-confirm-delete-button').addEventListener('click', this._onDictionaryConfirmDelete.bind(this), false); + if (this._checkIntegrityButton !== null) { + this._checkIntegrityButton.addEventListener('click', this._onCheckIntegrityButtonClick.bind(this), false); + } + + await this._onDatabaseUpdated(); + } + + deleteDictionary(dictionaryTitle) { + if (this._isDeleting) { return; } + const modal = this._deleteDictionaryModal; + modal.node.dataset.dictionaryTitle = dictionaryTitle; + modal.node.querySelector('#dictionary-confirm-delete-name').textContent = dictionaryTitle; + modal.setVisible(true); + } + + instantiateTemplate(name) { + return this._settingsController.instantiateTemplate(name); + } + + async updateDictionariesEnabled() { + const options = await this._settingsController.getOptions(); + this._updateDictionariesEnabledWarnings(options); + } + + // Private + + _onOptionsChanged({options}) { + this._updateDictionariesEnabledWarnings(options); + } + + async _onDatabaseUpdated() { + const token = {}; + this._databaseStateToken = token; + this._dictionaries = null; + const dictionaries = await this._settingsController.getDictionaryInfo(); + const options = await this._settingsController.getOptions(); + if (this._databaseStateToken !== token) { return; } + this._dictionaries = dictionaries; + + this._updateMainDictionarySelectOptions(dictionaries); + + for (const entry of this._dictionaryEntries) { + entry.cleanup(); + } + this._dictionaryEntries = []; + + if (this._dictionaryInstallCountNode !== null) { + this._dictionaryInstallCountNode.textContent = `${dictionaries.length}`; + } + + const hasDictionary = (dictionaries.length > 0); + for (const node of this._noDictionariesInstalledWarnings) { + node.hidden = hasDictionary; + } + + this._updateDictionariesEnabledWarnings(options); + + await this._ensureDictionarySettings(dictionaries); + for (const dictionary of dictionaries) { + this._createDictionaryEntry(dictionary); + } + } + + _updateDictionariesEnabledWarnings(options) { + let enabledCount = 0; + if (this._dictionaries !== null) { + for (const {title} of this._dictionaries) { + if (Object.prototype.hasOwnProperty.call(options.dictionaries, title)) { + const {enabled} = options.dictionaries[title]; + if (enabled) { + ++enabledCount; + } + } + } + } + + const hasEnabledDictionary = (enabledCount > 0); + for (const node of this._noDictionariesEnabledWarnings) { + node.hidden = hasEnabledDictionary; + } + + if (this._dictionaryEnabledCountNode !== null) { + this._dictionaryEnabledCountNode.textContent = `${enabledCount}`; + } + } + + _onDictionaryConfirmDelete(e) { + e.preventDefault(); + + const modal = this._deleteDictionaryModal; + modal.setVisible(false); + + const title = modal.node.dataset.dictionaryTitle; + if (typeof title !== 'string') { return; } + delete modal.node.dataset.dictionaryTitle; + + this._deleteDictionary(title); + } + + _onCheckIntegrityButtonClick(e) { + e.preventDefault(); + this._checkIntegrity(); + } + + _updateMainDictionarySelectOptions(dictionaries) { + for (const select of document.querySelectorAll('[data-setting="general.mainDictionary"]')) { + const fragment = document.createDocumentFragment(); + + let option = document.createElement('option'); + option.className = 'text-muted'; + option.value = ''; + option.textContent = 'Not selected'; + fragment.appendChild(option); + + for (const {title, sequenced} of dictionaries) { + if (!sequenced) { continue; } + option = document.createElement('option'); + option.value = title; + option.textContent = title; + fragment.appendChild(option); + } + + select.textContent = ''; // Empty + select.appendChild(fragment); + } + } + + async _checkIntegrity() { + if (this._dictionaries === null || this._checkingIntegrity || this._isDeleting) { return; } + + try { + this._checkingIntegrity = true; + this._setButtonsEnabled(false); + + const token = this._databaseStateToken; + const dictionaryTitles = this._dictionaries.map(({title}) => title); + const {counts, total} = await yomichan.api.getDictionaryCounts(dictionaryTitles, true); + if (this._databaseStateToken !== token) { return; } + + for (let i = 0, ii = Math.min(counts.length, this._dictionaryEntries.length); i < ii; ++i) { + const entry = this._dictionaryEntries[i]; + entry.setCounts(counts[i]); + } + + this._setCounts(counts, total); + } finally { + this._setButtonsEnabled(true); + this._checkingIntegrity = false; + } + } + + _setCounts(dictionaryCounts, totalCounts) { + const remainders = Object.assign({}, totalCounts); + const keys = Object.keys(remainders); + + for (const counts of dictionaryCounts) { + for (const key of keys) { + remainders[key] -= counts[key]; + } + } + + let totalRemainder = 0; + for (const key of keys) { + totalRemainder += remainders[key]; + } + + this._cleanupExtra(); + if (totalRemainder > 0) { + this.extra = this._createExtra(totalCounts, remainders, totalRemainder); + } + } + + _createExtra(totalCounts, remainders, totalRemainder) { + const node = this.instantiateTemplate('dictionary-extra'); + this._integrityExtraInfoNode = node; + + node.querySelector('.dictionary-total-count').textContent = `${totalRemainder} item${totalRemainder !== 1 ? 's' : ''}`; + + const n = node.querySelector('.dictionary-counts'); + n.textContent = JSON.stringify({counts: totalCounts, remainders}, null, 4); + n.hidden = false; + + this._integrityExtraInfoContainer.appendChild(node); + } + + _cleanupExtra() { + const node = this._integrityExtraInfoNode; + if (node === null) { return; } + this._integrityExtraInfoNode = null; + + const parent = node.parentNode; + if (parent === null) { return; } + + parent.removeChild(node); + } + + _createDictionaryEntry(dictionary) { + const node = this.instantiateTemplate('dictionary'); + this._dictionaryEntryContainer.appendChild(node); + + const entry = new DictionaryEntry(this, node, dictionary); + this._dictionaryEntries.push(entry); + entry.prepare(); + } + + async _deleteDictionary(dictionaryTitle) { + if (this._isDeleting || this._checkingIntegrity) { return; } + + const index = this._dictionaryEntries.findIndex((entry) => entry.dictionaryTitle === dictionaryTitle); + if (index < 0) { return; } + + const storageController = this._storageController; + const statusFooter = this._statusFooter; + const {node} = this._dictionaryEntries[index]; + const progressSelector = '.dictionary-delete-progress'; + const progressContainers = [ + ...node.querySelectorAll('.progress-container'), + ...document.querySelectorAll(`#dictionaries-modal ${progressSelector}`) + ]; + const progressBars = [ + ...node.querySelectorAll('.progress-bar'), + ...document.querySelectorAll(`${progressSelector} .progress-bar`) + ]; + const infoLabels = document.querySelectorAll(`${progressSelector} .progress-info`); + const statusLabels = document.querySelectorAll(`${progressSelector} .progress-status`); + const prevention = this._settingsController.preventPageExit(); + try { + this._isDeleting = true; + this._setButtonsEnabled(false); + + const onProgress = ({processed, count, storeCount, storesProcesed}) => { + const percent = ( + (count > 0 && storesProcesed > 0) ? + (processed / count) * (storesProcesed / storeCount) * 100.0 : + 0.0 + ); + const cssString = `${percent}%`; + const statusString = `${percent.toFixed(0)}%`; + for (const progressBar of progressBars) { progressBar.style.width = cssString; } + for (const label of statusLabels) { label.textContent = statusString; } + }; + + onProgress({processed: 0, count: 1, storeCount: 1, storesProcesed: 0}); + + for (const progress of progressContainers) { progress.hidden = false; } + for (const label of infoLabels) { label.textContent = 'Deleting dictionary...'; } + if (statusFooter !== null) { statusFooter.setTaskActive(progressSelector, true); } + + await this._deleteDictionaryInternal(dictionaryTitle, onProgress); + await this._deleteDictionarySettings(dictionaryTitle); + } catch (e) { + log.error(e); + } finally { + prevention.end(); + for (const progress of progressContainers) { progress.hidden = true; } + if (statusFooter !== null) { statusFooter.setTaskActive(progressSelector, false); } + this._setButtonsEnabled(true); + this._isDeleting = false; + if (storageController !== null) { storageController.updateStats(); } + } + } + + _setButtonsEnabled(value) { + value = !value; + for (const node of document.querySelectorAll('.dictionary-database-mutating-input')) { + node.disabled = value; + } + } + + async _deleteDictionaryInternal(dictionaryTitle, onProgress) { + const dictionaryDatabase = await this._getPreparedDictionaryDatabase(); + try { + await dictionaryDatabase.deleteDictionary(dictionaryTitle, {rate: 1000}, onProgress); + yomichan.api.triggerDatabaseUpdated('dictionary', 'delete'); + } finally { + dictionaryDatabase.close(); + } + } + + async _getPreparedDictionaryDatabase() { + const dictionaryDatabase = new DictionaryDatabase(); + await dictionaryDatabase.prepare(); + return dictionaryDatabase; + } + + async _deleteDictionarySettings(dictionaryTitle) { + const optionsFull = await this._settingsController.getOptionsFull(); + const {profiles} = optionsFull; + const targets = []; + for (let i = 0, ii = profiles.length; i < ii; ++i) { + const {options: {dictionaries}} = profiles[i]; + if (Object.prototype.hasOwnProperty.call(dictionaries, dictionaryTitle)) { + const path = ObjectPropertyAccessor.getPathString(['profiles', i, 'options', 'dictionaries', dictionaryTitle]); + targets.push({action: 'delete', path}); + } + } + await this._settingsController.modifyGlobalSettings(targets); + } + + async _ensureDictionarySettings(dictionaries2) { + const optionsFull = await this._settingsController.getOptionsFull(); + const {profiles} = optionsFull; + const targets = []; + for (const {title} of dictionaries2) { + for (let i = 0, ii = profiles.length; i < ii; ++i) { + const {options: {dictionaries: dictionaryOptions}} = profiles[i]; + if (Object.prototype.hasOwnProperty.call(dictionaryOptions, title)) { continue; } + + const path = ObjectPropertyAccessor.getPathString(['profiles', i, 'options', 'dictionaries', title]); + targets.push({ + action: 'set', + path, + value: DictionaryController.createDefaultDictionarySettings() + }); + } + } + + if (targets.length > 0) { + await this._settingsController.modifyGlobalSettings(targets); + } + } + + static createDefaultDictionarySettings() { + return { + enabled: false, + allowSecondarySearches: false, + priority: 0 + }; + } +} diff --git a/ext/js/pages/settings/dictionary-import-controller.js b/ext/js/pages/settings/dictionary-import-controller.js new file mode 100644 index 00000000..1389b7f0 --- /dev/null +++ b/ext/js/pages/settings/dictionary-import-controller.js @@ -0,0 +1,345 @@ +/* + * 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 + * DictionaryDatabase + * DictionaryImporter + * ObjectPropertyAccessor + */ + +class DictionaryImportController { + constructor(settingsController, modalController, storageController, statusFooter) { + this._settingsController = settingsController; + this._modalController = modalController; + this._storageController = storageController; + this._statusFooter = statusFooter; + this._modifying = false; + this._purgeButton = null; + this._purgeConfirmButton = null; + this._importFileButton = null; + this._importFileInput = null; + this._purgeConfirmModal = null; + this._errorContainer = null; + this._spinner = null; + this._purgeNotification = null; + this._errorToStringOverrides = [ + [ + 'A mutation operation was attempted on a database that did not allow mutations.', + 'Access to IndexedDB appears to be restricted. Firefox seems to require that the history preference is set to "Remember history" before IndexedDB use of any kind is allowed.' + ], + [ + 'The operation failed for reasons unrelated to the database itself and not covered by any other error code.', + 'Unable to access IndexedDB due to a possibly corrupt user profile. Try using the "Refresh Firefox" feature to reset your user profile.' + ] + ]; + } + + async prepare() { + this._purgeButton = document.querySelector('#dictionary-delete-all-button'); + this._purgeConfirmButton = document.querySelector('#dictionary-confirm-delete-all-button'); + this._importFileButton = document.querySelector('#dictionary-import-file-button'); + this._importFileInput = document.querySelector('#dictionary-import-file-input'); + this._purgeConfirmModal = this._modalController.getModal('dictionary-confirm-delete-all'); + this._errorContainer = document.querySelector('#dictionary-error'); + this._spinner = document.querySelector('#dictionary-spinner'); + this._purgeNotification = document.querySelector('#dictionary-delete-all-status'); + + this._purgeButton.addEventListener('click', this._onPurgeButtonClick.bind(this), false); + this._purgeConfirmButton.addEventListener('click', this._onPurgeConfirmButtonClick.bind(this), false); + this._importFileButton.addEventListener('click', this._onImportButtonClick.bind(this), false); + this._importFileInput.addEventListener('change', this._onImportFileChange.bind(this), false); + } + + // Private + + _onImportButtonClick() { + this._importFileInput.click(); + } + + _onPurgeButtonClick(e) { + e.preventDefault(); + this._purgeConfirmModal.setVisible(true); + } + + _onPurgeConfirmButtonClick(e) { + e.preventDefault(); + this._purgeConfirmModal.setVisible(false); + this._purgeDatabase(); + } + + _onImportFileChange(e) { + const node = e.currentTarget; + const files = [...node.files]; + node.value = null; + this._importDictionaries(files); + } + + async _purgeDatabase() { + if (this._modifying) { return; } + + const purgeNotification = this._purgeNotification; + const storageController = this._storageController; + const prevention = this._preventPageExit(); + + try { + this._setModifying(true); + this._hideErrors(); + this._setSpinnerVisible(true); + if (purgeNotification !== null) { purgeNotification.hidden = false; } + + await yomichan.api.purgeDatabase(); + const errors = await this._clearDictionarySettings(); + + if (errors.length > 0) { + this._showErrors(errors); + } + } catch (error) { + this._showErrors([error]); + } finally { + prevention.end(); + if (purgeNotification !== null) { purgeNotification.hidden = true; } + this._setSpinnerVisible(false); + this._setModifying(false); + if (storageController !== null) { storageController.updateStats(); } + } + } + + async _importDictionaries(files) { + if (this._modifying) { return; } + + const statusFooter = this._statusFooter; + const storageController = this._storageController; + const importInfo = document.querySelector('#dictionary-import-info'); + const progressSelector = '.dictionary-import-progress'; + const progressContainers = [ + ...document.querySelectorAll('#dictionary-import-progress-container'), + ...document.querySelectorAll(`#dictionaries-modal ${progressSelector}`) + ]; + const progressBars = [ + ...document.querySelectorAll('#dictionary-import-progress-container .progress-bar'), + ...document.querySelectorAll(`${progressSelector} .progress-bar`) + ]; + const infoLabels = document.querySelectorAll(`${progressSelector} .progress-info`); + const statusLabels = document.querySelectorAll(`${progressSelector} .progress-status`); + + const prevention = this._preventPageExit(); + + try { + this._setModifying(true); + this._hideErrors(); + this._setSpinnerVisible(true); + + for (const progress of progressContainers) { progress.hidden = false; } + + const optionsFull = await this._settingsController.getOptionsFull(); + const importDetails = { + prefixWildcardsSupported: optionsFull.global.database.prefixWildcardsSupported + }; + + const onProgress = (total, current) => { + const percent = (current / total * 100.0); + const cssString = `${percent}%`; + const statusString = `${percent.toFixed(0)}%`; + for (const progressBar of progressBars) { progressBar.style.width = cssString; } + for (const label of statusLabels) { label.textContent = statusString; } + if (storageController !== null) { storageController.updateStats(); } + }; + + const fileCount = files.length; + for (let i = 0; i < fileCount; ++i) { + if (importInfo !== null && fileCount > 1) { + importInfo.hidden = false; + importInfo.textContent = `(${i + 1} of ${fileCount})`; + } + + onProgress(1, 0); + + const labelText = `Importing dictionary${fileCount > 1 ? ` (${i + 1} of ${fileCount})` : ''}...`; + for (const label of infoLabels) { label.textContent = labelText; } + if (statusFooter !== null) { statusFooter.setTaskActive(progressSelector, true); } + + await this._importDictionary(files[i], importDetails, onProgress); + } + } catch (err) { + this._showErrors([err]); + } finally { + prevention.end(); + for (const progress of progressContainers) { progress.hidden = true; } + if (statusFooter !== null) { statusFooter.setTaskActive(progressSelector, false); } + if (importInfo !== null) { + importInfo.textContent = ''; + importInfo.hidden = true; + } + this._setSpinnerVisible(false); + this._setModifying(false); + if (storageController !== null) { storageController.updateStats(); } + } + } + + async _importDictionary(file, importDetails, onProgress) { + const dictionaryDatabase = await this._getPreparedDictionaryDatabase(); + try { + const dictionaryImporter = new DictionaryImporter(); + const archiveContent = await this._readFile(file); + const {result, errors} = await dictionaryImporter.importDictionary(dictionaryDatabase, archiveContent, importDetails, onProgress); + yomichan.api.triggerDatabaseUpdated('dictionary', 'import'); + const errors2 = await this._addDictionarySettings(result.sequenced, result.title); + + if (errors.length > 0) { + const allErrors = [...errors, ...errors2]; + allErrors.push(new Error(`Dictionary may not have been imported properly: ${allErrors.length} error${allErrors.length === 1 ? '' : 's'} reported.`)); + this._showErrors(allErrors); + } + } finally { + dictionaryDatabase.close(); + } + } + + async _addDictionarySettings(sequenced, title) { + const optionsFull = await this._settingsController.getOptionsFull(); + const targets = []; + const profileCount = optionsFull.profiles.length; + for (let i = 0; i < profileCount; ++i) { + const {options} = optionsFull.profiles[i]; + const value = this._createDictionaryOptions(); + const path1 = ObjectPropertyAccessor.getPathString(['profiles', i, 'options', 'dictionaries', title]); + targets.push({action: 'set', path: path1, value}); + + if (sequenced && options.general.mainDictionary === '') { + const path2 = ObjectPropertyAccessor.getPathString(['profiles', i, 'options', 'general', 'mainDictionary']); + targets.push({action: 'set', path: path2, value: title}); + } + } + return await this._modifyGlobalSettings(targets); + } + + async _clearDictionarySettings() { + const optionsFull = await this._settingsController.getOptionsFull(); + const targets = []; + const profileCount = optionsFull.profiles.length; + for (let i = 0; i < profileCount; ++i) { + const path1 = ObjectPropertyAccessor.getPathString(['profiles', i, 'options', 'dictionaries']); + targets.push({action: 'set', path: path1, value: {}}); + const path2 = ObjectPropertyAccessor.getPathString(['profiles', i, 'options', 'general', 'mainDictionary']); + targets.push({action: 'set', path: path2, value: ''}); + } + return await this._modifyGlobalSettings(targets); + } + + _setSpinnerVisible(visible) { + if (this._spinner !== null) { + this._spinner.hidden = !visible; + } + } + + _preventPageExit() { + return this._settingsController.preventPageExit(); + } + + _showErrors(errors) { + const uniqueErrors = new Map(); + for (const error of errors) { + log.error(error); + const errorString = this._errorToString(error); + let count = uniqueErrors.get(errorString); + if (typeof count === 'undefined') { + count = 0; + } + uniqueErrors.set(errorString, count + 1); + } + + const fragment = document.createDocumentFragment(); + for (const [e, count] of uniqueErrors.entries()) { + const div = document.createElement('p'); + if (count > 1) { + div.textContent = `${e} `; + const em = document.createElement('em'); + em.textContent = `(${count})`; + div.appendChild(em); + } else { + div.textContent = `${e}`; + } + fragment.appendChild(div); + } + + this._errorContainer.appendChild(fragment); + this._errorContainer.hidden = false; + } + + _hideErrors() { + this._errorContainer.textContent = ''; + this._errorContainer.hidden = true; + } + + _readFile(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => resolve(reader.result); + reader.onerror = () => reject(reader.error); + reader.readAsBinaryString(file); + }); + } + + _createDictionaryOptions() { + return { + priority: 0, + enabled: true, + allowSecondarySearches: false + }; + } + + _errorToString(error) { + error = (typeof error.toString === 'function' ? error.toString() : `${error}`); + + for (const [match, newErrorString] of this._errorToStringOverrides) { + if (error.includes(match)) { + return newErrorString; + } + } + + return error; + } + + _setModifying(value) { + this._modifying = value; + this._setButtonsEnabled(!value); + } + + _setButtonsEnabled(value) { + value = !value; + for (const node of document.querySelectorAll('.dictionary-database-mutating-input')) { + node.disabled = value; + } + } + + async _getPreparedDictionaryDatabase() { + const dictionaryDatabase = new DictionaryDatabase(); + await dictionaryDatabase.prepare(); + return dictionaryDatabase; + } + + async _modifyGlobalSettings(targets) { + const results = await this._settingsController.modifyGlobalSettings(targets); + const errors = []; + for (const {error} of results) { + if (typeof error !== 'undefined') { + errors.push(deserializeError(error)); + } + } + return errors; + } +} diff --git a/ext/js/pages/settings/extension-keyboard-shortcuts-controller.js b/ext/js/pages/settings/extension-keyboard-shortcuts-controller.js new file mode 100644 index 00000000..032f9dcc --- /dev/null +++ b/ext/js/pages/settings/extension-keyboard-shortcuts-controller.js @@ -0,0 +1,291 @@ +/* + * Copyright (C) 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 + * HotkeyUtil + * KeyboardMouseInputField + */ + +class ExtensionKeyboardShortcutController { + constructor(settingsController) { + this._settingsController = settingsController; + this._resetButton = null; + this._clearButton = null; + this._listContainer = null; + this._hotkeyUtil = new HotkeyUtil(); + this._os = null; + this._entries = []; + } + + get hotkeyUtil() { + return this._hotkeyUtil; + } + + async prepare() { + this._resetButton = document.querySelector('#extension-hotkey-list-reset-all'); + this._clearButton = document.querySelector('#extension-hotkey-list-clear-all'); + this._listContainer = document.querySelector('#extension-hotkey-list'); + + const canResetCommands = this.canResetCommands(); + const canModifyCommands = this.canModifyCommands(); + this._resetButton.hidden = !canResetCommands; + this._clearButton.hidden = !canModifyCommands; + + if (canResetCommands) { + this._resetButton.addEventListener('click', this._onResetClick.bind(this)); + } + if (canModifyCommands) { + this._clearButton.addEventListener('click', this._onClearClick.bind(this)); + } + + const {platform: {os}} = await yomichan.api.getEnvironmentInfo(); + this._os = os; + this._hotkeyUtil.os = os; + + const commands = await this._getCommands(); + this._setupCommands(commands); + } + + async resetCommand(name) { + await this._resetCommand(name); + + let key = null; + let modifiers = []; + + const commands = await this._getCommands(); + for (const {name: name2, shortcut} of commands) { + if (name === name2) { + ({key, modifiers} = this._hotkeyUtil.convertCommandToInput(shortcut)); + break; + } + } + + return {key, modifiers}; + } + + async updateCommand(name, key, modifiers) { + // Firefox-only; uses Promise API + const shortcut = this._hotkeyUtil.convertInputToCommand(key, modifiers); + return await chrome.commands.update({name, shortcut}); + } + + canResetCommands() { + return isObject(chrome.commands) && typeof chrome.commands.reset === 'function'; + } + + canModifyCommands() { + return isObject(chrome.commands) && typeof chrome.commands.update === 'function'; + } + + // Add + + _onResetClick(e) { + e.preventDefault(); + this._resetAllCommands(); + } + + _onClearClick(e) { + e.preventDefault(); + this._clearAllCommands(); + } + + _getCommands() { + return new Promise((resolve, reject) => { + if (!(isObject(chrome.commands) && typeof chrome.commands.getAll === 'function')) { + resolve([]); + return; + } + + chrome.commands.getAll((result) => { + const e = chrome.runtime.lastError; + if (e) { + reject(new Error(e.message)); + } else { + resolve(result); + } + }); + }); + } + + _setupCommands(commands) { + for (const entry of this._entries) { + entry.cleanup(); + } + this._entries = []; + + const fragment = document.createDocumentFragment(); + + for (const {name, description, shortcut} of commands) { + if (name.startsWith('_')) { continue; } + + const {key, modifiers} = this._hotkeyUtil.convertCommandToInput(shortcut); + + const node = this._settingsController.instantiateTemplate('extension-hotkey-list-item'); + fragment.appendChild(node); + + const entry = new ExtensionKeyboardShortcutHotkeyEntry(this, node, name, description, key, modifiers, this._os); + entry.prepare(); + this._entries.push(entry); + } + + this._listContainer.textContent = ''; + this._listContainer.appendChild(fragment); + } + + async _resetAllCommands() { + if (!this.canModifyCommands()) { return; } + + let commands = await this._getCommands(); + const promises = []; + + for (const {name} of commands) { + if (name.startsWith('_')) { continue; } + promises.push(this._resetCommand(name)); + } + + await Promise.all(promises); + + commands = await this._getCommands(); + this._setupCommands(commands); + } + + async _clearAllCommands() { + if (!this.canModifyCommands()) { return; } + + let commands = await this._getCommands(); + const promises = []; + + for (const {name} of commands) { + if (name.startsWith('_')) { continue; } + promises.push(this.updateCommand(name, null, [])); + } + + await Promise.all(promises); + + commands = await this._getCommands(); + this._setupCommands(commands); + } + + async _resetCommand(name) { + // Firefox-only; uses Promise API + return await chrome.commands.reset(name); + } +} + +class ExtensionKeyboardShortcutHotkeyEntry { + constructor(parent, node, name, description, key, modifiers, os) { + this._parent = parent; + this._node = node; + this._name = name; + this._description = description; + this._key = key; + this._modifiers = modifiers; + this._os = os; + this._input = null; + this._inputField = null; + this._eventListeners = new EventListenerCollection(); + } + + prepare() { + this._node.querySelector('.settings-item-label').textContent = this._description || this._name; + + const button = this._node.querySelector('.extension-hotkey-list-item-button'); + const input = this._node.querySelector('input'); + + this._input = input; + + if (this._parent.canModifyCommands()) { + this._inputField = new KeyboardMouseInputField(input, null, this._os); + this._inputField.prepare(this._key, this._modifiers, false, true); + this._eventListeners.on(this._inputField, 'change', this._onInputFieldChange.bind(this)); + this._eventListeners.addEventListener(button, 'menuClose', this._onMenuClose.bind(this)); + this._eventListeners.addEventListener(input, 'blur', this._onInputFieldBlur.bind(this)); + } else { + input.readOnly = true; + input.value = this._parent.hotkeyUtil.getInputDisplayValue(this._key, this._modifiers); + button.hidden = true; + } + } + + cleanup() { + this._eventListeners.removeAllEventListeners(); + if (this._node.parentNode !== null) { + this._node.parentNode.removeChild(this._node); + } + if (this._inputField !== null) { + this._inputField.cleanup(); + this._inputField = null; + } + } + + // Private + + _onInputFieldChange(e) { + const {key, modifiers} = e; + this._tryUpdateInput(key, modifiers, false); + } + + _onInputFieldBlur() { + this._updateInput(); + } + + _onMenuClose(e) { + switch (e.detail.action) { + case 'clearInput': + this._tryUpdateInput(null, [], true); + break; + case 'resetInput': + this._resetInput(); + break; + } + } + + _updateInput() { + this._inputField.setInput(this._key, this._modifiers); + delete this._input.dataset.invalid; + } + + async _tryUpdateInput(key, modifiers, updateInput) { + let okay = (key === null ? (modifiers.length === 0) : (modifiers.length !== 0)); + if (okay) { + try { + await this._parent.updateCommand(this._name, key, modifiers); + } catch (e) { + okay = false; + } + } + + if (okay) { + this._key = key; + this._modifiers = modifiers; + delete this._input.dataset.invalid; + } else { + this._input.dataset.invalid = 'true'; + } + + if (updateInput) { + this._updateInput(); + } + } + + async _resetInput() { + const {key, modifiers} = await this._parent.resetCommand(this._name); + this._key = key; + this._modifiers = modifiers; + this._updateInput(); + } +} diff --git a/ext/js/pages/settings/generic-setting-controller.js b/ext/js/pages/settings/generic-setting-controller.js new file mode 100644 index 00000000..7d6fc2e6 --- /dev/null +++ b/ext/js/pages/settings/generic-setting-controller.js @@ -0,0 +1,232 @@ +/* + * 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/>. + */ + +/* globals + * DOMDataBinder + */ + +class GenericSettingController { + constructor(settingsController) { + this._settingsController = settingsController; + this._defaultScope = 'profile'; + this._dataBinder = new DOMDataBinder({ + selector: '[data-setting]', + createElementMetadata: this._createElementMetadata.bind(this), + compareElementMetadata: this._compareElementMetadata.bind(this), + getValues: this._getValues.bind(this), + setValues: this._setValues.bind(this) + }); + this._transforms = new Map([ + ['setAttribute', this._setAttribute.bind(this)], + ['setVisibility', this._setVisibility.bind(this)], + ['splitTags', this._splitTags.bind(this)], + ['joinTags', this._joinTags.bind(this)], + ['toNumber', this._toNumber.bind(this)], + ['toBoolean', this._toBoolean.bind(this)], + ['toString', this._toString.bind(this)], + ['conditionalConvert', this._conditionalConvert.bind(this)] + ]); + } + + async prepare() { + this._dataBinder.observe(document.body); + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + } + + async refresh() { + await this._dataBinder.refresh(); + } + + // Private + + _onOptionsChanged() { + this._dataBinder.refresh(); + } + + _createElementMetadata(element) { + const {dataset: {setting: path, scope, transform: transformRaw}} = element; + let transforms; + if (typeof transformRaw === 'string') { + transforms = JSON.parse(transformRaw); + if (!Array.isArray(transforms)) { transforms = [transforms]; } + } else { + transforms = []; + } + return { + path, + scope, + transforms, + transformRaw + }; + } + + _compareElementMetadata(metadata1, metadata2) { + return ( + metadata1.path === metadata2.path && + metadata1.scope === metadata2.scope && + metadata1.transformRaw === metadata2.transformRaw + ); + } + + async _getValues(targets) { + const defaultScope = this._defaultScope; + const settingsTargets = []; + for (const {metadata: {path, scope}} of targets) { + const target = { + path, + scope: scope || defaultScope + }; + settingsTargets.push(target); + } + return this._transformResults(await this._settingsController.getSettings(settingsTargets), targets); + } + + async _setValues(targets) { + const defaultScope = this._defaultScope; + const settingsTargets = []; + for (const {metadata: {path, scope, transforms}, value, element} of targets) { + const transformedValue = this._applyTransforms(value, transforms, 'pre', element); + const target = { + path, + scope: scope || defaultScope, + action: 'set', + value: transformedValue + }; + settingsTargets.push(target); + } + return this._transformResults(await this._settingsController.modifySettings(settingsTargets), targets); + } + + _transformResults(values, targets) { + return values.map((value, i) => { + const error = value.error; + if (error) { return deserializeError(error); } + const {metadata: {transforms}, element} = targets[i]; + const result = this._applyTransforms(value.result, transforms, 'post', element); + return {result}; + }); + } + + _applyTransforms(value, transforms, step, element) { + for (const transform of transforms) { + const transformStep = transform.step; + if (typeof transformStep !== 'undefined' && transformStep !== step) { continue; } + + const transformFunction = this._transforms.get(transform.type); + if (typeof transformFunction === 'undefined') { continue; } + + value = transformFunction(value, transform, element); + } + return value; + } + + _getAncestor(node, ancestorDistance) { + if (ancestorDistance < 0) { + return document.documentElement; + } + for (let i = 0; i < ancestorDistance && node !== null; ++i) { + node = node.parentNode; + } + return node; + } + + _getRelativeElement(node, ancestorDistance, selector) { + const selectorRoot = ( + typeof ancestorDistance === 'number' ? + this._getAncestor(node, ancestorDistance) : + document + ); + if (selectorRoot === null) { return null; } + + return ( + typeof selector === 'string' ? + selectorRoot.querySelector(selector) : + (selectorRoot === document ? document.documentElement : selectorRoot) + ); + } + + _evaluateSimpleOperation(operation, lhs, rhs) { + switch (operation) { + case '!': return !lhs; + case '!!': return !!lhs; + case '===': return lhs === rhs; + case '!==': return lhs !== rhs; + case '>=': return lhs >= rhs; + case '<=': return lhs <= rhs; + case '>': return lhs > rhs; + case '<': return lhs < rhs; + default: return false; + } + } + + // Transforms + + _setAttribute(value, data, element) { + const {ancestorDistance, selector, attribute} = data; + const relativeElement = this._getRelativeElement(element, ancestorDistance, selector); + if (relativeElement !== null) { + relativeElement.setAttribute(attribute, `${value}`); + } + return value; + } + + _setVisibility(value, data, element) { + const {ancestorDistance, selector, condition} = data; + const relativeElement = this._getRelativeElement(element, ancestorDistance, selector); + if (relativeElement !== null) { + relativeElement.hidden = !this._evaluateSimpleOperation(condition.op, value, condition.value); + } + return value; + } + + _splitTags(value) { + return `${value}`.split(/[,; ]+/).filter((v) => !!v); + } + + _joinTags(value) { + return value.join(' '); + } + + _toNumber(value, data) { + let {constraints} = data; + if (!isObject(constraints)) { constraints = {}; } + return DOMDataBinder.convertToNumber(value, constraints); + } + + _toBoolean(value) { + return (value === 'true'); + } + + _toString(value) { + return `${value}`; + } + + _conditionalConvert(value, data) { + const {cases} = data; + if (Array.isArray(cases)) { + for (const {op, value: value2, default: isDefault, result} of cases) { + if (isDefault === true) { + value = result; + } else if (this._evaluateSimpleOperation(op, value, value2)) { + value = result; + break; + } + } + } + return value; + } +} diff --git a/ext/js/pages/settings/keyboard-mouse-input-field.js b/ext/js/pages/settings/keyboard-mouse-input-field.js new file mode 100644 index 00000000..09477519 --- /dev/null +++ b/ext/js/pages/settings/keyboard-mouse-input-field.js @@ -0,0 +1,243 @@ +/* + * 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 + * DocumentUtil + * HotkeyUtil + */ + +class KeyboardMouseInputField extends EventDispatcher { + constructor(inputNode, mouseButton, os, isPointerTypeSupported=null) { + super(); + this._inputNode = inputNode; + this._mouseButton = mouseButton; + this._isPointerTypeSupported = isPointerTypeSupported; + this._hotkeyUtil = new HotkeyUtil(os); + this._eventListeners = new EventListenerCollection(); + this._key = null; + this._modifiers = []; + this._penPointerIds = new Set(); + this._mouseModifiersSupported = false; + this._keySupported = false; + } + + get modifiers() { + return this._modifiers; + } + + prepare(key, modifiers, mouseModifiersSupported=false, keySupported=false) { + this.cleanup(); + + this._mouseModifiersSupported = mouseModifiersSupported; + this._keySupported = keySupported; + this.setInput(key, modifiers); + const events = [ + [this._inputNode, 'keydown', this._onModifierKeyDown.bind(this), false], + [this._inputNode, 'keyup', this._onModifierKeyUp.bind(this), false] + ]; + if (mouseModifiersSupported && this._mouseButton !== null) { + events.push( + [this._mouseButton, 'mousedown', this._onMouseButtonMouseDown.bind(this), false], + [this._mouseButton, 'pointerdown', this._onMouseButtonPointerDown.bind(this), false], + [this._mouseButton, 'pointerover', this._onMouseButtonPointerOver.bind(this), false], + [this._mouseButton, 'pointerout', this._onMouseButtonPointerOut.bind(this), false], + [this._mouseButton, 'pointercancel', this._onMouseButtonPointerCancel.bind(this), false], + [this._mouseButton, 'mouseup', this._onMouseButtonMouseUp.bind(this), false], + [this._mouseButton, 'contextmenu', this._onMouseButtonContextMenu.bind(this), false] + ); + } + for (const args of events) { + this._eventListeners.addEventListener(...args); + } + } + + setInput(key, modifiers) { + this._key = key; + this._modifiers = this._sortModifiers(modifiers); + this._updateDisplayString(); + } + + cleanup() { + this._eventListeners.removeAllEventListeners(); + this._modifiers = []; + this._key = null; + this._mouseModifiersSupported = false; + this._keySupported = false; + this._penPointerIds.clear(); + } + + clearInputs() { + this._updateModifiers([], null); + } + + // Private + + _sortModifiers(modifiers) { + return this._hotkeyUtil.sortModifiers(modifiers); + } + + _updateDisplayString() { + const displayValue = this._hotkeyUtil.getInputDisplayValue(this._key, this._modifiers); + this._inputNode.value = displayValue; + } + + _getModifierKeys(e) { + const modifiers = new Set(DocumentUtil.getActiveModifiers(e)); + // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey + // https://askubuntu.com/questions/567731/why-is-shift-alt-being-mapped-to-meta + // It works with mouse events on some platforms, so try to determine if metaKey is pressed. + // This is a hack and only works when both Shift and Alt are not pressed. + if ( + !modifiers.has('meta') && + e.key === 'Meta' && + !( + modifiers.size === 2 && + modifiers.has('shift') && + modifiers.has('alt') + ) + ) { + modifiers.add('meta'); + } + return modifiers; + } + + _isModifierKey(keyName) { + switch (keyName) { + case 'AltLeft': + case 'AltRight': + case 'ControlLeft': + case 'ControlRight': + case 'MetaLeft': + case 'MetaRight': + case 'ShiftLeft': + case 'ShiftRight': + case 'OSLeft': + case 'OSRight': + return true; + default: + return false; + } + } + + _onModifierKeyDown(e) { + e.preventDefault(); + + let key = e.code; + if (key === 'Unidentified' || key === '') { key = void 0; } + if (this._keySupported) { + this._updateModifiers([...this._getModifierKeys(e)], this._isModifierKey(key) ? void 0 : key); + } else { + switch (key) { + case 'Escape': + case 'Backspace': + this.clearInputs(); + break; + default: + this._addModifiers(this._getModifierKeys(e)); + break; + } + } + } + + _onModifierKeyUp(e) { + e.preventDefault(); + } + + _onMouseButtonMouseDown(e) { + e.preventDefault(); + this._addModifiers(DocumentUtil.getActiveButtons(e)); + } + + _onMouseButtonPointerDown(e) { + if (!e.isPrimary) { return; } + + let {pointerType, pointerId} = e; + // Workaround for Firefox bug not detecting certain 'touch' events as 'pen' events. + if (this._penPointerIds.has(pointerId)) { pointerType = 'pen'; } + + if ( + typeof this._isPointerTypeSupported !== 'function' || + !this._isPointerTypeSupported(pointerType) + ) { + return; + } + e.preventDefault(); + this._addModifiers(DocumentUtil.getActiveButtons(e)); + } + + _onMouseButtonPointerOver(e) { + const {pointerType, pointerId} = e; + if (pointerType === 'pen') { + this._penPointerIds.add(pointerId); + } + } + + _onMouseButtonPointerOut(e) { + const {pointerId} = e; + this._penPointerIds.delete(pointerId); + } + + _onMouseButtonPointerCancel(e) { + this._onMouseButtonPointerOut(e); + } + + _onMouseButtonMouseUp(e) { + e.preventDefault(); + } + + _onMouseButtonContextMenu(e) { + e.preventDefault(); + } + + _addModifiers(newModifiers, newKey) { + const modifiers = new Set(this._modifiers); + for (const modifier of newModifiers) { + modifiers.add(modifier); + } + this._updateModifiers([...modifiers], newKey); + } + + _updateModifiers(modifiers, newKey) { + modifiers = this._sortModifiers(modifiers); + + let changed = false; + if (typeof newKey !== 'undefined' && this._key !== newKey) { + this._key = newKey; + changed = true; + } + if (!this._areArraysEqual(this._modifiers, modifiers)) { + this._modifiers = modifiers; + changed = true; + } + + this._updateDisplayString(); + if (changed) { + this.trigger('change', {modifiers: this._modifiers, key: this._key}); + } + } + + _areArraysEqual(array1, array2) { + const length = array1.length; + if (length !== array2.length) { return false; } + + for (let i = 0; i < length; ++i) { + if (array1[i] !== array2[i]) { return false; } + } + + return true; + } +} diff --git a/ext/js/pages/settings/keyboard-shortcuts-controller.js b/ext/js/pages/settings/keyboard-shortcuts-controller.js new file mode 100644 index 00000000..99b16f06 --- /dev/null +++ b/ext/js/pages/settings/keyboard-shortcuts-controller.js @@ -0,0 +1,367 @@ +/* + * Copyright (C) 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 + * KeyboardMouseInputField + */ + +class KeyboardShortcutController { + constructor(settingsController) { + this._settingsController = settingsController; + this._entries = []; + this._os = null; + this._addButton = null; + this._resetButton = null; + this._listContainer = null; + this._emptyIndicator = null; + this._stringComparer = new Intl.Collator('en-US'); // Invariant locale + this._scrollContainer = null; + } + + get settingsController() { + return this._settingsController; + } + + async prepare() { + const {platform: {os}} = await yomichan.api.getEnvironmentInfo(); + this._os = os; + + this._addButton = document.querySelector('#hotkey-list-add'); + this._resetButton = document.querySelector('#hotkey-list-reset'); + this._listContainer = document.querySelector('#hotkey-list'); + this._emptyIndicator = document.querySelector('#hotkey-list-empty'); + this._scrollContainer = document.querySelector('#keyboard-shortcuts-modal .modal-body'); + + this._addButton.addEventListener('click', this._onAddClick.bind(this)); + this._resetButton.addEventListener('click', this._onResetClick.bind(this)); + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + + await this._updateOptions(); + } + + async addEntry(terminationCharacterEntry) { + const options = await this._settingsController.getOptions(); + const {inputs: {hotkeys}} = options; + + await this._settingsController.modifyProfileSettings([{ + action: 'splice', + path: 'inputs.hotkeys', + start: hotkeys.length, + deleteCount: 0, + items: [terminationCharacterEntry] + }]); + + await this._updateOptions(); + this._scrollContainer.scrollTop = this._scrollContainer.scrollHeight; + } + + async deleteEntry(index) { + const options = await this._settingsController.getOptions(); + const {inputs: {hotkeys}} = options; + + if (index < 0 || index >= hotkeys.length) { return false; } + + await this._settingsController.modifyProfileSettings([{ + action: 'splice', + path: 'inputs.hotkeys', + start: index, + deleteCount: 1, + items: [] + }]); + + await this._updateOptions(); + return true; + } + + async modifyProfileSettings(targets) { + return await this._settingsController.modifyProfileSettings(targets); + } + + async getDefaultHotkeys() { + const defaultOptions = await this._settingsController.getDefaultOptions(); + return defaultOptions.profiles[0].options.inputs.hotkeys; + } + + // Private + + _onOptionsChanged({options}) { + for (const entry of this._entries) { + entry.cleanup(); + } + + this._entries = []; + const {inputs: {hotkeys}} = options; + const fragment = document.createDocumentFragment(); + + for (let i = 0, ii = hotkeys.length; i < ii; ++i) { + const hotkeyEntry = hotkeys[i]; + const node = this._settingsController.instantiateTemplate('hotkey-list-item'); + fragment.appendChild(node); + const entry = new KeyboardShortcutHotkeyEntry(this, hotkeyEntry, i, node, this._os, this._stringComparer); + this._entries.push(entry); + entry.prepare(); + } + + this._listContainer.appendChild(fragment); + this._listContainer.hidden = (hotkeys.length === 0); + this._emptyIndicator.hidden = (hotkeys.length !== 0); + } + + _onAddClick(e) { + e.preventDefault(); + this._addNewEntry(); + } + + _onResetClick(e) { + e.preventDefault(); + this._reset(); + } + + async _addNewEntry() { + const newEntry = { + action: '', + key: null, + modifiers: [], + scopes: ['popup', 'search'], + enabled: true + }; + return await this.addEntry(newEntry); + } + + async _updateOptions() { + const options = await this._settingsController.getOptions(); + this._onOptionsChanged({options}); + } + + async _reset() { + const value = await this.getDefaultHotkeys(); + await this._settingsController.setProfileSetting('inputs.hotkeys', value); + await this._updateOptions(); + } +} + +class KeyboardShortcutHotkeyEntry { + constructor(parent, data, index, node, os, stringComparer) { + this._parent = parent; + this._data = data; + this._index = index; + this._node = node; + this._os = os; + this._eventListeners = new EventListenerCollection(); + this._inputField = null; + this._actionSelect = null; + this._scopeCheckboxes = null; + this._scopeCheckboxContainers = null; + this._basePath = `inputs.hotkeys[${this._index}]`; + this._stringComparer = stringComparer; + } + + prepare() { + const node = this._node; + + const menuButton = node.querySelector('.hotkey-list-item-button'); + const input = node.querySelector('.hotkey-list-item-input'); + const action = node.querySelector('.hotkey-list-item-action'); + const scopeCheckboxes = node.querySelectorAll('.hotkey-scope-checkbox'); + const scopeCheckboxContainers = node.querySelectorAll('.hotkey-scope-checkbox-container'); + const enabledToggle = node.querySelector('.hotkey-list-item-enabled'); + + this._actionSelect = action; + this._scopeCheckboxes = scopeCheckboxes; + this._scopeCheckboxContainers = scopeCheckboxContainers; + + this._inputField = new KeyboardMouseInputField(input, null, this._os); + this._inputField.prepare(this._data.key, this._data.modifiers, false, true); + + action.value = this._data.action; + + enabledToggle.checked = this._data.enabled; + enabledToggle.dataset.setting = `${this._basePath}.enabled`; + + this._updateCheckboxVisibility(); + this._updateCheckboxStates(); + + for (const scopeCheckbox of scopeCheckboxes) { + this._eventListeners.addEventListener(scopeCheckbox, 'change', this._onScopeCheckboxChange.bind(this), false); + } + this._eventListeners.addEventListener(menuButton, 'menuClose', this._onMenuClose.bind(this), false); + this._eventListeners.addEventListener(this._actionSelect, 'change', this._onActionSelectChange.bind(this), false); + this._eventListeners.on(this._inputField, 'change', this._onInputFieldChange.bind(this)); + } + + cleanup() { + this._eventListeners.removeAllEventListeners(); + this._inputField.cleanup(); + if (this._node.parentNode !== null) { + this._node.parentNode.removeChild(this._node); + } + } + + // Private + + _onMenuClose(e) { + switch (e.detail.action) { + case 'delete': + this._delete(); + break; + case 'clearInputs': + this._inputField.clearInputs(); + break; + case 'resetInput': + this._resetInput(); + break; + } + } + + _onInputFieldChange({key, modifiers}) { + this._setKeyAndModifiers(key, modifiers); + } + + _onScopeCheckboxChange(e) { + const node = e.currentTarget; + const {scope} = node.dataset; + if (typeof scope !== 'string') { return; } + this._setScopeEnabled(scope, node.checked); + } + + _onActionSelectChange(e) { + const value = e.currentTarget.value; + this._setAction(value); + } + + async _delete() { + this._parent.deleteEntry(this._index); + } + + async _setKeyAndModifiers(key, modifiers) { + this._data.key = key; + this._data.modifiers = modifiers; + await this._modifyProfileSettings([ + { + action: 'set', + path: `${this._basePath}.key`, + value: key + }, + { + action: 'set', + path: `${this._basePath}.modifiers`, + value: modifiers + } + ]); + } + + async _setScopeEnabled(scope, enabled) { + const scopes = this._data.scopes; + const index = scopes.indexOf(scope); + if ((index >= 0) === enabled) { return; } + + if (enabled) { + scopes.push(scope); + const stringComparer = this._stringComparer; + scopes.sort((scope1, scope2) => stringComparer.compare(scope1, scope2)); + } else { + scopes.splice(index, 1); + } + + await this._modifyProfileSettings([{ + action: 'set', + path: `${this._basePath}.scopes`, + value: scopes + }]); + } + + async _modifyProfileSettings(targets) { + return await this._parent.settingsController.modifyProfileSettings(targets); + } + + async _resetInput() { + const defaultHotkeys = await this._parent.getDefaultHotkeys(); + const defaultValue = this._getDefaultKeyAndModifiers(defaultHotkeys, this._data.action); + if (defaultValue === null) { return; } + + const {key, modifiers} = defaultValue; + await this._setKeyAndModifiers(key, modifiers); + this._inputField.setInput(key, modifiers); + } + + _getDefaultKeyAndModifiers(defaultHotkeys, action) { + for (const {action: action2, key, modifiers} of defaultHotkeys) { + if (action2 !== action) { continue; } + return {modifiers, key}; + } + return null; + } + + async _setAction(value) { + const targets = [{ + action: 'set', + path: `${this._basePath}.action`, + value + }]; + + this._data.action = value; + + const scopes = this._data.scopes; + const validScopes = this._getValidScopesForAction(value); + if (validScopes !== null) { + let changed = false; + for (let i = 0, ii = scopes.length; i < ii; ++i) { + if (!validScopes.has(scopes[i])) { + scopes.splice(i, 1); + --i; + --ii; + changed = true; + } + } + if (changed) { + if (scopes.length === 0) { + scopes.push(...validScopes); + } + targets.push({ + action: 'set', + path: `${this._basePath}.scopes`, + value: scopes + }); + this._updateCheckboxStates(); + } + } + + await this._modifyProfileSettings(targets); + + this._updateCheckboxVisibility(); + } + + _updateCheckboxStates() { + const scopes = this._data.scopes; + for (const scopeCheckbox of this._scopeCheckboxes) { + scopeCheckbox.checked = scopes.includes(scopeCheckbox.dataset.scope); + } + } + + _updateCheckboxVisibility() { + const validScopes = this._getValidScopesForAction(this._data.action); + for (const node of this._scopeCheckboxContainers) { + node.hidden = !(validScopes === null || validScopes.has(node.dataset.scope)); + } + } + + _getValidScopesForAction(action) { + const optionNode = this._actionSelect.querySelector(`option[value="${action}"]`); + const scopesString = (optionNode !== null ? optionNode.dataset.scopes : void 0); + return (typeof scopesString === 'string' ? new Set(scopesString.split(' ')) : null); + } +} diff --git a/ext/js/pages/settings/main.js b/ext/js/pages/settings/main.js new file mode 100644 index 00000000..9785ee0e --- /dev/null +++ b/ext/js/pages/settings/main.js @@ -0,0 +1,109 @@ +/* + * Copyright (C) 2016-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 + * AnkiController + * AnkiTemplatesController + * AudioController + * BackupController + * DictionaryController + * DictionaryImportController + * GenericSettingController + * ModalController + * PermissionsToggleController + * PopupPreviewController + * ProfileController + * ScanInputsController + * ScanInputsSimpleController + * SettingsController + * StorageController + */ + +function showExtensionInformation() { + const node = document.getElementById('extension-info'); + if (node === null) { return; } + + const manifest = chrome.runtime.getManifest(); + node.textContent = `${manifest.name} v${manifest.version}`; +} + +async function setupEnvironmentInfo() { + const {browser, platform} = await yomichan.api.getEnvironmentInfo(); + document.documentElement.dataset.browser = browser; + document.documentElement.dataset.operatingSystem = platform.os; +} + + +(async () => { + try { + await yomichan.prepare(); + + setupEnvironmentInfo(); + showExtensionInformation(); + + const optionsFull = await yomichan.api.optionsGetFull(); + + const modalController = new ModalController(); + modalController.prepare(); + + const settingsController = new SettingsController(optionsFull.profileCurrent); + settingsController.prepare(); + + const storageController = new StorageController(); + storageController.prepare(); + + const genericSettingController = new GenericSettingController(settingsController); + genericSettingController.prepare(); + + const permissionsToggleController = new PermissionsToggleController(settingsController); + permissionsToggleController.prepare(); + + const popupPreviewController = new PopupPreviewController(settingsController); + popupPreviewController.prepare(); + + const audioController = new AudioController(settingsController); + audioController.prepare(); + + const profileController = new ProfileController(settingsController, modalController); + profileController.prepare(); + + const dictionaryController = new DictionaryController(settingsController, modalController, storageController, null); + dictionaryController.prepare(); + + const dictionaryImportController = new DictionaryImportController(settingsController, modalController, storageController, null); + dictionaryImportController.prepare(); + + const ankiController = new AnkiController(settingsController); + ankiController.prepare(); + + const ankiTemplatesController = new AnkiTemplatesController(settingsController, modalController, ankiController); + ankiTemplatesController.prepare(); + + const settingsBackup = new BackupController(settingsController, modalController); + settingsBackup.prepare(); + + const scanInputsController = new ScanInputsController(settingsController); + scanInputsController.prepare(); + + const simpleScanningInputController = new ScanInputsSimpleController(settingsController); + simpleScanningInputController.prepare(); + + yomichan.ready(); + } catch (e) { + log.error(e); + } +})(); diff --git a/ext/js/pages/settings/mecab-controller.js b/ext/js/pages/settings/mecab-controller.js new file mode 100644 index 00000000..122f82f9 --- /dev/null +++ b/ext/js/pages/settings/mecab-controller.js @@ -0,0 +1,63 @@ +/* + * Copyright (C) 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/>. + */ + +class MecabController { + constructor(settingsController) { + this._settingsController = settingsController; + this._testButton = null; + this._resultsContainer = null; + this._testActive = false; + } + + prepare() { + this._testButton = document.querySelector('#test-mecab-button'); + this._resultsContainer = document.querySelector('#test-mecab-results'); + + this._testButton.addEventListener('click', this._onTestButtonClick.bind(this), false); + } + + // Private + + _onTestButtonClick(e) { + e.preventDefault(); + this._testMecab(); + } + + async _testMecab() { + if (this._testActive) { return; } + + try { + this._testActive = true; + this._testButton.disabled = true; + this._resultsContainer.textContent = ''; + this._resultsContainer.hidden = true; + await yomichan.api.testMecab(); + this._setStatus('Connection was successful', false); + } catch (e) { + this._setStatus(e.message, true); + } finally { + this._testActive = false; + this._testButton.disabled = false; + } + } + + _setStatus(message, isError) { + this._resultsContainer.textContent = message; + this._resultsContainer.hidden = false; + this._resultsContainer.classList.toggle('danger-text', isError); + } +} diff --git a/ext/js/pages/settings/modal-controller.js b/ext/js/pages/settings/modal-controller.js new file mode 100644 index 00000000..fe4f911b --- /dev/null +++ b/ext/js/pages/settings/modal-controller.js @@ -0,0 +1,60 @@ +/* + * 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 + * Modal + */ + +class ModalController { + constructor() { + this._modals = []; + this._modalMap = new Map(); + } + + prepare() { + const idSuffix = '-modal'; + for (const node of document.querySelectorAll('.modal')) { + let {id} = node; + if (typeof id !== 'string') { continue; } + + if (id.endsWith(idSuffix)) { + id = id.substring(0, id.length - idSuffix.length); + } + + const modal = new Modal(node); + modal.prepare(); + this._modalMap.set(id, modal); + this._modalMap.set(node, modal); + this._modals.push(modal); + } + } + + getModal(nameOrNode) { + const modal = this._modalMap.get(nameOrNode); + return (typeof modal !== 'undefined' ? modal : null); + } + + getTopVisibleModal() { + for (let i = this._modals.length - 1; i >= 0; --i) { + const modal = this._modals[i]; + if (modal.isVisible()) { + return modal; + } + } + return null; + } +} diff --git a/ext/js/pages/settings/modal-jquery.js b/ext/js/pages/settings/modal-jquery.js new file mode 100644 index 00000000..8c69ae6d --- /dev/null +++ b/ext/js/pages/settings/modal-jquery.js @@ -0,0 +1,73 @@ +/* + * 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/>. + */ + +class Modal extends EventDispatcher { + constructor(node) { + super(); + this._node = node; + this._eventListeners = new EventListenerCollection(); + } + + get node() { + return this._node; + } + + prepare() { + // NOP + } + + isVisible() { + return !!(this._getWrappedNode().data('bs.modal') || {}).isShown; + } + + setVisible(value) { + this._getWrappedNode().modal(value ? 'show' : 'hide'); + } + + on(eventName, callback) { + if (eventName === 'visibilityChanged') { + if (this._eventListeners.size === 0) { + const wrappedNode = this._getWrappedNode(); + this._eventListeners.on(wrappedNode, 'hidden.bs.modal', this._onModalHide.bind(this)); + this._eventListeners.on(wrappedNode, 'shown.bs.modal', this._onModalShow.bind(this)); + } + } + return super.on(eventName, callback); + } + + off(eventName, callback) { + const result = super.off(eventName, callback); + if (eventName === 'visibilityChanged' && !this.hasListeners(eventName)) { + this._eventListeners.removeAllEventListeners(); + } + return result; + } + + // Private + + _onModalHide() { + this.trigger('visibilityChanged', {visible: false}); + } + + _onModalShow() { + this.trigger('visibilityChanged', {visible: true}); + } + + _getWrappedNode() { + return $(this._node); + } +} diff --git a/ext/js/pages/settings/modal.js b/ext/js/pages/settings/modal.js new file mode 100644 index 00000000..2ef49540 --- /dev/null +++ b/ext/js/pages/settings/modal.js @@ -0,0 +1,80 @@ +/* + * 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 + */ + +class Modal extends PanelElement { + constructor(node) { + super({ + node, + closingAnimationDuration: 375 // Milliseconds; includes buffer + }); + this._contentNode = null; + this._canCloseOnClick = false; + } + + prepare() { + const node = this.node; + this._contentNode = node.querySelector('.modal-content'); + let dimmerNode = node.querySelector('.modal-content-dimmer'); + if (dimmerNode === null) { dimmerNode = node; } + dimmerNode.addEventListener('mousedown', this._onModalContainerMouseDown.bind(this), false); + dimmerNode.addEventListener('mouseup', this._onModalContainerMouseUp.bind(this), false); + dimmerNode.addEventListener('click', this._onModalContainerClick.bind(this), false); + + for (const actionNode of node.querySelectorAll('[data-modal-action]')) { + actionNode.addEventListener('click', this._onActionNodeClick.bind(this), false); + } + } + + // Private + + _onModalContainerMouseDown(e) { + this._canCloseOnClick = (e.currentTarget === e.target); + } + + _onModalContainerMouseUp(e) { + if (!this._canCloseOnClick) { return; } + this._canCloseOnClick = (e.currentTarget === e.target); + } + + _onModalContainerClick(e) { + if (!this._canCloseOnClick) { return; } + this._canCloseOnClick = false; + if (e.currentTarget !== e.target) { return; } + this.setVisible(false); + } + + _onActionNodeClick(e) { + const {modalAction} = e.currentTarget.dataset; + switch (modalAction) { + case 'expand': + this._setExpanded(true); + break; + case 'collapse': + this._setExpanded(false); + break; + } + } + + _setExpanded(expanded) { + if (this._contentNode === null) { return; } + this._contentNode.classList.toggle('modal-content-full', expanded); + } +} diff --git a/ext/js/pages/settings/nested-popups-controller.js b/ext/js/pages/settings/nested-popups-controller.js new file mode 100644 index 00000000..1ebc7389 --- /dev/null +++ b/ext/js/pages/settings/nested-popups-controller.js @@ -0,0 +1,71 @@ +/* + * 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 + * DOMDataBinder + */ + +class NestedPopupsController { + constructor(settingsController) { + this._settingsController = settingsController; + this._popupNestingMaxDepth = 0; + } + + async prepare() { + this._nestedPopupsEnabled = document.querySelector('#nested-popups-enabled'); + this._nestedPopupsCount = document.querySelector('#nested-popups-count'); + this._nestedPopupsEnabledMoreOptions = document.querySelector('#nested-popups-enabled-more-options'); + + const options = await this._settingsController.getOptions(); + + this._nestedPopupsEnabled.addEventListener('change', this._onNestedPopupsEnabledChange.bind(this), false); + this._nestedPopupsCount.addEventListener('change', this._onNestedPopupsCountChange.bind(this), false); + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + this._onOptionsChanged({options}); + } + + // Private + + _onOptionsChanged({options}) { + this._updatePopupNestingMaxDepth(options.scanning.popupNestingMaxDepth); + } + + _onNestedPopupsEnabledChange(e) { + const value = e.currentTarget.checked; + if (value && this._popupNestingMaxDepth > 0) { return; } + this._setPopupNestingMaxDepth(value ? 1 : 0); + } + + _onNestedPopupsCountChange(e) { + const node = e.currentTarget; + const value = Math.max(1, DOMDataBinder.convertToNumber(node.value, node)); + this._setPopupNestingMaxDepth(value); + } + + _updatePopupNestingMaxDepth(value) { + const enabled = (value > 0); + this._popupNestingMaxDepth = value; + this._nestedPopupsEnabled.checked = enabled; + this._nestedPopupsCount.value = `${value}`; + this._nestedPopupsEnabledMoreOptions.hidden = !enabled; + } + + async _setPopupNestingMaxDepth(value) { + this._updatePopupNestingMaxDepth(value); + await this._settingsController.setProfileSetting('scanning.popupNestingMaxDepth', value); + } +} diff --git a/ext/js/pages/settings/permissions-toggle-controller.js b/ext/js/pages/settings/permissions-toggle-controller.js new file mode 100644 index 00000000..f80e7585 --- /dev/null +++ b/ext/js/pages/settings/permissions-toggle-controller.js @@ -0,0 +1,131 @@ +/* + * 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 + * ObjectPropertyAccessor + */ + +class PermissionsToggleController { + constructor(settingsController) { + this._settingsController = settingsController; + this._toggles = null; + } + + async prepare() { + this._toggles = document.querySelectorAll('.permissions-toggle'); + + for (const toggle of this._toggles) { + toggle.addEventListener('change', this._onPermissionsToggleChange.bind(this), false); + } + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + this._settingsController.on('permissionsChanged', this._onPermissionsChanged.bind(this)); + + const options = await this._settingsController.getOptions(); + this._onOptionsChanged({options}); + } + + // Private + + _onOptionsChanged({options}) { + let accessor = null; + for (const toggle of this._toggles) { + const {permissionsSetting} = toggle.dataset; + if (typeof permissionsSetting !== 'string') { continue; } + + if (accessor === null) { + accessor = new ObjectPropertyAccessor(options); + } + + const path = ObjectPropertyAccessor.getPathArray(permissionsSetting); + let value; + try { + value = accessor.get(path, path.length); + } catch (e) { + continue; + } + toggle.checked = !!value; + } + this._updateValidity(); + } + + async _onPermissionsToggleChange(e) { + const toggle = e.currentTarget; + let value = toggle.checked; + const valuePre = !value; + const {permissionsSetting} = toggle.dataset; + const hasPermissionsSetting = typeof permissionsSetting === 'string'; + + if (value || !hasPermissionsSetting) { + toggle.checked = valuePre; + const permissions = this._getRequiredPermissions(toggle); + try { + value = await this._settingsController.permissionsUtil.setPermissionsGranted({permissions}, value); + } catch (error) { + value = valuePre; + try { + value = await this._settingsController.permissionsUtil.hasPermissions({permissions}); + } catch (error2) { + // NOP + } + } + toggle.checked = value; + } + + if (hasPermissionsSetting) { + this._setToggleValid(toggle, true); + await this._settingsController.setProfileSetting(permissionsSetting, value); + } + } + + _onPermissionsChanged({permissions: {permissions}}) { + const permissionsSet = new Set(permissions); + for (const toggle of this._toggles) { + const {permissionsSetting} = toggle.dataset; + const hasPermissions = this._hasAll(permissionsSet, this._getRequiredPermissions(toggle)); + + if (typeof permissionsSetting === 'string') { + const valid = !toggle.checked || hasPermissions; + this._setToggleValid(toggle, valid); + } else { + toggle.checked = hasPermissions; + } + } + } + + _setToggleValid(toggle, valid) { + const relative = toggle.closest('.settings-item'); + if (relative === null) { return; } + relative.dataset.invalid = `${!valid}`; + } + + async _updateValidity() { + const permissions = await this._settingsController.permissionsUtil.getAllPermissions(); + this._onPermissionsChanged({permissions}); + } + + _hasAll(set, values) { + for (const value of values) { + if (!set.has(value)) { return false; } + } + return true; + } + + _getRequiredPermissions(toggle) { + const requiredPermissions = toggle.dataset.requiredPermissions; + return (typeof requiredPermissions === 'string' && requiredPermissions.length > 0 ? requiredPermissions.split(' ') : []); + } +} diff --git a/ext/js/pages/settings/pitch-accents-preview-main.js b/ext/js/pages/settings/pitch-accents-preview-main.js new file mode 100644 index 00000000..d9d56727 --- /dev/null +++ b/ext/js/pages/settings/pitch-accents-preview-main.js @@ -0,0 +1,35 @@ +/* + * Copyright (C) 2019-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 + * DisplayGenerator + */ + +(async () => { + try { + await yomichan.prepare(); + + const displayGenerator = new DisplayGenerator({ + japaneseUtil: null, + mediaLoader: null + }); + await displayGenerator.prepare(); + displayGenerator.preparePitchAccents(); + } catch (e) { + log.error(e); + } +})(); diff --git a/ext/js/pages/settings/popup-preview-controller.js b/ext/js/pages/settings/popup-preview-controller.js new file mode 100644 index 00000000..f98b0679 --- /dev/null +++ b/ext/js/pages/settings/popup-preview-controller.js @@ -0,0 +1,129 @@ +/* + * Copyright (C) 2019-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 + * wanakana + */ + +class PopupPreviewController { + constructor(settingsController) { + this._settingsController = settingsController; + this._previewVisible = false; + this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, ''); + this._frame = null; + this._previewTextInput = null; + this._customCss = null; + this._customOuterCss = null; + this._previewFrameContainer = null; + } + + async prepare() { + const button = document.querySelector('#settings-popup-preview-button'); + if (button !== null) { + button.addEventListener('click', this._onShowPopupPreviewButtonClick.bind(this), false); + } else { + this._frame = document.querySelector('#popup-preview-frame'); + this._customCss = document.querySelector('#custom-popup-css'); + this._customOuterCss = document.querySelector('#custom-popup-outer-css'); + this._previewFrameContainer = document.querySelector('.preview-frame-container'); + + this._customCss.addEventListener('input', this._onCustomCssChange.bind(this), false); + this._customCss.addEventListener('settingChanged', this._onCustomCssChange.bind(this), false); + this._customOuterCss.addEventListener('input', this._onCustomOuterCssChange.bind(this), false); + this._customOuterCss.addEventListener('settingChanged', this._onCustomOuterCssChange.bind(this), false); + this._frame.addEventListener('load', this._onFrameLoad2.bind(this), false); + this._settingsController.on('optionsContextChanged', this._onOptionsContextChange.bind(this)); + } + } + + // Private + + _onShowPopupPreviewButtonClick() { + if (this._previewVisible) { return; } + this._showAppearancePreview(); + this._previewVisible = true; + } + + _showAppearancePreview() { + const container = document.querySelector('#settings-popup-preview-container'); + const buttonContainer = document.querySelector('#settings-popup-preview-button-container'); + const settings = document.querySelector('#settings-popup-preview-settings'); + const text = document.querySelector('#settings-popup-preview-text'); + const customCss = document.querySelector('#custom-popup-css'); + const customOuterCss = document.querySelector('#custom-popup-outer-css'); + const frame = document.createElement('iframe'); + + this._previewTextInput = text; + this._frame = frame; + this._customCss = customCss; + this._customOuterCss = customOuterCss; + + wanakana.bind(text); + + frame.addEventListener('load', this._onFrameLoad.bind(this), false); + text.addEventListener('input', this._onTextChange.bind(this), false); + customCss.addEventListener('input', this._onCustomCssChange.bind(this), false); + customOuterCss.addEventListener('input', this._onCustomOuterCssChange.bind(this), false); + this._settingsController.on('optionsContextChanged', this._onOptionsContextChange.bind(this)); + + frame.src = '/popup-preview.html'; + frame.id = 'settings-popup-preview-frame'; + + container.appendChild(frame); + if (buttonContainer.parentNode !== null) { + buttonContainer.parentNode.removeChild(buttonContainer); + } + settings.style.display = ''; + } + + _onFrameLoad() { + this._onOptionsContextChange(); + this._setText(this._previewTextInput.value); + } + + _onFrameLoad2() { + this._onOptionsContextChange(); + this._onCustomCssChange(); + this._onCustomOuterCssChange(); + } + + _onTextChange(e) { + this._setText(e.currentTarget.value); + } + + _onCustomCssChange() { + this._invoke('setCustomCss', {css: this._customCss.value}); + } + + _onCustomOuterCssChange() { + this._invoke('setCustomOuterCss', {css: this._customOuterCss.value}); + } + + _onOptionsContextChange() { + const optionsContext = this._settingsController.getOptionsContext(); + this._invoke('updateOptionsContext', {optionsContext}); + } + + _setText(text) { + this._invoke('setText', {text}); + } + + _invoke(action, params) { + if (this._frame === null || this._frame.contentWindow === null) { return; } + this._frame.contentWindow.postMessage({action, params}, this._targetOrigin); + } +} diff --git a/ext/js/pages/settings/popup-preview-frame-main.js b/ext/js/pages/settings/popup-preview-frame-main.js new file mode 100644 index 00000000..80e248be --- /dev/null +++ b/ext/js/pages/settings/popup-preview-frame-main.js @@ -0,0 +1,43 @@ +/* + * Copyright (C) 2019-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 + * HotkeyHandler + * PopupFactory + * PopupPreviewFrame + */ + +(async () => { + try { + await yomichan.prepare(); + + const {tabId, frameId} = await yomichan.api.frameInformationGet(); + + const hotkeyHandler = new HotkeyHandler(); + hotkeyHandler.prepare(); + + const popupFactory = new PopupFactory(frameId); + popupFactory.prepare(); + + const preview = new PopupPreviewFrame(tabId, frameId, popupFactory, hotkeyHandler); + await preview.prepare(); + + document.documentElement.dataset.loaded = 'true'; + } catch (e) { + log.error(e); + } +})(); diff --git a/ext/js/pages/settings/popup-preview-frame.js b/ext/js/pages/settings/popup-preview-frame.js new file mode 100644 index 00000000..638dd414 --- /dev/null +++ b/ext/js/pages/settings/popup-preview-frame.js @@ -0,0 +1,232 @@ +/* + * Copyright (C) 2019-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 + * Frontend + * TextSourceRange + * wanakana + */ + +class PopupPreviewFrame { + constructor(tabId, frameId, popupFactory, hotkeyHandler) { + this._tabId = tabId; + this._frameId = frameId; + this._popupFactory = popupFactory; + this._hotkeyHandler = hotkeyHandler; + this._frontend = null; + this._apiOptionsGetOld = null; + this._popupShown = false; + this._themeChangeTimeout = null; + this._textSource = null; + this._optionsContext = null; + this._exampleText = null; + this._exampleTextInput = null; + this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, ''); + + this._windowMessageHandlers = new Map([ + ['setText', this._onSetText.bind(this)], + ['setCustomCss', this._setCustomCss.bind(this)], + ['setCustomOuterCss', this._setCustomOuterCss.bind(this)], + ['updateOptionsContext', this._updateOptionsContext.bind(this)] + ]); + } + + async prepare() { + this._exampleText = document.querySelector('#example-text'); + this._exampleTextInput = document.querySelector('#example-text-input'); + + if (this._exampleTextInput !== null && typeof wanakana !== 'undefined') { + wanakana.bind(this._exampleTextInput); + } + + window.addEventListener('message', this._onMessage.bind(this), false); + + // Setup events + document.querySelector('#theme-dark-checkbox').addEventListener('change', this._onThemeDarkCheckboxChanged.bind(this), false); + this._exampleText.addEventListener('click', this._onExampleTextClick.bind(this), false); + this._exampleTextInput.addEventListener('blur', this._onExampleTextInputBlur.bind(this), false); + this._exampleTextInput.addEventListener('input', this._onExampleTextInputInput.bind(this), false); + + // Overwrite API functions + this._apiOptionsGetOld = yomichan.api.optionsGet.bind(yomichan.api); + yomichan.api.optionsGet = this._apiOptionsGet.bind(this); + + // Overwrite frontend + this._frontend = new Frontend({ + tabId: this._tabId, + frameId: this._frameId, + popupFactory: this._popupFactory, + depth: 0, + parentPopupId: null, + parentFrameId: null, + useProxyPopup: false, + canUseWindowPopup: false, + pageType: 'web', + allowRootFramePopupProxy: false, + childrenSupported: false, + hotkeyHandler: this._hotkeyHandler + }); + this._frontend.setOptionsContextOverride(this._optionsContext); + await this._frontend.prepare(); + this._frontend.setDisabledOverride(true); + this._frontend.canClearSelection = false; + this._frontend.popup.on('customOuterCssChanged', this._onCustomOuterCssChanged.bind(this)); + + // Update search + this._updateSearch(); + } + + // Private + + async _apiOptionsGet(...args) { + const options = await this._apiOptionsGetOld(...args); + options.general.enable = true; + options.general.debugInfo = false; + options.general.popupWidth = 400; + options.general.popupHeight = 250; + options.general.popupHorizontalOffset = 0; + options.general.popupVerticalOffset = 10; + options.general.popupHorizontalOffset2 = 10; + options.general.popupVerticalOffset2 = 0; + options.general.popupHorizontalTextPosition = 'below'; + options.general.popupVerticalTextPosition = 'before'; + options.scanning.selectText = false; + return options; + } + + _onCustomOuterCssChanged({node, inShadow}) { + if (node === null || inShadow) { return; } + + const node2 = document.querySelector('#popup-outer-css'); + if (node2 === null) { return; } + + // This simulates the stylesheet priorities when injecting using the web extension API. + node2.parentNode.insertBefore(node, node2); + } + + _onMessage(e) { + if (e.origin !== this._targetOrigin) { return; } + + const {action, params} = e.data; + const handler = this._windowMessageHandlers.get(action); + if (typeof handler !== 'function') { return; } + + handler(params); + } + + _onThemeDarkCheckboxChanged(e) { + document.documentElement.classList.toggle('dark', e.target.checked); + if (this._themeChangeTimeout !== null) { + clearTimeout(this._themeChangeTimeout); + } + this._themeChangeTimeout = setTimeout(() => { + this._themeChangeTimeout = null; + const popup = this._frontend.popup; + if (popup === null) { return; } + popup.updateTheme(); + }, 300); + } + + _onExampleTextClick() { + if (this._exampleTextInput === null) { return; } + const visible = this._exampleTextInput.hidden; + this._exampleTextInput.hidden = !visible; + if (!visible) { return; } + this._exampleTextInput.focus(); + this._exampleTextInput.select(); + } + + _onExampleTextInputBlur() { + if (this._exampleTextInput === null) { return; } + this._exampleTextInput.hidden = true; + } + + _onExampleTextInputInput(e) { + this._setText(e.currentTarget.value); + } + + _onSetText({text}) { + this._setText(text, true); + } + + _setText(text, setInput) { + if (setInput && this._exampleTextInput !== null) { + this._exampleTextInput.value = text; + } + + if (this._exampleText === null) { return; } + + this._exampleText.textContent = text; + if (this._frontend === null) { return; } + this._updateSearch(); + } + + _setInfoVisible(visible) { + const node = document.querySelector('.placeholder-info'); + if (node === null) { return; } + + node.classList.toggle('placeholder-info-visible', visible); + } + + _setCustomCss({css}) { + if (this._frontend === null) { return; } + const popup = this._frontend.popup; + if (popup === null) { return; } + popup.setCustomCss(css); + } + + _setCustomOuterCss({css}) { + if (this._frontend === null) { return; } + const popup = this._frontend.popup; + if (popup === null) { return; } + popup.setCustomOuterCss(css, false); + } + + async _updateOptionsContext({optionsContext}) { + this._optionsContext = optionsContext; + if (this._frontend === null) { return; } + this._frontend.setOptionsContextOverride(optionsContext); + await this._frontend.updateOptions(); + await this._updateSearch(); + } + + async _updateSearch() { + if (this._exampleText === null) { return; } + + const textNode = this._exampleText.firstChild; + if (textNode === null) { return; } + + const range = document.createRange(); + range.selectNodeContents(textNode); + const source = new TextSourceRange(range, range.toString(), null, null); + + try { + await this._frontend.setTextSource(source); + } finally { + source.cleanup(); + } + this._textSource = source; + await this._frontend.showContentCompleted(); + + const popup = this._frontend.popup; + if (popup !== null && popup.isVisibleSync()) { + this._popupShown = true; + } + + this._setInfoVisible(!this._popupShown); + } +} diff --git a/ext/js/pages/settings/popup-window-controller.js b/ext/js/pages/settings/popup-window-controller.js new file mode 100644 index 00000000..403c060c --- /dev/null +++ b/ext/js/pages/settings/popup-window-controller.js @@ -0,0 +1,34 @@ +/* + * Copyright (C) 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/>. + */ + +class PopupWindowController { + prepare() { + const testLink = document.querySelector('#test-window-open-link'); + testLink.addEventListener('click', this._onTestWindowOpenLinkClick.bind(this), false); + } + + // Private + + _onTestWindowOpenLinkClick(e) { + e.preventDefault(); + this._testWindowOpen(); + } + + async _testWindowOpen() { + await yomichan.api.getOrCreateSearchPopup({focus: true}); + } +} diff --git a/ext/js/pages/settings/profile-conditions-ui.js b/ext/js/pages/settings/profile-conditions-ui.js new file mode 100644 index 00000000..5fda1dc0 --- /dev/null +++ b/ext/js/pages/settings/profile-conditions-ui.js @@ -0,0 +1,712 @@ +/* + * 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 + * KeyboardMouseInputField + */ + +class ProfileConditionsUI extends EventDispatcher { + constructor(settingsController) { + super(); + this._settingsController = settingsController; + this._os = null; + this._conditionGroupsContainer = null; + this._addConditionGroupButton = null; + this._children = []; + this._eventListeners = new EventListenerCollection(); + this._defaultType = 'popupLevel'; + this._profileIndex = 0; + this._descriptors = new Map([ + [ + 'popupLevel', + { + displayName: 'Popup Level', + defaultOperator: 'equal', + operators: new Map([ + ['equal', {displayName: '=', type: 'integer', defaultValue: '0', validate: this._validateInteger.bind(this), normalize: this._normalizeInteger.bind(this)}], + ['notEqual', {displayName: '\u2260', type: 'integer', defaultValue: '0', validate: this._validateInteger.bind(this), normalize: this._normalizeInteger.bind(this)}], + ['lessThan', {displayName: '<', type: 'integer', defaultValue: '0', validate: this._validateInteger.bind(this), normalize: this._normalizeInteger.bind(this)}], + ['greaterThan', {displayName: '>', type: 'integer', defaultValue: '0', validate: this._validateInteger.bind(this), normalize: this._normalizeInteger.bind(this)}], + ['lessThanOrEqual', {displayName: '\u2264', type: 'integer', defaultValue: '0', validate: this._validateInteger.bind(this), normalize: this._normalizeInteger.bind(this)}], + ['greaterThanOrEqual', {displayName: '\u2265', type: 'integer', defaultValue: '0', validate: this._validateInteger.bind(this), normalize: this._normalizeInteger.bind(this)}] + ]) + } + ], + [ + 'url', + { + displayName: 'URL', + defaultOperator: 'matchDomain', + operators: new Map([ + ['matchDomain', {displayName: 'Matches Domain', type: 'string', defaultValue: 'example.com', resetDefaultOnChange: true, validate: this._validateDomains.bind(this), normalize: this._normalizeDomains.bind(this)}], + ['matchRegExp', {displayName: 'Matches RegExp', type: 'string', defaultValue: 'example\\.com', resetDefaultOnChange: true, validate: this._validateRegExp.bind(this)}] + ]) + } + ], + [ + 'modifierKeys', + { + displayName: 'Modifier Keys', + defaultOperator: 'are', + operators: new Map([ + ['are', {displayName: 'Are', type: 'modifierKeys', defaultValue: ''}], + ['areNot', {displayName: 'Are Not', type: 'modifierKeys', defaultValue: ''}], + ['include', {displayName: 'Include', type: 'modifierKeys', defaultValue: ''}], + ['notInclude', {displayName: 'Don\'t Include', type: 'modifierKeys', defaultValue: ''}] + ]) + } + ] + ]); + } + + get settingsController() { + return this._settingsController; + } + + get profileIndex() { + return this._profileIndex; + } + + get os() { + return this._os; + } + + set os(value) { + this._os = value; + } + + async prepare(profileIndex) { + const options = await this._settingsController.getOptionsFull(); + const {profiles} = options; + if (profileIndex < 0 || profileIndex >= profiles.length) { return; } + const {conditionGroups} = profiles[profileIndex]; + + this._profileIndex = profileIndex; + this._conditionGroupsContainer = document.querySelector('#profile-condition-groups'); + this._addConditionGroupButton = document.querySelector('#profile-add-condition-group'); + + for (let i = 0, ii = conditionGroups.length; i < ii; ++i) { + this._addConditionGroup(conditionGroups[i], i); + } + + this._eventListeners.addEventListener(this._addConditionGroupButton, 'click', this._onAddConditionGroupButtonClick.bind(this), false); + } + + cleanup() { + this._eventListeners.removeAllEventListeners(); + + for (const child of this._children) { + child.cleanup(); + } + this._children = []; + + this._conditionGroupsContainer = null; + this._addConditionGroupButton = null; + } + + instantiateTemplate(names) { + return this._settingsController.instantiateTemplate(names); + } + + getDescriptorTypes() { + const results = []; + for (const [name, {displayName}] of this._descriptors.entries()) { + results.push({name, displayName}); + } + return results; + } + + getDescriptorOperators(type) { + const info = this._descriptors.get(type); + const results = []; + if (typeof info !== 'undefined') { + for (const [name, {displayName}] of info.operators.entries()) { + results.push({name, displayName}); + } + } + return results; + } + + getDefaultType() { + return this._defaultType; + } + + getDefaultOperator(type) { + const info = this._descriptors.get(type); + return (typeof info !== 'undefined' ? info.defaultOperator : ''); + } + + getOperatorDetails(type, operator) { + const info = this._getOperatorDetails(type, operator); + + const { + displayName=operator, + type: type2='string', + defaultValue='', + resetDefaultOnChange=false, + validate=null, + normalize=null + } = (typeof info === 'undefined' ? {} : info); + + return { + displayName, + type: type2, + defaultValue, + resetDefaultOnChange, + validate, + normalize + }; + } + + getDefaultCondition() { + const type = this.getDefaultType(); + const operator = this.getDefaultOperator(type); + const {defaultValue: value} = this.getOperatorDetails(type, operator); + return {type, operator, value}; + } + + removeConditionGroup(child) { + const index = child.index; + if (index < 0 || index >= this._children.length) { return false; } + + const child2 = this._children[index]; + if (child !== child2) { return false; } + + this._children.splice(index, 1); + child.cleanup(); + + for (let i = index, ii = this._children.length; i < ii; ++i) { + this._children[i].index = i; + } + + this.settingsController.modifyGlobalSettings([{ + action: 'splice', + path: this.getPath('conditionGroups'), + start: index, + deleteCount: 1, + items: [] + }]); + + this._triggerConditionGroupCountChanged(this._children.length); + + return true; + } + + splitValue(value) { + return value.split(/[,;\s]+/).map((v) => v.trim().toLowerCase()).filter((v) => v.length > 0); + } + + getPath(property) { + property = (typeof property === 'string' ? `.${property}` : ''); + return `profiles[${this.profileIndex}]${property}`; + } + + createKeyboardMouseInputField(inputNode, mouseButton) { + return new KeyboardMouseInputField(inputNode, mouseButton, this._os); + } + + // Private + + _onAddConditionGroupButtonClick() { + const conditionGroup = { + conditions: [this.getDefaultCondition()] + }; + const index = this._children.length; + + this._addConditionGroup(conditionGroup, index); + + this.settingsController.modifyGlobalSettings([{ + action: 'splice', + path: this.getPath('conditionGroups'), + start: index, + deleteCount: 0, + items: [conditionGroup] + }]); + + this._triggerConditionGroupCountChanged(this._children.length); + } + + _addConditionGroup(conditionGroup, index) { + const child = new ProfileConditionGroupUI(this, index); + child.prepare(conditionGroup); + this._children.push(child); + this._conditionGroupsContainer.appendChild(child.node); + return child; + } + + _getOperatorDetails(type, operator) { + const info = this._descriptors.get(type); + return (typeof info !== 'undefined' ? info.operators.get(operator) : void 0); + } + + _validateInteger(value) { + const number = Number.parseFloat(value); + return Number.isFinite(number) && Math.floor(number) === number; + } + + _validateDomains(value) { + return this.splitValue(value).length > 0; + } + + _validateRegExp(value) { + try { + new RegExp(value, 'i'); + return true; + } catch (e) { + return false; + } + } + + _normalizeInteger(value) { + const number = Number.parseFloat(value); + return `${number}`; + } + + _normalizeDomains(value) { + return this.splitValue(value).join(', '); + } + + _triggerConditionGroupCountChanged(count) { + this.trigger('conditionGroupCountChanged', {count, profileIndex: this._profileIndex}); + } +} + +class ProfileConditionGroupUI { + constructor(parent, index) { + this._parent = parent; + this._index = index; + this._node = null; + this._conditionContainer = null; + this._addConditionButton = null; + this._children = []; + this._eventListeners = new EventListenerCollection(); + } + + get settingsController() { + return this._parent.settingsController; + } + + get parent() { + return this._parent; + } + + get index() { + return this._index; + } + + set index(value) { + this._index = value; + } + + get node() { + return this._node; + } + + get childCount() { + return this._children.length; + } + + prepare(conditionGroup) { + this._node = this._parent.instantiateTemplate('profile-condition-group'); + this._conditionContainer = this._node.querySelector('.profile-condition-list'); + this._addConditionButton = this._node.querySelector('.profile-condition-add-button'); + + const conditions = conditionGroup.conditions; + for (let i = 0, ii = conditions.length; i < ii; ++i) { + this._addCondition(conditions[i], i); + } + + this._eventListeners.addEventListener(this._addConditionButton, 'click', this._onAddConditionButtonClick.bind(this), false); + } + + cleanup() { + this._eventListeners.removeAllEventListeners(); + + for (const child of this._children) { + child.cleanup(); + } + this._children = []; + + if (this._node === null) { return; } + + const node = this._node; + this._node = null; + this._conditionContainer = null; + this._addConditionButton = null; + + if (node.parentNode !== null) { + node.parentNode.removeChild(node); + } + } + + removeCondition(child) { + const index = child.index; + if (index < 0 || index >= this._children.length) { return false; } + + const child2 = this._children[index]; + if (child !== child2) { return false; } + + this._children.splice(index, 1); + child.cleanup(); + + for (let i = index, ii = this._children.length; i < ii; ++i) { + this._children[i].index = i; + } + + this.settingsController.modifyGlobalSettings([{ + action: 'splice', + path: this.getPath('conditions'), + start: index, + deleteCount: 1, + items: [] + }]); + + if (this._children.length === 0) { + this.removeSelf(); + } + + return true; + } + + getPath(property) { + property = (typeof property === 'string' ? `.${property}` : ''); + return this._parent.getPath(`conditionGroups[${this._index}]${property}`); + } + + removeSelf() { + this._parent.removeConditionGroup(this); + } + + // Private + + _onAddConditionButtonClick() { + const condition = this._parent.getDefaultCondition(); + const index = this._children.length; + + this._addCondition(condition, index); + + this.settingsController.modifyGlobalSettings([{ + action: 'splice', + path: this.getPath('conditions'), + start: index, + deleteCount: 0, + items: [condition] + }]); + } + + _addCondition(condition, index) { + const child = new ProfileConditionUI(this, index); + child.prepare(condition); + this._children.push(child); + this._conditionContainer.appendChild(child.node); + return child; + } +} + +class ProfileConditionUI { + constructor(parent, index) { + this._parent = parent; + this._index = index; + this._node = null; + this._typeInput = null; + this._operatorInput = null; + this._valueInputContainer = null; + this._removeButton = null; + this._mouseButton = null; + this._mouseButtonContainer = null; + this._menuButton = null; + this._value = ''; + this._kbmInputField = null; + this._eventListeners = new EventListenerCollection(); + this._inputEventListeners = new EventListenerCollection(); + } + + get settingsController() { + return this._parent.parent.settingsController; + } + + get parent() { + return this._parent; + } + + get index() { + return this._index; + } + + set index(value) { + this._index = value; + } + + get node() { + return this._node; + } + + prepare(condition) { + const {type, operator, value} = condition; + + this._node = this._parent.parent.instantiateTemplate('profile-condition'); + this._typeInput = this._node.querySelector('.profile-condition-type'); + this._typeOptionContainer = this._typeInput.querySelector('optgroup'); + this._operatorInput = this._node.querySelector('.profile-condition-operator'); + this._operatorOptionContainer = this._operatorInput.querySelector('optgroup'); + this._valueInput = this._node.querySelector('.profile-condition-input'); + this._removeButton = this._node.querySelector('.profile-condition-remove'); + this._mouseButton = this._node.querySelector('.mouse-button'); + this._mouseButtonContainer = this._node.querySelector('.mouse-button-container'); + this._menuButton = this._node.querySelector('.profile-condition-menu-button'); + + const operatorDetails = this._getOperatorDetails(type, operator); + this._updateTypes(type); + this._updateOperators(type, operator); + this._updateValueInput(value, operatorDetails); + + this._eventListeners.addEventListener(this._typeInput, 'change', this._onTypeChange.bind(this), false); + this._eventListeners.addEventListener(this._operatorInput, 'change', this._onOperatorChange.bind(this), false); + if (this._removeButton !== null) { this._eventListeners.addEventListener(this._removeButton, 'click', this._onRemoveButtonClick.bind(this), false); } + if (this._menuButton !== null) { + this._eventListeners.addEventListener(this._menuButton, 'menuOpen', this._onMenuOpen.bind(this), false); + this._eventListeners.addEventListener(this._menuButton, 'menuClose', this._onMenuClose.bind(this), false); + } + } + + cleanup() { + this._eventListeners.removeAllEventListeners(); + this._value = ''; + + if (this._node === null) { return; } + + const node = this._node; + this._node = null; + this._typeInput = null; + this._operatorInput = null; + this._valueInputContainer = null; + this._removeButton = null; + + if (node.parentNode !== null) { + node.parentNode.removeChild(node); + } + } + + getPath(property) { + property = (typeof property === 'string' ? `.${property}` : ''); + return this._parent.getPath(`conditions[${this._index}]${property}`); + } + + // Private + + _onTypeChange(e) { + const type = e.currentTarget.value; + this._setType(type); + } + + _onOperatorChange(e) { + const type = this._typeInput.value; + const operator = e.currentTarget.value; + this._setOperator(type, operator); + } + + _onValueInputChange({validate, normalize}, e) { + const node = e.currentTarget; + const value = node.value; + const okay = this._validateValue(value, validate); + this._value = value; + if (okay) { + const normalizedValue = this._normalizeValue(value, normalize); + node.value = normalizedValue; + this.settingsController.setGlobalSetting(this.getPath('value'), normalizedValue); + } + } + + _onModifierInputChange({validate, normalize}, {modifiers}) { + modifiers = this._joinModifiers(modifiers); + const okay = this._validateValue(modifiers, validate); + this._value = modifiers; + if (okay) { + const normalizedValue = this._normalizeValue(modifiers, normalize); + this.settingsController.setGlobalSetting(this.getPath('value'), normalizedValue); + } + } + + _onRemoveButtonClick() { + this._removeSelf(); + } + + _onMenuOpen(e) { + const bodyNode = e.detail.menu.bodyNode; + const deleteGroup = bodyNode.querySelector('.popup-menu-item[data-menu-action="deleteGroup"]'); + if (deleteGroup !== null) { + deleteGroup.hidden = (this._parent.childCount <= 1); + } + } + + _onMenuClose(e) { + switch (e.detail.action) { + case 'delete': + this._removeSelf(); + break; + case 'deleteGroup': + this._parent.removeSelf(); + break; + case 'resetValue': + this._resetValue(); + break; + } + } + + _getDescriptorTypes() { + return this._parent.parent.getDescriptorTypes(); + } + + _getDescriptorOperators(type) { + return this._parent.parent.getDescriptorOperators(type); + } + + _getOperatorDetails(type, operator) { + return this._parent.parent.getOperatorDetails(type, operator); + } + + _updateTypes(type) { + const types = this._getDescriptorTypes(); + this._updateSelect(this._typeInput, this._typeOptionContainer, types, type); + } + + _updateOperators(type, operator) { + const operators = this._getDescriptorOperators(type); + this._updateSelect(this._operatorInput, this._operatorOptionContainer, operators, operator); + } + + _updateSelect(select, optionContainer, values, value) { + optionContainer.textContent = ''; + for (const {name, displayName} of values) { + const option = document.createElement('option'); + option.value = name; + option.textContent = displayName; + optionContainer.appendChild(option); + } + select.value = value; + } + + _updateValueInput(value, {type, validate, normalize}) { + this._inputEventListeners.removeAllEventListeners(); + if (this._kbmInputField !== null) { + this._kbmInputField.cleanup(); + this._kbmInputField = null; + } + + let inputType = 'text'; + let inputValue = value; + let inputStep = null; + let showMouseButton = false; + const events = []; + const inputData = {validate, normalize}; + const node = this._valueInput; + + switch (type) { + case 'integer': + inputType = 'number'; + inputStep = '1'; + events.push(['addEventListener', node, 'change', this._onValueInputChange.bind(this, inputData), false]); + break; + case 'modifierKeys': + case 'modifierInputs': + inputValue = null; + showMouseButton = (type === 'modifierInputs'); + this._kbmInputField = this._parent.parent.createKeyboardMouseInputField(node, this._mouseButton); + this._kbmInputField.prepare(null, this._splitModifiers(value), showMouseButton, false); + events.push(['on', this._kbmInputField, 'change', this._onModifierInputChange.bind(this, inputData), false]); + break; + default: // 'string' + events.push(['addEventListener', node, 'change', this._onValueInputChange.bind(this, inputData), false]); + break; + } + + this._value = value; + delete node.dataset.invalid; + node.type = inputType; + if (inputValue !== null) { + node.value = inputValue; + } + if (typeof inputStep === 'string') { + node.step = inputStep; + } else { + node.removeAttribute('step'); + } + this._mouseButtonContainer.hidden = !showMouseButton; + for (const args of events) { + this._inputEventListeners.addGeneric(...args); + } + + this._validateValue(value, validate); + } + + _validateValue(value, validate) { + const okay = (validate === null || validate(value)); + this._valueInput.dataset.invalid = `${!okay}`; + return okay; + } + + _normalizeValue(value, normalize) { + return (normalize !== null ? normalize(value) : value); + } + + _removeSelf() { + this._parent.removeCondition(this); + } + + _splitModifiers(modifiersString) { + return modifiersString.split(/[,;\s]+/).map((v) => v.trim().toLowerCase()).filter((v) => v.length > 0); + } + + _joinModifiers(modifiersArray) { + return modifiersArray.join(', '); + } + + async _setType(type, operator) { + const operators = this._getDescriptorOperators(type); + if (typeof operator === 'undefined') { + operator = operators.length > 0 ? operators[0].name : ''; + } + const operatorDetails = this._getOperatorDetails(type, operator); + const {defaultValue} = operatorDetails; + this._updateSelect(this._operatorInput, this._operatorOptionContainer, operators, operator); + this._updateValueInput(defaultValue, operatorDetails); + await this.settingsController.modifyGlobalSettings([ + {action: 'set', path: this.getPath('type'), value: type}, + {action: 'set', path: this.getPath('operator'), value: operator}, + {action: 'set', path: this.getPath('value'), value: defaultValue} + ]); + } + + async _setOperator(type, operator) { + const operatorDetails = this._getOperatorDetails(type, operator); + const settingsModifications = [{action: 'set', path: this.getPath('operator'), value: operator}]; + if (operatorDetails.resetDefaultOnChange) { + const {defaultValue} = operatorDetails; + const okay = this._updateValueInput(defaultValue, operatorDetails); + if (okay) { + settingsModifications.push({action: 'set', path: this.getPath('value'), value: defaultValue}); + } + } + await this.settingsController.modifyGlobalSettings(settingsModifications); + } + + async _resetValue() { + const type = this._typeInput.value; + const operator = this._operatorInput.value; + await this._setType(type, operator); + } +} diff --git a/ext/js/pages/settings/profile-controller.js b/ext/js/pages/settings/profile-controller.js new file mode 100644 index 00000000..3883e80a --- /dev/null +++ b/ext/js/pages/settings/profile-controller.js @@ -0,0 +1,697 @@ +/* + * 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 + * ProfileConditionsUI + */ + +class ProfileController { + constructor(settingsController, modalController) { + this._settingsController = settingsController; + this._modalController = modalController; + this._profileConditionsUI = new ProfileConditionsUI(settingsController); + this._profileConditionsIndex = null; + this._profileActiveSelect = null; + this._profileTargetSelect = null; + this._profileCopySourceSelect = null; + this._profileNameInput = null; + this._removeProfileNameElement = null; + this._profileAddButton = null; + this._profileRemoveButton = null; + this._profileRemoveConfirmButton = null; + this._profileCopyButton = null; + this._profileCopyConfirmButton = null; + this._profileMoveUpButton = null; + this._profileMoveDownButton = null; + this._profileEntryListContainer = null; + this._profileConditionsProfileName = null; + this._profileRemoveModal = null; + this._profileCopyModal = null; + this._profileConditionsModal = null; + this._profileEntriesSupported = false; + this._profileEntryList = []; + this._profiles = []; + this._profileCurrent = 0; + } + + get profileCount() { + return this._profiles.length; + } + + get profileCurrentIndex() { + return this._profileCurrent; + } + + async prepare() { + const {platform: {os}} = await yomichan.api.getEnvironmentInfo(); + this._profileConditionsUI.os = os; + + this._profileActiveSelect = document.querySelector('#profile-active-select'); + this._profileTargetSelect = document.querySelector('#profile-target-select'); + this._profileCopySourceSelect = document.querySelector('#profile-copy-source-select'); + this._profileNameInput = document.querySelector('#profile-name-input'); + this._removeProfileNameElement = document.querySelector('#profile-remove-name'); + this._profileAddButton = document.querySelector('#profile-add-button'); + this._profileRemoveButton = document.querySelector('#profile-remove-button'); + this._profileRemoveConfirmButton = document.querySelector('#profile-remove-confirm-button'); + this._profileCopyButton = document.querySelector('#profile-copy-button'); + this._profileCopyConfirmButton = document.querySelector('#profile-copy-confirm-button'); + this._profileMoveUpButton = document.querySelector('#profile-move-up-button'); + this._profileMoveDownButton = document.querySelector('#profile-move-down-button'); + this._profileEntryListContainer = document.querySelector('#profile-entry-list'); + this._profileConditionsProfileName = document.querySelector('#profile-conditions-profile-name'); + this._profileRemoveModal = this._modalController.getModal('profile-remove'); + this._profileCopyModal = this._modalController.getModal('profile-copy'); + this._profileConditionsModal = this._modalController.getModal('profile-conditions'); + + this._profileEntriesSupported = (this._profileEntryListContainer !== null); + + if (this._profileActiveSelect !== null) { this._profileActiveSelect.addEventListener('change', this._onProfileActiveChange.bind(this), false); } + if (this._profileTargetSelect !== null) { this._profileTargetSelect.addEventListener('change', this._onProfileTargetChange.bind(this), false); } + if (this._profileNameInput !== null) { this._profileNameInput.addEventListener('change', this._onNameChanged.bind(this), false); } + if (this._profileAddButton !== null) { this._profileAddButton.addEventListener('click', this._onAdd.bind(this), false); } + if (this._profileRemoveButton !== null) { this._profileRemoveButton.addEventListener('click', this._onDelete.bind(this), false); } + if (this._profileRemoveConfirmButton !== null) { this._profileRemoveConfirmButton.addEventListener('click', this._onDeleteConfirm.bind(this), false); } + if (this._profileCopyButton !== null) { this._profileCopyButton.addEventListener('click', this._onCopy.bind(this), false); } + if (this._profileCopyConfirmButton !== null) { this._profileCopyConfirmButton.addEventListener('click', this._onCopyConfirm.bind(this), false); } + if (this._profileMoveUpButton !== null) { this._profileMoveUpButton.addEventListener('click', this._onMove.bind(this, -1), false); } + if (this._profileMoveDownButton !== null) { this._profileMoveDownButton.addEventListener('click', this._onMove.bind(this, 1), false); } + + this._profileConditionsUI.on('conditionGroupCountChanged', this._onConditionGroupCountChanged.bind(this)); + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + this._onOptionsChanged(); + } + + async moveProfile(profileIndex, offset) { + if (this._getProfile(profileIndex) === null) { return; } + + const profileIndexNew = Math.max(0, Math.min(this._profiles.length - 1, profileIndex + offset)); + if (profileIndex === profileIndexNew) { return; } + + await this.swapProfiles(profileIndex, profileIndexNew); + } + + async setProfileName(profileIndex, value) { + const profile = this._getProfile(profileIndex); + if (profile === null) { return; } + + profile.name = value; + this._updateSelectName(profileIndex, value); + + const profileEntry = this._getProfileEntry(profileIndex); + if (profileEntry !== null) { profileEntry.setName(value); } + + await this._settingsController.setGlobalSetting(`profiles[${profileIndex}].name`, value); + } + + async setDefaultProfile(profileIndex) { + const profile = this._getProfile(profileIndex); + if (profile === null) { return; } + + this._profileActiveSelect.value = `${profileIndex}`; + this._profileCurrent = profileIndex; + + const profileEntry = this._getProfileEntry(profileIndex); + if (profileEntry !== null) { profileEntry.setIsDefault(true); } + + await this._settingsController.setGlobalSetting('profileCurrent', profileIndex); + } + + async copyProfile(sourceProfileIndex, destinationProfileIndex) { + const sourceProfile = this._getProfile(sourceProfileIndex); + if (sourceProfile === null || !this._getProfile(destinationProfileIndex)) { return; } + + const options = clone(sourceProfile.options); + this._profiles[destinationProfileIndex].options = options; + + this._updateProfileSelectOptions(); + + const destinationProfileEntry = this._getProfileEntry(destinationProfileIndex); + if (destinationProfileEntry !== null) { + destinationProfileEntry.updateState(); + } + + await this._settingsController.modifyGlobalSettings([{ + action: 'set', + path: `profiles[${destinationProfileIndex}].options`, + value: options + }]); + + await this._settingsController.refresh(); + } + + async duplicateProfile(profileIndex) { + const profile = this._getProfile(profileIndex); + if (this.profile === null) { return; } + + // Create new profile + const newProfile = clone(profile); + newProfile.name = this._createCopyName(profile.name, this._profiles, 100); + + // Update state + const index = this._profiles.length; + this._profiles.push(newProfile); + if (this._profileEntriesSupported) { + this._addProfileEntry(index); + } + this._updateProfileSelectOptions(); + + // Modify settings + await this._settingsController.modifyGlobalSettings([{ + action: 'splice', + path: 'profiles', + start: index, + deleteCount: 0, + items: [newProfile] + }]); + + // Update profile index + this._settingsController.profileIndex = index; + } + + async deleteProfile(profileIndex) { + const profile = this._getProfile(profileIndex); + if (profile === null || this.profileCount <= 1) { return; } + + // Get indices + let profileCurrentNew = this._profileCurrent; + const settingsProfileIndex = this._settingsController.profileIndex; + + // Construct settings modifications + const modifications = [{ + action: 'splice', + path: 'profiles', + start: profileIndex, + deleteCount: 1, + items: [] + }]; + if (profileCurrentNew >= profileIndex) { + profileCurrentNew = Math.min(profileCurrentNew - 1, this._profiles.length - 1); + modifications.push({ + action: 'set', + path: 'profileCurrent', + value: profileCurrentNew + }); + } + + // Update state + this._profileCurrent = profileCurrentNew; + + this._profiles.splice(profileIndex, 1); + + if (profileIndex < this._profileEntryList.length) { + const profileEntry = this._profileEntryList[profileIndex]; + profileEntry.cleanup(); + this._profileEntryList.splice(profileIndex, 1); + + for (let i = profileIndex, ii = this._profileEntryList.length; i < ii; ++i) { + this._profileEntryList[i].index = i; + } + } + + const profileEntry2 = this._getProfileEntry(profileCurrentNew); + if (profileEntry2 !== null) { + profileEntry2.setIsDefault(true); + } + + this._updateProfileSelectOptions(); + + // Modify settings + await this._settingsController.modifyGlobalSettings(modifications); + + // Update profile index + if (settingsProfileIndex === profileIndex) { + this._settingsController.profileIndex = profileCurrentNew; + } + } + + async swapProfiles(index1, index2) { + const profile1 = this._getProfile(index1); + const profile2 = this._getProfile(index2); + if (profile1 === null || profile2 === null || index1 === index2) { return; } + + // Get swapped indices + const profileCurrent = this._profileCurrent; + const profileCurrentNew = this._getSwappedValue(profileCurrent, index1, index2); + + const settingsProfileIndex = this._settingsController.profileIndex; + const settingsProfileIndexNew = this._getSwappedValue(settingsProfileIndex, index1, index2); + + // Construct settings modifications + const modifications = [{ + action: 'swap', + path1: `profiles[${index1}]`, + path2: `profiles[${index2}]` + }]; + if (profileCurrentNew !== profileCurrent) { + modifications.push({ + action: 'set', + path: 'profileCurrent', + value: profileCurrentNew + }); + } + + // Update state + this._profileCurrent = profileCurrentNew; + + this._profiles[index1] = profile2; + this._profiles[index2] = profile1; + + const entry1 = this._getProfileEntry(index1); + const entry2 = this._getProfileEntry(index2); + if (entry1 !== null && entry2 !== null) { + entry1.index = index2; + entry2.index = index1; + this._swapDomNodes(entry1.node, entry2.node); + this._profileEntryList[index1] = entry2; + this._profileEntryList[index2] = entry1; + } + + this._updateProfileSelectOptions(); + + // Modify settings + await this._settingsController.modifyGlobalSettings(modifications); + + // Update profile index + if (settingsProfileIndex !== settingsProfileIndexNew) { + this._settingsController.profileIndex = settingsProfileIndexNew; + } + } + + openDeleteProfileModal(profileIndex) { + const profile = this._getProfile(profileIndex); + if (profile === null || this.profileCount <= 1) { return; } + + this._removeProfileNameElement.textContent = profile.name; + this._profileRemoveModal.node.dataset.profileIndex = `${profileIndex}`; + this._profileRemoveModal.setVisible(true); + } + + openCopyProfileModal(profileIndex) { + const profile = this._getProfile(profileIndex); + if (profile === null || this.profileCount <= 1) { return; } + + let copyFromIndex = this._profileCurrent; + if (copyFromIndex === profileIndex) { + if (profileIndex !== 0) { + copyFromIndex = 0; + } else if (this.profileCount > 1) { + copyFromIndex = 1; + } + } + + const profileIndexString = `${profileIndex}`; + for (const option of this._profileCopySourceSelect.querySelectorAll('option')) { + const {value} = option; + option.disabled = (value === profileIndexString); + } + this._profileCopySourceSelect.value = `${copyFromIndex}`; + + this._profileCopyModal.node.dataset.profileIndex = `${profileIndex}`; + this._profileCopyModal.setVisible(true); + } + + openProfileConditionsModal(profileIndex) { + const profile = this._getProfile(profileIndex); + if (profile === null) { return; } + + if (this._profileConditionsModal === null) { return; } + this._profileConditionsModal.setVisible(true); + + this._profileConditionsUI.cleanup(); + this._profileConditionsIndex = profileIndex; + this._profileConditionsUI.prepare(profileIndex); + if (this._profileConditionsProfileName !== null) { + this._profileConditionsProfileName.textContent = profile.name; + } + } + + // Private + + async _onOptionsChanged() { + // Update state + const {profiles, profileCurrent} = await this._settingsController.getOptionsFull(); + this._profiles = profiles; + this._profileCurrent = profileCurrent; + + const settingsProfileIndex = this._settingsController.profileIndex; + const settingsProfile = this._getProfile(settingsProfileIndex); + + // Udpate UI + this._updateProfileSelectOptions(); + + this._profileActiveSelect.value = `${profileCurrent}`; + this._profileTargetSelect.value = `${settingsProfileIndex}`; + + if (this._profileRemoveButton !== null) { this._profileRemoveButton.disabled = (profiles.length <= 1); } + if (this._profileCopyButton !== null) { this._profileCopyButton.disabled = (profiles.length <= 1); } + if (this._profileMoveUpButton !== null) { this._profileMoveUpButton.disabled = (settingsProfileIndex <= 0); } + if (this._profileMoveDownButton !== null) { this._profileMoveDownButton.disabled = (settingsProfileIndex >= profiles.length - 1); } + + if (this._profileNameInput !== null && settingsProfile !== null) { this._profileNameInput.value = settingsProfile.name; } + + // Update profile conditions + this._profileConditionsUI.cleanup(); + const conditionsProfile = this._getProfile(this._profileConditionsIndex !== null ? this._profileConditionsIndex : settingsProfileIndex); + if (conditionsProfile !== null) { + this._profileConditionsUI.prepare(settingsProfileIndex); + } + + // Udpate profile entries + for (const entry of this._profileEntryList) { + entry.cleanup(); + } + this._profileEntryList = []; + if (this._profileEntriesSupported) { + for (let i = 0, ii = profiles.length; i < ii; ++i) { + this._addProfileEntry(i); + } + } + } + + _onProfileActiveChange(e) { + const value = this._tryGetValidProfileIndex(e.currentTarget.value); + if (value === null) { return; } + this.setDefaultProfile(value); + } + + _onProfileTargetChange(e) { + const value = this._tryGetValidProfileIndex(e.currentTarget.value); + if (value === null) { return; } + this._settingsController.profileIndex = value; + } + + _onNameChanged(e) { + this.setProfileName(this._settingsController.profileIndex, e.currentTarget.value); + } + + _onAdd() { + this.duplicateProfile(this._settingsController.profileIndex); + } + + _onDelete(e) { + const profileIndex = this._settingsController.profileIndex; + if (e.shiftKey) { + this.deleteProfile(profileIndex); + } else { + this.openDeleteProfileModal(profileIndex); + } + } + + _onDeleteConfirm() { + const modal = this._profileRemoveModal; + modal.setVisible(false); + const {node} = modal; + let profileIndex = node.dataset.profileIndex; + delete node.dataset.profileIndex; + + profileIndex = this._tryGetValidProfileIndex(profileIndex); + if (profileIndex === null) { return; } + + this.deleteProfile(profileIndex); + } + + _onCopy() { + this.openCopyProfileModal(this._settingsController.profileIndex); + } + + _onCopyConfirm() { + const modal = this._profileCopyModal; + modal.setVisible(false); + const {node} = modal; + let destinationProfileIndex = node.dataset.profileIndex; + delete node.dataset.profileIndex; + + destinationProfileIndex = this._tryGetValidProfileIndex(destinationProfileIndex); + if (destinationProfileIndex === null) { return; } + + const sourceProfileIndex = this._tryGetValidProfileIndex(this._profileCopySourceSelect.value); + if (sourceProfileIndex === null) { return; } + + this.copyProfile(sourceProfileIndex, destinationProfileIndex); + } + + _onMove(offset) { + this.moveProfile(this._settingsController.profileIndex, offset); + } + + _onConditionGroupCountChanged({count, profileIndex}) { + if (profileIndex >= 0 && profileIndex < this._profileEntryList.length) { + const profileEntry = this._profileEntryList[profileIndex]; + profileEntry.setConditionGroupsCount(count); + } + } + + _addProfileEntry(profileIndex) { + const profile = this._profiles[profileIndex]; + const node = this._settingsController.instantiateTemplate('profile-entry'); + const entry = new ProfileEntry(this, node); + this._profileEntryList.push(entry); + entry.prepare(profile, profileIndex); + this._profileEntryListContainer.appendChild(node); + } + + _updateProfileSelectOptions() { + for (const select of this._getAllProfileSelects()) { + const fragment = document.createDocumentFragment(); + for (let i = 0; i < this._profiles.length; ++i) { + const profile = this._profiles[i]; + const option = document.createElement('option'); + option.value = `${i}`; + option.textContent = profile.name; + fragment.appendChild(option); + } + select.textContent = ''; + select.appendChild(fragment); + } + } + + _updateSelectName(index, name) { + const optionValue = `${index}`; + for (const select of this._getAllProfileSelects()) { + for (const option of select.querySelectorAll('option')) { + if (option.value === optionValue) { + option.textContent = name; + } + } + } + } + + _getAllProfileSelects() { + return [ + this._profileActiveSelect, + this._profileTargetSelect, + this._profileCopySourceSelect + ]; + } + + _tryGetValidProfileIndex(stringValue) { + if (typeof stringValue !== 'string') { return null; } + const intValue = parseInt(stringValue, 10); + return ( + Number.isFinite(intValue) && + intValue >= 0 && + intValue < this.profileCount ? + intValue : null + ); + } + + _createCopyName(name, profiles, maxUniqueAttempts) { + let space, index, prefix, suffix; + const match = /^([\w\W]*\(Copy)((\s+)(\d+))?(\)\s*)$/.exec(name); + if (match === null) { + prefix = `${name} (Copy`; + space = ''; + index = ''; + suffix = ')'; + } else { + prefix = match[1]; + suffix = match[5]; + if (typeof match[2] === 'string') { + space = match[3]; + index = parseInt(match[4], 10) + 1; + } else { + space = ' '; + index = 2; + } + } + + let i = 0; + while (true) { + const newName = `${prefix}${space}${index}${suffix}`; + if (i++ >= maxUniqueAttempts || profiles.findIndex((profile) => profile.name === newName) < 0) { + return newName; + } + if (typeof index !== 'number') { + index = 2; + space = ' '; + } else { + ++index; + } + } + } + + _getSwappedValue(currentValue, value1, value2) { + if (currentValue === value1) { return value2; } + if (currentValue === value2) { return value1; } + return currentValue; + } + + _getProfile(profileIndex) { + return (profileIndex >= 0 && profileIndex < this._profiles.length ? this._profiles[profileIndex] : null); + } + + _getProfileEntry(profileIndex) { + return (profileIndex >= 0 && profileIndex < this._profileEntryList.length ? this._profileEntryList[profileIndex] : null); + } + + _swapDomNodes(node1, node2) { + const parent1 = node1.parentNode; + const parent2 = node2.parentNode; + const next1 = node1.nextSibling; + const next2 = node2.nextSibling; + if (node2 !== next1) { parent1.insertBefore(node2, next1); } + if (node1 !== next2) { parent2.insertBefore(node1, next2); } + } +} + +class ProfileEntry { + constructor(profileController, node) { + this._profileController = profileController; + this._node = node; + this._profile = null; + this._index = 0; + this._isDefaultRadio = null; + this._nameInput = null; + this._countLink = null; + this._countText = null; + this._menuButton = null; + this._eventListeners = new EventListenerCollection(); + } + + get index() { + return this._index; + } + + set index(value) { + this._index = value; + } + + get node() { + return this._node; + } + + prepare(profile, index) { + this._profile = profile; + this._index = index; + + const node = this._node; + this._isDefaultRadio = node.querySelector('.profile-entry-is-default-radio'); + this._nameInput = node.querySelector('.profile-entry-name-input'); + this._countLink = node.querySelector('.profile-entry-condition-count-link'); + this._countText = node.querySelector('.profile-entry-condition-count'); + this._menuButton = node.querySelector('.profile-entry-menu-button'); + + this.updateState(); + + this._eventListeners.addEventListener(this._isDefaultRadio, 'change', this._onIsDefaultRadioChange.bind(this), false); + this._eventListeners.addEventListener(this._nameInput, 'input', this._onNameInputInput.bind(this), false); + this._eventListeners.addEventListener(this._countLink, 'click', this._onConditionsCountLinkClick.bind(this), false); + this._eventListeners.addEventListener(this._menuButton, 'menuOpen', this._onMenuOpen.bind(this), false); + this._eventListeners.addEventListener(this._menuButton, 'menuClose', this._onMenuClose.bind(this), false); + } + + cleanup() { + this._eventListeners.removeAllEventListeners(); + if (this._node.parentNode !== null) { + this._node.parentNode.removeChild(this._node); + } + } + + setName(value) { + if (this._nameInput.value === value) { return; } + this._nameInput.value = value; + } + + setIsDefault(value) { + this._isDefaultRadio.checked = value; + } + + updateState() { + this._nameInput.value = this._profile.name; + this._countText.textContent = `${this._profile.conditionGroups.length}`; + this._isDefaultRadio.checked = (this._index === this._profileController.profileCurrentIndex); + } + + setConditionGroupsCount(count) { + this._countText.textContent = `${count}`; + } + + // Private + + _onIsDefaultRadioChange(e) { + if (!e.currentTarget.checked) { return; } + this._profileController.setDefaultProfile(this._index); + } + + _onNameInputInput(e) { + const name = e.currentTarget.value; + this._profileController.setProfileName(this._index, name); + } + + _onConditionsCountLinkClick() { + this._profileController.openProfileConditionsModal(this._index); + } + + _onMenuOpen(e) { + const bodyNode = e.detail.menu.bodyNode; + const count = this._profileController.profileCount; + this._setMenuActionEnabled(bodyNode, 'moveUp', this._index > 0); + this._setMenuActionEnabled(bodyNode, 'moveDown', this._index < count - 1); + this._setMenuActionEnabled(bodyNode, 'copyFrom', count > 1); + this._setMenuActionEnabled(bodyNode, 'delete', count > 1); + } + + _onMenuClose(e) { + switch (e.detail.action) { + case 'moveUp': + this._profileController.moveProfile(this._index, -1); + break; + case 'moveDown': + this._profileController.moveProfile(this._index, 1); + break; + case 'copyFrom': + this._profileController.openCopyProfileModal(this._index); + break; + case 'editConditions': + this._profileController.openProfileConditionsModal(this._index); + break; + case 'duplicate': + this._profileController.duplicateProfile(this._index); + break; + case 'delete': + this._profileController.openDeleteProfileModal(this._index); + break; + } + } + + _setMenuActionEnabled(menu, action, enabled) { + const element = menu.querySelector(`[data-menu-action="${action}"]`); + if (element === null) { return; } + element.disabled = !enabled; + } +} diff --git a/ext/js/pages/settings/scan-inputs-controller.js b/ext/js/pages/settings/scan-inputs-controller.js new file mode 100644 index 00000000..79b2bdf4 --- /dev/null +++ b/ext/js/pages/settings/scan-inputs-controller.js @@ -0,0 +1,309 @@ +/* + * 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 + * KeyboardMouseInputField + */ + +class ScanInputsController { + constructor(settingsController) { + this._settingsController = settingsController; + this._os = null; + this._container = null; + this._addButton = null; + this._scanningInputCountNodes = null; + this._entries = []; + } + + async prepare() { + const {platform: {os}} = await yomichan.api.getEnvironmentInfo(); + this._os = os; + + this._container = document.querySelector('#scan-input-list'); + this._addButton = document.querySelector('#scan-input-add'); + this._scanningInputCountNodes = document.querySelectorAll('.scanning-input-count'); + + this._addButton.addEventListener('click', this._onAddButtonClick.bind(this), false); + this._settingsController.on('scanInputsChanged', this._onScanInputsChanged.bind(this)); + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + + this.refresh(); + } + + removeInput(index) { + if (index < 0 || index >= this._entries.length) { return false; } + const input = this._entries[index]; + input.cleanup(); + this._entries.splice(index, 1); + for (let i = index, ii = this._entries.length; i < ii; ++i) { + this._entries[i].index = i; + } + this._updateCounts(); + this._modifyProfileSettings([{ + action: 'splice', + path: 'scanning.inputs', + start: index, + deleteCount: 1, + items: [] + }]); + return true; + } + + async setProperty(index, property, value, event) { + const path = `scanning.inputs[${index}].${property}`; + await this._settingsController.setProfileSetting(path, value); + if (event) { + this._triggerScanInputsChanged(); + } + } + + instantiateTemplate(name) { + return this._settingsController.instantiateTemplate(name); + } + + async refresh() { + const options = await this._settingsController.getOptions(); + this._onOptionsChanged({options}); + } + + // Private + + _onScanInputsChanged({source}) { + if (source === this) { return; } + this.refresh(); + } + + _onOptionsChanged({options}) { + const {inputs} = options.scanning; + + for (let i = this._entries.length - 1; i >= 0; --i) { + this._entries[i].cleanup(); + } + this._entries.length = 0; + + for (let i = 0, ii = inputs.length; i < ii; ++i) { + this._addOption(i, inputs[i]); + } + + this._updateCounts(); + } + + _onAddButtonClick(e) { + e.preventDefault(); + + const index = this._entries.length; + const scanningInput = ScanInputsController.createDefaultMouseInput('', ''); + this._addOption(index, scanningInput); + this._updateCounts(); + this._modifyProfileSettings([{ + action: 'splice', + path: 'scanning.inputs', + start: index, + deleteCount: 0, + items: [scanningInput] + }]); + } + + _addOption(index, scanningInput) { + const field = new ScanInputField(this, index, this._os); + this._entries.push(field); + field.prepare(this._container, scanningInput); + } + + _updateCounts() { + const stringValue = `${this._entries.length}`; + for (const node of this._scanningInputCountNodes) { + node.textContent = stringValue; + } + } + + async _modifyProfileSettings(targets) { + await this._settingsController.modifyProfileSettings(targets); + this._triggerScanInputsChanged(); + } + + _triggerScanInputsChanged() { + this._settingsController.trigger('scanInputsChanged', {source: this}); + } + + static createDefaultMouseInput(include, exclude) { + return { + include, + exclude, + types: {mouse: true, touch: false, pen: false}, + options: { + showAdvanced: false, + searchTerms: true, + searchKanji: true, + scanOnTouchMove: true, + scanOnPenHover: true, + scanOnPenPress: true, + scanOnPenRelease: false, + preventTouchScrolling: true + } + }; + } +} + +class ScanInputField { + constructor(parent, index, os) { + this._parent = parent; + this._index = index; + this._os = os; + this._node = null; + this._includeInputField = null; + this._excludeInputField = null; + this._eventListeners = new EventListenerCollection(); + } + + get index() { + return this._index; + } + + set index(value) { + this._index = value; + this._updateDataSettingTargets(); + } + + prepare(container, scanningInput) { + const {include, exclude, options: {showAdvanced}} = scanningInput; + + const node = this._parent.instantiateTemplate('scan-input'); + const includeInputNode = node.querySelector('.scan-input-field[data-property=include]'); + const includeMouseButton = node.querySelector('.mouse-button[data-property=include]'); + const excludeInputNode = node.querySelector('.scan-input-field[data-property=exclude]'); + const excludeMouseButton = node.querySelector('.mouse-button[data-property=exclude]'); + const removeButton = node.querySelector('.scan-input-remove'); + const menuButton = node.querySelector('.scanning-input-menu-button'); + + node.dataset.showAdvanced = `${showAdvanced}`; + + this._node = node; + container.appendChild(node); + + const isPointerTypeSupported = this._isPointerTypeSupported.bind(this); + this._includeInputField = new KeyboardMouseInputField(includeInputNode, includeMouseButton, this._os, isPointerTypeSupported); + this._excludeInputField = new KeyboardMouseInputField(excludeInputNode, excludeMouseButton, this._os, isPointerTypeSupported); + this._includeInputField.prepare(null, this._splitModifiers(include), true, false); + this._excludeInputField.prepare(null, this._splitModifiers(exclude), true, false); + + this._eventListeners.on(this._includeInputField, 'change', this._onIncludeValueChange.bind(this)); + this._eventListeners.on(this._excludeInputField, 'change', this._onExcludeValueChange.bind(this)); + if (removeButton !== null) { + this._eventListeners.addEventListener(removeButton, 'click', this._onRemoveClick.bind(this)); + } + if (menuButton !== null) { + this._eventListeners.addEventListener(menuButton, 'menuOpen', this._onMenuOpen.bind(this)); + this._eventListeners.addEventListener(menuButton, 'menuClose', this._onMenuClose.bind(this)); + } + + this._updateDataSettingTargets(); + } + + cleanup() { + this._eventListeners.removeAllEventListeners(); + if (this._includeInputField !== null) { + this._includeInputField.cleanup(); + this._includeInputField = null; + } + if (this._node !== null) { + const parent = this._node.parentNode; + if (parent !== null) { parent.removeChild(this._node); } + this._node = null; + } + } + + // Private + + _onIncludeValueChange({modifiers}) { + modifiers = this._joinModifiers(modifiers); + this._parent.setProperty(this._index, 'include', modifiers, true); + } + + _onExcludeValueChange({modifiers}) { + modifiers = this._joinModifiers(modifiers); + this._parent.setProperty(this._index, 'exclude', modifiers, true); + } + + _onRemoveClick(e) { + e.preventDefault(); + this._removeSelf(); + } + + _onMenuOpen(e) { + const bodyNode = e.detail.menu.bodyNode; + const showAdvanced = bodyNode.querySelector('.popup-menu-item[data-menu-action="showAdvanced"]'); + const hideAdvanced = bodyNode.querySelector('.popup-menu-item[data-menu-action="hideAdvanced"]'); + const advancedVisible = (this._node.dataset.showAdvanced === 'true'); + if (showAdvanced !== null) { + showAdvanced.hidden = advancedVisible; + } + if (hideAdvanced !== null) { + hideAdvanced.hidden = !advancedVisible; + } + } + + _onMenuClose(e) { + switch (e.detail.action) { + case 'remove': + this._removeSelf(); + break; + case 'showAdvanced': + this._setAdvancedOptionsVisible(true); + break; + case 'hideAdvanced': + this._setAdvancedOptionsVisible(false); + break; + case 'clearInputs': + this._includeInputField.clearInputs(); + this._excludeInputField.clearInputs(); + break; + } + } + + _isPointerTypeSupported(pointerType) { + if (this._node === null) { return false; } + const node = this._node.querySelector(`input.scan-input-settings-checkbox[data-property="types.${pointerType}"]`); + return node !== null && node.checked; + } + + _updateDataSettingTargets() { + const index = this._index; + for (const typeCheckbox of this._node.querySelectorAll('.scan-input-settings-checkbox')) { + const {property} = typeCheckbox.dataset; + typeCheckbox.dataset.setting = `scanning.inputs[${index}].${property}`; + } + } + + _removeSelf() { + this._parent.removeInput(this._index); + } + + _setAdvancedOptionsVisible(showAdvanced) { + showAdvanced = !!showAdvanced; + this._node.dataset.showAdvanced = `${showAdvanced}`; + this._parent.setProperty(this._index, 'options.showAdvanced', showAdvanced, false); + } + + _splitModifiers(modifiersString) { + return modifiersString.split(/[,;\s]+/).map((v) => v.trim().toLowerCase()).filter((v) => v.length > 0); + } + + _joinModifiers(modifiersArray) { + return modifiersArray.join(', '); + } +} diff --git a/ext/js/pages/settings/scan-inputs-simple-controller.js b/ext/js/pages/settings/scan-inputs-simple-controller.js new file mode 100644 index 00000000..b011af5d --- /dev/null +++ b/ext/js/pages/settings/scan-inputs-simple-controller.js @@ -0,0 +1,246 @@ +/* + * 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 + * HotkeyUtil + * ScanInputsController + */ + +class ScanInputsSimpleController { + constructor(settingsController) { + this._settingsController = settingsController; + this._middleMouseButtonScan = null; + this._mainScanModifierKeyInput = null; + this._mainScanModifierKeyInputHasOther = false; + this._hotkeyUtil = new HotkeyUtil(); + } + + async prepare() { + this._middleMouseButtonScan = document.querySelector('#middle-mouse-button-scan'); + this._mainScanModifierKeyInput = document.querySelector('#main-scan-modifier-key'); + + const {platform: {os}} = await yomichan.api.getEnvironmentInfo(); + this._hotkeyUtil.os = os; + + this._mainScanModifierKeyInputHasOther = false; + this._populateSelect(this._mainScanModifierKeyInput, this._mainScanModifierKeyInputHasOther); + + const options = await this._settingsController.getOptions(); + + this._middleMouseButtonScan.addEventListener('change', this.onMiddleMouseButtonScanChange.bind(this), false); + this._mainScanModifierKeyInput.addEventListener('change', this._onMainScanModifierKeyInputChange.bind(this), false); + + this._settingsController.on('scanInputsChanged', this._onScanInputsChanged.bind(this)); + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + this._onOptionsChanged({options}); + } + + async refresh() { + const options = await this._settingsController.getOptions(); + this._onOptionsChanged({options}); + } + + // Private + + _onScanInputsChanged({source}) { + if (source === this) { return; } + this.refresh(); + } + + _onOptionsChanged({options}) { + const {scanning: {inputs}} = options; + const middleMouseSupportedIndex = this._getIndexOfMiddleMouseButtonScanInput(inputs); + const mainScanInputIndex = this._getIndexOfMainScanInput(inputs); + const hasMainScanInput = (mainScanInputIndex >= 0); + + let middleMouseSupported = false; + if (middleMouseSupportedIndex >= 0) { + const includeValues = this._splitValue(inputs[middleMouseSupportedIndex].include); + if (includeValues.includes('mouse2')) { + middleMouseSupported = true; + } + } + + let mainScanInput = 'none'; + if (hasMainScanInput) { + const includeValues = this._splitValue(inputs[mainScanInputIndex].include); + if (includeValues.length > 0) { + mainScanInput = includeValues[0]; + } + } else { + mainScanInput = 'other'; + } + + this._setHasMainScanInput(hasMainScanInput); + + this._middleMouseButtonScan.checked = middleMouseSupported; + this._mainScanModifierKeyInput.value = mainScanInput; + } + + onMiddleMouseButtonScanChange(e) { + const middleMouseSupported = e.currentTarget.checked; + this._setMiddleMouseSuppported(middleMouseSupported); + } + + _onMainScanModifierKeyInputChange(e) { + const mainScanKey = e.currentTarget.value; + if (mainScanKey === 'other') { return; } + const mainScanInputs = (mainScanKey === 'none' ? [] : [mainScanKey]); + this._setMainScanInputs(mainScanInputs); + } + + _populateSelect(select, hasOther) { + const modifierKeys = [ + {value: 'none', name: 'No key'} + ]; + for (const value of ['alt', 'ctrl', 'shift', 'meta']) { + const name = this._hotkeyUtil.getModifierDisplayValue(value); + modifierKeys.push({value, name}); + } + + if (hasOther) { + modifierKeys.push({value: 'other', name: 'Other'}); + } + + const fragment = document.createDocumentFragment(); + for (const {value, name} of modifierKeys) { + const option = document.createElement('option'); + option.value = value; + option.textContent = name; + fragment.appendChild(option); + } + select.textContent = ''; + select.appendChild(fragment); + } + + _splitValue(value) { + return value.split(/[,;\s]+/).map((v) => v.trim().toLowerCase()).filter((v) => v.length > 0); + } + + async _setMiddleMouseSuppported(value) { + // Find target index + const options = await this._settingsController.getOptions(); + const {scanning: {inputs}} = options; + const index = this._getIndexOfMiddleMouseButtonScanInput(inputs); + + if (value) { + // Add new + if (index >= 0) { return; } + let insertionPosition = this._getIndexOfMainScanInput(inputs); + insertionPosition = (insertionPosition >= 0 ? insertionPosition + 1 : inputs.length); + const input = ScanInputsController.createDefaultMouseInput('mouse2', ''); + await this._modifyProfileSettings([{ + action: 'splice', + path: 'scanning.inputs', + start: insertionPosition, + deleteCount: 0, + items: [input] + }]); + } else { + // Modify existing + if (index < 0) { return; } + await this._modifyProfileSettings([{ + action: 'splice', + path: 'scanning.inputs', + start: index, + deleteCount: 1, + items: [] + }]); + } + } + + async _setMainScanInputs(value) { + value = value.join(', '); + + // Find target index + const options = await this._settingsController.getOptions(); + const {scanning: {inputs}} = options; + const index = this._getIndexOfMainScanInput(inputs); + + this._setHasMainScanInput(true); + + if (index < 0) { + // Add new + const input = ScanInputsController.createDefaultMouseInput(value, 'mouse0'); + await this._modifyProfileSettings([{ + action: 'splice', + path: 'scanning.inputs', + start: inputs.length, + deleteCount: 0, + items: [input] + }]); + } else { + // Modify existing + await this._modifyProfileSettings([{ + action: 'set', + path: `scanning.inputs[${index}].include`, + value + }]); + } + } + + async _modifyProfileSettings(targets) { + await this._settingsController.modifyProfileSettings(targets); + this._settingsController.trigger('scanInputsChanged', {source: this}); + } + + _getIndexOfMainScanInput(inputs) { + for (let i = 0, ii = inputs.length; i < ii; ++i) { + const {include, exclude, types: {mouse}} = inputs[i]; + if (!mouse) { continue; } + const includeValues = this._splitValue(include); + const excludeValues = this._splitValue(exclude); + if ( + ( + includeValues.length === 0 || + (includeValues.length === 1 && !this._isMouseInput(includeValues[0])) + ) && + excludeValues.length === 1 && + excludeValues[0] === 'mouse0' + ) { + return i; + } + } + return -1; + } + + _getIndexOfMiddleMouseButtonScanInput(inputs) { + for (let i = 0, ii = inputs.length; i < ii; ++i) { + const {include, exclude, types: {mouse}} = inputs[i]; + if (!mouse) { continue; } + const includeValues = this._splitValue(include); + const excludeValues = this._splitValue(exclude); + if ( + (includeValues.length === 1 && includeValues[0] === 'mouse2') && + excludeValues.length === 0 + ) { + return i; + } + } + return -1; + } + + _isMouseInput(input) { + return /^mouse\d+$/.test(input); + } + + _setHasMainScanInput(hasMainScanInput) { + if (this._mainScanModifierKeyInputHasOther !== hasMainScanInput) { return; } + this._mainScanModifierKeyInputHasOther = !hasMainScanInput; + this._populateSelect(this._mainScanModifierKeyInput, this._mainScanModifierKeyInputHasOther); + } +}
\ No newline at end of file diff --git a/ext/js/pages/settings/secondary-search-dictionary-controller.js b/ext/js/pages/settings/secondary-search-dictionary-controller.js new file mode 100644 index 00000000..2fb3de67 --- /dev/null +++ b/ext/js/pages/settings/secondary-search-dictionary-controller.js @@ -0,0 +1,73 @@ +/* + * 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 + * ObjectPropertyAccessor + */ + +class SecondarySearchDictionaryController { + constructor(settingsController) { + this._settingsController = settingsController; + this._getDictionaryInfoToken = null; + this._container = null; + this._eventListeners = new EventListenerCollection(); + } + + async prepare() { + this._container = document.querySelector('#secondary-search-dictionary-list'); + + yomichan.on('databaseUpdated', this._onDatabaseUpdated.bind(this)); + + await this._onDatabaseUpdated(); + } + + // Private + + async _onDatabaseUpdated() { + this._eventListeners.removeAllEventListeners(); + + const token = {}; + this._getDictionaryInfoToken = token; + const dictionaries = await this._settingsController.getDictionaryInfo(); + if (this._getDictionaryInfoToken !== token) { return; } + this._getDictionaryInfoToken = null; + + const fragment = document.createDocumentFragment(); + for (const {title, revision} of dictionaries) { + const node = this._settingsController.instantiateTemplate('secondary-search-dictionary'); + fragment.appendChild(node); + + const nameNode = node.querySelector('.dictionary-title'); + nameNode.textContent = title; + + const versionNode = node.querySelector('.dictionary-version'); + versionNode.textContent = `rev.${revision}`; + + const toggle = node.querySelector('.dictionary-allow-secondary-searches'); + toggle.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'allowSecondarySearches']); + this._eventListeners.addEventListener(toggle, 'settingChanged', this._onEnabledChanged.bind(this, node), false); + } + + this._container.textContent = ''; + this._container.appendChild(fragment); + } + + _onEnabledChanged(node, e) { + const {detail: {value}} = e; + node.dataset.enabled = `${value}`; + } +}
\ No newline at end of file diff --git a/ext/js/pages/settings/sentence-termination-characters-controller.js b/ext/js/pages/settings/sentence-termination-characters-controller.js new file mode 100644 index 00000000..d62771ec --- /dev/null +++ b/ext/js/pages/settings/sentence-termination-characters-controller.js @@ -0,0 +1,243 @@ +/* + * Copyright (C) 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/>. + */ + +class SentenceTerminationCharactersController { + constructor(settingsController) { + this._settingsController = settingsController; + this._entries = []; + this._addButton = null; + this._resetButton = null; + this._listTable = null; + this._listContainer = null; + this._emptyIndicator = null; + } + + get settingsController() { + return this._settingsController; + } + + async prepare() { + this._addButton = document.querySelector('#sentence-termination-character-list-add'); + this._resetButton = document.querySelector('#sentence-termination-character-list-reset'); + this._listTable = document.querySelector('#sentence-termination-character-list-table'); + this._listContainer = document.querySelector('#sentence-termination-character-list'); + this._emptyIndicator = document.querySelector('#sentence-termination-character-list-empty'); + + this._addButton.addEventListener('click', this._onAddClick.bind(this)); + this._resetButton.addEventListener('click', this._onResetClick.bind(this)); + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + + await this._updateOptions(); + } + + async addEntry(terminationCharacterEntry) { + const options = await this._settingsController.getOptions(); + const {sentenceParsing: {terminationCharacters}} = options; + + await this._settingsController.modifyProfileSettings([{ + action: 'splice', + path: 'sentenceParsing.terminationCharacters', + start: terminationCharacters.length, + deleteCount: 0, + items: [terminationCharacterEntry] + }]); + + await this._updateOptions(); + } + + async deleteEntry(index) { + const options = await this._settingsController.getOptions(); + const {sentenceParsing: {terminationCharacters}} = options; + + if (index < 0 || index >= terminationCharacters.length) { return false; } + + await this._settingsController.modifyProfileSettings([{ + action: 'splice', + path: 'sentenceParsing.terminationCharacters', + start: index, + deleteCount: 1, + items: [] + }]); + + await this._updateOptions(); + return true; + } + + async modifyProfileSettings(targets) { + return await this._settingsController.modifyProfileSettings(targets); + } + + // Private + + _onOptionsChanged({options}) { + for (const entry of this._entries) { + entry.cleanup(); + } + + this._entries = []; + const {sentenceParsing: {terminationCharacters}} = options; + + for (let i = 0, ii = terminationCharacters.length; i < ii; ++i) { + const terminationCharacterEntry = terminationCharacters[i]; + const node = this._settingsController.instantiateTemplate('sentence-termination-character-entry'); + this._listContainer.appendChild(node); + const entry = new SentenceTerminationCharacterEntry(this, terminationCharacterEntry, i, node); + this._entries.push(entry); + entry.prepare(); + } + + this._listTable.hidden = (terminationCharacters.length === 0); + this._emptyIndicator.hidden = (terminationCharacters.length !== 0); + } + + _onAddClick(e) { + e.preventDefault(); + this._addNewEntry(); + } + + _onResetClick(e) { + e.preventDefault(); + this._reset(); + } + + async _addNewEntry() { + const newEntry = { + enabled: true, + character1: '"', + character2: '"', + includeCharacterAtStart: false, + includeCharacterAtEnd: false + }; + return await this.addEntry(newEntry); + } + + async _updateOptions() { + const options = await this._settingsController.getOptions(); + this._onOptionsChanged({options}); + } + + async _reset() { + const defaultOptions = await this._settingsController.getDefaultOptions(); + const value = defaultOptions.profiles[0].options.sentenceParsing.terminationCharacters; + await this._settingsController.setProfileSetting('sentenceParsing.terminationCharacters', value); + await this._updateOptions(); + } +} + +class SentenceTerminationCharacterEntry { + constructor(parent, data, index, node) { + this._parent = parent; + this._data = data; + this._index = index; + this._node = node; + this._eventListeners = new EventListenerCollection(); + this._character1Input = null; + this._character2Input = null; + this._basePath = `sentenceParsing.terminationCharacters[${this._index}]`; + } + + prepare() { + const {enabled, character1, character2, includeCharacterAtStart, includeCharacterAtEnd} = this._data; + const node = this._node; + + const enabledToggle = node.querySelector('.sentence-termination-character-enabled'); + const typeSelect = node.querySelector('.sentence-termination-character-type'); + const character1Input = node.querySelector('.sentence-termination-character-input1'); + const character2Input = node.querySelector('.sentence-termination-character-input2'); + const includeAtStartCheckbox = node.querySelector('.sentence-termination-character-include-at-start'); + const includeAtEndheckbox = node.querySelector('.sentence-termination-character-include-at-end'); + const menuButton = node.querySelector('.sentence-termination-character-entry-button'); + + this._character1Input = character1Input; + this._character2Input = character2Input; + + const type = (character2 === null ? 'terminator' : 'quote'); + node.dataset.type = type; + + enabledToggle.checked = enabled; + typeSelect.value = type; + character1Input.value = character1; + character2Input.value = (character2 !== null ? character2 : ''); + includeAtStartCheckbox.checked = includeCharacterAtStart; + includeAtEndheckbox.checked = includeCharacterAtEnd; + + enabledToggle.dataset.setting = `${this._basePath}.enabled`; + includeAtStartCheckbox.dataset.setting = `${this._basePath}.includeCharacterAtStart`; + includeAtEndheckbox.dataset.setting = `${this._basePath}.includeCharacterAtEnd`; + + this._eventListeners.addEventListener(typeSelect, 'change', this._onTypeSelectChange.bind(this), false); + this._eventListeners.addEventListener(character1Input, 'change', this._onCharacterChange.bind(this, 1), false); + this._eventListeners.addEventListener(character2Input, 'change', this._onCharacterChange.bind(this, 2), false); + this._eventListeners.addEventListener(menuButton, 'menuClose', this._onMenuClose.bind(this), false); + } + + cleanup() { + this._eventListeners.removeAllEventListeners(); + if (this._node.parentNode !== null) { + this._node.parentNode.removeChild(this._node); + } + } + + // Private + + _onTypeSelectChange(e) { + this._setHasCharacter2(e.currentTarget.value === 'quote'); + } + + _onCharacterChange(characterNumber, e) { + const node = e.currentTarget; + if (characterNumber === 2 && this._data.character2 === null) { + node.value = ''; + } + + const value = node.value.substring(0, 1); + this._setCharacterValue(node, characterNumber, value); + } + + _onMenuClose(e) { + switch (e.detail.action) { + case 'delete': + this._delete(); + break; + } + } + + async _delete() { + this._parent.deleteEntry(this._index); + } + + async _setHasCharacter2(has) { + const okay = await this._setCharacterValue(this._character2Input, 2, has ? this._data.character1 : null); + if (okay) { + const type = (!has ? 'terminator' : 'quote'); + this._node.dataset.type = type; + } + } + + async _setCharacterValue(inputNode, characterNumber, value) { + const pathEnd = `character${characterNumber}`; + const r = await this._parent.settingsController.setProfileSetting(`${this._basePath}.${pathEnd}`, value); + const okay = !r[0].error; + if (okay) { + this._data[pathEnd] = value; + } else { + value = this._data[pathEnd]; + } + inputNode.value = (value !== null ? value : ''); + return okay; + } +} diff --git a/ext/js/pages/settings/settings-controller.js b/ext/js/pages/settings/settings-controller.js new file mode 100644 index 00000000..4a86470d --- /dev/null +++ b/ext/js/pages/settings/settings-controller.js @@ -0,0 +1,209 @@ +/* + * 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 + * HtmlTemplateCollection + * OptionsUtil + * PermissionsUtil + */ + +class SettingsController extends EventDispatcher { + constructor(profileIndex=0) { + super(); + this._profileIndex = profileIndex; + this._source = generateId(16); + this._pageExitPreventions = new Set(); + this._pageExitPreventionEventListeners = new EventListenerCollection(); + this._templates = new HtmlTemplateCollection(document); + this._permissionsUtil = new PermissionsUtil(); + } + + get source() { + return this._source; + } + + get profileIndex() { + return this._profileIndex; + } + + set profileIndex(value) { + if (this._profileIndex === value) { return; } + this._setProfileIndex(value); + } + + get permissionsUtil() { + return this._permissionsUtil; + } + + prepare() { + yomichan.on('optionsUpdated', this._onOptionsUpdated.bind(this)); + chrome.permissions.onAdded.addListener(this._onPermissionsChanged.bind(this)); + chrome.permissions.onRemoved.addListener(this._onPermissionsChanged.bind(this)); + } + + async refresh() { + await this._onOptionsUpdatedInternal(); + } + + async getOptions() { + const optionsContext = this.getOptionsContext(); + return await yomichan.api.optionsGet(optionsContext); + } + + async getOptionsFull() { + return await yomichan.api.optionsGetFull(); + } + + async setAllSettings(value) { + const profileIndex = value.profileCurrent; + await yomichan.api.setAllSettings(value, this._source); + this._setProfileIndex(profileIndex); + } + + async getSettings(targets) { + return await this._getSettings(targets, {}); + } + + async getGlobalSettings(targets) { + return await this._getSettings(targets, {scope: 'global'}); + } + + async getProfileSettings(targets) { + return await this._getSettings(targets, {scope: 'profile'}); + } + + async modifySettings(targets) { + return await this._modifySettings(targets, {}); + } + + async modifyGlobalSettings(targets) { + return await this._modifySettings(targets, {scope: 'global'}); + } + + async modifyProfileSettings(targets) { + return await this._modifySettings(targets, {scope: 'profile'}); + } + + async setGlobalSetting(path, value) { + return await this.modifyGlobalSettings([{action: 'set', path, value}]); + } + + async setProfileSetting(path, value) { + return await this.modifyProfileSettings([{action: 'set', path, value}]); + } + + async getDictionaryInfo() { + return await yomichan.api.getDictionaryInfo(); + } + + getOptionsContext() { + return {index: this._profileIndex}; + } + + preventPageExit() { + const obj = {end: null}; + obj.end = this._endPreventPageExit.bind(this, obj); + if (this._pageExitPreventionEventListeners.size === 0) { + this._pageExitPreventionEventListeners.addEventListener(window, 'beforeunload', this._onBeforeUnload.bind(this), false); + } + this._pageExitPreventions.add(obj); + return obj; + } + + instantiateTemplate(name) { + return this._templates.instantiate(name); + } + + instantiateTemplateFragment(name) { + return this._templates.instantiateFragment(name); + } + + async getDefaultOptions() { + const optionsUtil = new OptionsUtil(); + await optionsUtil.prepare(); + const optionsFull = optionsUtil.getDefault(); + return optionsFull; + } + + // Private + + _setProfileIndex(value) { + this._profileIndex = value; + this.trigger('optionsContextChanged'); + this._onOptionsUpdatedInternal(); + } + + _onOptionsUpdated({source}) { + if (source === this._source) { return; } + this._onOptionsUpdatedInternal(); + } + + async _onOptionsUpdatedInternal() { + const optionsContext = this.getOptionsContext(); + const options = await this.getOptions(); + this.trigger('optionsChanged', {options, optionsContext}); + } + + _setupTargets(targets, extraFields) { + return targets.map((target) => { + target = Object.assign({}, extraFields, target); + if (target.scope === 'profile') { + target.optionsContext = this.getOptionsContext(); + } + return target; + }); + } + + async _getSettings(targets, extraFields) { + targets = this._setupTargets(targets, extraFields); + return await yomichan.api.getSettings(targets); + } + + async _modifySettings(targets, extraFields) { + targets = this._setupTargets(targets, extraFields); + return await yomichan.api.modifySettings(targets, this._source); + } + + _onBeforeUnload(e) { + if (this._pageExitPreventions.size === 0) { + return; + } + + e.preventDefault(); + e.returnValue = ''; + return ''; + } + + _endPreventPageExit(obj) { + this._pageExitPreventions.delete(obj); + if (this._pageExitPreventions.size === 0) { + this._pageExitPreventionEventListeners.removeAllEventListeners(); + } + } + + _onPermissionsChanged() { + this._triggerPermissionsChanged(); + } + + async _triggerPermissionsChanged() { + const event = 'permissionsChanged'; + if (!this.hasListeners(event)) { return; } + + const permissions = await this._permissionsUtil.getAllPermissions(); + this.trigger(event, {permissions}); + } +} diff --git a/ext/js/pages/settings/settings-display-controller.js b/ext/js/pages/settings/settings-display-controller.js new file mode 100644 index 00000000..9d3e5459 --- /dev/null +++ b/ext/js/pages/settings/settings-display-controller.js @@ -0,0 +1,400 @@ +/* + * 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 + * PopupMenu + * SelectorObserver + */ + +class SettingsDisplayController { + constructor(settingsController, modalController) { + this._settingsController = settingsController; + this._modalController = modalController; + this._contentNode = null; + this._menuContainer = null; + this._onMoreToggleClickBind = null; + this._onMenuButtonClickBind = null; + } + + prepare() { + this._contentNode = document.querySelector('.content'); + this._menuContainer = document.querySelector('#popup-menus'); + + const onFabButtonClick = this._onFabButtonClick.bind(this); + for (const fabButton of document.querySelectorAll('.fab-button')) { + fabButton.addEventListener('click', onFabButtonClick, false); + } + + const onModalAction = this._onModalAction.bind(this); + for (const node of document.querySelectorAll('[data-modal-action]')) { + node.addEventListener('click', onModalAction, false); + } + + const onSelectOnClickElementClick = this._onSelectOnClickElementClick.bind(this); + for (const node of document.querySelectorAll('[data-select-on-click]')) { + node.addEventListener('click', onSelectOnClickElementClick, false); + } + + const onInputTabActionKeyDown = this._onInputTabActionKeyDown.bind(this); + for (const node of document.querySelectorAll('[data-tab-action]')) { + node.addEventListener('keydown', onInputTabActionKeyDown, false); + } + + const onSpecialUrlLinkClick = this._onSpecialUrlLinkClick.bind(this); + const onSpecialUrlLinkMouseDown = this._onSpecialUrlLinkMouseDown.bind(this); + for (const node of document.querySelectorAll('[data-special-url]')) { + node.addEventListener('click', onSpecialUrlLinkClick, false); + node.addEventListener('auxclick', onSpecialUrlLinkClick, false); + node.addEventListener('mousedown', onSpecialUrlLinkMouseDown, false); + } + + for (const node of document.querySelectorAll('.defer-load-iframe')) { + this._setupDeferLoadIframe(node); + } + + this._onMoreToggleClickBind = this._onMoreToggleClick.bind(this); + const moreSelectorObserver = new SelectorObserver({ + selector: '.more-toggle', + onAdded: this._onMoreSetup.bind(this), + onRemoved: this._onMoreCleanup.bind(this) + }); + moreSelectorObserver.observe(document.documentElement, false); + + this._onMenuButtonClickBind = this._onMenuButtonClick.bind(this); + const menuSelectorObserver = new SelectorObserver({ + selector: '[data-menu]', + onAdded: this._onMenuSetup.bind(this), + onRemoved: this._onMenuCleanup.bind(this) + }); + menuSelectorObserver.observe(document.documentElement, false); + + window.addEventListener('keydown', this._onKeyDown.bind(this), false); + window.addEventListener('popstate', this._onPopState.bind(this), false); + this._updateScrollTarget(); + } + + // Private + + _onMoreSetup(element) { + element.addEventListener('click', this._onMoreToggleClickBind, false); + return null; + } + + _onMoreCleanup(element) { + element.removeEventListener('click', this._onMoreToggleClickBind, false); + } + + _onMenuSetup(element) { + element.addEventListener('click', this._onMenuButtonClickBind, false); + return null; + } + + _onMenuCleanup(element) { + element.removeEventListener('click', this._onMenuButtonClickBind, false); + } + + _onMenuButtonClick(e) { + const element = e.currentTarget; + const {menu} = element.dataset; + this._showMenu(element, menu); + } + + _onFabButtonClick(e) { + const action = e.currentTarget.dataset.action; + switch (action) { + case 'toggle-sidebar': + document.body.classList.toggle('sidebar-visible'); + break; + case 'toggle-preview-sidebar': + document.body.classList.toggle('preview-sidebar-visible'); + break; + } + } + + _onMoreToggleClick(e) { + const container = this._getMoreContainer(e.currentTarget); + if (container === null) { return; } + + const more = container.querySelector('.more'); + if (more === null) { return; } + + const moreVisible = more.hidden; + more.hidden = !moreVisible; + for (const moreToggle of container.querySelectorAll('.more-toggle')) { + const container2 = this._getMoreContainer(moreToggle); + if (container2 === null) { continue; } + + const more2 = container2.querySelector('.more'); + if (more2 === null || more2 !== more) { continue; } + + moreToggle.dataset.expanded = `${moreVisible}`; + } + + e.preventDefault(); + return false; + } + + _onPopState() { + this._updateScrollTarget(); + } + + _onKeyDown(e) { + switch (e.code) { + case 'Escape': + if (!this._isElementAnInput(document.activeElement)) { + this._closeTopMenuOrModal(); + e.preventDefault(); + } + break; + } + } + + _onModalAction(e) { + const node = e.currentTarget; + const {modalAction} = node.dataset; + if (typeof modalAction !== 'string') { return; } + + let [action, target] = modalAction.split(','); + if (typeof target === 'undefined') { + const currentModal = node.closest('.modal'); + if (currentModal === null) { return; } + target = currentModal; + } + + const modal = this._modalController.getModal(target); + if (modal === null) { return; } + + switch (action) { + case 'show': + modal.setVisible(true); + break; + case 'hide': + modal.setVisible(false); + break; + case 'toggle': + modal.setVisible(!modal.isVisible()); + break; + } + + e.preventDefault(); + } + + _onSelectOnClickElementClick(e) { + if (e.button !== 0) { return; } + + const node = e.currentTarget; + const range = document.createRange(); + range.selectNode(node); + + const selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + + e.preventDefault(); + e.stopPropagation(); + return false; + } + + _onInputTabActionKeyDown(e) { + if (e.key !== 'Tab' || e.ctrlKey) { return; } + + const node = e.currentTarget; + const {tabAction} = node.dataset; + if (typeof tabAction !== 'string') { return; } + + const args = tabAction.split(','); + switch (args[0]) { + case 'ignore': + e.preventDefault(); + break; + case 'indent': + e.preventDefault(); + this._indentInput(e, node, args); + break; + } + } + + _onSpecialUrlLinkClick(e) { + switch (e.button) { + case 0: + case 1: + e.preventDefault(); + this._createTab(e.currentTarget.dataset.specialUrl, true); + break; + } + } + + _onSpecialUrlLinkMouseDown(e) { + switch (e.button) { + case 0: + case 1: + e.preventDefault(); + break; + } + } + + async _createTab(url, useOpener) { + let openerTabId; + if (useOpener) { + try { + const tab = await new Promise((resolve, reject) => { + chrome.tabs.getCurrent((result) => { + const e = chrome.runtime.lastError; + if (e) { + reject(new Error(e.message)); + } else { + resolve(result); + } + }); + }); + openerTabId = tab.id; + } catch (e) { + // NOP + } + } + + return await new Promise((resolve, reject) => { + chrome.tabs.create({url, openerTabId}, (tab2) => { + const e = chrome.runtime.lastError; + if (e) { + reject(new Error(e.message)); + } else { + resolve(tab2); + } + }); + }); + } + + _updateScrollTarget() { + const hash = window.location.hash; + if (!hash.startsWith('#!')) { return; } + + const content = this._contentNode; + const target = document.getElementById(hash.substring(2)); + if (content === null || target === null) { return; } + + const rect1 = content.getBoundingClientRect(); + const rect2 = target.getBoundingClientRect(); + content.scrollTop += rect2.top - rect1.top; + } + + _getMoreContainer(link) { + const v = link.dataset.parentDistance; + const distance = v ? parseInt(v, 10) : 1; + if (Number.isNaN(distance)) { return null; } + + for (let i = 0; i < distance; ++i) { + link = link.parentNode; + if (link === null) { break; } + } + return link; + } + + _closeTopMenuOrModal() { + for (const popupMenu of PopupMenu.openMenus) { + popupMenu.close(); + return; + } + + const modal = this._modalController.getTopVisibleModal(); + if (modal !== null) { + modal.setVisible(false); + } + } + + _showMenu(element, menuName) { + const menu = this._settingsController.instantiateTemplate(menuName); + if (menu === null) { return; } + + this._menuContainer.appendChild(menu); + + const popupMenu = new PopupMenu(element, menu); + popupMenu.prepare(); + } + + _indentInput(e, node, args) { + let indent = '\t'; + if (args.length > 1) { + const count = parseInt(args[1], 10); + indent = (Number.isFinite(count) && count >= 0 ? ' '.repeat(count) : args[1]); + } + + const {selectionStart: start, selectionEnd: end, value} = node; + const lineStart = value.substring(0, start).lastIndexOf('\n') + 1; + const lineWhitespace = /^[ \t]*/.exec(value.substring(lineStart))[0]; + + if (e.shiftKey) { + const whitespaceLength = Math.max(0, Math.floor((lineWhitespace.length - 1) / 4) * 4); + const selectionStartNew = lineStart + whitespaceLength; + const selectionEndNew = lineStart + lineWhitespace.length; + const removeCount = selectionEndNew - selectionStartNew; + if (removeCount > 0) { + node.selectionStart = selectionStartNew; + node.selectionEnd = selectionEndNew; + document.execCommand('delete', false); + node.selectionStart = Math.max(lineStart, start - removeCount); + node.selectionEnd = Math.max(lineStart, end - removeCount); + } + } else { + if (indent.length > 0) { + const indentLength = (Math.ceil((start - lineStart + 1) / indent.length) * indent.length - (start - lineStart)); + document.execCommand('insertText', false, indent.substring(0, indentLength)); + } + } + } + + _isElementAnInput(element) { + const type = element !== null ? element.nodeName.toUpperCase() : null; + switch (type) { + case 'INPUT': + case 'TEXTAREA': + case 'SELECT': + return true; + default: + return false; + } + } + + _setupDeferLoadIframe(element) { + const parent = this._getMoreContainer(element); + if (parent === null) { return; } + + let mutationObserver = null; + const callback = () => { + if (!this._isElementVisible(element)) { return false; } + + const src = element.dataset.src; + delete element.dataset.src; + element.src = src; + + if (mutationObserver === null) { return true; } + + mutationObserver.disconnect(); + mutationObserver = null; + return true; + }; + + if (callback()) { return; } + + mutationObserver = new MutationObserver(callback); + mutationObserver.observe(parent, {attributes: true}); + } + + _isElementVisible(element) { + return (element.offsetParent !== null); + } +} diff --git a/ext/js/pages/settings/settings-main.js b/ext/js/pages/settings/settings-main.js new file mode 100644 index 00000000..273142cd --- /dev/null +++ b/ext/js/pages/settings/settings-main.js @@ -0,0 +1,154 @@ +/* + * 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 + * AnkiController + * AnkiTemplatesController + * AudioController + * BackupController + * DictionaryController + * DictionaryImportController + * DocumentFocusController + * ExtensionKeyboardShortcutController + * GenericSettingController + * KeyboardShortcutController + * MecabController + * ModalController + * NestedPopupsController + * PermissionsToggleController + * PopupPreviewController + * PopupWindowController + * ProfileController + * ScanInputsController + * ScanInputsSimpleController + * SecondarySearchDictionaryController + * SentenceTerminationCharactersController + * SettingsController + * SettingsDisplayController + * StatusFooter + * StorageController + * TranslationTextReplacementsController + */ + +async function setupEnvironmentInfo() { + const {manifest_version: manifestVersion} = chrome.runtime.getManifest(); + const {browser, platform} = await yomichan.api.getEnvironmentInfo(); + document.documentElement.dataset.browser = browser; + document.documentElement.dataset.os = platform.os; + document.documentElement.dataset.manifestVersion = `${manifestVersion}`; +} + +async function setupGenericSettingsController(genericSettingController) { + await genericSettingController.prepare(); + await genericSettingController.refresh(); +} + +(async () => { + try { + const documentFocusController = new DocumentFocusController(); + documentFocusController.prepare(); + + const statusFooter = new StatusFooter(document.querySelector('.status-footer-container')); + statusFooter.prepare(); + + await yomichan.prepare(); + + setupEnvironmentInfo(); + + const optionsFull = await yomichan.api.optionsGetFull(); + + const preparePromises = []; + + const modalController = new ModalController(); + modalController.prepare(); + + const settingsController = new SettingsController(optionsFull.profileCurrent); + settingsController.prepare(); + + const storageController = new StorageController(); + storageController.prepare(); + + const dictionaryController = new DictionaryController(settingsController, modalController, storageController, statusFooter); + dictionaryController.prepare(); + + const dictionaryImportController = new DictionaryImportController(settingsController, modalController, storageController, statusFooter); + dictionaryImportController.prepare(); + + const genericSettingController = new GenericSettingController(settingsController); + preparePromises.push(setupGenericSettingsController(genericSettingController)); + + const audioController = new AudioController(settingsController); + audioController.prepare(); + + const profileController = new ProfileController(settingsController, modalController); + profileController.prepare(); + + const settingsBackup = new BackupController(settingsController, modalController); + settingsBackup.prepare(); + + const ankiController = new AnkiController(settingsController); + ankiController.prepare(); + + const ankiTemplatesController = new AnkiTemplatesController(settingsController, modalController, ankiController); + ankiTemplatesController.prepare(); + + const popupPreviewController = new PopupPreviewController(settingsController); + popupPreviewController.prepare(); + + const scanInputsController = new ScanInputsController(settingsController); + scanInputsController.prepare(); + + const simpleScanningInputController = new ScanInputsSimpleController(settingsController); + simpleScanningInputController.prepare(); + + const nestedPopupsController = new NestedPopupsController(settingsController); + nestedPopupsController.prepare(); + + const permissionsToggleController = new PermissionsToggleController(settingsController); + permissionsToggleController.prepare(); + + const secondarySearchDictionaryController = new SecondarySearchDictionaryController(settingsController); + secondarySearchDictionaryController.prepare(); + + const translationTextReplacementsController = new TranslationTextReplacementsController(settingsController); + translationTextReplacementsController.prepare(); + + const sentenceTerminationCharactersController = new SentenceTerminationCharactersController(settingsController); + sentenceTerminationCharactersController.prepare(); + + const keyboardShortcutController = new KeyboardShortcutController(settingsController); + keyboardShortcutController.prepare(); + + const extensionKeyboardShortcutController = new ExtensionKeyboardShortcutController(settingsController); + extensionKeyboardShortcutController.prepare(); + + const popupWindowController = new PopupWindowController(); + popupWindowController.prepare(); + + const mecabController = new MecabController(); + mecabController.prepare(); + + await Promise.all(preparePromises); + + document.documentElement.dataset.loaded = 'true'; + + const settingsDisplayController = new SettingsDisplayController(settingsController, modalController); + settingsDisplayController.prepare(); + } catch (e) { + log.error(e); + } +})(); diff --git a/ext/js/pages/settings/status-footer.js b/ext/js/pages/settings/status-footer.js new file mode 100644 index 00000000..c03e6775 --- /dev/null +++ b/ext/js/pages/settings/status-footer.js @@ -0,0 +1,84 @@ +/* + * 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 + */ + +class StatusFooter extends PanelElement { + constructor(node) { + super({ + node, + closingAnimationDuration: 375 // Milliseconds; includes buffer + }); + this._body = node.querySelector('.status-footer'); + } + + prepare() { + this.on('closeCompleted', this._onCloseCompleted.bind(this), false); + this._body.querySelector('.status-footer-header-close').addEventListener('click', this._onCloseClick.bind(this), false); + } + + getTaskContainer(selector) { + return this._body.querySelector(selector); + } + + isTaskActive(selector) { + const target = this.getTaskContainer(selector); + return (target !== null && target.dataset.active); + } + + setTaskActive(selector, active) { + const target = this.getTaskContainer(selector); + if (target === null) { return; } + + const activeElements = new Set(); + for (const element of this._body.querySelectorAll('.status-footer-item')) { + if (element.dataset.active) { + activeElements.add(element); + } + } + + if (active) { + target.dataset.active = 'true'; + if (!this.isVisible()) { + this.setVisible(true); + } + target.hidden = false; + } else { + delete target.dataset.active; + if (activeElements.size <= 1) { + this.setVisible(false); + } + } + } + + // Private + + _onCloseClick(e) { + e.preventDefault(); + this.setVisible(false); + } + + _onCloseCompleted() { + for (const element of this._body.querySelectorAll('.status-footer-item')) { + if (!element.dataset.active) { + element.hidden = true; + } + } + } +} diff --git a/ext/js/pages/settings/storage-controller.js b/ext/js/pages/settings/storage-controller.js new file mode 100644 index 00000000..c27c8690 --- /dev/null +++ b/ext/js/pages/settings/storage-controller.js @@ -0,0 +1,183 @@ +/* + * Copyright (C) 2019-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/>. + */ + +class StorageController { + constructor() { + this._mostRecentStorageEstimate = null; + this._storageEstimateFailed = false; + this._isUpdating = false; + this._persistentStorageCheckbox = false; + this._storageUsageNode = null; + this._storageQuotaNode = null; + this._storageUseFiniteNodes = null; + this._storageUseInfiniteNodes = null; + this._storageUseValidNodes = null; + this._storageUseInvalidNodes = null; + } + + prepare() { + this._persistentStorageCheckbox = document.querySelector('#storage-persistent-checkbox'); + this._storageUsageNodes = document.querySelectorAll('.storage-usage'); + this._storageQuotaNodes = document.querySelectorAll('.storage-quota'); + this._storageUseFiniteNodes = document.querySelectorAll('.storage-use-finite'); + this._storageUseInfiniteNodes = document.querySelectorAll('.storage-use-infinite'); + this._storageUseValidNodes = document.querySelectorAll('.storage-use-valid'); + this._storageUseInvalidNodes = document.querySelectorAll('.storage-use-invalid'); + + this._preparePersistentStorage(); + this.updateStats(); + this._persistentStorageCheckbox.addEventListener('change', this._onPersistentStorageCheckboxChange.bind(this), false); + document.querySelector('#storage-refresh').addEventListener('click', this.updateStats.bind(this), false); + } + + async updateStats() { + if (this._isUpdating) { return; } + + try { + this._isUpdating = true; + + const estimate = await this._storageEstimate(); + const valid = (estimate !== null); + + // Firefox reports usage as 0 when persistent storage is enabled. + const finite = valid && (estimate.usage > 0 || !(await this._isStoragePeristent())); + if (finite) { + for (const node of this._storageUsageNodes) { + node.textContent = this._bytesToLabeledString(estimate.usage); + } + for (const node of this._storageQuotaNodes) { + node.textContent = this._bytesToLabeledString(estimate.quota); + } + } + + this._setElementsVisible(this._storageUseFiniteNodes, valid && finite); + this._setElementsVisible(this._storageUseInfiniteNodes, valid && !finite); + this._setElementsVisible(this._storageUseValidNodes, valid); + this._setElementsVisible(this._storageUseInvalidNodes, !valid); + + return valid; + } finally { + this._isUpdating = false; + } + } + + // Private + + async _preparePersistentStorage() { + if (!(navigator.storage && navigator.storage.persist)) { + // Not supported + return; + } + + const info = document.querySelector('#storage-persistent-info'); + if (info !== null) { info.hidden = false; } + + const isStoragePeristent = await this._isStoragePeristent(); + this._updateCheckbox(isStoragePeristent); + + const button = document.querySelector('#storage-persistent-button'); + if (button !== null) { + button.hidden = false; + button.addEventListener('click', this._onPersistStorageButtonClick.bind(this), false); + } + } + + _onPersistentStorageCheckboxChange(e) { + const node = e.currentTarget; + if (!node.checked) { + node.checked = true; + return; + } + this._attemptPersistStorage(); + } + + _onPersistStorageButtonClick() { + const {checked} = this._persistentStorageCheckbox; + if (checked) { return; } + this._persistentStorageCheckbox.checked = !checked; + this._persistentStorageCheckbox.dispatchEvent(new Event('change')); + } + + async _attemptPersistStorage() { + if (await this._isStoragePeristent()) { return; } + + let isStoragePeristent = false; + try { + isStoragePeristent = await navigator.storage.persist(); + } catch (e) { + // NOP + } + + this._updateCheckbox(isStoragePeristent); + + if (isStoragePeristent) { + this.updateStats(); + } else { + const node = document.querySelector('#storage-persistent-fail-warning'); + if (node !== null) { node.hidden = false; } + } + } + + async _storageEstimate() { + if (this._storageEstimateFailed && this._mostRecentStorageEstimate === null) { + return null; + } + try { + const value = await navigator.storage.estimate(); + this._mostRecentStorageEstimate = value; + return value; + } catch (e) { + this._storageEstimateFailed = true; + } + return null; + } + + _bytesToLabeledString(size) { + const base = 1000; + const labels = [' bytes', 'KB', 'MB', 'GB', 'TB']; + const maxLabelIndex = labels.length - 1; + let labelIndex = 0; + while (size >= base && labelIndex < maxLabelIndex) { + size /= base; + ++labelIndex; + } + const label = labelIndex === 0 ? `${size}` : size.toFixed(1); + return `${label}${labels[labelIndex]}`; + } + + async _isStoragePeristent() { + try { + return await navigator.storage.persisted(); + } catch (e) { + // NOP + } + return false; + } + + _updateCheckbox(isStoragePeristent) { + const checkbox = this._persistentStorageCheckbox; + checkbox.checked = isStoragePeristent; + checkbox.readOnly = isStoragePeristent; + } + + _setElementsVisible(elements, visible) { + visible = !visible; + for (const element of elements) { + element.hidden = visible; + } + } +} diff --git a/ext/js/pages/settings/translation-text-replacements-controller.js b/ext/js/pages/settings/translation-text-replacements-controller.js new file mode 100644 index 00000000..8d13f7e9 --- /dev/null +++ b/ext/js/pages/settings/translation-text-replacements-controller.js @@ -0,0 +1,242 @@ +/* + * Copyright (C) 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/>. + */ + +class TranslationTextReplacementsController { + constructor(settingsController) { + this._settingsController = settingsController; + this._entryContainer = null; + this._entries = []; + } + + async prepare() { + this._entryContainer = document.querySelector('#translation-text-replacement-list'); + const addButton = document.querySelector('#translation-text-replacement-add'); + + addButton.addEventListener('click', this._onAdd.bind(this), false); + this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); + + await this._updateOptions(); + } + + + async addGroup() { + const options = await this._settingsController.getOptions(); + const {groups} = options.translation.textReplacements; + const newEntry = this._createNewEntry(); + const target = ( + (groups.length === 0) ? + { + action: 'splice', + path: 'translation.textReplacements.groups', + start: 0, + deleteCount: 0, + items: [[newEntry]] + } : + { + action: 'splice', + path: 'translation.textReplacements.groups[0]', + start: groups[0].length, + deleteCount: 0, + items: [newEntry] + } + ); + + await this._settingsController.modifyProfileSettings([target]); + await this._updateOptions(); + } + + async deleteGroup(index) { + const options = await this._settingsController.getOptions(); + const {groups} = options.translation.textReplacements; + if (groups.length === 0) { return false; } + + const group0 = groups[0]; + if (index < 0 || index >= group0.length) { return false; } + + const target = ( + (group0.length > 1) ? + { + action: 'splice', + path: 'translation.textReplacements.groups[0]', + start: index, + deleteCount: 1, + items: [] + } : + { + action: 'splice', + path: 'translation.textReplacements.groups', + start: 0, + deleteCount: group0.length, + items: [] + } + ); + + await this._settingsController.modifyProfileSettings([target]); + await this._updateOptions(); + return true; + } + + // Private + + _onOptionsChanged({options}) { + for (const entry of this._entries) { + entry.cleanup(); + } + this._entries = []; + + const {groups} = options.translation.textReplacements; + if (groups.length > 0) { + const group0 = groups[0]; + for (let i = 0, ii = group0.length; i < ii; ++i) { + const data = group0[i]; + const node = this._settingsController.instantiateTemplate('translation-text-replacement-entry'); + this._entryContainer.appendChild(node); + const entry = new TranslationTextReplacementsEntry(this, node, i, data); + this._entries.push(entry); + entry.prepare(); + } + } + } + + _onAdd() { + this.addGroup(); + } + + async _updateOptions() { + const options = await this._settingsController.getOptions(); + this._onOptionsChanged({options}); + } + + _createNewEntry() { + return {pattern: '', ignoreCase: false, replacement: ''}; + } +} + +class TranslationTextReplacementsEntry { + constructor(parent, node, index) { + this._parent = parent; + this._node = node; + this._index = index; + this._eventListeners = new EventListenerCollection(); + this._patternInput = null; + this._replacementInput = null; + this._ignoreCaseToggle = null; + this._testInput = null; + this._testOutput = null; + } + + prepare() { + const patternInput = this._node.querySelector('.translation-text-replacement-pattern'); + const replacementInput = this._node.querySelector('.translation-text-replacement-replacement'); + const ignoreCaseToggle = this._node.querySelector('.translation-text-replacement-pattern-ignore-case'); + const menuButton = this._node.querySelector('.translation-text-replacement-button'); + const testInput = this._node.querySelector('.translation-text-replacement-test-input'); + const testOutput = this._node.querySelector('.translation-text-replacement-test-output'); + + this._patternInput = patternInput; + this._replacementInput = replacementInput; + this._ignoreCaseToggle = ignoreCaseToggle; + this._testInput = testInput; + this._testOutput = testOutput; + + const pathBase = `translation.textReplacements.groups[0][${this._index}]`; + patternInput.dataset.setting = `${pathBase}.pattern`; + replacementInput.dataset.setting = `${pathBase}.replacement`; + ignoreCaseToggle.dataset.setting = `${pathBase}.ignoreCase`; + + this._eventListeners.addEventListener(menuButton, 'menuOpen', this._onMenuOpen.bind(this), false); + this._eventListeners.addEventListener(menuButton, 'menuClose', this._onMenuClose.bind(this), false); + this._eventListeners.addEventListener(patternInput, 'settingChanged', this._onPatternChanged.bind(this), false); + this._eventListeners.addEventListener(ignoreCaseToggle, 'settingChanged', this._updateTestInput.bind(this), false); + this._eventListeners.addEventListener(replacementInput, 'settingChanged', this._updateTestInput.bind(this), false); + this._eventListeners.addEventListener(testInput, 'input', this._updateTestInput.bind(this), false); + } + + cleanup() { + this._eventListeners.removeAllEventListeners(); + if (this._node.parentNode !== null) { + this._node.parentNode.removeChild(this._node); + } + } + + // Private + + _onMenuOpen(e) { + const bodyNode = e.detail.menu.bodyNode; + const testVisible = this._isTestVisible(); + bodyNode.querySelector('[data-menu-action=showTest]').hidden = testVisible; + bodyNode.querySelector('[data-menu-action=hideTest]').hidden = !testVisible; + } + + _onMenuClose(e) { + switch (e.detail.action) { + case 'remove': + this._parent.deleteGroup(this._index); + break; + case 'showTest': + this._setTestVisible(true); + break; + case 'hideTest': + this._setTestVisible(false); + break; + } + } + + _onPatternChanged({detail: {value}}) { + this._validatePattern(value); + this._updateTestInput(); + } + + _validatePattern(value) { + let okay = false; + try { + new RegExp(value, 'g'); + okay = true; + } catch (e) { + // NOP + } + + this._patternInput.dataset.invalid = `${!okay}`; + } + + _isTestVisible() { + return this._node.dataset.testVisible === 'true'; + } + + _setTestVisible(visible) { + this._node.dataset.testVisible = `${visible}`; + this._updateTestInput(); + } + + _updateTestInput() { + if (!this._isTestVisible()) { return; } + + const ignoreCase = this._ignoreCaseToggle.checked; + const pattern = this._patternInput.value; + let regex; + try { + regex = new RegExp(pattern, ignoreCase ? 'gi' : 'g'); + } catch (e) { + return; + } + + const replacement = this._replacementInput.value; + const input = this._testInput.value; + const output = input.replace(regex, replacement); + this._testOutput.value = output; + } +} |