Modal refactor (#1335)

* Rename modal-container to modal

* Update how modal IDs are handled

* Fix invalid modal check

* Update modal IDs

3 files changed, 14 insertions, 6 deletions

diff --git a/ext/bg/js/settings/dictionary-controller.js b/ext/bg/js/settings/dictionary-controller.js
index 57ec5bee..ea9f7503 100644
--- a/ext/bg/js/settings/dictionary-controller.js
+++ b/ext/bg/js/settings/dictionary-controller.js
@@ -443,7 +443,7 @@ class DictionaryController {
         const progressSelector = '.dictionary-delete-progress';
         const progressContainers = [
             ...node.querySelectorAll('.progress-container'),
-            ...document.querySelectorAll(`#dictionaries ${progressSelector}`)
+            ...document.querySelectorAll(`#dictionaries-modal ${progressSelector}`)
         ];
         const progressBars = [
             ...node.querySelectorAll('.progress-bar'),
diff --git a/ext/bg/js/settings/dictionary-import-controller.js b/ext/bg/js/settings/dictionary-import-controller.js
index 436a056c..c4ad9e59 100644
--- a/ext/bg/js/settings/dictionary-import-controller.js
+++ b/ext/bg/js/settings/dictionary-import-controller.js
@@ -128,7 +128,7 @@ class DictionaryImportController {
         const progressSelector = '.dictionary-import-progress';
         const progressContainers = [
             ...document.querySelectorAll('#dictionary-import-progress-container'),
-            ...document.querySelectorAll(`#dictionaries ${progressSelector}`)
+            ...document.querySelectorAll(`#dictionaries-modal ${progressSelector}`)
         ];
         const progressBars = [
             ...document.querySelectorAll('#dictionary-import-progress-container .progress-bar'),
diff --git a/ext/bg/js/settings/modal-controller.js b/ext/bg/js/settings/modal-controller.js
index 832ea437..fe4f911b 100644
--- a/ext/bg/js/settings/modal-controller.js
+++ b/ext/bg/js/settings/modal-controller.js
@@ -26,17 +26,25 @@ class ModalController {
     }
 
     prepare() {
-        for (const node of document.querySelectorAll('.modal,.modal-container')) {
-            const {id} = node;
+        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(name) {
-        const modal = this._modalMap.get(name);
+    getModal(nameOrNode) {
+        const modal = this._modalMap.get(nameOrNode);
         return (typeof modal !== 'undefined' ? modal : null);
     }