yomichan/ext/mixed/js/display-generator.js
2020-02-14 11:00:36 +02:00

394 lines
16 KiB
JavaScript

/*
* Copyright (C) 2019-2020 Alex Yatskov <alex@foosoft.net>
* Author: Alex Yatskov <alex@foosoft.net>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*global apiGetDisplayTemplatesHtml*/
class DisplayGenerator {
constructor() {
this._termEntryTemplate = 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._tagFrequencyTemplate = null;
}
async prepare() {
const html = await apiGetDisplayTemplatesHtml();
const doc = new DOMParser().parseFromString(html, 'text/html');
this._setTemplates(doc);
}
createTermEntry(details) {
const node = DisplayGenerator._instantiateTemplate(this._termEntryTemplate);
const expressionsContainer = node.querySelector('.term-expression-list');
const reasonsContainer = node.querySelector('.term-reasons');
const frequenciesContainer = node.querySelector('.frequencies');
const definitionsContainer = node.querySelector('.term-definition-list');
const debugInfoContainer = node.querySelector('.debug-info');
const expressionMulti = Array.isArray(details.expressions);
const definitionMulti = Array.isArray(details.definitions);
node.dataset.expressionMulti = `${expressionMulti}`;
node.dataset.definitionMulti = `${definitionMulti}`;
node.dataset.expressionCount = `${expressionMulti ? details.expressions.length : 1}`;
node.dataset.definitionCount = `${definitionMulti ? details.definitions.length : 1}`;
const termTags = details.termTags;
let expressions = details.expressions;
expressions = Array.isArray(expressions) ? expressions.map((e) => [e, termTags]) : null;
DisplayGenerator._appendMultiple(expressionsContainer, this.createTermExpression.bind(this), expressions, [[details, termTags]]);
DisplayGenerator._appendMultiple(reasonsContainer, this.createTermReason.bind(this), details.reasons);
DisplayGenerator._appendMultiple(frequenciesContainer, this.createFrequencyTag.bind(this), details.frequencies);
DisplayGenerator._appendMultiple(definitionsContainer, this.createTermDefinitionItem.bind(this), details.definitions, [details]);
if (debugInfoContainer !== null) {
debugInfoContainer.textContent = JSON.stringify(details, null, 4);
}
return node;
}
createTermExpression([details, termTags]) {
const node = DisplayGenerator._instantiateTemplate(this._termExpressionTemplate);
const expressionContainer = node.querySelector('.term-expression-text');
const tagContainer = node.querySelector('.tags');
const frequencyContainer = node.querySelector('.frequencies');
if (details.termFrequency) {
node.dataset.frequency = details.termFrequency;
}
if (expressionContainer !== null) {
let furiganaSegments = details.furiganaSegments;
if (!Array.isArray(furiganaSegments)) {
// This case should not occur
furiganaSegments = [{text: details.expression, furigana: details.reading}];
}
DisplayGenerator._appendFurigana(expressionContainer, furiganaSegments, this._appendKanjiLinks.bind(this));
}
if (!Array.isArray(termTags)) {
// Fallback
termTags = details.termTags;
}
const searchQueries = [details.expression, details.reading]
.filter((x) => !!x)
.map((x) => ({query: x}));
DisplayGenerator._appendMultiple(tagContainer, this.createTag.bind(this), termTags);
DisplayGenerator._appendMultiple(tagContainer, this.createSearchTag.bind(this), searchQueries);
DisplayGenerator._appendMultiple(frequencyContainer, this.createFrequencyTag.bind(this), details.frequencies);
return node;
}
createTermReason(reason) {
const fragment = DisplayGenerator._instantiateTemplateFragment(this._termReasonTemplate);
const node = fragment.querySelector('.term-reason');
node.textContent = reason;
node.dataset.reason = reason;
return fragment;
}
createTermDefinitionItem(details) {
const node = DisplayGenerator._instantiateTemplate(this._termDefinitionItemTemplate);
const tagListContainer = node.querySelector('.term-definition-tag-list');
const onlyListContainer = node.querySelector('.term-definition-only-list');
const glossaryContainer = node.querySelector('.term-glossary-list');
node.dataset.dictionary = details.dictionary;
DisplayGenerator._appendMultiple(tagListContainer, this.createTag.bind(this), details.definitionTags);
DisplayGenerator._appendMultiple(onlyListContainer, this.createTermOnly.bind(this), details.only);
DisplayGenerator._appendMultiple(glossaryContainer, this.createTermGlossaryItem.bind(this), details.glossary);
return node;
}
createTermGlossaryItem(glossary) {
const node = DisplayGenerator._instantiateTemplate(this._termGlossaryItemTemplate);
const container = node.querySelector('.term-glossary');
if (container !== null) {
DisplayGenerator._appendMultilineText(container, glossary);
}
return node;
}
createTermOnly(only) {
const node = DisplayGenerator._instantiateTemplate(this._termDefinitionOnlyTemplate);
node.dataset.only = only;
node.textContent = only;
return node;
}
createKanjiLink(character) {
const node = document.createElement('a');
node.href = '#';
node.className = 'kanji-link';
node.textContent = character;
return node;
}
createKanjiEntry(details) {
const node = DisplayGenerator._instantiateTemplate(this._kanjiEntryTemplate);
const glyphContainer = node.querySelector('.kanji-glyph');
const frequenciesContainer = node.querySelector('.frequencies');
const tagContainer = node.querySelector('.tags');
const glossaryContainer = node.querySelector('.kanji-glossary-list');
const chineseReadingsContainer = node.querySelector('.kanji-readings-chinese');
const japaneseReadingsContainer = node.querySelector('.kanji-readings-japanese');
const statisticsContainer = node.querySelector('.kanji-statistics');
const classificationsContainer = node.querySelector('.kanji-classifications');
const codepointsContainer = node.querySelector('.kanji-codepoints');
const dictionaryIndicesContainer = node.querySelector('.kanji-dictionary-indices');
const debugInfoContainer = node.querySelector('.debug-info');
if (glyphContainer !== null) {
glyphContainer.textContent = details.character;
}
DisplayGenerator._appendMultiple(frequenciesContainer, this.createFrequencyTag.bind(this), details.frequencies);
DisplayGenerator._appendMultiple(tagContainer, this.createTag.bind(this), details.tags);
DisplayGenerator._appendMultiple(glossaryContainer, this.createKanjiGlossaryItem.bind(this), details.glossary);
DisplayGenerator._appendMultiple(chineseReadingsContainer, this.createKanjiReading.bind(this), details.onyomi);
DisplayGenerator._appendMultiple(japaneseReadingsContainer, this.createKanjiReading.bind(this), details.kunyomi);
if (statisticsContainer !== null) {
statisticsContainer.appendChild(this.createKanjiInfoTable(details.stats.misc));
}
if (classificationsContainer !== null) {
classificationsContainer.appendChild(this.createKanjiInfoTable(details.stats.class));
}
if (codepointsContainer !== null) {
codepointsContainer.appendChild(this.createKanjiInfoTable(details.stats.code));
}
if (dictionaryIndicesContainer !== null) {
dictionaryIndicesContainer.appendChild(this.createKanjiInfoTable(details.stats.index));
}
if (debugInfoContainer !== null) {
debugInfoContainer.textContent = JSON.stringify(details, null, 4);
}
return node;
}
createKanjiGlossaryItem(glossary) {
const node = DisplayGenerator._instantiateTemplate(this._kanjiGlossaryItemTemplate);
const container = node.querySelector('.kanji-glossary');
if (container !== null) {
DisplayGenerator._appendMultilineText(container, glossary);
}
return node;
}
createKanjiReading(reading) {
const node = DisplayGenerator._instantiateTemplate(this._kanjiReadingTemplate);
node.textContent = reading;
return node;
}
createKanjiInfoTable(details) {
const node = DisplayGenerator._instantiateTemplate(this._kanjiInfoTableTemplate);
const container = node.querySelector('.kanji-info-table-body');
if (container !== null) {
const count = DisplayGenerator._appendMultiple(container, this.createKanjiInfoTableItem.bind(this), details);
if (count === 0) {
const n = this.createKanjiInfoTableItemEmpty();
container.appendChild(n);
}
}
return node;
}
createKanjiInfoTableItem(details) {
const node = DisplayGenerator._instantiateTemplate(this._kanjiInfoTableItemTemplate);
const nameNode = node.querySelector('.kanji-info-table-item-header');
const valueNode = node.querySelector('.kanji-info-table-item-value');
if (nameNode !== null) {
nameNode.textContent = details.notes || details.name;
}
if (valueNode !== null) {
valueNode.textContent = details.value;
}
return node;
}
createKanjiInfoTableItemEmpty() {
return DisplayGenerator._instantiateTemplate(this._kanjiInfoTableEmptyTemplate);
}
createTag(details) {
const node = DisplayGenerator._instantiateTemplate(this._tagTemplate);
const inner = node.querySelector('.tag-inner');
node.title = details.notes;
inner.textContent = details.name;
node.dataset.category = details.category;
return node;
}
createSearchTag(details) {
const node = DisplayGenerator._instantiateTemplate(this._tagSearchTemplate);
node.textContent = details.query;
node.dataset.query = details.query;
return node;
}
createFrequencyTag(details) {
const node = DisplayGenerator._instantiateTemplate(this._tagFrequencyTemplate);
let n = node.querySelector('.term-frequency-dictionary-name');
if (n !== null) {
n.textContent = details.dictionary;
}
n = node.querySelector('.term-frequency-value');
if (n !== null) {
n.textContent = `${details.frequency}`;
}
node.dataset.dictionary = details.dictionary;
node.dataset.frequency = details.frequency;
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) {
let part = '';
for (const c of text) {
if (DisplayGenerator._isCharacterKanji(c)) {
if (part.length > 0) {
container.appendChild(document.createTextNode(part));
part = '';
}
const link = this.createKanjiLink(c);
container.appendChild(link);
} else {
part += c;
}
}
if (part.length > 0) {
container.appendChild(document.createTextNode(part));
}
}
static _isCharacterKanji(c) {
const code = c.charCodeAt(0);
return (
code >= 0x4e00 && code < 0x9fb0 ||
code >= 0x3400 && code < 0x4dc0
);
}
static _appendMultiple(container, createItem, detailsArray, fallback=[]) {
if (container === null) { return 0; }
const isArray = Array.isArray(detailsArray);
if (!isArray) { detailsArray = fallback; }
container.dataset.multi = `${isArray}`;
container.dataset.count = `${detailsArray.length}`;
for (const details of detailsArray) {
const item = createItem(details);
if (item === null) { continue; }
container.appendChild(item);
}
return detailsArray.length;
}
static _appendFurigana(container, segments, addText) {
for (const {text, furigana} of segments) {
if (furigana) {
const ruby = document.createElement('ruby');
const rt = document.createElement('rt');
addText(ruby, text);
ruby.appendChild(rt);
rt.appendChild(document.createTextNode(furigana));
container.appendChild(ruby);
} else {
addText(container, text);
}
}
}
static _appendMultilineText(container, text) {
const parts = text.split('\n');
container.appendChild(document.createTextNode(parts[0]));
for (let i = 1, ii = parts.length; i < ii; ++i) {
container.appendChild(document.createElement('br'));
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);
}
}