Structured content generation updates (#1760)

* Simplify _createElement, fix misuse of classList

* Don't use templates to generate image content

* Omit templates

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':
                 {