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._mediaLoader = mediaLoader;
this._hotkeyHelpController = hotkeyHelpController; this._hotkeyHelpController = hotkeyHelpController;
this._templates = null; this._templates = null;
this._structuredContentGenerator = null; this._structuredContentGenerator = new StructuredContentGenerator(this._mediaLoader, document);
this._termPitchAccentStaticTemplateIsSetup = false; this._termPitchAccentStaticTemplateIsSetup = false;
} }
async prepare() { async prepare() {
const html = await yomichan.api.getDisplayTemplatesHtml(); const html = await yomichan.api.getDisplayTemplatesHtml();
this._templates = new HtmlTemplateCollection(html); this._templates = new HtmlTemplateCollection(html);
this._structuredContentGenerator = new StructuredContentGenerator(this._templates, this._mediaLoader, document);
this.updateHotkeys(); this.updateHotkeys();
} }

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

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