Make secondary dictionary option controllers more consistent (#1577)

2 files changed, 29 insertions, 20 deletions

diff --git a/ext/js/pages/settings/collapsible-dictionary-controller.js b/ext/js/pages/settings/collapsible-dictionary-controller.js
index a3a1df62..37793c6f 100644
--- a/ext/js/pages/settings/collapsible-dictionary-controller.js
+++ b/ext/js/pages/settings/collapsible-dictionary-controller.js
@@ -24,17 +24,16 @@ class CollapsibleDictionaryController {
         this._settingsController = settingsController;
         this._getDictionaryInfoToken = null;
         this._dictionaryInfoMap = new Map();
+        this._eventListeners = new EventListenerCollection();
         this._container = null;
         this._selects = [];
         this._allSelect = null;
-        this._eventListeners = new EventListenerCollection();
     }
 
     async prepare() {
         this._container = document.querySelector('#collapsible-dictionary-list');
 
         await this._onDatabaseUpdated();
-        await this._updateOptions();
 
         yomichan.on('databaseUpdated', this._onDatabaseUpdated.bind(this));
         this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
@@ -54,20 +53,19 @@ class CollapsibleDictionaryController {
             this._dictionaryInfoMap.set(entry.title, entry);
         }
 
-        await this._updateOptions();
+        const options = await this._settingsController.getOptions();
+        this._onOptionsChanged({options});
     }
 
     _onOptionsChanged({options}) {
         this._eventListeners.removeAllEventListeners();
         this._selects = [];
 
-        const {dictionaries} = options;
-
         const fragment = document.createDocumentFragment();
 
         this._setupAllSelect(fragment, options);
 
-        for (const dictionary of Object.keys(dictionaries)) {
+        for (const dictionary of Object.keys(options.dictionaries)) {
             const dictionaryInfo = this._dictionaryInfoMap.get(dictionary);
             if (typeof dictionaryInfo === 'undefined') { continue; }
 
@@ -120,11 +118,6 @@ class CollapsibleDictionaryController {
         return node.querySelector('.definitions-collapsible');
     }
 
-    async _updateOptions() {
-        const options = await this._settingsController.getOptions();
-        this._onOptionsChanged({options});
-    }
-
     async _updateAllSelectFresh() {
         this._updateAllSelect(await this._settingsController.getOptions());
     }
diff --git a/ext/js/pages/settings/secondary-search-dictionary-controller.js b/ext/js/pages/settings/secondary-search-dictionary-controller.js
index 2fb3de67..13e1dcf5 100644
--- a/ext/js/pages/settings/secondary-search-dictionary-controller.js
+++ b/ext/js/pages/settings/secondary-search-dictionary-controller.js
@@ -23,42 +23,58 @@ class SecondarySearchDictionaryController {
     constructor(settingsController) {
         this._settingsController = settingsController;
         this._getDictionaryInfoToken = null;
-        this._container = null;
+        this._dictionaryInfoMap = new Map();
         this._eventListeners = new EventListenerCollection();
+        this._container = null;
     }
 
     async prepare() {
         this._container = document.querySelector('#secondary-search-dictionary-list');
 
-        yomichan.on('databaseUpdated', this._onDatabaseUpdated.bind(this));
-
         await this._onDatabaseUpdated();
+
+        yomichan.on('databaseUpdated', this._onDatabaseUpdated.bind(this));
+        this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
     }
 
     // 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;
 
+        this._dictionaryInfoMap.clear();
+        for (const entry of dictionaries) {
+            this._dictionaryInfoMap.set(entry.title, entry);
+        }
+
+        const options = await this._settingsController.getOptions();
+        this._onOptionsChanged({options});
+    }
+
+    _onOptionsChanged({options}) {
+        this._eventListeners.removeAllEventListeners();
+
         const fragment = document.createDocumentFragment();
-        for (const {title, revision} of dictionaries) {
+
+        for (const dictionary of Object.keys(options.dictionaries)) {
+            const dictionaryInfo = this._dictionaryInfoMap.get(dictionary);
+            if (typeof dictionaryInfo === 'undefined') { continue; }
+
             const node = this._settingsController.instantiateTemplate('secondary-search-dictionary');
             fragment.appendChild(node);
 
             const nameNode = node.querySelector('.dictionary-title');
-            nameNode.textContent = title;
+            nameNode.textContent = dictionary;
 
             const versionNode = node.querySelector('.dictionary-version');
-            versionNode.textContent = `rev.${revision}`;
+            versionNode.textContent = `rev.${dictionaryInfo.revision}`;
 
             const toggle = node.querySelector('.dictionary-allow-secondary-searches');
-            toggle.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'allowSecondarySearches']);
+            toggle.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', dictionary, 'allowSecondarySearches']);
             this._eventListeners.addEventListener(toggle, 'settingChanged', this._onEnabledChanged.bind(this, node), false);
         }