alex/yomichan
1
Fork 0
Code Releases Activity

Structured content generation updates (#1760)

Browse Source 
* Simplify _createElement, fix misuse of classList

* Don't use templates to generate image content

* Omit templates
This commit is contained in:
toasted-nutbread 2021-06-26 15:49:23 -04:00 committed by GitHub
parent fcf651c225
commit e5284988e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ext/js/display/display-generator.js
View File

@ -27,14 +27,13 @@ class DisplayGenerator {
this._mediaLoader = mediaLoader;
this._hotkeyHelpController = hotkeyHelpController;
this._templates = null;
this._structuredContentGenerator = null;
this._structuredContentGenerator = new StructuredContentGenerator(this._mediaLoader, document);
this._termPitchAccentStaticTemplateIsSetup = false;
}
async prepare() {
const html = await yomichan.api.getDisplayTemplatesHtml();
this._templates = new HtmlTemplateCollection(html);
this._structuredContentGenerator = new StructuredContentGenerator(this._templates, this._mediaLoader, document);
this.updateHotkeys();
}

43
ext/js/display/structured-content-generator.js
View File

@ -16,8 +16,7 @@
*/
class StructuredContentGenerator {
constructor(templates, mediaLoader, document) {
this._templates = templates;
constructor(mediaLoader, document) {
this._mediaLoader = mediaLoader;
this._document = document;
}
@ -95,11 +94,29 @@ class StructuredContentGenerator {
(hasPreferredHeight ? preferredHeight * aspectRatio : width)
);
const node = this._templates.instantiate('gloss-item-image');
const imageContainer = node.querySelector('.gloss-image-container');
const aspectRatioSizer = node.querySelector('.gloss-image-aspect-ratio-sizer');
const image = node.querySelector('.gloss-image');
const imageBackground = node.querySelector('.gloss-image-background');
const node = this._createElement('a', 'gloss-image-link');
node.target = '_blank';
node.rel = 'noreferrer noopener';
const imageContainer = this._createElement('span', 'gloss-image-container');
node.appendChild(imageContainer);
const aspectRatioSizer = this._createElement('span', 'gloss-image-aspect-ratio-sizer');
imageContainer.appendChild(aspectRatioSizer);
const imageBackground = this._createElement('span', 'gloss-image-background icon');
imageContainer.appendChild(imageBackground);
const image = this._createElement('img', 'gloss-image');
image.alt = '';
imageContainer.appendChild(image);
const overlay = this._createElement('span', 'gloss-image-container-overlay');
imageContainer.appendChild(overlay);
const linkText = this._createElement('span', 'gloss-image-link-text');
linkText.textContent = 'Image';
node.appendChild(linkText);
node.dataset.path = path;
node.dataset.dictionary = dictionary;
@ -138,8 +155,10 @@ class StructuredContentGenerator {
// Private
_createElement(tagName) {
return this._document.createElement(tagName);
_createElement(tagName, className) {
const node = this._document.createElement(tagName);
node.className = className;
return node;
}
_createTextNode(data) {
@ -165,16 +184,14 @@ class StructuredContentGenerator {
}
_createStructuredContentTableElement(tag, content, dictionary) {
const container = this._createElement('div');
container.classList = 'gloss-sc-table-container';
const container = this._createElement('div', 'gloss-sc-table-container');
const table = this._createStructuredContentElement(tag, content, dictionary, 'table', true, false);
container.appendChild(table);
return container;
}
_createStructuredContentElement(tag, content, dictionary, type, hasChildren, hasStyle) {
const node = this._createElement(tag);
node.className = `gloss-sc-${tag}`;
const node = this._createElement(tag, `gloss-sc-${tag}`);
switch (type) {
case 'table-cell':
{