alex/yomichan
1
Fork 0
Code Releases Activity

Improve html templates (#1061)

Browse Source 
* Add template pre-processing

* Remove whitespace

* Add labels

* Reuse tag template for search tags

* Add space
This commit is contained in:
toasted-nutbread 2020-11-24 19:06:29 -05:00 committed by GitHub
parent 0b00de3c0f
commit 02d9f7c736
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 61 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ext/mixed/css/display.css
View File

@ -58,6 +58,8 @@
--entry-current-indicator: calc(4em / var(--font-size-no-units)); --entry-current-indicator: calc(4em / var(--font-size-no-units));
--entry-current-indicator-transition-duration: 0.125s; --entry-current-indicator-transition-duration: 0.125s;
--expression-space-size: 0.5em;
/* Colors */ /* Colors */
--background-color: #ffffff; --background-color: #ffffff;
--glossary-image-background-color: #eeeeee; --glossary-image-background-color: #eeeeee;
@ -590,8 +592,11 @@ button.action-button {
.term-expression { .term-expression {
display: inline; display: inline;
} }
.term-expression-text { .term-expression-text-container {
display: inline-block; display: inline-block;
}
.term-expression-text {
display: inline;
font-size: var(--expression-font-size); font-size: var(--expression-font-size);
} }
.term-expression-details { .term-expression-details {
@ -603,7 +608,7 @@ button.action-button {
.term-expression-details>.frequencies { .term-expression-details>.frequencies {
display: none; 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"; content: "\3001";
} }
.term-frequency-separator::before { .term-frequency-separator::before {
@ -630,6 +635,10 @@ button.action-button {
/* Merged term styles */ /* 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 { .entry[data-expression-multi=true] .term-expression-list .term-expression-details {
display: inline-block; display: inline-block;
position: relative; position: relative;

16
ext/mixed/display-templates.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html><html><head></head><body> <!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-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></div>
<div class="entry-header1"> <div class="entry-header1">
<div class="entry-header2"> <div class="entry-header2">
@ -23,17 +24,23 @@
</div> </div>
<div class="debug-info"><a class="debug-log-link">Log debug info to console</a></div> <div class="debug-info"><a class="debug-log-link">Log debug info to console</a></div>
</div></template> </div></template>
<template id="term-expression-template"><div class="term-expression"><span class="term-expression-text source-text"></span><div class="term-expression-details"> <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> <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio"></button>
<div class="tags tag-list"></div> <div class="tags tag-list"></div>
<div class="frequencies tag-list"></div> <div class="frequencies tag-list"></div>
</div></div></template> </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-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-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-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-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> <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;"> <template id="term-pitch-accent-static-template"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<defs> <defs>
<g id="term-pitch-accent-graph-dot"><circle cx="0" cy="0" r="15" /></g> <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-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> <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"> <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-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></div>
<div class="entry-header1"> <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-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> <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-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-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> </body></html>

10
ext/mixed/js/display-generator.js
View File

@ -317,10 +317,12 @@ class DisplayGenerator {
} }
_createSearchTag(text) { _createSearchTag(text) {
const node = this._templates.instantiate('tag-search'); return this._createTag({
node.textContent = text; notes: '',
node.dataset.query = text; name: text,
return node; category: 'search',
redundant: false
});
} }
_createPitches(details) { _createPitches(details) {

29
ext/mixed/js/html-template-collection.js
View File

@ -29,6 +29,7 @@ class HtmlTemplateCollection {
for (const template of sourceNode.querySelectorAll('template')) { for (const template of sourceNode.querySelectorAll('template')) {
const match = pattern.exec(template.id); const match = pattern.exec(template.id);
if (match === null) { continue; } if (match === null) { continue; }
this._prepareTemplate(template);
this._templates.set(match[1], template); this._templates.set(match[1], template);
} }
} }
@ -42,4 +43,32 @@ class HtmlTemplateCollection {
const template = this._templates.get(name); const template = this._templates.get(name);
return document.importNode(template.content, true); 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);
}
}
}
} }