summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ext/mixed/css/display.css13
-rw-r--r--ext/mixed/display-templates.html22
-rw-r--r--ext/mixed/js/display-generator.js10
-rw-r--r--ext/mixed/js/html-template-collection.js29
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);
+ }
+ }
+ }
}