Add support for definitions with structured content (#1689)

* Add structured content to schema

* Add support for generating custom content

* Update importer

* Update test data

* Add verticalAlign property

1 files changed, 50 insertions, 1 deletions

diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 299d730b..2131d805 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -295,6 +295,8 @@ class DisplayGenerator {
             switch (entry.type) {
                 case 'image':
                     return this._createTermDefinitionEntryImage(entry, dictionary);
+                case 'structured-content':
+                    return this._createTermDefinitionEntryStructuredContent(entry.content, dictionary);
             }
         }
 
@@ -327,8 +329,18 @@ class DisplayGenerator {
         return node;
     }
 
+    _createTermDefinitionEntryStructuredContent(content, dictionary) {
+        const node = this._templates.instantiate('gloss-item');
+        const child = this._createStructuredContent(content, dictionary);
+        if (child !== null) {
+            const contentContainer = node.querySelector('.gloss-content');
+            contentContainer.appendChild(child);
+        }
+        return node;
+    }
+
     _createDefinitionImage(data, dictionary) {
-        const {path, width, height, preferredWidth, preferredHeight, title, pixelated, collapsed, collapsible} = data;
+        const {path, width, height, preferredWidth, preferredHeight, title, pixelated, collapsed, collapsible, verticalAlign} = data;
 
         const usedWidth = (
             typeof preferredWidth === 'number' ?
@@ -349,6 +361,9 @@ class DisplayGenerator {
         node.dataset.hasAspectRatio = 'true';
         node.dataset.collapsed = typeof collapsed === 'boolean' ? `${collapsed}` : 'false';
         node.dataset.collapsible = typeof collapsible === 'boolean' ? `${collapsible}` : 'true';
+        if (typeof verticalAlign === 'string') {
+            node.dataset.verticalAlign = verticalAlign;
+        }
 
         const imageContainer = node.querySelector('.gloss-image-container');
         imageContainer.style.width = `${usedWidth}em`;
@@ -386,6 +401,40 @@ class DisplayGenerator {
         }
     }
 
+    _createStructuredContent(content, dictionary) {
+        if (typeof content === 'string') {
+            return document.createTextNode(content);
+        }
+        if (!(typeof content === 'object' && content !== null)) {
+            return null;
+        }
+        if (Array.isArray(content)) {
+            const fragment = document.createDocumentFragment();
+            for (const item of content) {
+                const child = this._createStructuredContent(item, dictionary);
+                if (child !== null) { fragment.appendChild(child); }
+            }
+            return fragment;
+        }
+        const {tag} = content;
+        switch (tag) {
+            case 'ruby':
+            case 'rt':
+            case 'rp':
+            {
+                const node = document.createElement(tag);
+                const child = this._createStructuredContent(content.content, dictionary);
+                if (child !== null) {
+                    node.appendChild(child);
+                }
+                return node;
+            }
+            case 'img':
+                return this._createDefinitionImage(content, dictionary);
+        }
+        return null;
+    }
+
     _createTermDisambiguation(disambiguation) {
         const node = this._templates.instantiate('definition-disambiguation');
         node.dataset.term = disambiguation;