Fix anki template field marker menu (#725)

* Fix HTML collection

* Expose templates

* Fix menu setup

* Warn

3 files changed, 33 insertions, 16 deletions

diff --git a/ext/js/dom/html-template-collection.js b/ext/js/dom/html-template-collection.js
index a71d954f..57b54e59 100644
--- a/ext/js/dom/html-template-collection.js
+++ b/ext/js/dom/html-template-collection.js
@@ -56,9 +56,7 @@ export class HtmlTemplateCollection {
      * @throws {Error}
      */
     instantiate(name) {
-        const template = this._templates.get(name);
-        if (typeof template === 'undefined') { throw new Error(`Failed to find template: ${name}`); }
-        const {firstElementChild} = template.content;
+        const {firstElementChild} = this.getTemplateContent(name);
         if (firstElementChild === null) { throw new Error(`Failed to find template content element: ${name}`); }
         return /** @type {T} */ (document.importNode(firstElementChild, true));
     }
@@ -66,13 +64,20 @@ export class HtmlTemplateCollection {
     /**
      * @param {string} name
      * @returns {DocumentFragment}
-     * @throws {Error}
      */
     instantiateFragment(name) {
+        return document.importNode(this.getTemplateContent(name), true);
+    }
+
+    /**
+     * @param {string} name
+     * @returns {DocumentFragment}
+     * @throws {Error}
+     */
+    getTemplateContent(name) {
         const template = this._templates.get(name);
         if (typeof template === 'undefined') { throw new Error(`Failed to find template: ${name}`); }
-        const {content} = template;
-        return document.importNode(content, true);
+        return template.content;
     }
 
     /**
diff --git a/ext/js/pages/settings/anki-controller.js b/ext/js/pages/settings/anki-controller.js
index edd40516..d166d3f0 100644
--- a/ext/js/pages/settings/anki-controller.js
+++ b/ext/js/pages/settings/anki-controller.js
@@ -281,15 +281,25 @@ export class AnkiController {
 
     /** */
     _setupFieldMenus() {
-        /** @type {[types: import('dictionary').DictionaryEntryType[], selector: string][]} */
+        /** @type {[types: import('dictionary').DictionaryEntryType[], templateName: string][]} */
         const fieldMenuTargets = [
-            [['term'], '#anki-card-terms-field-menu-template'],
-            [['kanji'], '#anki-card-kanji-field-menu-template'],
-            [['term', 'kanji'], '#anki-card-all-field-menu-template']
+            [['term'], 'anki-card-terms-field-menu'],
+            [['kanji'], 'anki-card-kanji-field-menu'],
+            [['term', 'kanji'], 'anki-card-all-field-menu']
         ];
-        for (const [types, selector] of fieldMenuTargets) {
-            const element = /** @type {HTMLTemplateElement} */ (document.querySelector(selector));
-            if (element === null) { continue; }
+        const {templates} = this._settingsController;
+        for (const [types, templateName] of fieldMenuTargets) {
+            const templateContent = templates.getTemplateContent(templateName);
+            if (templateContent === null) {
+                log.warn(new Error(`Failed to set up menu "${templateName}": element not found`));
+                continue;
+            }
+
+            const container = templateContent.querySelector('.popup-menu-body');
+            if (container === null) {
+                log.warn(new Error(`Failed to set up menu "${templateName}": body not found`));
+                return;
+            }
 
             let markers = [];
             for (const type of types) {
@@ -297,9 +307,6 @@ export class AnkiController {
             }
             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');
diff --git a/ext/js/pages/settings/settings-controller.js b/ext/js/pages/settings/settings-controller.js
index 282479de..a9f3a026 100644
--- a/ext/js/pages/settings/settings-controller.js
+++ b/ext/js/pages/settings/settings-controller.js
@@ -66,6 +66,11 @@ export class SettingsController extends EventDispatcher {
         this._setProfileIndex(value, true);
     }
 
+    /** @type {HtmlTemplateCollection} */
+    get templates() {
+        return this._templates;
+    }
+
     /** */
     async prepare() {
         await this._templates.loadFromFiles(['/templates-settings.html']);