Improve html templates (#1061)

* Add template pre-processing * Remove whitespace * Add labels * Reuse tag template for search tags * Add space
2020-11-24 19:06:29 -05:00 · 2020-11-24 19:06:29 -05:00 · 02d9f7c736
commit 02d9f7c736
parent 0b00de3c0f
4 changed files with 61 additions and 13 deletions
--- 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;
--- 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>
--- 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) {
--- 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);
+            }
+        }
+    }
 }