Create HTML templates for modals (yomidevs#1425)

* reuse modals

* refactor

* only load templates when needed

* lint

* shared-modals

* lint

* type

* lint

* lint

ext/js/display/search-main.js

@@ -54,8 +54,8 @@ await Application.main(true, async (application) => {
     const searchDisplayController = new SearchDisplayController(display, displayAudio, searchPersistentStateController);
     await searchDisplayController.prepare();
 
-    const modalController = new ModalController();
-    modalController.prepare();
+    const modalController = new ModalController([]);
+    await modalController.prepare();
 
     const settingsController = new SettingsController(application);
     await settingsController.prepare();

ext/js/pages/permissions-main.js

@@ -87,8 +87,8 @@ function setupPermissionsToggles() {
 }
 
 await Application.main(true, async (application) => {
-    const modalController = new ModalController();
-    modalController.prepare();
+    const modalController = new ModalController([]);
+    await modalController.prepare();
 
     const settingsController = new SettingsController(application);
     await settingsController.prepare();

ext/js/pages/settings/modal-controller.js

@@ -16,18 +16,34 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {HtmlTemplateCollection} from '../../dom/html-template-collection.js';
 import {Modal} from './modal.js';
 
 export class ModalController {
-    constructor() {
+    /**
+     * @param {string[]} templateNames
+     */
+    constructor(templateNames) {
         /** @type {Modal[]} */
         this._modals = [];
         /** @type {Map<string|Element, Modal>} */
         this._modalMap = new Map();
+        /** @type {HtmlTemplateCollection} */
+        this._templates = new HtmlTemplateCollection();
+        /** @type {string[]} */
+        this._templateNames = templateNames;
     }
 
     /** */
-    prepare() {
+    async prepare() {
+        if (this._templateNames.length > 0) {
+            await this._templates.loadFromFiles(['/templates-modals.html']);
+            for (const name of this._templateNames) {
+                const template = this._templates.getTemplateContent(name);
+                document.body.appendChild(template);
+            }
+        }
+
         const idSuffix = '-modal';
         for (const node of /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.modal'))) {
             let {id} = node;

ext/js/pages/settings/settings-main.js

@@ -85,8 +85,8 @@ await Application.main(true, async (application) => {
 
     const preparePromises = [];
 
-    const modalController = new ModalController();
-    modalController.prepare();
+    const modalController = new ModalController(['shared-modals', 'settings-modals']);
+    await modalController.prepare();
 
     const settingsController = new SettingsController(application);
     await settingsController.prepare();

ext/js/pages/welcome-main.js

@@ -60,8 +60,8 @@ async function checkNeedsCustomTemplatesWarning() {
 }
 
 await Application.main(true, async (application) => {
-    const modalController = new ModalController();
-    modalController.prepare();
+    const modalController = new ModalController(['shared-modals']);
+    await modalController.prepare();
 
     const settingsController = new SettingsController(application);
     await settingsController.prepare();