diff options
| -rw-r--r-- | ext/js/display/display-generator.js | 3 | ||||
| -rw-r--r-- | ext/js/display/structured-content-generator.js | 43 |
2 files changed, 31 insertions, 15 deletions
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js index 74b3fdca..737fa72a 100644 --- a/ext/js/display/display-generator.js +++ b/ext/js/display/display-generator.js @@ -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(); } diff --git a/ext/js/display/structured-content-generator.js b/ext/js/display/structured-content-generator.js index cd4ea091..28f63f54 100644 --- a/ext/js/display/structured-content-generator.js +++ b/ext/js/display/structured-content-generator.js @@ -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': { |