Skip to content
This repository has been archived by the owner on Feb 25, 2023. It is now read-only.

Add new structured content features: lists and the HTML lang attribute #2129

Merged
merged 4 commits into from
May 14, 2022
Merged

Add new structured content features: lists and the HTML lang attribute #2129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d9955f7
Add support for structured content lists and `list-style-type` style
stephenmk Apr 29, 2022
360f09d
Add support for `lang` attribute in structured content
stephenmk Apr 29, 2022
5d57f58
Add styles for structured content lists
stephenmk May 13, 2022
51f6189
Add override rules for new structured-content list styles
stephenmk May 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions dev/data/structured-content-overrides.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,3 +61,16 @@
display: none;
/* remove-property background-color vertical-align width height margin-left background-color position */
}
.gloss-sc-ol,
.gloss-sc-ul {
/* remove-property padding-left */
}
:root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Group these together for simplicity:

:root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary],
:root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li,
:root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li:not(:first-child)::before {
    /* remove-rule */
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ha, that's actually what I tried first. But the tests do not like that. I think that only works if they are defined that way (as a group) in the ext/css/structured-content.css file. But the rules are all different there, so they can't be combined.

Running test-css-json.js...
Error: Could not find rule with matching selectors
    at generateRules (/home/stephen/Code/yomichan/dev/css-to-json-util.js:139:48)
    at main (/home/stephen/Code/yomichan/test/test-css-json.js:28:42)
    at testMain (/home/stephen/Code/yomichan/dev/util.js:127:15)
    at Object.<anonymous> (/home/stephen/Code/yomichan/test/test-css-json.js:35:5)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Module._load (node:internal/modules/cjs/loader:827:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I thought I handled that differently, but I guess not; my bad! (I should really be more familiar with my own code)

/* remove-rule */
}
:root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li {
/* remove-rule */
}
:root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li:not(:first-child)::before {
/* remove-rule */
}
18 changes: 18 additions & 0 deletions ext/css/structured-content.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,3 +235,21 @@
padding: 0.25em;
vertical-align: top;
}
.gloss-sc-ol,
.gloss-sc-ul {
padding-left: var(--list-padding2);
}
:root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] {
display: inline;
list-style: none;
padding-left: 0;
}
:root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li {
display: inline;
}
:root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li:not(:first-child)::before {
white-space: pre-wrap;
content: var(--compact-list-separator);
display: inline;
color: var(--text-color-light3);
}
22 changes: 21 additions & 1 deletion ext/data/schemas/dictionary-term-bank-v3-schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@
},
"data": {
"$ref": "#/definitions/structuredContentData"
},
"lang": {
"type": "string",
"description": "Defines the language of an element in the format defined by RFC 5646."
}
}
},
Expand Down Expand Up @@ -82,6 +86,10 @@
},
"style": {
"$ref": "#/definitions/structuredContentStyle"
},
"lang": {
"type": "string",
"description": "Defines the language of an element in the format defined by RFC 5646."
}
}
},
Expand All @@ -95,7 +103,7 @@
"properties": {
"tag": {
"type": "string",
"enum": ["span", "div"]
"enum": ["span", "div", "ol", "ul", "li"]
},
"content": {
"$ref": "#/definitions/structuredContent"
Expand All @@ -105,6 +113,10 @@
},
"style": {
"$ref": "#/definitions/structuredContentStyle"
},
"lang": {
"type": "string",
"description": "Defines the language of an element in the format defined by RFC 5646."
}
}
},
Expand Down Expand Up @@ -206,6 +218,10 @@
"type": "string",
"description": "The URL for the link. URLs starting with a ? are treated as internal links to other dictionary content.",
"pattern": "^(?:https?:|\\?)[\\w\\W]*"
},
"lang": {
"type": "string",
"description": "Defines the language of an element in the format defined by RFC 5646."
}
}
}
Expand Down Expand Up @@ -276,6 +292,10 @@
"marginBottom": {
"type": "number",
"default": 0
},
"listStyleType": {
"type": "string",
"default": "disc"
}
}
}
Expand Down
13 changes: 11 additions & 2 deletions ext/js/display/sandbox/structured-content-generator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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':
{
Expand Down Expand Up @@ -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; }
Expand All @@ -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) {
Expand All @@ -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); }

