Settings templates refactor (#897)

* Add template instantiation API to SettingsController

* Use SettingsController.instantiateTemplate

ext/bg/js/settings/anki-controller.js

@@ -90,10 +90,9 @@ class AnkiController {
     }
 
     getFieldMarkersHtml(markers) {
-        const template = document.querySelector('#anki-field-marker-template').content;
         const fragment = document.createDocumentFragment();
         for (const marker of markers) {
-            const markerNode = document.importNode(template, true).firstChild;
+            const markerNode = this._settingsController.instantiateTemplate('anki-field-marker');
             markerNode.querySelector('.marker-link').textContent = marker;
             fragment.appendChild(markerNode);
         }
@@ -221,8 +220,7 @@ class AnkiController {
     }
 
     _createFieldTemplate(name, value, markers) {
-        const template = document.querySelector('#anki-field-template').content;
+        const content = this._settingsController.instantiateTemplate('anki-field');
-        const content = document.importNode(template, true).firstChild;
 
         content.querySelector('.anki-field-name').textContent = name;
 

ext/bg/js/settings/audio-controller.js

@@ -136,12 +136,6 @@ class AudioController {
         }
     }
 
-    _instantiateTemplate(templateSelector) {
-        const template = document.querySelector(templateSelector);
-        const content = document.importNode(template.content, true);
-        return content.firstChild;
-    }
-
     _getUnusedAudioSource() {
         const audioSourcesAvailable = [
             'jpod101',
@@ -159,7 +153,7 @@ class AudioController {
 
     _createAudioSourceEntry(value) {
         const eventListeners = new EventListenerCollection();
-        const container = this._instantiateTemplate('#audio-source-template');
+        const container = this._settingsController.instantiateTemplate('audio-source');
         const select = container.querySelector('.audio-source-select');
         const removeButton = container.querySelector('.audio-source-remove');
 

ext/bg/js/settings/dictionary-controller.js

@@ -293,7 +293,7 @@ class DictionaryController {
     }
 
     _createExtra(totalCounts, remainders, totalRemainder) {
-        const node = this._instantiateTemplate('#dict-extra-template');
+        const node = this._settingsController.instantiateTemplate('dict-extra');
         this._integrityExtraInfoNode = node;
 
         node.querySelector('.dict-total-count').textContent = `${totalRemainder} item${totalRemainder !== 1 ? 's' : ''}`;
@@ -317,7 +317,7 @@ class DictionaryController {
     }
 
     _createDictionaryEntry(dictionary) {
-        const node = this._instantiateTemplate('#dict-template');
+        const node = this._settingsController.instantiateTemplate('dict');
         this._dictionaryEntryContainer.appendChild(node);
 
         const entry = new DictionaryEntry(this, node, dictionary);
@@ -369,12 +369,6 @@ class DictionaryController {
         }
     }
 
-    _instantiateTemplate(templateSelector) {
-        const template = document.querySelector(templateSelector);
-        const content = document.importNode(template.content, true);
-        return content.firstChild;
-    }
-
     async _deleteDictionaryInternal(dictionaryTitle, onProgress) {
         const dictionaryDatabase = await this._getPreparedDictionaryDatabase();
         try {

ext/bg/js/settings/profile-conditions-ui.js

@@ -110,10 +110,8 @@ class ProfileConditionsUI {
         this._addConditionGroupButton = null;
     }
 
-    instantiateTemplate(templateSelector) {
+    instantiateTemplate(names) {
-        const template = document.querySelector(templateSelector);
+        return this._settingsController.instantiateTemplate(names);
-        const content = document.importNode(template.content, true);
-        return content.firstChild;
     }
 
     getDescriptorTypes() {
@@ -303,7 +301,7 @@ class ProfileConditionGroupUI {
     }
 
     prepare(conditionGroup) {
-        this._node = this._parent.instantiateTemplate('#condition-group-template');
+        this._node = this._parent.instantiateTemplate('condition-group');
         this._conditionContainer = this._node.querySelector('.condition-list');
         this._addConditionButton = this._node.querySelector('.condition-add');
 
@@ -434,7 +432,7 @@ class ProfileConditionUI {
     prepare(condition) {
         const {type, operator, value} = condition;
 
-        this._node = this._parent.parent.instantiateTemplate('#condition-template');
+        this._node = this._parent.parent.instantiateTemplate('condition');
         this._typeInput = this._node.querySelector('.condition-type');
         this._typeOptionContainer = this._typeInput.querySelector('optgroup');
         this._operatorInput = this._node.querySelector('.condition-operator');

ext/bg/js/settings/scan-inputs-controller.js

@@ -65,6 +65,10 @@ class ScanInputsController {
         this._settingsController.setProfileSetting(path, value);
     }
 
+    instantiateTemplate(name) {
+        return this._settingsController.instantiateTemplate(name);
+    }
+
     // Private
 
     _onOptionsChanged({options}) {
@@ -139,7 +143,7 @@ class ScanInputField {
     }
 
     prepare(container, include, exclude) {
-        const node = this._instantiateTemplate('#scan-input-template');
+        const node = this._parent.instantiateTemplate('scan-input');
         const includeInputNode = node.querySelector('.scan-input-field[data-property=include]');
         const includeMouseButton = node.querySelector('.mouse-button[data-property=include]');
         const excludeInputNode = node.querySelector('.scan-input-field[data-property=exclude]');
@@ -188,12 +192,6 @@ class ScanInputField {
         this._parent.removeInput(this._index);
     }
 
-    _instantiateTemplate(templateSelector) {
-        const template = document.querySelector(templateSelector);
-        const content = document.importNode(template.content, true);
-        return content.firstChild;
-    }
-
     _isPointerTypeSupported(pointerType) {
         if (this._node === null) { return false; }
         const node = this._node.querySelector(`input.scan-input-settings-checkbox[data-property="types.${pointerType}"]`);

ext/bg/js/settings/settings-controller.js

@@ -16,6 +16,7 @@
  */
 
 /* global
+ * HtmlTemplateCollection
  * api
  */
 
@@ -26,6 +27,7 @@ class SettingsController extends EventDispatcher {
         this._source = generateId(16);
         this._pageExitPreventions = new Set();
         this._pageExitPreventionEventListeners = new EventListenerCollection();
+        this._templates = new HtmlTemplateCollection(document);
     }
 
     get source() {
@@ -110,6 +112,14 @@ class SettingsController extends EventDispatcher {
         return obj;
     }
 
+    instantiateTemplate(name) {
+        return this._templates.instantiate(name);
+    }
+
+    instantiateTemplateFragment(name) {
+        return this._templates.instantiateFragment(name);
+    }
+
     // Private
 
     _setProfileIndex(value) {

ext/bg/settings.html

@@ -1213,6 +1213,7 @@
         <script src="/mixed/js/dictionary-data-util.js"></script>
         <script src="/mixed/js/document-util.js"></script>
         <script src="/mixed/js/dom-data-binder.js"></script>
+        <script src="/mixed/js/html-template-collection.js"></script>
         <script src="/mixed/js/object-property-accessor.js"></script>
         <script src="/mixed/js/task-accumulator.js"></script>
         <script src="/mixed/js/text-to-speech-audio.js"></script>