From 6a74746113c724e750620d10b58ad6bac94060c9 Mon Sep 17 00:00:00 2001
From: Stephen Kraus <8003332+stephenmk@users.noreply.github.com>
Date: Sat, 14 May 2022 08:59:38 -0500
Subject: Add new structured content features: lists and the HTML `lang`
attribute (#2129)
* Add support for structured content lists and `list-style-type` style
A full list of supported style types is documented here:
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
There's nothing in this code preventing a term bank from assigning,
for example, a `list-style-type` style to a `div` element, but it
doesn't seem like browsers will complain about things like that.
* Add support for `lang` attribute in structured content
Support added for the following node types:
"ruby", "rt", "rp", "table", "thead", "tbody", "tfoot", "tr", "td",
"th", "span", "div", "ol", "ul", "li", "a"
I couldn't get it to work for the alt-hover text on "img" tags.
Tests are included in the file
"test/data/dictionaries/valid-dictionary/term_bank_1.json"
* Add styles for structured content lists
* Add override rules for new structured-content list styles
see: https://github.com/FooSoft/yomichan/pull/2129
Co-authored-by: stephenmk <stephenmk@users.noreply.github.com>
---
ext/js/display/sandbox/structured-content-generator.js | 13 +++++++++++--
1 file changed, 11 insertions(+), 2 deletions(-)
(limited to 'ext/js/display')
diff --git a/ext/js/display/sandbox/structured-content-generator.js b/ext/js/display/sandbox/structured-content-generator.js
index eb847d07..6102cfdd 100644
--- a/ext/js/display/sandbox/structured-content-generator.js
+++ b/ext/js/display/sandbox/structured-content-generator.js
@@ -56,6 +56,9 @@ class StructuredContentGenerator {
return this._createStructuredContentElement(tag, content, dictionary, 'table-cell', true, true);
case 'div':
case 'span':
+ case 'ol':
+ case 'ul':
+ case 'li':
return this._createStructuredContentElement(tag, content, dictionary, 'simple', true, true);
case 'img':
return this.createDefinitionImage(content, dictionary);
@@ -204,8 +207,9 @@ class StructuredContentGenerator {
_createStructuredContentElement(tag, content, dictionary, type, hasChildren, hasStyle) {
const node = this._createElement(tag, `gloss-sc-${tag}`);
- const {data} = content;
+ const {data, lang} = content;
if (typeof data === 'object' && data !== null) { this._setElementDataset(node, data); }
+ if (typeof lang === 'string') { node.lang = lang; }
switch (type) {
case 'table-cell':
{
@@ -239,7 +243,8 @@ class StructuredContentGenerator {
marginTop,
marginLeft,
marginRight,
- marginBottom
+ marginBottom,
+ listStyleType
} = contentStyle;
if (typeof fontStyle === 'string') { style.fontStyle = fontStyle; }
if (typeof fontWeight === 'string') { style.fontWeight = fontWeight; }
@@ -254,6 +259,7 @@ class StructuredContentGenerator {
if (typeof marginLeft === 'number') { style.marginLeft = `${marginLeft}em`; }
if (typeof marginRight === 'number') { style.marginRight = `${marginRight}em`; }
if (typeof marginBottom === 'number') { style.marginBottom = `${marginBottom}em`; }
+ if (typeof listStyleType === 'string') { style.listStyleType = listStyleType; }
}
_createLinkElement(content, dictionary) {
@@ -269,6 +275,9 @@ class StructuredContentGenerator {
const text = this._createElement('span', 'gloss-link-text');
node.appendChild(text);
+ const {lang} = content;
+ if (typeof lang === 'string') { node.lang = lang; }
+
const child = this.createStructuredContent(content.content, dictionary);
if (child !== null) { text.appendChild(child); }
--
cgit v1.2.3