Expand Down
99 changes: 99 additions & 0 deletions test/data/dictionaries/valid-dictionary1/term_bank_1.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,105 @@
"external link"
]
}
]},
{"type": "structured-content", "content": [
{"tag": "ul", "content": [
{"tag": "li", "content": "Unordered list item 1"},
{"tag": "li", "content": "Unordered list item 2"},
{"tag": "li", "content": "Unordered list item 3"}
]}
]},
{"type": "structured-content", "content": [
{"tag": "ol", "content": [
{"tag": "li", "content": "Ordered list item 1"},
{"tag": "li", "content": "Ordered list item 2"},
{"tag": "li", "content": "Ordered list item 3"}
]}
]},
{"type": "structured-content", "content": [
{"tag": "ol", "style": {"listStyleType": "hiragana-iroha"}, "content": [
{"tag": "li", "content": "List item i"},
{"tag": "li", "content": "List item ro"},
{"tag": "li", "content": "List item ha"}
]}
]},
{"type": "structured-content", "content": [
{"tag": "ul", "content": [
{"tag": "li", "style": {"listStyleType": "'⇄'"}, "content": ["【", {"tag": "a", "href": "?query=よみ&wildcards=off", "content": ["Antonym"]}, "】"]},
{"tag": "li", "style": {"listStyleType": "'🔄'"}, "content": ["【", {"tag": "a", "href": "?query=よみ&wildcards=off", "content": ["References and is referenced by"]}, "】"]},
{"tag": "li", "style": {"listStyleType": "'➡'"}, "content": ["【", {"tag": "a", "href": "?query=よみ&wildcards=off", "content": ["References"]}, "】"]},
{"tag": "li", "style": {"listStyleType": "'⬅'"}, "content": ["【", {"tag": "a", "href": "?query=よみ&wildcards=off", "content": ["Referenced by"]}, "】"]}
]}
]},
{"type": "structured-content", "content": [
{"tag": "ol", "content": [
{"tag": "li", "style": {"listStyleType": "'①'"}, "content": "まるいち"},
{"tag": "li", "style": {"listStyleType": "'②'"}, "content": "まるに"},
{"tag": "li", "style": {"listStyleType": "'③'"}, "content": "まるさん"},
{"tag": "li", "style": {"listStyleType": "'④'"}, "content": "まるよん"}
]}
]},
{"type": "structured-content", "content": [
{"tag": "div", "lang": "?????", "style": {"fontSize": "xxx-large"}, "content": "直次茶冷 (invalid lang)"},
{"tag": "div", "lang": "ja-JP", "style": {"fontSize": "xxx-large"}, "content": "直次茶冷 (lang=ja-JP)"},
{"tag": "div", "lang": "zh-CN", "style": {"fontSize": "xxx-large"}, "content": "直次茶冷 (lang=zh-CN)"},
{"tag": "div", "lang": "zh-TW", "style": {"fontSize": "xxx-large"}, "content": "直次茶冷 (lang=zh-TW)"}
]},
{"type": "structured-content", "content": [
{"tag": "ul", "style": {"listStyleType": "japanese-formal"}, "content": [
{"tag": "li", "content": ["【", {"tag": "a", "href": "?query=直次茶冷&wildcards=off", "content": "直次茶冷"}, "】(default)"]},
{"tag": "li", "content": ["【", {"tag": "a", "href": "?query=直次茶冷&wildcards=off", "content": "直次茶冷", "lang": "ja"}, "】(lang=ja)"]},
{"tag": "li", "content": ["【", {"tag": "a", "href": "?query=直次茶冷&wildcards=off", "content": "直次茶冷", "lang": "zh-CN"}, "】(lang=zh-CN)"]},
{"tag": "li", "content": ["【", {"tag": "a", "href": "?query=直次茶冷&wildcards=off", "content": "直次茶冷", "lang": "zh-TW"}, "】(lang=zh-TW)"]}
]}
]},
{"type": "structured-content", "content": [
{"tag": "table", "lang": "", "content": [
{"tag": "thead", "content": [
{"tag": "tr", "content": [
{"tag": "th", "content": "JP"},
{"tag": "th", "content": "SC"},
{"tag": "th", "content": "TC"},
{"tag": "th", "content": "??"}
]}
]},
{"tag": "tbody", "content": [
{"tag": "tr", "content": [
{"tag": "td", "lang": "ja-JP", "content": "直次茶冷"},
{"tag": "td", "lang": "zh-CN", "content": "直次茶冷"},
{"tag": "td", "lang": "zh-TW", "content": "直次茶冷"},
{"tag": "td", "content": "直次茶冷"}
]}
]}
]}
]},
{"type": "structured-content", "content": [
{"tag": "table", "lang": "ja", "content": [
{"tag": "thead", "content": [
{"tag": "tr", "content": [
{"tag": "th", "content": "lang=ja applied to whole table"}
]}
]},
{"tag": "tbody", "content": [
{"tag": "tr", "content": [
{"tag": "td", "content": "直次茶冷"}
]}
]}
]}
]},
{"type": "structured-content", "content": [
{"tag": "table", "lang": "zh-CN", "content": [
{"tag": "thead", "content": [
{"tag": "tr", "content": [
{"tag": "th", "content": "lang=zh-CN applied to whole table"}
]}
]},
{"tag": "tbody", "content": [
{"tag": "tr", "content": [
{"tag": "td", "content": "直次茶冷"}
]}
]}
]}
]}
],
100, "P E1"
Expand Down