aboutsummaryrefslogtreecommitdiff
path: root/ext/bg/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-10-11 17:31:58 -0400
committerGitHub <noreply@github.com>2020-10-11 17:31:58 -0400
commit5b5b45b88efdd625e5d117c8317bee5bf047b4ff (patch)
tree7eed13abe8a2c8379105b13ed698c8b75e580df1 /ext/bg/js
parenta8601ec95cc22bbfcff45d213585f4c90555a5e1 (diff)
Dictionary controller refactor (#912)
* Support multiple main dictionary selects * Update progress container * Change class name * Simplify dictionary info * Update outdated node visibility * Simplify node usage * Simplify title * Update classes * Update IDs/classes * Remove details container visibility assignment * Use a template for dictionary details * Fix progress bar visibility * Fix incorrect property * Rename dict-details to dictionary-details * Remove unused classes * Update class names for dictionary templates * Rename templates * More id renaming * Remove unused id * Rename more IDs
Diffstat (limited to 'ext/bg/js')
-rw-r--r--ext/bg/js/settings/dictionary-controller.js156
-rw-r--r--ext/bg/js/settings/dictionary-import-controller.js22
2 files changed, 86 insertions, 92 deletions
diff --git a/ext/bg/js/settings/dictionary-controller.js b/ext/bg/js/settings/dictionary-controller.js
index 34a4b933..3db16979 100644
--- a/ext/bg/js/settings/dictionary-controller.js
+++ b/ext/bg/js/settings/dictionary-controller.js
@@ -27,15 +27,8 @@ class DictionaryEntry {
this._dictionaryController = dictionaryController;
this._node = node;
this._dictionaryInfo = dictionaryInfo;
- this._dictionaryTitle = dictionaryInfo.title;
this._eventListeners = new EventListenerCollection();
- this._enabledCheckbox = node.querySelector('.dict-enabled');
- this._allowSecondarySearchesCheckbox = node.querySelector('.dict-allow-secondary-searches');
- this._priorityInput = node.querySelector('.dict-priority');
- this._deleteButton = node.querySelector('.dict-delete-button');
- this._detailsToggleLink = node.querySelector('.dict-details-toggle-link');
- this._detailsContainer = node.querySelector('.dict-details');
- this._detailsTable = node.querySelector('.dict-details-table');
+ this._detailsContainer = null;
}
get node() {
@@ -43,31 +36,42 @@ class DictionaryEntry {
}
get dictionaryTitle() {
- return this._dictionaryTitle;
+ return this._dictionaryInfo.title;
}
prepare() {
const node = this._node;
- const dictionaryInfo = this._dictionaryInfo;
- const {title, revision, prefixWildcardsSupported} = dictionaryInfo;
+ const {title, revision, prefixWildcardsSupported, version} = this._dictionaryInfo;
- if (dictionaryInfo.version < 3) {
- node.querySelector('.dict-outdated').hidden = false;
- }
+ 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 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 = this._setupDetails(detailsTable);
- node.querySelector('.dict-title').textContent = title;
- node.querySelector('.dict-revision').textContent = `rev.${revision}`;
- node.querySelector('.dict-prefix-wildcard-searches-supported').checked = !!prefixWildcardsSupported;
+ titleNode.textContent = title;
+ versionNode.textContent = `rev.${revision}`;
+ wildcardSupportedCheckbox.checked = !!prefixWildcardsSupported;
- this._setupDetails(dictionaryInfo);
+ outdatedContainer.hidden = (version >= 3);
+ detailsToggleLink.hidden = !hasDetails;
- this._enabledCheckbox.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'enabled']);
- this._allowSecondarySearchesCheckbox.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'allowSecondarySearches']);
- this._priorityInput.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'priority']);
+ enabledCheckbox.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'enabled']);
+ allowSecondarySearchesCheckbox.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'allowSecondarySearches']);
+ priorityInput.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'priority']);
- this._eventListeners.addEventListener(this._deleteButton, 'click', this._onDeleteButtonClicked.bind(this), false);
- this._eventListeners.addEventListener(this._detailsToggleLink, 'click', this._onDetailsToggleLinkClicked.bind(this), false);
- this._eventListeners.addEventListener(this._priorityInput, 'settingChanged', this._onPriorityChanged.bind(this), false);
+ this._eventListeners.addEventListener(deleteButton, 'click', this._onDeleteButtonClicked.bind(this), false);
+ this._eventListeners.addEventListener(detailsToggleLink, 'click', this._onDetailsToggleLinkClicked.bind(this), false);
+ this._eventListeners.addEventListener(priorityInput, 'settingChanged', this._onPriorityChanged.bind(this), false);
}
cleanup() {
@@ -79,7 +83,7 @@ class DictionaryEntry {
}
setCounts(counts) {
- const node = this._node.querySelector('.dict-counts');
+ const node = this._node.querySelector('.dictionary-counts');
node.textContent = JSON.stringify({info: this._dictionaryInfo, counts}, null, 4);
node.hidden = false;
}
@@ -88,7 +92,7 @@ class DictionaryEntry {
_onDeleteButtonClicked(e) {
e.preventDefault();
- this._dictionaryController.deleteDictionary(this._dictionaryTitle);
+ this._dictionaryController.deleteDictionary(this.dictionaryTitle);
}
_onDetailsToggleLinkClicked(e) {
@@ -101,7 +105,7 @@ class DictionaryEntry {
this._node.style.order = `${-value}`;
}
- _setupDetails(dictionaryInfo) {
+ _setupDetails(detailsTable) {
const targets = [
['Author', 'author'],
['URL', 'url'],
@@ -109,37 +113,24 @@ class DictionaryEntry {
['Attribution', 'attribution']
];
+ const dictionaryInfo = this._dictionaryInfo;
const fragment = document.createDocumentFragment();
- let count = 0;
+ let any = false;
for (const [label, key] of targets) {
const info = dictionaryInfo[key];
if (typeof info !== 'string') { continue; }
- const n1 = document.createElement('div');
- n1.className = 'dict-details-entry';
- n1.dataset.type = key;
-
- const n2 = document.createElement('span');
- n2.className = 'dict-details-entry-label';
- n2.textContent = `${label}:`;
- n1.appendChild(n2);
-
- const n3 = document.createElement('span');
- n3.className = 'dict-details-entry-info';
- n3.textContent = info;
- n1.appendChild(n3);
-
- fragment.appendChild(n1);
+ 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);
- ++count;
+ any = true;
}
- if (count > 0) {
- this._detailsTable.appendChild(fragment);
- } else {
- this._detailsContainer.hidden = true;
- this._detailsToggleLink.hidden = true;
- }
+ detailsTable.appendChild(fragment);
+ return any;
}
}
@@ -152,7 +143,6 @@ class DictionaryController {
this._databaseStateToken = null;
this._checkingIntegrity = false;
this._warningNode = null;
- this._mainDictionarySelect = null;
this._checkIntegrityButton = null;
this._dictionaryEntryContainer = null;
this._integrityExtraInfoContainer = null;
@@ -162,16 +152,15 @@ class DictionaryController {
}
async prepare() {
- this._warningNode = document.querySelector('#dict-warning');
- this._mainDictionarySelect = document.querySelector('#dict-main');
- this._checkIntegrityButton = document.querySelector('#dict-check-integrity');
- this._dictionaryEntryContainer = document.querySelector('#dict-groups');
- this._integrityExtraInfoContainer = document.querySelector('#dict-groups-extra');
- this._deleteDictionaryModal = this._modalController.getModal('dict-delete-modal');
+ this._warningNode = document.querySelector('#dictionary-warning');
+ this._checkIntegrityButton = document.querySelector('#dictionary-check-integrity');
+ this._dictionaryEntryContainer = document.querySelector('#dictionary-list');
+ this._integrityExtraInfoContainer = document.querySelector('#dictionary-list-extra');
+ this._deleteDictionaryModal = this._modalController.getModal('dictionary-confirm-delete');
yomichan.on('databaseUpdated', this._onDatabaseUpdated.bind(this));
- document.querySelector('#dict-delete-confirm').addEventListener('click', this._onDictionaryConfirmDelete.bind(this), false);
+ document.querySelector('#dictionary-confirm-delete-button').addEventListener('click', this._onDictionaryConfirmDelete.bind(this), false);
this._checkIntegrityButton.addEventListener('click', this._onCheckIntegrityButtonClick.bind(this), false);
await this._onDatabaseUpdated();
@@ -181,10 +170,14 @@ class DictionaryController {
if (this._isDeleting) { return; }
const modal = this._deleteDictionaryModal;
modal.node.dataset.dictionaryTitle = dictionaryTitle;
- modal.node.querySelector('#dict-remove-modal-dict-name').textContent = dictionaryTitle;
+ modal.node.querySelector('#dictionary-confirm-delete-name').textContent = dictionaryTitle;
modal.setVisible(true);
}
+ instantiateTemplate(name) {
+ return this._settingsController.instantiateTemplate(name);
+ }
+
// Private
async _onDatabaseUpdated() {
@@ -227,25 +220,26 @@ class DictionaryController {
}
_updateMainDictionarySelectOptions(dictionaries) {
- const fragment = document.createDocumentFragment();
+ 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;
+ let option = document.createElement('option');
+ option.className = 'text-muted';
+ option.value = '';
+ option.textContent = 'Not selected';
fragment.appendChild(option);
- }
- const select = this._mainDictionarySelect;
- select.textContent = ''; // Empty
- select.appendChild(fragment);
+ 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() {
@@ -294,12 +288,12 @@ class DictionaryController {
}
_createExtra(totalCounts, remainders, totalRemainder) {
- const node = this._settingsController.instantiateTemplate('dict-extra');
+ const node = this.instantiateTemplate('dictionary-extra');
this._integrityExtraInfoNode = node;
- node.querySelector('.dict-total-count').textContent = `${totalRemainder} item${totalRemainder !== 1 ? 's' : ''}`;
+ node.querySelector('.dictionary-total-count').textContent = `${totalRemainder} item${totalRemainder !== 1 ? 's' : ''}`;
- const n = node.querySelector('.dict-counts');
+ const n = node.querySelector('.dictionary-counts');
n.textContent = JSON.stringify({counts: totalCounts, remainders}, null, 4);
n.hidden = false;
@@ -318,7 +312,7 @@ class DictionaryController {
}
_createDictionaryEntry(dictionary) {
- const node = this._settingsController.instantiateTemplate('dict');
+ const node = this.instantiateTemplate('dictionary');
this._dictionaryEntryContainer.appendChild(node);
const entry = new DictionaryEntry(this, node, dictionary);
@@ -334,7 +328,7 @@ class DictionaryController {
const entry = this._dictionaryEntries[index];
const node = entry.node;
- const progress = node.querySelector('.progress');
+ const progress = node.querySelector('.progress-container');
const progressBar = node.querySelector('.progress-bar');
const prevention = this._settingsController.preventPageExit();
try {
@@ -365,7 +359,7 @@ class DictionaryController {
_setButtonsEnabled(value) {
value = !value;
- for (const node of document.querySelectorAll('.dictionary-modifying-input')) {
+ for (const node of document.querySelectorAll('.dictionary-database-mutating-input')) {
node.disabled = value;
}
}
diff --git a/ext/bg/js/settings/dictionary-import-controller.js b/ext/bg/js/settings/dictionary-import-controller.js
index 2c954ef8..e0ee0ee3 100644
--- a/ext/bg/js/settings/dictionary-import-controller.js
+++ b/ext/bg/js/settings/dictionary-import-controller.js
@@ -51,17 +51,17 @@ class DictionaryImportController {
}
async prepare() {
- this._purgeButton = document.querySelector('#dict-purge-button');
- this._purgeConfirmButton = document.querySelector('#dict-purge-confirm');
- this._importFileButton = document.querySelector('#dict-file-button');
- this._importFileInput = document.querySelector('#dict-file');
- this._purgeConfirmModal = this._modalController.getModal('dict-purge-modal');
- this._errorContainer = document.querySelector('#dict-error');
- this._spinner = document.querySelector('#dict-spinner');
- this._progressContainer = document.querySelector('#dict-import-progress');
+ 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._progressContainer = document.querySelector('#dictionary-import-progress-container');
this._progressBar = this._progressContainer.querySelector('.progress-bar');
- this._purgeNotification = document.querySelector('#dict-purge');
- this._importInfo = document.querySelector('#dict-import-info');
+ this._purgeNotification = document.querySelector('#dictionary-delete-all-status');
+ this._importInfo = document.querySelector('#dictionary-import-info');
this._purgeButton.addEventListener('click', this._onPurgeButtonClick.bind(this), false);
this._purgeConfirmButton.addEventListener('click', this._onPurgeConfirmButtonClick.bind(this), false);
@@ -301,7 +301,7 @@ class DictionaryImportController {
_setButtonsEnabled(value) {
value = !value;
- for (const node of document.querySelectorAll('.dictionary-modifying-input')) {
+ for (const node of document.querySelectorAll('.dictionary-database-mutating-input')) {
node.disabled = value;
}
}