aboutsummaryrefslogtreecommitdiff
path: root/ext/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-06-26 15:49:23 -0400
committerGitHub <noreply@github.com>2021-06-26 15:49:23 -0400
commite5284988e2beda4133caae8a6b1c7e4d16f4328b (patch)
tree237507bacc2944df1745fc91cb5de94c2e481421 /ext/js
parentfcf651c22556a0f273b7127cca44c411fea2e87f (diff)
Structured content generation updates (#1760)
* Simplify _createElement, fix misuse of classList * Don't use templates to generate image content * Omit templates
Diffstat (limited to 'ext/js')
-rw-r--r--ext/js/display/display-generator.js3
-rw-r--r--ext/js/display/structured-content-generator.js43
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':
{