Add border styling options for structured content images (#577)

* Add border styling options for structured content images * Replace border style, width, and color properties with shorthand --------- Co-authored-by: stephenmk <stephenmk@users.noreply.github.com>
yomidevs · Jan 27, 2024 · 1c258f7 · 1c258f7
1 parent 3c76b87
commit 1c258f7
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 6 deletions.
diff --git a/ext/data/schemas/dictionary-term-bank-v3-schema.json b/ext/data/schemas/dictionary-term-bank-v3-schema.json
@@ -152,7 +152,7 @@
                                 },
                                 "height": {
                                     "type": "number",
-                                    "description": "Preferred width of the image.",
+                                    "description": "Preferred height of the image.",
                                     "minimum": 0
                                 },
                                 "title": {
@@ -204,6 +204,14 @@
                                     "description": "The vertical alignment of the image.",
                                     "enum": ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"]
                                 },
+                                "border": {
+                                    "type": "string",
+                                    "description": "Shorthand for border width, style, and color."
+                                },
+                                "borderRadius": {
+                                    "type": "string",
+                                    "description": "Roundness of the corners of the image's outer border edge."
+                                },
                                 "sizeUnits": {
                                     "type": "string",
                                     "description": "The units for the width and height.",
@@ -485,7 +493,7 @@
                                         },
                                         "height": {
                                             "type": "integer",
-                                            "description": "Preferred width of the image.",
+                                            "description": "Preferred height of the image.",
                                             "minimum": 1
                                         },
                                         "title": {

diff --git a/ext/js/dictionary/dictionary-importer.js b/ext/js/dictionary/dictionary-importer.js
@@ -486,9 +486,16 @@ export class DictionaryImporter {
      * @param {import('dictionary-database').DatabaseTermEntry} entry
      */
     async _resolveStructuredContentImage(context, target, source, entry) {
-        const {verticalAlign, sizeUnits} = source;
+        const {
+            verticalAlign,
+            border,
+            borderRadius,
+            sizeUnits
+        } = source;
         await this._createImageData(context, target, source, entry);
         if (typeof verticalAlign === 'string') { target.verticalAlign = verticalAlign; }
+        if (typeof border === 'string') { target.border = border; }
+        if (typeof borderRadius === 'string') { target.borderRadius = borderRadius; }
         if (typeof sizeUnits === 'string') { target.sizeUnits = sizeUnits; }
     }
 

diff --git a/ext/js/display/sandbox/structured-content-generator.js b/ext/js/display/sandbox/structured-content-generator.js
@@ -73,6 +73,8 @@ export class StructuredContentGenerator {
             collapsed,
             collapsible,
             verticalAlign,
+            border,
+            borderRadius,
             sizeUnits
         } = data;
 
@@ -130,6 +132,8 @@ export class StructuredContentGenerator {
         }
 
         imageContainer.style.width = `${usedWidth}em`;
+        if (typeof border === 'string') { imageContainer.style.border = border; }
+        if (typeof borderRadius === 'string') { imageContainer.style.borderRadius = borderRadius; }
         if (typeof title === 'string') {
             imageContainer.title = title;
         }

diff --git a/test/data/dictionaries/valid-dictionary1/term_bank_1.json b/test/data/dictionaries/valid-dictionary1/term_bank_1.json
@@ -81,7 +81,7 @@
                 "Image alt text tests.\n𬵪 = Unicode character\n",
                 {"tag": "img", "alt": "𬵪", "path": "aosaba_mono.png", "height": 1.0, "width": 1.0, "background": false, "sizeUnits": "em", "collapsed": false, "collapsible": false, "appearance": "monochrome"},
                 " = monochrome PNG\n",
-                {"tag": "img", "alt": "𬵪", "path": "aosaba_auto.png", "height": 1.0, "width": 1.0, "background": false, "sizeUnits": "em", "collapsed": false, "collapsible": false, "appearance": "auto"},
+                {"tag": "img", "alt": "𬵪", "path": "aosaba_auto.png", "height": 1.0, "width": 1.0, "background": false, "sizeUnits": "em", "collapsed": false, "collapsible": false, "appearance": "auto", "borderRadius": "20%", "border": "solid 1px red"},
                 " = color PNG"
             ]},
             {"type": "structured-content", "content": [

diff --git a/types/ext/dictionary-data.d.ts b/types/ext/dictionary-data.d.ts
@@ -113,6 +113,8 @@ export type TermGlossaryDeinflection = [
 export type TermImage = StructuredContent.ImageElementBase & {
     // Compatibility properties
     verticalAlign?: undefined;
+    border?: undefined;
+    borderRadius?: undefined;
     sizeUnits?: undefined;
 };
 

diff --git a/types/ext/structured-content.d.ts b/types/ext/structured-content.d.ts
@@ -41,6 +41,8 @@ export type ImageAppearance = 'auto' | 'monochrome';
 
 export type Image = DictionaryData.TermImage & {
     verticalAlign: VerticalAlign;
+    border: string;
+    borderRadius: string;
     sizeUnits: SizeUnits;
 };
 
@@ -142,7 +144,7 @@ export type ImageElementBase = {
      */
     width?: number;
     /**
-     * Preferred width of the image.
+     * Preferred height of the image.
      */
     height?: number;
     /**
@@ -151,7 +153,7 @@ export type ImageElementBase = {
      */
     preferredWidth?: number;
     /**
-     * Preferred width of the image.
+     * Preferred height of the image.
      * This is only used in the internal database.
      */
     preferredHeight?: number;
@@ -203,6 +205,14 @@ export type ImageElement = ImageElementBase & {
      * The vertical alignment of the image.
      */
     verticalAlign?: VerticalAlign;
+    /**
+     * Shorthand for border width, style, and color.
+     */
+    border?: string;
+    /**
+     * Roundness of the corners of the image's outer border edge.
+     */
+    borderRadius?: string;
     /**
      * The units for the width and height.
      */