introduce captionHTML

midzer · Dec 24, 2022 · b43119e · b43119e
1 parent eb2d1de
commit b43119e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -264,6 +264,7 @@ The following options are available:
 | captionsSelector | "self", "img" | "img" | Set the element where the caption is. Set it to "self" for the `a` tag itself. |
 | captionAttribute | string | "alt" | Get the caption from given attribute. |
 | captionText | function | null | Custom callback which returns the caption text for the current element. The first argument of the callback is the element. If set, `captionsSelector` and `captionAttribute` are ignored. |
+| captionHTML | bool | false | Allow HTML captions. |
 | nav | bool, "auto" | "auto" | Display navigation buttons. "auto" hides buttons on touch-enabled devices. |
 | navText | string | ["inline svg", "inline svg"] | Text or HTML for the navigation buttons. |
 | navLabel | string | ["Previous", "Next"] | ARIA label for screen readers. |

diff --git a/src/js/index.js b/src/js/index.js
@@ -79,6 +79,7 @@ export default function Tobii (userOptions) {
       captionsSelector: 'img',
       captionAttribute: 'alt',
       captionText: null,
+      captionHTML: false,
       nav: 'auto',
       navText: [
         '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',

diff --git a/src/js/types/image.js b/src/js/types/image.js
@@ -32,17 +32,24 @@ class ImageType {
 
     // Create figcaption
     if (this.userSettings.captions) {
+      let captionContent
       if (typeof this.userSettings.captionText === 'function') {
-        FIGCAPTION.textContent = this.userSettings.captionText(el)
+        captionContent = this.userSettings.captionText(el)
       } else if (this.userSettings.captionsSelector === 'self' &&
         el.getAttribute(this.userSettings.captionAttribute)) {
-        FIGCAPTION.textContent = el.getAttribute(this.userSettings.captionAttribute)
+        captionContent = el.getAttribute(this.userSettings.captionAttribute)
       } else if (this.userSettings.captionsSelector === 'img' && THUMBNAIL &&
         THUMBNAIL.getAttribute(this.userSettings.captionAttribute)) {
-        FIGCAPTION.textContent = THUMBNAIL.getAttribute(this.userSettings.captionAttribute)
+        captionContent = THUMBNAIL.getAttribute(this.userSettings.captionAttribute)
       }
 
-      if (FIGCAPTION.textContent) {
+      if (this.userSettings.captionHTML) {
+        FIGCAPTION.innerHTML = captionContent
+      } else {
+        FIGCAPTION.textContent = captionContent
+      }
+
+      if (captionContent) {
         FIGCAPTION.id = `tobii-figcaption-${this.figcaptionId}`
         FIGURE.appendChild(FIGCAPTION)