Improve html templates (#1061)

* Add template pre-processing * Remove whitespace * Add labels * Reuse tag template for search tags * Add space
author: toasted-nutbread <toasted-nutbread@users.noreply.github.com> 2020-11-24 19:06:29 -0500
committer: GitHub <noreply@github.com> 2020-11-24 19:06:29 -0500
commit: 02d9f7c736b55e22631c7ad29fa60df729a0f05b (patch)
tree: a3d13c29d01c5c6596e1590b7f196eae3cd1f18d /ext/mixed
parent: 0b00de3c0f0cab64529f18a477120ab9362581fc (diff)
4 files changed, 61 insertions, 13 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index a54ebe4c..cacfe8c9 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -58,6 +58,8 @@
     --entry-current-indicator: calc(4em / var(--font-size-no-units));
     --entry-current-indicator-transition-duration: 0.125s;
 
+    --expression-space-size: 0.5em;
+
     /* Colors */
     --background-color: #ffffff;
     --glossary-image-background-color: #eeeeee;
@@ -590,8 +592,11 @@ button.action-button {
 .term-expression {
     display: inline;
 }
-.term-expression-text {
+.term-expression-text-container {
     display: inline-block;
+}
+.term-expression-text {
+    display: inline;
     font-size: var(--expression-font-size);
 }
 .term-expression-details {
@@ -603,7 +608,7 @@ button.action-button {
 .term-expression-details>.frequencies {
     display: none;
 }
-.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text::after {
+.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-text::after {
     content: "\3001";
 }
 .term-frequency-separator::before {
@@ -630,6 +635,10 @@ button.action-button {
 
 
 /* Merged term styles */
+.entry[data-expression-multi=true] .term-expression-list,
+.entry:not([data-expression-multi=true]) .term-expression-text-container {
+    margin-right: var(--expression-space-size);
+}
 .entry[data-expression-multi=true] .term-expression-list .term-expression-details {
     display: inline-block;
     position: relative;
diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html
index 7416b223..3b8d97a2 100644
--- a/ext/mixed/display-templates.html
+++ b/ext/mixed/display-templates.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html><html><head></head><body>
 
-<template id="term-entry-template"><div class="entry" data-type="term">
+<!-- Term entry templates -->
+<template id="term-entry-template" data-remove-whitespace-text="true"><div class="entry" data-type="term">
     <div class="entry-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></div>
     <div class="entry-header1">
         <div class="entry-header2">
@@ -23,17 +24,23 @@
     </div>
     <div class="debug-info"><a class="debug-log-link">Log debug info to console</a></div>
 </div></template>
-<template id="term-expression-template"><div class="term-expression"><span class="term-expression-text source-text"></span><div class="term-expression-details">
-    <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio"></button>
-    <div class="tags tag-list"></div>
-    <div class="frequencies tag-list"></div>
-</div></div></template>
+<template id="term-expression-template" data-remove-whitespace-text="true"><div class="term-expression">
+    <div class="term-expression-text-container">
+        <span class="term-expression-text source-text"></span>
+    </div>
+    <div class="term-expression-details">
+        <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio"></button>
+        <div class="tags tag-list"></div>
+        <div class="frequencies tag-list"></div>
+    </div>
+</div></template>
 <template id="term-definition-item-template"><li class="term-definition-item"><div class="term-definition-tag-list tag-list"></div><div class="term-definition-disambiguation-list"></div><ul class="term-glossary-list"></ul></li></template>
 <template id="term-definition-disambiguation-template"><span class="term-definition-disambiguation"></span></template>
 <template id="term-glossary-item-template"><li class="term-glossary-item"><span class="term-glossary-separator"> </span><span class="term-glossary"></span></li></template>
 <template id="term-glossary-item-image-template"><li class="term-glossary-item" data-has-image="true"><span class="term-glossary-separator"> </span><span class="term-glossary"><a class="term-glossary-image-link" target="_blank" rel="noreferrer noopener"><span class="term-glossary-image-container"><span class="term-glossary-image-aspect-ratio-sizer"></span><img class="term-glossary-image" alt="" /><span class="term-glossary-image-container-overlay"></span></span><span class="term-glossary-image-link-text">Image</span></a> <span class="term-glossary-image-description"></span></span></li></template>
 <template id="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator"> </span></template>
 
+<!-- Pitch accent templates -->
 <template id="term-pitch-accent-static-template"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
     <defs>
         <g id="term-pitch-accent-graph-dot"><circle cx="0" cy="0" r="15" /></g>
@@ -46,6 +53,7 @@
 <template id="term-pitch-accent-template"><li class="term-pitch-accent"><span class="term-pitch-accent-tag-list tag-list"></span><span class="term-pitch-accent-disambiguation-list"></span><span class="term-pitch-accent-characters"></span><span class="term-pitch-accent-position"></span><span class="term-pitch-accent-details"><svg class="term-pitch-accent-graph" xmlns="http://www.w3.org/2000/svg"><path class="term-pitch-accent-graph-line" /><path class="term-pitch-accent-graph-line-tail" /></svg></span></li></template>
 <template id="term-pitch-accent-character-template"><span class="term-pitch-accent-character"><span class="term-pitch-accent-character-inner"></span></span></template>
 
+<!-- Kanji entry templates -->
 <template id="kanji-entry-template"><div class="entry" data-type="kanji">
     <div class="entry-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></div>
     <div class="entry-header1">
@@ -87,8 +95,8 @@
 <template id="kanji-glossary-item-template"><li class="kanji-glossary-item"><span class="kanji-glossary"></span></li></template>
 <template id="kanji-reading-template"><dd class="kanji-reading"></dd></template>
 
+<!-- Tag templates -->
 <template id="tag-template"><span class="tag"><span class="tag-inner"></span></span></template>
 <template id="tag-frequency-template"><span class="tag" data-category="frequency"><span class="tag-inner"><span class="term-frequency-disambiguation"><span class="term-frequency-disambiguation-expression"></span><span class="term-frequency-disambiguation-separator"></span><span class="term-frequency-disambiguation-reading"></span></span><span class="term-frequency-dictionary-name"></span><span class="term-frequency-separator"></span><span class="term-frequency-value"></span></span></span></template>
-<template id="tag-search-template"><span class="tag" data-category="search"></span></template>
 
 </body></html>
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index 09bfe411..0cf1e8c6 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -317,10 +317,12 @@ class DisplayGenerator {
     }
 
     _createSearchTag(text) {
-        const node = this._templates.instantiate('tag-search');
-        node.textContent = text;
-        node.dataset.query = text;
-        return node;
+        return this._createTag({
+            notes: '',
+            name: text,
+            category: 'search',
+            redundant: false
+        });
     }
 
     _createPitches(details) {
diff --git a/ext/mixed/js/html-template-collection.js b/ext/mixed/js/html-template-collection.js
index 56da68b8..d3e2e6fd 100644
--- a/ext/mixed/js/html-template-collection.js
+++ b/ext/mixed/js/html-template-collection.js
@@ -29,6 +29,7 @@ class HtmlTemplateCollection {
         for (const template of sourceNode.querySelectorAll('template')) {
             const match = pattern.exec(template.id);
             if (match === null) { continue; }
+            this._prepareTemplate(template);
             this._templates.set(match[1], template);
         }
     }
@@ -42,4 +43,32 @@ class HtmlTemplateCollection {
         const template = this._templates.get(name);
         return document.importNode(template.content, true);
     }
+
+    // Private
+
+    _prepareTemplate(template) {
+        if (template.dataset.removeWhitespaceText === 'true') {
+            this._removeWhitespaceText(template);
+        }
+    }
+
+    _removeWhitespaceText(template) {
+        const {content} = template;
+        const {TEXT_NODE} = Node;
+        const iterator = document.createNodeIterator(content, NodeFilter.SHOW_TEXT);
+        const removeNodes = [];
+        while (true) {
+            const node = iterator.nextNode();
+            if (node === null) { break; }
+            if (node.nodeType === TEXT_NODE && node.nodeValue.trim().length === 0) {
+                removeNodes.push(node);
+            }
+        }
+        for (const node of removeNodes) {
+            const {parentNode} = node;
+            if (parentNode !== null) {
+                parentNode.removeChild(node);
+            }
+        }
+    }
 }
author	toasted-nutbread <toasted-nutbread@users.noreply.github.com>	2020-11-24 19:06:29 -0500
committer	GitHub <noreply@github.com>	2020-11-24 19:06:29 -0500
commit	02d9f7c736b55e22631c7ad29fa60df729a0f05b (patch)
tree	a3d13c29d01c5c6596e1590b7f196eae3cd1f18d /ext/mixed
parent	0b00de3c0f0cab64529f18a477120ab9362581fc (diff)