From 7105a94d41d2a1fc74238ad54294ac342ddac70a Mon Sep 17 00:00:00 2001 From: kuuuube Date: Fri, 27 Dec 2024 11:52:31 -0500 Subject: [PATCH 1/6] Add collapsed image link text --- ext/js/display/structured-content-generator.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ext/js/display/structured-content-generator.js b/ext/js/display/structured-content-generator.js index 29a3c2e96..de4b2f199 100644 --- a/ext/js/display/structured-content-generator.js +++ b/ext/js/display/structured-content-generator.js @@ -107,6 +107,10 @@ export class StructuredContentGenerator { 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; node.dataset.imageLoadState = 'not-loaded'; From 40d372321297d4d81264dfc7d5168e14d2a53350 Mon Sep 17 00:00:00 2001 From: kuuuube Date: Fri, 27 Dec 2024 11:56:55 -0500 Subject: [PATCH 2/6] Prevent collapsed image from being partially hidden when hovering over --- ext/css/display.css | 1 - 1 file changed, 1 deletion(-) diff --git a/ext/css/display.css b/ext/css/display.css index c44c3f26b..91a306bce 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -832,7 +832,6 @@ button.action-button:active { .entry { padding: var(--entry-vertical-padding) var(--entry-horizontal-padding); position: relative; - content-visibility: auto; contain-intrinsic-height: auto 500px; } .entry+.entry { From 7c1a454edb66dfd944a06981f8f852123a92922f Mon Sep 17 00:00:00 2001 From: kuuuube Date: Fri, 27 Dec 2024 12:16:52 -0500 Subject: [PATCH 3/6] Allow clicking on image node to open in new tab --- ext/css/structured-content.css | 2 -- ext/js/display/structured-content-generator.js | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/ext/css/structured-content.css b/ext/css/structured-content.css index a2af2280e..020c7362e 100644 --- a/ext/css/structured-content.css +++ b/ext/css/structured-content.css @@ -41,8 +41,6 @@ } .gloss-image-link:hover { color: var(--accent-color-dark); -} -.gloss-image-link[href]:hover { cursor: pointer; } .gloss-image-container-overlay { diff --git a/ext/js/display/structured-content-generator.js b/ext/js/display/structured-content-generator.js index de4b2f199..dfc420329 100644 --- a/ext/js/display/structured-content-generator.js +++ b/ext/js/display/structured-content-generator.js @@ -111,6 +111,21 @@ export class StructuredContentGenerator { linkText.textContent = 'Image'; node.appendChild(linkText); + if (this._contentManager instanceof DisplayContentManager) { + node.addEventListener('click', () => { + /** @type {HTMLCanvasElement | null} */ + const canvasElement = imageContainer.querySelector('.gloss-image'); + if (canvasElement) { + canvasElement.toBlob((blob) => { + if (blob) { + const blobUrl = URL.createObjectURL(blob); + window.open(blobUrl, '_blank')?.focus(); + } + }); + } + }); + } + node.dataset.path = path; node.dataset.dictionary = dictionary; node.dataset.imageLoadState = 'not-loaded'; From 2fed5394555103d4f0f1f3b61f439d59aef4dbea Mon Sep 17 00:00:00 2001 From: kuuuube Date: Fri, 27 Dec 2024 12:27:17 -0500 Subject: [PATCH 4/6] Open original media in new tab instead of canvas --- ext/js/display/display-content-manager.js | 14 ++++++++++++++ ext/js/display/structured-content-generator.js | 11 ++--------- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/ext/js/display/display-content-manager.js b/ext/js/display/display-content-manager.js index 09693f6ff..ef3a146f2 100644 --- a/ext/js/display/display-content-manager.js +++ b/ext/js/display/display-content-manager.js @@ -17,6 +17,7 @@ */ import {EventListenerCollection} from '../core/event-listener-collection.js'; +import {base64ToArrayBuffer} from '../data/array-buffer-util.js'; /** * The content manager which is used when generating HTML display content. @@ -86,6 +87,19 @@ export class DisplayContentManager { this._loadMediaRequests = []; } + /** + * @param {string} path + * @param {string} dictionary + * @param {Window} window + */ + async openMediaInTab(path, dictionary, window) { + const data = await this._display.application.api.getMedia([{path, dictionary}]); + const buffer = base64ToArrayBuffer(data[0].content); + const blob = new Blob([buffer], {type: data[0].mediaType}); + const blobUrl = URL.createObjectURL(blob); + window.open(blobUrl, '_blank')?.focus(); + } + /** * @param {MouseEvent} e */ diff --git a/ext/js/display/structured-content-generator.js b/ext/js/display/structured-content-generator.js index dfc420329..fe926cf30 100644 --- a/ext/js/display/structured-content-generator.js +++ b/ext/js/display/structured-content-generator.js @@ -113,15 +113,8 @@ export class StructuredContentGenerator { if (this._contentManager instanceof DisplayContentManager) { node.addEventListener('click', () => { - /** @type {HTMLCanvasElement | null} */ - const canvasElement = imageContainer.querySelector('.gloss-image'); - if (canvasElement) { - canvasElement.toBlob((blob) => { - if (blob) { - const blobUrl = URL.createObjectURL(blob); - window.open(blobUrl, '_blank')?.focus(); - } - }); + if (this._contentManager instanceof DisplayContentManager) { + void this._contentManager.openMediaInTab(path, dictionary, window); } }); } From cd7ffa070174ba3c3d0ab112b6cadedd7b0256f3 Mon Sep 17 00:00:00 2001 From: kuuuube Date: Fri, 27 Dec 2024 12:36:23 -0500 Subject: [PATCH 5/6] Update tests --- ext/data/structured-content-style.json | 6 ----- test/data/anki-note-builder-test-results.json | 24 +++++++++---------- 2 files changed, 12 insertions(+), 18 deletions(-) diff --git a/ext/data/structured-content-style.json b/ext/data/structured-content-style.json index be30dc496..f3bfcf5a6 100644 --- a/ext/data/structured-content-style.json +++ b/ext/data/structured-content-style.json @@ -24,12 +24,6 @@ ["color", "inherit"] ] }, - { - "selectors": [".gloss-image-link[href]:hover"], - "styles": [ - ["cursor", "pointer"] - ] - }, { "selectors": [".gloss-image-container-overlay"], "styles": [ diff --git a/test/data/anki-note-builder-test-results.json b/test/data/anki-note-builder-test-results.json index 8b1a1d0be..13b6ed33a 100644 --- a/test/data/anki-note-builder-test-results.json +++ b/test/data/anki-note-builder-test-results.json @@ -863,12 +863,12 @@ "frequency-average-occurrence": "0", "furigana": "画像がぞう", "furigana-plain": "画像[がぞう]", - "glossary": "
(n, termsDictAlias)
  • gazou definition 1
", - "glossary-brief": "
  • gazou definition 1
", - "glossary-no-dictionary": "
(n)
  • gazou definition 1
", - "glossary-first": "
(n, termsDictAlias)
  • gazou definition 1
", - "glossary-first-brief": "
  • gazou definition 1
", - "glossary-first-no-dictionary": "
(n)
  • gazou definition 1
", + "glossary": "
(n, termsDictAlias)
", + "glossary-brief": "
", + "glossary-no-dictionary": "
(n)
", + "glossary-first": "
(n, termsDictAlias)
", + "glossary-first-brief": "
", + "glossary-first-no-dictionary": "
(n)
", "part-of-speech": "Noun", "pitch-accents": "", "pitch-accent-graphs": "", @@ -1570,12 +1570,12 @@ "frequency-average-occurrence": "0", "furigana": "画像がぞう", "furigana-plain": "画像[がぞう]", - "glossary": "
(n, termsDictAlias)
  • gazou definition 1
", - "glossary-brief": "
  • gazou definition 1
", - "glossary-no-dictionary": "
(n)
  • gazou definition 1
", - "glossary-first": "
(n, termsDictAlias)
  • gazou definition 1
", - "glossary-first-brief": "
  • gazou definition 1
", - "glossary-first-no-dictionary": "
(n)
  • gazou definition 1
", + "glossary": "
(n, termsDictAlias)
", + "glossary-brief": "
", + "glossary-no-dictionary": "
(n)
", + "glossary-first": "
(n, termsDictAlias)
", + "glossary-first-brief": "
", + "glossary-first-no-dictionary": "
(n)
", "part-of-speech": "Noun", "pitch-accents": "", "pitch-accent-graphs": "", From 112a4294f92e99f97ad2e10e239994ec92d521f5 Mon Sep 17 00:00:00 2001 From: kuuuube Date: Fri, 27 Dec 2024 12:43:27 -0500 Subject: [PATCH 6/6] Make eslint happy --- .eslintrc.json | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintrc.json b/.eslintrc.json index 29a86ef1a..98c1fe5b0 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -562,6 +562,7 @@ "ext/js/core/extension-error.js", "ext/js/core/json.js", "ext/js/data/anki-note-data-creator.js", + "ext/js/data/array-buffer-util.js", "ext/js/dictionary/dictionary-data-util.js", "ext/js/display/display-content-manager.js", "ext/js/display/pronunciation-generator.js",