From 1c258f7207faad0c1489fb24fb31694e32064914 Mon Sep 17 00:00:00 2001
From: Stephen Kraus <8003332+stephenmk@users.noreply.github.com>
Date: Sat, 27 Jan 2024 03:12:29 -0600
Subject: 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>
---
ext/data/schemas/dictionary-term-bank-v3-schema.json | 12 ++++++++++--
ext/js/dictionary/dictionary-importer.js | 9 ++++++++-
ext/js/display/sandbox/structured-content-generator.js | 4 ++++
3 files changed, 22 insertions(+), 3 deletions(-)
(limited to 'ext')
diff --git a/ext/data/schemas/dictionary-term-bank-v3-schema.json b/ext/data/schemas/dictionary-term-bank-v3-schema.json
index bcb1d5ed..f85f893b 100644
--- 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
index c8f68d78..0feed8b2 100644
--- 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
index f73d790a..ee86a7f4 100644
--- 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;
}
--
cgit v1.2.3