alex/yomichan
1
Fork 0
Code Releases Activity

Use TemplateHandler for DisplayGenerator

Browse Source
This commit is contained in:
toasted-nutbread 2020-02-23 16:18:13 -05:00
parent d87050bbbb
commit a0b2e11c10
2 changed files with 19 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ext/fg/float.html
View File

@ -51,6 +51,7 @@
<script src="/mixed/js/display.js"></script> <script src="/mixed/js/display.js"></script>
<script src="/mixed/js/display-generator.js"></script> <script src="/mixed/js/display-generator.js"></script>
<script src="/mixed/js/scroll.js"></script> <script src="/mixed/js/scroll.js"></script>
<script src="/mixed/js/template-handler.js"></script>
<script src="/fg/js/float.js"></script> <script src="/fg/js/float.js"></script>

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

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