From 8d9ac15aea6a82f42fe4b375c4676e0ebbce008f Mon Sep 17 00:00:00 2001 From: stephenmk Date: Wed, 24 Jan 2024 21:20:20 -0600 Subject: [PATCH 1/2] Add border styling options for structured content images --- .../dictionary-term-bank-v3-schema.json | 20 ++++++++++++++-- ext/js/dictionary/dictionary-importer.js | 13 +++++++++- .../sandbox/structured-content-generator.js | 8 +++++++ .../valid-dictionary1/term_bank_1.json | 2 +- types/ext/dictionary-data.d.ts | 4 ++++ types/ext/structured-content.d.ts | 24 +++++++++++++++++-- 6 files changed, 65 insertions(+), 6 deletions(-) diff --git a/ext/data/schemas/dictionary-term-bank-v3-schema.json b/ext/data/schemas/dictionary-term-bank-v3-schema.json index 066229c304..b044816a8d 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,22 @@ "description": "The vertical alignment of the image.", "enum": ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"] }, + "borderRadius": { + "type": "string", + "description": "Roundness of the corners of the image's outer border edge." + }, + "borderStyle": { + "type": "string", + "description": "Line style for all four sides of the image's border." + }, + "borderWidth": { + "type": "string", + "description": "Width of the image's border." + }, + "borderColor": { + "type": "string", + "description": "Color of the image's border." + }, "sizeUnits": { "type": "string", "description": "The units for the width and height.", @@ -485,7 +501,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 c8f68d78f3..7620dad918 100644 --- a/ext/js/dictionary/dictionary-importer.js +++ b/ext/js/dictionary/dictionary-importer.js @@ -486,9 +486,20 @@ export class DictionaryImporter { * @param {import('dictionary-database').DatabaseTermEntry} entry */ async _resolveStructuredContentImage(context, target, source, entry) { - const {verticalAlign, sizeUnits} = source; + const { + verticalAlign, + borderRadius, + borderStyle, + borderWidth, + borderColor, + sizeUnits + } = source; await this._createImageData(context, target, source, entry); if (typeof verticalAlign === 'string') { target.verticalAlign = verticalAlign; } + if (typeof borderRadius === 'string') { target.borderRadius = borderRadius; } + if (typeof borderStyle === 'string') { target.borderStyle = borderStyle; } + if (typeof borderWidth === 'string') { target.borderWidth = borderWidth; } + if (typeof borderColor === 'string') { target.borderColor = borderColor; } 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 f73d790a5c..c4362c5799 100644 --- a/ext/js/display/sandbox/structured-content-generator.js +++ b/ext/js/display/sandbox/structured-content-generator.js @@ -73,6 +73,10 @@ export class StructuredContentGenerator { collapsed, collapsible, verticalAlign, + borderRadius, + borderStyle, + borderWidth, + borderColor, sizeUnits } = data; @@ -130,6 +134,10 @@ export class StructuredContentGenerator { } imageContainer.style.width = `${usedWidth}em`; + if (typeof borderRadius === 'string') { imageContainer.style.borderRadius = borderRadius; } + if (typeof borderStyle === 'string') { imageContainer.style.borderStyle = borderStyle; } + if (typeof borderWidth === 'string') { imageContainer.style.borderWidth = borderWidth; } + if (typeof borderColor === 'string') { imageContainer.style.borderColor = borderColor; } 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 index 7f2af6ddc9..41207d4960 100644 --- 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%", "borderStyle": "solid", "borderWidth": "1px", "borderColor": "red"}, " = color PNG" ]}, {"type": "structured-content", "content": [ diff --git a/types/ext/dictionary-data.d.ts b/types/ext/dictionary-data.d.ts index 45db55bb4f..445031c6b4 100644 --- a/types/ext/dictionary-data.d.ts +++ b/types/ext/dictionary-data.d.ts @@ -113,6 +113,10 @@ export type TermGlossaryDeinflection = [ export type TermImage = StructuredContent.ImageElementBase & { // Compatibility properties verticalAlign?: undefined; + borderRadius?: undefined; + borderStyle?: undefined; + borderWidth?: undefined; + borderColor?: undefined; sizeUnits?: undefined; }; diff --git a/types/ext/structured-content.d.ts b/types/ext/structured-content.d.ts index 4f613969b9..7f916e45af 100644 --- a/types/ext/structured-content.d.ts +++ b/types/ext/structured-content.d.ts @@ -41,6 +41,10 @@ export type ImageAppearance = 'auto' | 'monochrome'; export type Image = DictionaryData.TermImage & { verticalAlign: VerticalAlign; + borderRadius: string; + borderStyle: string; + borderWidth: string; + borderColor: string; sizeUnits: SizeUnits; }; @@ -142,7 +146,7 @@ export type ImageElementBase = { */ width?: number; /** - * Preferred width of the image. + * Preferred height of the image. */ height?: number; /** @@ -151,7 +155,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 +207,22 @@ export type ImageElement = ImageElementBase & { * The vertical alignment of the image. */ verticalAlign?: VerticalAlign; + /** + * Roundness of the corners of the image's outer border edge. + */ + borderRadius?: string; + /** + * Line style for all four sides of the image's border. + */ + borderStyle?: string; + /** + * Width of the image's border. + */ + borderWidth?: string; + /** + * Color of the image's border. + */ + borderColor?: string; /** * The units for the width and height. */ From d70dcb6207078c9f77e0370a1c8479e7c6a70547 Mon Sep 17 00:00:00 2001 From: stephenmk Date: Sat, 27 Jan 2024 02:21:30 -0600 Subject: [PATCH 2/2] Replace border style, width, and color properties with shorthand --- .../dictionary-term-bank-v3-schema.json | 16 ++++----------- ext/js/dictionary/dictionary-importer.js | 8 ++------ .../sandbox/structured-content-generator.js | 8 ++------ .../valid-dictionary1/term_bank_1.json | 2 +- types/ext/dictionary-data.d.ts | 4 +--- types/ext/structured-content.d.ts | 20 +++++-------------- 6 files changed, 15 insertions(+), 43 deletions(-) diff --git a/ext/data/schemas/dictionary-term-bank-v3-schema.json b/ext/data/schemas/dictionary-term-bank-v3-schema.json index b044816a8d..59efdb7b9b 100644 --- a/ext/data/schemas/dictionary-term-bank-v3-schema.json +++ b/ext/data/schemas/dictionary-term-bank-v3-schema.json @@ -204,21 +204,13 @@ "description": "The vertical alignment of the image.", "enum": ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"] }, - "borderRadius": { - "type": "string", - "description": "Roundness of the corners of the image's outer border edge." - }, - "borderStyle": { + "border": { "type": "string", - "description": "Line style for all four sides of the image's border." + "description": "Shorthand for border width, style, and color." }, - "borderWidth": { - "type": "string", - "description": "Width of the image's border." - }, - "borderColor": { + "borderRadius": { "type": "string", - "description": "Color of the image's border." + "description": "Roundness of the corners of the image's outer border edge." }, "sizeUnits": { "type": "string", diff --git a/ext/js/dictionary/dictionary-importer.js b/ext/js/dictionary/dictionary-importer.js index 7620dad918..0feed8b2ee 100644 --- a/ext/js/dictionary/dictionary-importer.js +++ b/ext/js/dictionary/dictionary-importer.js @@ -488,18 +488,14 @@ export class DictionaryImporter { async _resolveStructuredContentImage(context, target, source, entry) { const { verticalAlign, + border, borderRadius, - borderStyle, - borderWidth, - borderColor, 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 borderStyle === 'string') { target.borderStyle = borderStyle; } - if (typeof borderWidth === 'string') { target.borderWidth = borderWidth; } - if (typeof borderColor === 'string') { target.borderColor = borderColor; } 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 c4362c5799..ee86a7f4cb 100644 --- a/ext/js/display/sandbox/structured-content-generator.js +++ b/ext/js/display/sandbox/structured-content-generator.js @@ -73,10 +73,8 @@ export class StructuredContentGenerator { collapsed, collapsible, verticalAlign, + border, borderRadius, - borderStyle, - borderWidth, - borderColor, sizeUnits } = data; @@ -134,10 +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 borderStyle === 'string') { imageContainer.style.borderStyle = borderStyle; } - if (typeof borderWidth === 'string') { imageContainer.style.borderWidth = borderWidth; } - if (typeof borderColor === 'string') { imageContainer.style.borderColor = borderColor; } 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 index 41207d4960..9472bf5c24 100644 --- 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", "borderRadius": "20%", "borderStyle": "solid", "borderWidth": "1px", "borderColor": "red"}, + {"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 index 445031c6b4..434f5a271e 100644 --- a/types/ext/dictionary-data.d.ts +++ b/types/ext/dictionary-data.d.ts @@ -113,10 +113,8 @@ export type TermGlossaryDeinflection = [ export type TermImage = StructuredContent.ImageElementBase & { // Compatibility properties verticalAlign?: undefined; + border?: undefined; borderRadius?: undefined; - borderStyle?: undefined; - borderWidth?: undefined; - borderColor?: undefined; sizeUnits?: undefined; }; diff --git a/types/ext/structured-content.d.ts b/types/ext/structured-content.d.ts index 7f916e45af..e40a673074 100644 --- a/types/ext/structured-content.d.ts +++ b/types/ext/structured-content.d.ts @@ -41,10 +41,8 @@ export type ImageAppearance = 'auto' | 'monochrome'; export type Image = DictionaryData.TermImage & { verticalAlign: VerticalAlign; + border: string; borderRadius: string; - borderStyle: string; - borderWidth: string; - borderColor: string; sizeUnits: SizeUnits; }; @@ -208,21 +206,13 @@ export type ImageElement = ImageElementBase & { */ verticalAlign?: VerticalAlign; /** - * Roundness of the corners of the image's outer border edge. - */ - borderRadius?: string; - /** - * Line style for all four sides of the image's border. + * Shorthand for border width, style, and color. */ - borderStyle?: string; + border?: string; /** - * Width of the image's border. - */ - borderWidth?: string; - /** - * Color of the image's border. + * Roundness of the corners of the image's outer border edge. */ - borderColor?: string; + borderRadius?: string; /** * The units for the width and height. */