Use TemplateHandler for DisplayGenerator

2 files changed, 19 insertions, 59 deletions

diff --git a/ext/fg/float.html b/ext/fg/float.html
index 082755f5..352a866a 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -51,6 +51,7 @@
         <script src="/mixed/js/display.js"></script>
         <script src="/mixed/js/display-generator.js"></script>
         <script src="/mixed/js/scroll.js"></script>
+        <script src="/mixed/js/template-handler.js"></script>
 
         <script src="/fg/js/float.js"></script>
 
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index 46f3d17e..5023c191 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -16,23 +16,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-/*global apiGetDisplayTemplatesHtml*/
+/*global apiGetDisplayTemplatesHtml, TemplateHandler*/
 
 class DisplayGenerator {
     constructor() {
-        this._termEntryTemplate = null;
-        this._termExpressionTemplate = null;
-        this._termDefinitionItemTemplate = null;
-        this._termDefinitionOnlyTemplate = null;
-        this._termGlossaryItemTemplate = null;
-        this._termReasonTemplate = null;
-
-        this._kanjiEntryTemplate = null;
-        this._kanjiInfoTableTemplate = null;
-        this._kanjiInfoTableItemTemplate = null;
-        this._kanjiInfoTableEmptyTemplate = null;
-        this._kanjiGlossaryItemTemplate = null;
-        this._kanjiReadingTemplate = null;
+        this._templateHandler = null;
 
         this._tagTemplate = null;
         this._tagFrequencyTemplate = null;
@@ -40,12 +28,11 @@ class DisplayGenerator {
 
     async prepare() {
         const html = await apiGetDisplayTemplatesHtml();
-        const doc = new DOMParser().parseFromString(html, 'text/html');
-        this._setTemplates(doc);
+        this._templateHandler = new TemplateHandler(html);
     }
 
     createTermEntry(details) {
-        const node = DisplayGenerator._instantiateTemplate(this._termEntryTemplate);
+        const node = this._templateHandler.instantiate('term-entry');
 
         const expressionsContainer = node.querySelector('.term-expression-list');
         const reasonsContainer = node.querySelector('.term-reasons');
@@ -78,7 +65,7 @@ class DisplayGenerator {
     }
 
     createTermExpression([details, termTags]) {
-        const node = DisplayGenerator._instantiateTemplate(this._termExpressionTemplate);
+        const node = this._templateHandler.instantiate('term-expression');
 
         const expressionContainer = node.querySelector('.term-expression-text');
         const tagContainer = node.querySelector('.tags');
@@ -112,7 +99,7 @@ class DisplayGenerator {
     }
 
     createTermReason(reason) {
-        const fragment = DisplayGenerator._instantiateTemplateFragment(this._termReasonTemplate);
+        const fragment = this._templateHandler.instantiateFragment('term-reason');
         const node = fragment.querySelector('.term-reason');
         node.textContent = reason;
         node.dataset.reason = reason;
@@ -120,7 +107,7 @@ class DisplayGenerator {
     }
 
     createTermDefinitionItem(details) {
-        const node = DisplayGenerator._instantiateTemplate(this._termDefinitionItemTemplate);
+        const node = this._templateHandler.instantiate('term-definition-item');
 
         const tagListContainer = node.querySelector('.term-definition-tag-list');
         const onlyListContainer = node.querySelector('.term-definition-only-list');
@@ -136,7 +123,7 @@ class DisplayGenerator {
     }
 
     createTermGlossaryItem(glossary) {
-        const node = DisplayGenerator._instantiateTemplate(this._termGlossaryItemTemplate);
+        const node = this._templateHandler.instantiate('term-glossary-item');
         const container = node.querySelector('.term-glossary');
         if (container !== null) {
             DisplayGenerator._appendMultilineText(container, glossary);
@@ -145,7 +132,7 @@ class DisplayGenerator {
     }
 
     createTermOnly(only) {
-        const node = DisplayGenerator._instantiateTemplate(this._termDefinitionOnlyTemplate);
+        const node = this._templateHandler.instantiate('term-definition-only');
         node.dataset.only = only;
         node.textContent = only;
         return node;
@@ -160,7 +147,7 @@ class DisplayGenerator {
     }
 
     createKanjiEntry(details) {
-        const node = DisplayGenerator._instantiateTemplate(this._kanjiEntryTemplate);
+        const node = this._templateHandler.instantiate('kanji-entry');
 
         const glyphContainer = node.querySelector('.kanji-glyph');
         const frequenciesContainer = node.querySelector('.frequencies');
@@ -205,7 +192,7 @@ class DisplayGenerator {
     }
 
     createKanjiGlossaryItem(glossary) {
-        const node = DisplayGenerator._instantiateTemplate(this._kanjiGlossaryItemTemplate);
+        const node = this._templateHandler.instantiate('kanji-glossary-item');
         const container = node.querySelector('.kanji-glossary');
         if (container !== null) {
             DisplayGenerator._appendMultilineText(container, glossary);
@@ -214,13 +201,13 @@ class DisplayGenerator {
     }
 
     createKanjiReading(reading) {
-        const node = DisplayGenerator._instantiateTemplate(this._kanjiReadingTemplate);
+        const node = this._templateHandler.instantiate('kanji-reading');
         node.textContent = reading;
         return node;
     }
 
     createKanjiInfoTable(details) {
-        const node = DisplayGenerator._instantiateTemplate(this._kanjiInfoTableTemplate);
+        const node = this._templateHandler.instantiate('kanji-info-table');
 
         const container = node.querySelector('.kanji-info-table-body');
 
@@ -236,7 +223,7 @@ class DisplayGenerator {
     }
 
     createKanjiInfoTableItem(details) {
-        const node = DisplayGenerator._instantiateTemplate(this._kanjiInfoTableItemTemplate);
+        const node = this._templateHandler.instantiate('kanji-info-table-item');
         const nameNode = node.querySelector('.kanji-info-table-item-header');
         const valueNode = node.querySelector('.kanji-info-table-item-value');
         if (nameNode !== null) {
@@ -249,11 +236,11 @@ class DisplayGenerator {
     }
 
     createKanjiInfoTableItemEmpty() {
-        return DisplayGenerator._instantiateTemplate(this._kanjiInfoTableEmptyTemplate);
+        return this._templateHandler.instantiate('kanji-info-table-empty');
     }
 
     createTag(details) {
-        const node = DisplayGenerator._instantiateTemplate(this._tagTemplate);
+        const node = this._templateHandler.instantiate('tag');
 
         const inner = node.querySelector('.tag-inner');
 
@@ -265,7 +252,7 @@ class DisplayGenerator {
     }
 
     createSearchTag(details) {
-        const node = DisplayGenerator._instantiateTemplate(this._tagSearchTemplate);
+        const node = this._templateHandler.instantiate('tag-search');
 
         node.textContent = details.query;
 
@@ -275,7 +262,7 @@ class DisplayGenerator {
     }
 
     createFrequencyTag(details) {
-        const node = DisplayGenerator._instantiateTemplate(this._tagFrequencyTemplate);
+        const node = this._templateHandler.instantiate('tag-frequency');
 
         let n = node.querySelector('.term-frequency-dictionary-name');
         if (n !== null) {
@@ -293,26 +280,6 @@ class DisplayGenerator {
         return node;
     }
 
-    _setTemplates(doc) {
-        this._termEntryTemplate = doc.querySelector('#term-entry-template');
-        this._termExpressionTemplate = doc.querySelector('#term-expression-template');
-        this._termDefinitionItemTemplate = doc.querySelector('#term-definition-item-template');
-        this._termDefinitionOnlyTemplate = doc.querySelector('#term-definition-only-template');
-        this._termGlossaryItemTemplate = doc.querySelector('#term-glossary-item-template');
-        this._termReasonTemplate = doc.querySelector('#term-reason-template');
-
-        this._kanjiEntryTemplate = doc.querySelector('#kanji-entry-template');
-        this._kanjiInfoTableTemplate = doc.querySelector('#kanji-info-table-template');
-        this._kanjiInfoTableItemTemplate = doc.querySelector('#kanji-info-table-item-template');
-        this._kanjiInfoTableEmptyTemplate = doc.querySelector('#kanji-info-table-empty-template');
-        this._kanjiGlossaryItemTemplate = doc.querySelector('#kanji-glossary-item-template');
-        this._kanjiReadingTemplate = doc.querySelector('#kanji-reading-template');
-
-        this._tagTemplate = doc.querySelector('#tag-template');
-        this._tagSearchTemplate = doc.querySelector('#tag-search-template');
-        this._tagFrequencyTemplate = doc.querySelector('#tag-frequency-template');
-    }
-
     _appendKanjiLinks(container, text) {
         let part = '';
         for (const c of text) {
@@ -382,12 +349,4 @@ class DisplayGenerator {
             container.appendChild(document.createTextNode(parts[i]));
         }
     }
-
-    static _instantiateTemplate(template) {
-        return document.importNode(template.content.firstChild, true);
-    }
-
-    static _instantiateTemplateFragment(template) {
-        return document.importNode(template.content, true);
-    }
 }