Structured content image size units (#1692)

* Add support for sizeUnits on image content

* Update test data
This commit is contained in:
toasted-nutbread 2021-05-20 19:33:08 -04:00 committed by GitHub
parent d8ef599eae
commit be23acf499
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 32 additions and 14 deletions

View File

@ -1573,6 +1573,7 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
color: inherit; color: inherit;
display: inline-block; display: inline-block;
position: relative; position: relative;
line-height: 1;
} }
.gloss-image-link[href]:hover { .gloss-image-link[href]:hover {
cursor: pointer; cursor: pointer;
@ -1631,6 +1632,7 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
} }
.gloss-image-link-text { .gloss-image-link-text {
display: none; display: none;
line-height: var(--line-height);
} }
.gloss-image-link-text::before { .gloss-image-link-text::before {
content: '['; content: '[';
@ -1643,6 +1645,10 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
white-space: pre-line; white-space: pre-line;
} }
.gloss-image-link[data-size-units=em] .gloss-image-container {
font-size: 1em;
}
.gloss-image-link[data-vertical-align=baseline] { vertical-align: baseline; } .gloss-image-link[data-vertical-align=baseline] { vertical-align: baseline; }
.gloss-image-link[data-vertical-align=sub] { vertical-align: sub; } .gloss-image-link[data-vertical-align=sub] { vertical-align: sub; }
.gloss-image-link[data-vertical-align=super] { vertical-align: super; } .gloss-image-link[data-vertical-align=super] { vertical-align: super; }

View File

@ -52,14 +52,14 @@
"description": "Path to the image file in the archive." "description": "Path to the image file in the archive."
}, },
"width": { "width": {
"type": "integer", "type": "number",
"description": "Preferred width of the image.", "description": "Preferred width of the image.",
"minimum": 1 "minimum": 0
}, },
"height": { "height": {
"type": "integer", "type": "number",
"description": "Preferred width of the image.", "description": "Preferred width of the image.",
"minimum": 1 "minimum": 0
}, },
"title": { "title": {
"type": "string", "type": "string",
@ -84,6 +84,11 @@
"type": "string", "type": "string",
"description": "The vertical alignment of the image.", "description": "The vertical alignment of the image.",
"enum": ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"] "enum": ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"]
},
"sizeUnits": {
"type": "string",
"description": "The units for the width and height.",
"enum": ["px", "em"]
} }
} }
} }

View File

@ -340,19 +340,20 @@ class DisplayGenerator {
} }
_createDefinitionImage(data, dictionary) { _createDefinitionImage(data, dictionary) {
const {path, width, height, preferredWidth, preferredHeight, title, pixelated, collapsed, collapsible, verticalAlign} = data; const {path, width, height, preferredWidth, preferredHeight, title, pixelated, collapsed, collapsible, verticalAlign, sizeUnits} = data;
const usedWidth = ( const hasPreferredWidth = (typeof preferredWidth === 'number');
typeof preferredWidth === 'number' ? const hasPreferredHeight = (typeof preferredHeight === 'number');
preferredWidth :
width
);
const aspectRatio = ( const aspectRatio = (
typeof preferredWidth === 'number' && hasPreferredWidth && hasPreferredHeight ?
typeof preferredHeight === 'number' ?
preferredWidth / preferredHeight : preferredWidth / preferredHeight :
width / height width / height
); );
const usedWidth = (
hasPreferredWidth ?
preferredWidth :
(hasPreferredHeight ? preferredHeight * aspectRatio : width)
);
const node = this._templates.instantiate('gloss-item-image'); const node = this._templates.instantiate('gloss-item-image');
node.dataset.path = path; node.dataset.path = path;
@ -364,6 +365,9 @@ class DisplayGenerator {
if (typeof verticalAlign === 'string') { if (typeof verticalAlign === 'string') {
node.dataset.verticalAlign = verticalAlign; node.dataset.verticalAlign = verticalAlign;
} }
if (typeof sizeUnits === 'string' && (hasPreferredWidth || hasPreferredHeight)) {
node.dataset.sizeUnits = sizeUnits;
}
const imageContainer = node.querySelector('.gloss-image-container'); const imageContainer = node.querySelector('.gloss-image-container');
imageContainer.style.width = `${usedWidth}em`; imageContainer.style.width = `${usedWidth}em`;

View File

@ -342,9 +342,10 @@ class DictionaryImporter {
} }
async _prepareStructuredContentImage(content, context, entry) { async _prepareStructuredContentImage(content, context, entry) {
const {verticalAlign} = content; const {verticalAlign, sizeUnits} = content;
const result = await this._createImageData(content, context, entry, {tag: 'img'}); const result = await this._createImageData(content, context, entry, {tag: 'img'});
if (typeof verticalAlign === 'string') { result.verticalAlign = verticalAlign; } if (typeof verticalAlign === 'string') { result.verticalAlign = verticalAlign; }
if (typeof sizeUnits === 'string') { result.sizeUnits = sizeUnits; }
return result; return result;
} }

View File

@ -28,7 +28,9 @@
"\nmore content 2: ", "\nmore content 2: ",
{"tag": "img", "path": "image.gif", "width": 35, "height": 35, "pixelated": true, "collapsible": false, "collapsed": false, "verticalAlign": "middle"}, {"tag": "img", "path": "image.gif", "width": 35, "height": 35, "pixelated": true, "collapsible": false, "collapsed": false, "verticalAlign": "middle"},
" and ", " and ",
{"tag": "img", "path": "image.gif", "width": 35, "height": 35, "pixelated": true, "collapsible": false, "collapsed": true} {"tag": "img", "path": "image.gif", "width": 35, "height": 35, "pixelated": true, "collapsible": false, "collapsed": true},
" and ",
{"tag": "img", "path": "image.gif", "width": 1, "height": 1, "pixelated": true, "collapsible": false, "collapsed": false, "sizeUnits": "em"}
]}, ]},
{"type": "structured-content", "content": [ {"type": "structured-content", "content": [
"naiyou definition 6: ", "naiyou definition 6: ",