Structured content data (#1930)

* Add support for structured-content data attributes

* Assign dataset properties

* Don't remove data-sc attributes

* Use helper functions

* Update test data

2 files changed, 30 insertions, 17 deletions

diff --git a/ext/js/display/sandbox/structured-content-generator.js b/ext/js/display/sandbox/structured-content-generator.js
index 82bf0421..8aa34bb2 100644
--- a/ext/js/display/sandbox/structured-content-generator.js
+++ b/ext/js/display/sandbox/structured-content-generator.js
@@ -169,6 +169,16 @@ class StructuredContentGenerator {
         return this._document.createDocumentFragment();
     }
 
+    _setElementDataset(element, data) {
+        for (let [key, value] of Object.entries(data)) {
+            if (key.length > 0) {
+                key = `${key[0].toUpperCase()}${key.substring(1)}`;
+            }
+            key = `sc${key}`;
+            element.dataset[key] = value;
+        }
+    }
+
     _setImageData(node, image, imageBackground, url, unloaded) {
         if (url !== null) {
             image.src = url;
@@ -192,6 +202,8 @@ class StructuredContentGenerator {
 
     _createStructuredContentElement(tag, content, dictionary, type, hasChildren, hasStyle) {
         const node = this._createElement(tag, `gloss-sc-${tag}`);
+        const {data} = content;
+        if (typeof data === 'object' && data !== null) { this._setElementDataset(node, data); }
         switch (type) {
             case 'table-cell':
                 {
diff --git a/ext/js/templates/sandbox/anki-template-renderer.js b/ext/js/templates/sandbox/anki-template-renderer.js
index 8a257bcc..10283761 100644
--- a/ext/js/templates/sandbox/anki-template-renderer.js
+++ b/ext/js/templates/sandbox/anki-template-renderer.js
@@ -38,6 +38,7 @@ class AnkiTemplateRenderer {
     constructor() {
         this._structuredContentStyleApplier = new CssStyleApplier('/data/structured-content-style.json');
         this._pronunciationStyleApplier = new CssStyleApplier('/data/pronunciation-style.json');
+        this._structuredContentDatasetKeyIgnorePattern = /^sc([^a-z]|$)/;
         this._japaneseUtil = new JapaneseUtil(null);
         this._templateRenderer = new TemplateRenderer();
         this._ankiNoteDataCreator = new AnkiNoteDataCreator(this._japaneseUtil);
@@ -462,16 +463,24 @@ class AnkiTemplateRenderer {
         return element;
     }
 
-    _getHtml(node, styleApplier) {
+    _getStructuredContentHtml(node) {
+        return this._getHtml(node, this._structuredContentStyleApplier, this._structuredContentDatasetKeyIgnorePattern);
+    }
+
+    _getPronunciationHtml(node) {
+        return this._getHtml(node, this._pronunciationStyleApplier, null);
+    }
+
+    _getHtml(node, styleApplier, datasetKeyIgnorePattern) {
         const container = this._getTemporaryElement();
         container.appendChild(node);
-        this._normalizeHtml(container, styleApplier);
+        this._normalizeHtml(container, styleApplier, datasetKeyIgnorePattern);
         const result = container.innerHTML;
         container.textContent = '';
         return result;
     }
 
-    _normalizeHtml(root, styleApplier) {
+    _normalizeHtml(root, styleApplier, datasetKeyIgnorePattern) {
         const {ELEMENT_NODE, TEXT_NODE} = Node;
         const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
         const elements = [];
@@ -492,6 +501,7 @@ class AnkiTemplateRenderer {
         for (const element of elements) {
             const {dataset} = element;
             for (const key of Object.keys(dataset)) {
+                if (datasetKeyIgnorePattern !== null && datasetKeyIgnorePattern.test(key)) { continue; }
                 delete dataset[key];
             }
         }
@@ -541,13 +551,13 @@ class AnkiTemplateRenderer {
     _formatGlossaryImage(content, dictionary, data) {
         const structuredContentGenerator = this._createStructuredContentGenerator(data);
         const node = structuredContentGenerator.createDefinitionImage(content, dictionary);
-        return this._getHtml(node, this._structuredContentStyleApplier);
+        return this._getStructuredContentHtml(node);
     }
 
     _formatStructuredContent(content, dictionary, data) {
         const structuredContentGenerator = this._createStructuredContentGenerator(data);
         const node = structuredContentGenerator.createStructuredContent(content.content, dictionary);
-        return node !== null ? this._getHtml(node, this._structuredContentStyleApplier) : '';
+        return node !== null ? this._getStructuredContentHtml(node) : '';
     }
 
     _hasMedia(context, ...args) {
@@ -575,20 +585,11 @@ class AnkiTemplateRenderer {
 
         switch (format) {
             case 'text':
-                return this._getHtml(
-                    this._pronunciationGenerator.createPronunciationText(morae, downstepPosition, nasalPositions, devoicePositions),
-                    this._pronunciationStyleApplier
-                );
+                return this._getPronunciationHtml(this._pronunciationGenerator.createPronunciationText(morae, downstepPosition, nasalPositions, devoicePositions));
             case 'graph':
-                return this._getHtml(
-                    this._pronunciationGenerator.createPronunciationGraph(morae, downstepPosition),
-                    this._pronunciationStyleApplier
-                );
+                return this._getPronunciationHtml(this._pronunciationGenerator.createPronunciationGraph(morae, downstepPosition));
             case 'position':
-                return this._getHtml(
-                    this._pronunciationGenerator.createPronunciationDownstepPosition(downstepPosition),
-                    this._pronunciationStyleApplier
-                );
+                return this._getPronunciationHtml(this._pronunciationGenerator.createPronunciationDownstepPosition(downstepPosition));
             default:
                 return '';
         }