alex/yomichan
1
Fork 0
Code Releases Activity

More terminology updates (#1600)

Browse Source 
* Update terminology

* Update display

* Rename expression-list to headword-list

* Rename expression-current-indicator

* Rename expression classes

* Update dictionary entry container

* Rename glossary => gloss

* Rename heading

* Rename gloss classes to gloss-content
This commit is contained in:
toasted-nutbread 2021-04-08 19:59:55 -04:00 committed by GitHub
parent e444141511
commit c73ee13086
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 210 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

296
ext/css/display.css
View File

@ -25,7 +25,7 @@
--disambiguation-separator: ', '; --disambiguation-separator: ', ';
--disambiguation-reading-separator: ':'; --disambiguation-reading-separator: ':';
--expression-separator: '\3001'; --headword-separator: '\3001';
--inflection-separator: '\00AB'; --inflection-separator: '\00AB';
@ -37,13 +37,13 @@
--h2-font-size-no-units: 1.25; --h2-font-size-no-units: 1.25;
--h2-font-size: calc(1em * var(--h2-font-size-no-units)); --h2-font-size: calc(1em * var(--h2-font-size-no-units));
--expression-font-size-no-units: 2; --headword-font-size-no-units: 2;
--expression-font-size: calc(1em * var(--expression-font-size-no-units)); --headword-font-size: calc(1em * var(--headword-font-size-no-units));
--expression-reading-font-size-no-units: 0.75; --headword-reading-font-size-no-units: 0.75;
--expression-reading-font-size: calc(var(--expression-reading-font-size-no-units) * var(--expression-font-size)); --headword-reading-font-size: calc(var(--headword-reading-font-size-no-units) * var(--headword-font-size));
--expression-reading-space: 0.5em; --headword-reading-space: 0.5em;
--expression-list-end-space: 0.5em; --headword-list-end-space: 0.5em;
--expression-thin-border-size: calc(1em / (var(--expression-font-size-no-units) * var(--font-size-no-units))); --headword-thin-border-size: calc(1em / (var(--headword-font-size-no-units) * var(--font-size-no-units)));
--line-height-no-units: 20; --line-height-no-units: 20;
--line-height: calc(var(--line-height-no-units) / var(--font-size-no-units)); --line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));
@ -106,27 +106,27 @@
/* Colors */ /* Colors */
--background-color: #ffffff; --background-color: #ffffff;
--glossary-image-background-color: #eeeeee; --gloss-image-background-color: #eeeeee;
--link-color: var(--accent-color); --link-color: var(--accent-color);
--text-color: #000000; --text-color: #000000;
--reason-text-color: var(--text-color-light3); --reason-text-color: var(--text-color-light3);
--expression-text-color: var(--text-color); --headword-text-color: var(--text-color);
--expression-text-color-popular: var(--accent-color); --headword-text-color-popular: var(--accent-color);
--expression-text-color-rare: var(--text-color-light4); --headword-text-color-rare: var(--text-color-light4);
--expression-furigana-text-color: var(--expression-text-color); --headword-furigana-text-color: var(--headword-text-color);
--expression-furigana-text-color-popular: var(--expression-text-color-popular); --headword-furigana-text-color-popular: var(--headword-text-color-popular);
--expression-furigana-text-color-rare: var(--expression-text-color-rare); --headword-furigana-text-color-rare: var(--headword-text-color-rare);
--expression-reading-text-color: var(--expression-furigana-text-color); --headword-reading-text-color: var(--headword-furigana-text-color);
--expression-reading-text-color-popular: var(--expression-furigana-text-color-popular); --headword-reading-text-color-popular: var(--headword-furigana-text-color-popular);
--expression-reading-text-color-rare: var(--expression-furigana-text-color-rare); --headword-reading-text-color-rare: var(--headword-furigana-text-color-rare);
--expression-kanji-text-color: var(--expression-text-color); --headword-kanji-text-color: var(--headword-text-color);
--expression-kanji-text-color-popular: var(--expression-text-color-popular); --headword-kanji-text-color-popular: var(--headword-text-color-popular);
--expression-kanji-text-color-rare: var(--expression-text-color-rare); --headword-kanji-text-color-rare: var(--headword-text-color-rare);
--expression-kanji-border-color: var(--dark-border-color); --headword-kanji-border-color: var(--dark-border-color);
--expression-kanji-border-color-popular: var(--expression-kanji-border-color); --headword-kanji-border-color-popular: var(--headword-kanji-border-color);
--expression-kanji-border-color-rare: var(--expression-kanji-border-color); --headword-kanji-border-color-rare: var(--headword-kanji-border-color);
--light-border-color: #eeeeee; --light-border-color: #eeeeee;
--medium-border-color: #dddddd; --medium-border-color: #dddddd;
@ -181,22 +181,22 @@
:root[data-theme=dark] { :root[data-theme=dark] {
/* Colors */ /* Colors */
--background-color: #1e1e1e; --background-color: #1e1e1e;
--glossary-image-background-color: #2f2f2f; --gloss-image-background-color: #2f2f2f;
--link-color: var(--accent-color); --link-color: var(--accent-color);
--text-color: #d4d4d4; --text-color: #d4d4d4;
--reason-text-color: var(--text-color-light3); --reason-text-color: var(--text-color-light3);
--expression-text-color: var(--text-color); --headword-text-color: var(--text-color);
--expression-text-color-popular: var(--accent-color); --headword-text-color-popular: var(--accent-color);
--expression-text-color-rare: var(--text-color-light4); --headword-text-color-rare: var(--text-color-light4);
--expression-furigana-text-color: var(--expression-text-color); --headword-furigana-text-color: var(--headword-text-color);
--expression-furigana-text-color-popular: var(--expression-text-color-popular); --headword-furigana-text-color-popular: var(--headword-text-color-popular);
--expression-furigana-text-color-rare: var(--expression-text-color-rare); --headword-furigana-text-color-rare: var(--headword-text-color-rare);
--expression-reading-text-color: var(--expression-furigana-text-color); --headword-reading-text-color: var(--headword-furigana-text-color);
--expression-reading-text-color-popular: var(--expression-furigana-text-color-popular); --headword-reading-text-color-popular: var(--headword-furigana-text-color-popular);
--expression-reading-text-color-rare: var(--expression-furigana-text-color-rare); --headword-reading-text-color-rare: var(--headword-furigana-text-color-rare);
--expression-kanji-border-color: var(--dark-border-color); --headword-kanji-border-color: var(--dark-border-color);
--light-border-color: #2f2f2f; --light-border-color: #2f2f2f;
--medium-border-color: #3f3f3f; --medium-border-color: #3f3f3f;
@ -589,7 +589,7 @@ button.sidebar-button.sidebar-button-highlight {
padding-left: var(--entry-horizontal-padding); padding-left: var(--entry-horizontal-padding);
padding-right: var(--entry-horizontal-padding); padding-right: var(--entry-horizontal-padding);
padding-bottom: 0.25em; padding-bottom: 0.25em;
border-bottom: var(--expression-thin-border-size) solid var(--light-border-color); border-bottom: var(--headword-thin-border-size) solid var(--light-border-color);
} }
#query-parser-content { #query-parser-content {
margin-top: 0.5em; margin-top: 0.5em;
@ -839,105 +839,105 @@ button.action-button[data-icon=source-term]::before {
} }
/* Expressions */ /* Headwords */
.expression-list { .headword-list {
display: inline; display: inline;
margin-right: var(--expression-list-end-space); margin-right: var(--headword-list-end-space);
} }
.expression { .headword {
--expression-current-text-color: var(--expression-text-color); --headword-current-text-color: var(--headword-text-color);
--expression-current-reading-text-color: var(--expression-reading-text-color); --headword-current-reading-text-color: var(--headword-reading-text-color);
--expression-current-furigana-text-color: var(--expression-furigana-text-color); --headword-current-furigana-text-color: var(--headword-furigana-text-color);
--expression-current-kanji-text-color: var(--expression-kanji-text-color); --headword-current-kanji-text-color: var(--headword-kanji-text-color);
--expression-current-kanji-border-color: var(--expression-kanji-border-color); --headword-current-kanji-border-color: var(--headword-kanji-border-color);
display: inline-block; display: inline-block;
} }
:root[data-result-output-mode=merge] .expression[data-frequency=popular] { :root[data-result-output-mode=merge] .headword[data-frequency=popular] {
--expression-current-text-color: var(--expression-text-color-popular); --headword-current-text-color: var(--headword-text-color-popular);
--expression-current-reading-text-color: var(--expression-reading-text-color-popular); --headword-current-reading-text-color: var(--headword-reading-text-color-popular);
--expression-current-furigana-text-color: var(--expression-furigana-text-color-popular); --headword-current-furigana-text-color: var(--headword-furigana-text-color-popular);
--expression-current-kanji-text-color: var(--expression-kanji-text-color-popular); --headword-current-kanji-text-color: var(--headword-kanji-text-color-popular);
--expression-current-kanji-border-color: var(--expression-kanji-border-color-popular); --headword-current-kanji-border-color: var(--headword-kanji-border-color-popular);
} }
:root[data-result-output-mode=merge] .expression[data-frequency=rare] { :root[data-result-output-mode=merge] .headword[data-frequency=rare] {
--expression-current-text-color: var(--expression-text-color-rare); --headword-current-text-color: var(--headword-text-color-rare);
--expression-current-reading-text-color: var(--expression-reading-text-color-rare); --headword-current-reading-text-color: var(--headword-reading-text-color-rare);
--expression-current-furigana-text-color: var(--expression-furigana-text-color-rare); --headword-current-furigana-text-color: var(--headword-furigana-text-color-rare);
--expression-current-kanji-text-color: var(--expression-kanji-text-color-rare); --headword-current-kanji-text-color: var(--headword-kanji-text-color-rare);
--expression-current-kanji-border-color: var(--expression-kanji-border-color-rare); --headword-current-kanji-border-color: var(--headword-kanji-border-color-rare);
} }
.expression-details { .headword-details {
display: inline; display: inline;
} }
.expression-tag-list { .headword-tag-list {
display: none; display: none;
} }
.expression-list-details { .headword-list-details {
display: inline; display: inline;
} }
.expression-list-tag-list { .headword-list-tag-list {
display: inline; display: inline;
} }
.expression-text-container { .headword-text-container {
display: inline-block; display: inline-block;
margin-left: calc(-1 * var(--expression-reading-space)); margin-left: calc(-1 * var(--headword-reading-space));
} }
.expression-text-outer { .headword-term-outer {
display: inline-block; display: inline-block;
position: relative; position: relative;
margin-left: var(--expression-reading-space); margin-left: var(--headword-reading-space);
} }
.expression-reading-outer { .headword-reading-outer {
display: none; display: none;
position: relative; position: relative;
margin-left: var(--expression-reading-space); margin-left: var(--headword-reading-space);
} }
.expression-text { .headword-term {
color: var(--expression-current-text-color); color: var(--headword-current-text-color);
font-size: var(--expression-font-size); font-size: var(--headword-font-size);
} }
.expression-reading { .headword-reading {
color: var(--expression-current-reading-text-color); color: var(--headword-current-reading-text-color);
font-size: var(--expression-reading-font-size); font-size: var(--headword-reading-font-size);
} }
.expression-list>.expression:not(:last-of-type)>.expression-text-container>.expression-text-outer::after { .headword-list>.headword:not(:last-of-type)>.headword-text-container>.headword-term-outer::after {
content: var(--expression-separator); content: var(--headword-separator);
font-size: var(--expression-font-size); font-size: var(--headword-font-size);
} }
.expression-list>.expression:not(:last-of-type)>.expression-text-container>.expression-reading-outer::after { .headword-list>.headword:not(:last-of-type)>.headword-text-container>.headword-reading-outer::after {
content: var(--expression-separator); content: var(--headword-separator);
font-size: var(--expression-reading-font-size); font-size: var(--headword-reading-font-size);
} }
.expression-text>ruby>rt { .headword-term>ruby>rt {
color: var(--expression-current-furigana-text-color); color: var(--headword-current-furigana-text-color);
} }
.expression-kanji-link { .headword-kanji-link {
border-bottom: var(--expression-thin-border-size) dashed var(--expression-current-kanji-border-color); border-bottom: var(--headword-thin-border-size) dashed var(--headword-current-kanji-border-color);
color: var(--expression-current-kanji-text-color); color: var(--headword-current-kanji-text-color);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
:root[data-result-output-mode=merge] .expression-list-details { :root[data-result-output-mode=merge] .headword-list-details {
display: block; display: block;
} }
:root[data-term-display-mode=ruby-and-reading] .expression-text-outer::after, :root[data-term-display-mode=ruby-and-reading] .headword-term-outer::after,
:root[data-term-display-mode=term-and-reading] .expression-text-outer::after { :root[data-term-display-mode=term-and-reading] .headword-term-outer::after {
display: none; display: none;
} }
:root[data-term-display-mode=ruby-and-reading] .expression-reading-outer, :root[data-term-display-mode=ruby-and-reading] .headword-reading-outer,
:root[data-term-display-mode=term-and-reading] .expression-reading-outer { :root[data-term-display-mode=term-and-reading] .headword-reading-outer {
display: inline-block; display: inline-block;
} }
:root[data-term-display-mode=ruby-and-reading] .expression[data-reading-is-same=true] .expression-text-outer::after, :root[data-term-display-mode=ruby-and-reading] .headword[data-reading-is-same=true] .headword-term-outer::after,
:root[data-term-display-mode=term-and-reading] .expression[data-reading-is-same=true] .expression-text-outer::after { :root[data-term-display-mode=term-and-reading] .headword[data-reading-is-same=true] .headword-term-outer::after {
display: inline-block; display: inline-block;
} }
:root[data-term-display-mode=ruby-and-reading] .expression[data-reading-is-same=true] .expression-reading-outer, :root[data-term-display-mode=ruby-and-reading] .headword[data-reading-is-same=true] .headword-reading-outer,
:root[data-term-display-mode=term-and-reading] .expression[data-reading-is-same=true] .expression-reading-outer { :root[data-term-display-mode=term-and-reading] .headword[data-reading-is-same=true] .headword-reading-outer {
display: none; display: none;
} }
:root[data-term-display-mode=term-and-reading] .expression-text>ruby>rt { :root[data-term-display-mode=term-and-reading] .headword-term>ruby>rt {
display: none; display: none;
} }
@ -1000,7 +1000,7 @@ button.action-button[data-icon=source-term]::before {
/* Triangle entry indicator */ /* Triangle entry indicator */
.expression-current-indicator { .headword-current-indicator {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
left: calc(-1 * var(--main-content-horizontal-padding)); left: calc(-1 * var(--main-content-horizontal-padding));
@ -1012,17 +1012,17 @@ button.action-button[data-icon=source-term]::before {
opacity var(--entry-current-indicator-transition-duration) linear, opacity var(--entry-current-indicator-transition-duration) linear,
visibility 0s linear var(--entry-current-indicator-transition-duration); visibility 0s linear var(--entry-current-indicator-transition-duration);
} }
.expression-text .expression-current-indicator { .headword-term .headword-current-indicator {
font-size: calc(1em / var(--expression-font-size-no-units)); font-size: calc(1em / var(--headword-font-size-no-units));
} }
.entry.entry-current .expression-current-indicator { .entry.entry-current .headword-current-indicator {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transition: transition:
opacity var(--entry-current-indicator-transition-duration) linear, opacity var(--entry-current-indicator-transition-duration) linear,
visibility 0s linear 0s; visibility 0s linear 0s;
} }
.expression-current-indicator::after { .headword-current-indicator::after {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
@ -1042,8 +1042,8 @@ button.action-button[data-icon=source-term]::before {
-webkit-mask-size: contain; -webkit-mask-size: contain;
-webkit-mask-image: url(/images/material-right-arrow.svg); -webkit-mask-image: url(/images/material-right-arrow.svg);
} }
.expression:not(:first-of-type) .expression-current-indicator, headword-list:not(:first-of-type) .headword-current-indicator,
:root:not([data-popup-current-indicator-mode=triangle]) .expression-current-indicator { :root:not([data-popup-current-indicator-mode=triangle]) .headword-current-indicator {
display: none; display: none;
transition: none; transition: none;
} }
@ -1072,7 +1072,7 @@ button.action-button[data-icon=source-term]::before {
/* Merged term styles */ /* Merged term styles */
:root[data-result-output-mode=merge] .expression-list .expression-details { :root[data-result-output-mode=merge] .headword-list .headword-details {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 0; width: 0;
@ -1080,28 +1080,28 @@ button.action-button[data-icon=source-term]::before {
visibility: hidden; visibility: hidden;
z-index: 1; z-index: 1;
} }
:root[data-result-output-mode=merge] .expression-list>.expression:not(:last-of-type) .expression-details { :root[data-result-output-mode=merge] .headword-list>.headword:not(:last-of-type) .headword-details {
left: calc(-1 * var(--expression-font-size)); left: calc(-1 * var(--headword-font-size));
} }
:root[data-result-output-mode=merge] .expression:hover .expression-details { :root[data-result-output-mode=merge] .headword:hover .headword-details {
visibility: visible; visibility: visible;
} }
:root[data-result-output-mode=merge] .expression-list .expression-details>.action-play-audio { :root[data-result-output-mode=merge] .headword-list .headword-details>.action-play-audio {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0.5em; bottom: 0.5em;
} }
:root:not([data-result-output-mode=merge]) .expression-list .expression-details>.action-play-audio { :root:not([data-result-output-mode=merge]) .headword-list .headword-details>.action-play-audio {
display: none; display: none;
} }
:root[data-result-output-mode=merge] .expression-list .expression-tag-list { :root[data-result-output-mode=merge] .headword-list .headword-tag-list {
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: -0.5em; bottom: -0.5em;
white-space: nowrap; white-space: nowrap;
} }
:root[data-result-output-mode=merge] .entry[data-type=term] .expression-list-tag-list>.tag[data-category=search] { :root[data-result-output-mode=merge] .entry[data-type=term] .headword-list-tag-list>.tag[data-category=search] {
display: none; display: none;
} }
@ -1117,21 +1117,21 @@ button.action-button[data-icon=source-term]::before {
padding-left: 0; padding-left: 0;
list-style-type: none; list-style-type: none;
} }
.glossary-list { .gloss-list {
margin: 0; margin: 0;
padding: 0 0 0 var(--list-padding2); padding: 0 0 0 var(--list-padding2);
list-style-type: circle; list-style-type: circle;
} }
.glossary-list[data-count='0'], .gloss-list[data-count='0'],
.glossary-list[data-count='1'] { .gloss-list[data-count='1'] {
padding-left: 0; padding-left: 0;
list-style-type: none; list-style-type: none;
} }
.definition-item::marker, .definition-item::marker,
.glossary-item::marker { .gloss-item::marker {
color: var(--text-color-light3); color: var(--text-color-light3);
} }
.glossary { .gloss-content {
white-space: pre-line; white-space: pre-line;
} }
.definition-disambiguation-list { .definition-disambiguation-list {
@ -1150,7 +1150,7 @@ button.action-button[data-icon=source-term]::before {
.definition-disambiguation+.definition-disambiguation::before { .definition-disambiguation+.definition-disambiguation::before {
content: var(--disambiguation-separator); content: var(--disambiguation-separator);
} }
.glossary-separator, .gloss-separator,
.inflection-separator { .inflection-separator {
display: inline; display: inline;
font-size: 0; font-size: 0;
@ -1256,14 +1256,14 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
display: inline; display: inline;
color: var(--text-color-light3); color: var(--text-color-light3);
} }
.entry[data-unique-expression-count='1'] .frequency-item[data-has-reading=false] .frequency-disambiguation, .entry[data-unique-term-count='1'] .frequency-item[data-has-reading=false] .frequency-disambiguation,
.entry[data-unique-reading-count='1'][data-unique-expression-count='1'] .frequency-disambiguation, .entry[data-unique-reading-count='1'][data-unique-term-count='1'] .frequency-disambiguation,
.frequency-item[data-reading-is-same=true] .frequency-disambiguation-separator, .frequency-item[data-reading-is-same=true] .frequency-disambiguation-separator,
.frequency-item[data-reading-is-same=true] .frequency-disambiguation-reading, .frequency-item[data-reading-is-same=true] .frequency-disambiguation-reading,
.frequency-item[data-has-reading=false] .frequency-disambiguation-separator, .frequency-item[data-has-reading=false] .frequency-disambiguation-separator,
.frequency-item[data-has-reading=false] .frequency-disambiguation-reading, .frequency-item[data-has-reading=false] .frequency-disambiguation-reading,
.entry[data-unique-expression-count='1'] .frequency-disambiguation-separator, .entry[data-unique-term-count='1'] .frequency-disambiguation-separator,
.entry[data-unique-expression-count='1'] .frequency-disambiguation-expression, .entry[data-unique-term-count='1'] .frequency-disambiguation-term,
.entry[data-unique-reading-count='1'] .frequency-disambiguation-separator, .entry[data-unique-reading-count='1'] .frequency-disambiguation-separator,
.entry[data-unique-reading-count='1'] .frequency-disambiguation-reading { .entry[data-unique-reading-count='1'] .frequency-disambiguation-reading {
display: none; display: none;
@ -1561,7 +1561,7 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
/* Glossary images */ /* Glossary images */
.glossary-image-container { .gloss-image-container {
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
max-width: 100%; max-width: 100%;
@ -1570,16 +1570,16 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
line-height: 0; line-height: 0;
font-size: calc(1em / var(--font-size-no-units)); font-size: calc(1em / var(--font-size-no-units));
overflow: hidden; overflow: hidden;
background-color: var(--glossary-image-background-color); background-color: var(--gloss-image-background-color);
} }
.glossary-image-link { .gloss-image-link {
cursor: inherit; cursor: inherit;
color: inherit; color: inherit;
} }
.glossary-image-link[href]:hover { .gloss-image-link[href]:hover {
cursor: pointer; cursor: pointer;
} }
.glossary-image-container-overlay { .gloss-image-container-overlay {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -1592,7 +1592,7 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
white-space: normal; white-space: normal;
color: var(--text-color-light3); color: var(--text-color-light3);
} }
.glossary-item[data-has-image=true][data-image-load-state=load-error] .glossary-image-container-overlay::after { .gloss-item[data-has-image=true][data-image-load-state=load-error] .gloss-image-container-overlay::after {
content: 'Image failed to load'; content: 'Image failed to load';
display: table-cell; display: table-cell;
width: 100%; width: 100%;
@ -1601,7 +1601,7 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
text-align: center; text-align: center;
padding: 0.25em; padding: 0.25em;
} }
.glossary-image { .gloss-image {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
left: 0; left: 0;
@ -1613,30 +1613,30 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
border: none; border: none;
outline: none; outline: none;
} }
.glossary-image:not([src]) { .gloss-image:not([src]) {
display: none; display: none;
} }
.glossary-image[data-pixelated=true] { .gloss-image[data-pixelated=true] {
image-rendering: auto; image-rendering: auto;
image-rendering: -moz-crisp-edges; image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast; image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated; image-rendering: pixelated;
image-rendering: crisp-edges; image-rendering: crisp-edges;
} }
.glossary-image-aspect-ratio-sizer { .gloss-image-aspect-ratio-sizer {
content: ''; content: '';
display: inline-block; display: inline-block;
width: 0; width: 0;
vertical-align: top; vertical-align: top;
font-size: 0; font-size: 0;
} }
.glossary-image-link-text::before { .gloss-image-link-text::before {
content: '['; content: '[';
} }
.glossary-image-link-text::after { .gloss-image-link-text::after {
content: ']'; content: ']';
} }
.glossary-image-description { .gloss-image-description {
white-space: pre-line; white-space: pre-line;
} }
@ -1685,20 +1685,20 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
.kanji-glyph-data dd { .kanji-glyph-data dd {
margin-left: 0; margin-left: 0;
} }
.kanji-glossary-list { .kanji-gloss-list {
margin: 0; margin: 0;
padding: 0 0 0 var(--list-padding1); padding: 0 0 0 var(--list-padding1);
list-style-type: decimal; list-style-type: decimal;
} }
.kanji-glossary-list[data-count='0'], .kanji-gloss-list[data-count='0'],
.kanji-glossary-list[data-count='1'] { .kanji-gloss-list[data-count='1'] {
padding-left: 0; padding-left: 0;
list-style-type: none; list-style-type: none;
} }
.kanji-glossary-item::marker { .kanji-gloss-item::marker {
color: var(--text-color-light3); color: var(--text-color-light3);
} }
.kanji-glossary { .kanji-gloss-content {
white-space: pre-line; white-space: pre-line;
} }
.kanji-tag-list { .kanji-tag-list {
@ -2070,22 +2070,22 @@ button.footer-notification-close-button {
:root[data-glossary-layout-mode=compact] .definition-disambiguation-list:not([data-count='0']) { :root[data-glossary-layout-mode=compact] .definition-disambiguation-list:not([data-count='0']) {
display: inline; display: inline;
} }
:root[data-glossary-layout-mode=compact] .glossary-list { :root[data-glossary-layout-mode=compact] .gloss-list {
display: inline; display: inline;
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
} }
:root[data-glossary-layout-mode=compact] .glossary-item { :root[data-glossary-layout-mode=compact] .gloss-item {
display: inline; display: inline;
} }
:root[data-glossary-layout-mode=compact] .glossary-item:not(:first-child)::before { :root[data-glossary-layout-mode=compact] .gloss-item:not(:first-child)::before {
white-space: pre-wrap; white-space: pre-wrap;
content: var(--compact-list-separator); content: var(--compact-list-separator);
display: inline; display: inline;
color: var(--text-color-light3); color: var(--text-color-light3);
} }
:root[data-show-pitch-accent-downstep-notation=true] .pitch-accent-disambiguation-list[data-expression-count='0'], :root[data-show-pitch-accent-downstep-notation=true] .pitch-accent-disambiguation-list[data-term-count='0'],
:root[data-show-pitch-accent-downstep-notation=true] .pitch-accent-disambiguation[data-type=reading] { :root[data-show-pitch-accent-downstep-notation=true] .pitch-accent-disambiguation[data-type=reading] {
display: none; display: none;
} }
@ -2114,29 +2114,29 @@ button.footer-notification-close-button {
color: var(--text-color-light3); color: var(--text-color-light3);
} }
:root[data-glossary-layout-mode=compact] .glossary-image-container { :root[data-glossary-layout-mode=compact] .gloss-image-container {
display: none; display: none;
position: absolute; position: absolute;
left: 0; left: 0;
top: 100%; top: 100%;
z-index: 1; z-index: 1;
} }
:root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .glossary-image-container { :root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-container {
bottom: 100%; bottom: 100%;
top: auto; top: auto;
} }
:root[data-glossary-layout-mode=compact] .glossary-image-link { :root[data-glossary-layout-mode=compact] .gloss-image-link {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
:root[data-glossary-layout-mode=compact] .glossary-image-link:hover .glossary-image-container, :root[data-glossary-layout-mode=compact] .gloss-image-link:hover .gloss-image-container,
:root[data-glossary-layout-mode=compact] .glossary-image-link:focus .glossary-image-container { :root[data-glossary-layout-mode=compact] .gloss-image-link:focus .gloss-image-container {
display: block; display: block;
} }
:root:not([data-glossary-layout-mode=compact]) .glossary-image-link-text { :root:not([data-glossary-layout-mode=compact]) .gloss-image-link-text {
display: none; display: none;
} }
:root:not([data-glossary-layout-mode=compact]) .glossary-image-description { :root:not([data-glossary-layout-mode=compact]) .gloss-image-description {
display: block; display: block;
} }

40
ext/display-templates.html
View File

@ -11,9 +11,9 @@
<button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="left below h-cover v-cover"><div class="action-button-badge icon" hidden></div></button> <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="left below h-cover v-cover"><div class="action-button-badge icon" hidden></div></button>
<span class="entry-current-indicator-icon" title="Current entry"></span> <span class="entry-current-indicator-icon" title="Current entry"></span>
</div> </div>
<div class="expression-list"></div> <div class="headword-list"></div>
<div class="expression-list-details"> <div class="headword-list-details">
<div class="expression-list-tag-list tag-list"></div> <div class="headword-list-tag-list tag-list"></div>
<div class="inflection-list"></div> <div class="inflection-list"></div>
</div> </div>
</div> </div>
@ -30,19 +30,19 @@
</div> </div>
<div class="debug-info"><a class="debug-log-link">Log debug info to console</a></div> <div class="debug-info"><a class="debug-log-link">Log debug info to console</a></div>
</div></template> </div></template>
<template id="expression-template" data-remove-whitespace-text="true"><div class="expression"> <template id="headword-template" data-remove-whitespace-text="true"><div class="headword">
<div class="expression-text-container"> <div class="headword-text-container">
<span class="expression-text-outer source-text"> <span class="headword-term-outer source-text">
<span class="expression-current-indicator"></span> <span class="headword-current-indicator"></span>
<span class="expression-text"></span> <span class="headword-term"></span>
</span> </span>
<span class="expression-reading-outer"> <span class="headword-reading-outer">
<span class="expression-reading"></span> <span class="headword-reading"></span>
</span> </span>
</div> </div>
<div class="expression-details"> <div class="headword-details">
<button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="right below h-cover v-cover"><div class="action-button-badge icon" hidden></div></button> <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="right below h-cover v-cover"><div class="action-button-badge icon" hidden></div></button>
<div class="expression-tag-list tag-list"></div> <div class="headword-tag-list tag-list"></div>
</div> </div>
</div></template> </div></template>
<template id="definition-item-template" data-remove-whitespace-text="true"><li class="definition-item"> <template id="definition-item-template" data-remove-whitespace-text="true"><li class="definition-item">
@ -51,13 +51,13 @@
<div class="definition-item-content"> <div class="definition-item-content">
<div class="definition-tag-list tag-list"></div> <div class="definition-tag-list tag-list"></div>
<div class="definition-disambiguation-list"></div> <div class="definition-disambiguation-list"></div>
<ul class="glossary-list"></ul> <ul class="gloss-list"></ul>
</div> </div>
</div> </div>
</li></template> </li></template>
<template id="definition-disambiguation-template"><span class="definition-disambiguation"></span></template> <template id="definition-disambiguation-template"><span class="definition-disambiguation"></span></template>
<template id="glossary-item-template"><li class="glossary-item click-scannable"><span class="glossary-separator"> </span><span class="glossary"></span></li></template> <template id="gloss-item-template"><li class="gloss-item click-scannable"><span class="gloss-separator"> </span><span class="gloss-content"></span></li></template>
<template id="glossary-item-image-template"><li class="glossary-item click-scannable" data-has-image="true"><span class="glossary-separator"> </span><span class="glossary"><a class="glossary-image-link" target="_blank" rel="noreferrer noopener"><span class="glossary-image-container"><span class="glossary-image-aspect-ratio-sizer"></span><img class="glossary-image" alt=""><span class="glossary-image-container-overlay"></span></span><span class="glossary-image-link-text">Image</span></a> <span class="glossary-image-description"></span></span></li></template> <template id="gloss-item-image-template"><li class="gloss-item click-scannable" data-has-image="true"><span class="gloss-separator"> </span><span class="gloss-content"><a class="gloss-image-link" target="_blank" rel="noreferrer noopener"><span class="gloss-image-container"><span class="gloss-image-aspect-ratio-sizer"></span><img class="gloss-image" alt=""><span class="gloss-image-container-overlay"></span></span><span class="gloss-image-link-text">Image</span></a> <span class="gloss-image-description"></span></span></li></template>
<template id="inflection-template"><span class="inflection"></span><span class="inflection-separator"> </span></template> <template id="inflection-template"><span class="inflection"></span><span class="inflection-separator"> </span></template>
<!-- Frequency templates --> <!-- Frequency templates -->
@ -66,7 +66,7 @@
<span class="tag-label"><span class="tag-label-content"></span></span> <span class="tag-label"><span class="tag-label-content"></span></span>
<span class="tag-body"><span class="tag-body-content frequency-body"> <span class="tag-body"><span class="tag-body-content frequency-body">
<span class="frequency-disambiguation"><ruby> <span class="frequency-disambiguation"><ruby>
<span class="frequency-disambiguation-expression"></span> <span class="frequency-disambiguation-term"></span>
<span class="frequency-disambiguation-separator"></span> <span class="frequency-disambiguation-separator"></span>
<rt class="frequency-disambiguation-reading"></rt> <rt class="frequency-disambiguation-reading"></rt>
</ruby></span> </ruby></span>
@ -104,7 +104,7 @@
<span class="entry-current-indicator-icon" title="Current entry"></span> <span class="entry-current-indicator-icon" title="Current entry"></span>
</div> </div>
<div class="kanji-glyph-container"> <div class="kanji-glyph-container">
<span class="expression-current-indicator"></span> <span class="headword-current-indicator"></span>
<div class="kanji-glyph source-text"></div> <div class="kanji-glyph source-text"></div>
</div> </div>
<div class="kanji-tag-list tag-list"></div> <div class="kanji-tag-list tag-list"></div>
@ -116,12 +116,12 @@
</div> </div>
<table class="kanji-glyph-data"><tbody> <table class="kanji-glyph-data"><tbody>
<tr> <tr>
<th>Glossary</th> <th>Meaning</th>
<th>Readings</th> <th>Readings</th>
<th>Statistics</th> <th>Statistics</th>
</tr> </tr>
<tr> <tr>
<td class="kanji-glossary-container"><ol class="kanji-glossary-list"></ol></td> <td class="kanji-gloss-container"><ol class="kanji-gloss-list"></ol></td>
<td class="kanji-readings"><dl class="kanji-readings-chinese"></dl><dl class="kanji-readings-japanese"></dl></td> <td class="kanji-readings"><dl class="kanji-readings-chinese"></dl><dl class="kanji-readings-japanese"></dl></td>
<td class="kanji-statistics"></td> <td class="kanji-statistics"></td>
</tr> </tr>
@ -137,7 +137,7 @@
<template id="kanji-info-table-template"><table class="kanji-info-table"><tbody class="kanji-info-table-body"></tbody></table></template> <template id="kanji-info-table-template"><table class="kanji-info-table"><tbody class="kanji-info-table-body"></tbody></table></template>
<template id="kanji-info-table-item-template"><tr class="kanji-info-table-item"><th class="kanji-info-table-item-header"></th><td class="kanji-info-table-item-value"></td></tr></template> <template id="kanji-info-table-item-template"><tr class="kanji-info-table-item"><th class="kanji-info-table-item-header"></th><td class="kanji-info-table-item-value"></td></tr></template>
<template id="kanji-info-table-empty-template"><tr class="kanji-info-table-item kanji-info-table-item-empty"><td class="kanji-info-table-item-value-empty">No data found</td></tr></template> <template id="kanji-info-table-empty-template"><tr class="kanji-info-table-item kanji-info-table-item-empty"><td class="kanji-info-table-item-value-empty">No data found</td></tr></template>
<template id="kanji-glossary-item-template"><li class="kanji-glossary-item"><span class="kanji-glossary"></span></li></template> <template id="kanji-gloss-item-template"><li class="kanji-gloss-item"><span class="kanji-gloss-content"></span></li></template>
<template id="kanji-reading-template"><dd class="kanji-reading"></dd></template> <template id="kanji-reading-template"><dd class="kanji-reading"></dd></template>
<!-- Tag templates --> <!-- Tag templates -->

64
ext/js/display/display-generator.js
View File

@ -53,12 +53,12 @@ class DisplayGenerator {
createTermEntry(dictionaryEntry) { createTermEntry(dictionaryEntry) {
const node = this._templates.instantiate('term-entry'); const node = this._templates.instantiate('term-entry');
const headwordsContainer = node.querySelector('.expression-list'); const headwordsContainer = node.querySelector('.headword-list');
const inflectionsContainer = node.querySelector('.inflection-list'); const inflectionsContainer = node.querySelector('.inflection-list');
const pitchesContainer = node.querySelector('.pitch-accent-group-list'); const pitchesContainer = node.querySelector('.pitch-accent-group-list');
const frequencyGroupListContainer = node.querySelector('.frequency-group-list'); const frequencyGroupListContainer = node.querySelector('.frequency-group-list');
const definitionsContainer = node.querySelector('.definition-list'); const definitionsContainer = node.querySelector('.definition-list');
const termTagsContainer = node.querySelector('.expression-list-tag-list'); const headwordTagsContainer = node.querySelector('.headword-list-tag-list');
const {headwords, type, inflections, definitions, frequencies, pronunciations} = dictionaryEntry; const {headwords, type, inflections, definitions, frequencies, pronunciations} = dictionaryEntry;
const pitches = DictionaryDataUtil.getPitchAccentInfos(dictionaryEntry); const pitches = DictionaryDataUtil.getPitchAccentInfos(dictionaryEntry);
@ -74,11 +74,11 @@ class DisplayGenerator {
} }
node.dataset.format = type; node.dataset.format = type;
node.dataset.expressionCount = `${headwords.length}`; node.dataset.headwordCount = `${headwords.length}`;
node.dataset.definitionCount = `${definitions.length}`; node.dataset.definitionCount = `${definitions.length}`;
node.dataset.pitchAccentDictionaryCount = `${pitches.length}`; node.dataset.pitchAccentDictionaryCount = `${pitches.length}`;
node.dataset.pitchAccentCount = `${pitchCount}`; node.dataset.pitchAccentCount = `${pitchCount}`;
node.dataset.uniqueExpressionCount = `${uniqueTerms.size}`; node.dataset.uniqueTermCount = `${uniqueTerms.size}`;
node.dataset.uniqueReadingCount = `${uniqueReadings.size}`; node.dataset.uniqueReadingCount = `${uniqueReadings.size}`;
node.dataset.frequencyCount = `${frequencies.length}`; node.dataset.frequencyCount = `${frequencies.length}`;
node.dataset.groupedFrequencyCount = `${groupedFrequencies.length}`; node.dataset.groupedFrequencyCount = `${groupedFrequencies.length}`;
@ -93,14 +93,14 @@ class DisplayGenerator {
this._appendMultiple(inflectionsContainer, this._createTermInflection.bind(this), inflections); this._appendMultiple(inflectionsContainer, this._createTermInflection.bind(this), inflections);
this._appendMultiple(frequencyGroupListContainer, this._createFrequencyGroup.bind(this), groupedFrequencies, false); this._appendMultiple(frequencyGroupListContainer, this._createFrequencyGroup.bind(this), groupedFrequencies, false);
this._appendMultiple(pitchesContainer, this._createPitches.bind(this), pitches); this._appendMultiple(pitchesContainer, this._createPitches.bind(this), pitches);
this._appendMultiple(termTagsContainer, this._createTermTag.bind(this), termTags, headwords.length); this._appendMultiple(headwordTagsContainer, this._createTermTag.bind(this), termTags, headwords.length);
for (const term of uniqueTerms) { for (const term of uniqueTerms) {
termTagsContainer.appendChild(this._createSearchTag(term)); headwordTagsContainer.appendChild(this._createSearchTag(term));
} }
for (const reading of uniqueReadings) { for (const reading of uniqueReadings) {
if (uniqueTerms.has(reading)) { continue; } if (uniqueTerms.has(reading)) { continue; }
termTagsContainer.appendChild(this._createSearchTag(reading)); headwordTagsContainer.appendChild(this._createSearchTag(reading));
} }
// Add definitions // Add definitions
@ -132,7 +132,7 @@ class DisplayGenerator {
const glyphContainer = node.querySelector('.kanji-glyph'); const glyphContainer = node.querySelector('.kanji-glyph');
const frequencyGroupListContainer = node.querySelector('.frequency-group-list'); const frequencyGroupListContainer = node.querySelector('.frequency-group-list');
const tagContainer = node.querySelector('.kanji-tag-list'); const tagContainer = node.querySelector('.kanji-tag-list');
const definitionsContainer = node.querySelector('.kanji-glossary-list'); const definitionsContainer = node.querySelector('.kanji-gloss-list');
const chineseReadingsContainer = node.querySelector('.kanji-readings-chinese'); const chineseReadingsContainer = node.querySelector('.kanji-readings-chinese');
const japaneseReadingsContainer = node.querySelector('.kanji-readings-japanese'); const japaneseReadingsContainer = node.querySelector('.kanji-readings-japanese');
const statisticsContainer = node.querySelector('.kanji-statistics'); const statisticsContainer = node.querySelector('.kanji-statistics');
@ -188,7 +188,7 @@ class DisplayGenerator {
if (disambiguationHeadwords.length > 0 && disambiguationHeadwords.length < headwords.length) { if (disambiguationHeadwords.length > 0 && disambiguationHeadwords.length < headwords.length) {
const disambiguationContainer = node.querySelector('.tag-details-disambiguation-list'); const disambiguationContainer = node.querySelector('.tag-details-disambiguation-list');
const copyAttributes = ['totalExpressionCount', 'matchedExpressionCount', 'unmatchedExpressionCount']; const copyAttributes = ['totalHeadwordCount', 'matchedHeadwordCount', 'unmatchedHeadwordCount'];
for (const attribute of copyAttributes) { for (const attribute of copyAttributes) {
const value = tagNode.dataset[attribute]; const value = tagNode.dataset[attribute];
if (typeof value === 'undefined') { continue; } if (typeof value === 'undefined') { continue; }
@ -242,10 +242,10 @@ class DisplayGenerator {
if (term) { searchQueries.push(term); } if (term) { searchQueries.push(term); }
if (reading) { searchQueries.push(reading); } if (reading) { searchQueries.push(reading); }
const node = this._templates.instantiate('expression'); const node = this._templates.instantiate('headword');
const termContainer = node.querySelector('.expression-text'); const termContainer = node.querySelector('.headword-term');
const tagContainer = node.querySelector('.expression-tag-list'); const tagContainer = node.querySelector('.headword-tag-list');
node.dataset.readingIsSame = `${reading === term}`; node.dataset.readingIsSame = `${reading === term}`;
node.dataset.frequency = DictionaryDataUtil.getTermFrequency(tags); node.dataset.frequency = DictionaryDataUtil.getTermFrequency(tags);
@ -259,7 +259,7 @@ class DisplayGenerator {
node.dataset.wordClasses = wordClasses.join(' '); node.dataset.wordClasses = wordClasses.join(' ');
} }
this._setTextContent(node.querySelector('.expression-reading'), reading); this._setTextContent(node.querySelector('.headword-reading'), reading);
this._appendFurigana(termContainer, term, reading, this._appendKanjiLinks.bind(this)); this._appendFurigana(termContainer, term, reading, this._appendKanjiLinks.bind(this));
this._appendMultiple(tagContainer, this._createTag.bind(this), tags); this._appendMultiple(tagContainer, this._createTag.bind(this), tags);
@ -284,7 +284,7 @@ class DisplayGenerator {
const tagListContainer = node.querySelector('.definition-tag-list'); const tagListContainer = node.querySelector('.definition-tag-list');
const onlyListContainer = node.querySelector('.definition-disambiguation-list'); const onlyListContainer = node.querySelector('.definition-disambiguation-list');
const entriesContainer = node.querySelector('.glossary-list'); const entriesContainer = node.querySelector('.gloss-list');
node.dataset.dictionary = dictionary; node.dataset.dictionary = dictionary;
@ -309,8 +309,8 @@ class DisplayGenerator {
} }
_createTermDefinitionEntryText(text) { _createTermDefinitionEntryText(text) {
const node = this._templates.instantiate('glossary-item'); const node = this._templates.instantiate('gloss-item');
const container = node.querySelector('.glossary'); const container = node.querySelector('.gloss-content');
this._setMultilineTextContent(container, text); this._setMultilineTextContent(container, text);
return node; return node;
} }
@ -330,22 +330,22 @@ class DisplayGenerator {
width / height width / height
); );
const node = this._templates.instantiate('glossary-item-image'); const node = this._templates.instantiate('gloss-item-image');
node.dataset.path = path; node.dataset.path = path;
node.dataset.dictionary = dictionary; node.dataset.dictionary = dictionary;
node.dataset.imageLoadState = 'not-loaded'; node.dataset.imageLoadState = 'not-loaded';
const imageContainer = node.querySelector('.glossary-image-container'); const imageContainer = node.querySelector('.gloss-image-container');
imageContainer.style.width = `${usedWidth}em`; imageContainer.style.width = `${usedWidth}em`;
if (typeof title === 'string') { if (typeof title === 'string') {
imageContainer.title = title; imageContainer.title = title;
} }
const aspectRatioSizer = node.querySelector('.glossary-image-aspect-ratio-sizer'); const aspectRatioSizer = node.querySelector('.gloss-image-aspect-ratio-sizer');
aspectRatioSizer.style.paddingTop = `${aspectRatio * 100.0}%`; aspectRatioSizer.style.paddingTop = `${aspectRatio * 100.0}%`;
const image = node.querySelector('img.glossary-image'); const image = node.querySelector('img.gloss-image');
const imageLink = node.querySelector('.glossary-image-link'); const imageLink = node.querySelector('.gloss-image-link');
image.dataset.pixelated = `${pixelated === true}`; image.dataset.pixelated = `${pixelated === true}`;
if (this._mediaLoader !== null) { if (this._mediaLoader !== null) {
@ -358,7 +358,7 @@ class DisplayGenerator {
} }
if (typeof description === 'string') { if (typeof description === 'string') {
const container = node.querySelector('.glossary-image-description'); const container = node.querySelector('.gloss-image-description');
this._setMultilineTextContent(container, description); this._setMultilineTextContent(container, description);
} }
@ -386,14 +386,14 @@ class DisplayGenerator {
_createKanjiLink(character) { _createKanjiLink(character) {
const node = document.createElement('a'); const node = document.createElement('a');
node.className = 'expression-kanji-link'; node.className = 'headword-kanji-link';
this._setTextContent(node, character, 'ja'); this._setTextContent(node, character, 'ja');
return node; return node;
} }
_createKanjiDefinition(text) { _createKanjiDefinition(text) {
const node = this._templates.instantiate('kanji-glossary-item'); const node = this._templates.instantiate('kanji-gloss-item');
const container = node.querySelector('.kanji-glossary'); const container = node.querySelector('.kanji-gloss-content');
this._setMultilineTextContent(container, text); this._setMultilineTextContent(container, text);
return node; return node;
} }
@ -452,9 +452,9 @@ class DisplayGenerator {
const {tag, headwordIndices} = tagInfo; const {tag, headwordIndices} = tagInfo;
const node = this._createTag(tag); const node = this._createTag(tag);
node.dataset.headwords = headwordIndices.join(' '); node.dataset.headwords = headwordIndices.join(' ');
node.dataset.totalExpressionCount = `${totalHeadwordCount}`; node.dataset.totalHeadwordCount = `${totalHeadwordCount}`;
node.dataset.matchedExpressionCount = `${headwordIndices.length}`; node.dataset.matchedHeadwordCount = `${headwordIndices.length}`;
node.dataset.unmatchedExpressionCount = `${Math.max(0, totalHeadwordCount - headwordIndices.length)}`; node.dataset.unmatchedHeadwordCount = `${Math.max(0, totalHeadwordCount - headwordIndices.length)}`;
return node; return node;
} }
@ -549,7 +549,7 @@ class DisplayGenerator {
const templateName = 'pitch-accent-disambiguation'; const templateName = 'pitch-accent-disambiguation';
for (const term of exclusiveTerms) { for (const term of exclusiveTerms) {
const node = this._templates.instantiate(templateName); const node = this._templates.instantiate(templateName);
node.dataset.type = 'expression'; node.dataset.type = 'term';
this._setTextContent(node, term, 'ja'); this._setTextContent(node, term, 'ja');
container.appendChild(node); container.appendChild(node);
} }
@ -562,7 +562,7 @@ class DisplayGenerator {
} }
container.dataset.count = `${exclusiveTerms.length + exclusiveReadings.length}`; container.dataset.count = `${exclusiveTerms.length + exclusiveReadings.length}`;
container.dataset.expressionCount = `${exclusiveTerms.length}`; container.dataset.termCount = `${exclusiveTerms.length}`;
container.dataset.readingCount = `${exclusiveReadings.length}`; container.dataset.readingCount = `${exclusiveReadings.length}`;
} }
@ -639,11 +639,11 @@ class DisplayGenerator {
const frequency = values.join(', '); const frequency = values.join(', ');
this._setTextContent(node.querySelector('.frequency-disambiguation-expression'), term, 'ja'); this._setTextContent(node.querySelector('.frequency-disambiguation-term'), term, 'ja');
this._setTextContent(node.querySelector('.frequency-disambiguation-reading'), (reading !== null ? reading : ''), 'ja'); this._setTextContent(node.querySelector('.frequency-disambiguation-reading'), (reading !== null ? reading : ''), 'ja');
this._setTextContent(node.querySelector('.frequency-value'), frequency, 'ja'); this._setTextContent(node.querySelector('.frequency-value'), frequency, 'ja');
node.dataset.expression = term; node.dataset.term = term;
node.dataset.reading = reading; node.dataset.reading = reading;
node.dataset.hasReading = `${reading !== null}`; node.dataset.hasReading = `${reading !== null}`;
node.dataset.readingIsSame = `${reading === term}`; node.dataset.readingIsSame = `${reading === term}`;

4
ext/js/display/display.js
View File

@ -46,7 +46,7 @@ class Display extends EventDispatcher {
this._japaneseUtil = japaneseUtil; this._japaneseUtil = japaneseUtil;
this._documentFocusController = documentFocusController; this._documentFocusController = documentFocusController;
this._hotkeyHandler = hotkeyHandler; this._hotkeyHandler = hotkeyHandler;
this._container = document.querySelector('#definitions'); this._container = document.querySelector('#dictionary-entries');
this._dictionaryEntries = []; this._dictionaryEntries = [];
this._dictionaryEntryNodes = []; this._dictionaryEntryNodes = [];
this._optionsContext = {depth: 0, url: window.location.href}; this._optionsContext = {depth: 0, url: window.location.href};
@ -1705,7 +1705,7 @@ class Display extends EventDispatcher {
this._eventListeners.addEventListener(entry, 'click', this._onEntryClick.bind(this)); this._eventListeners.addEventListener(entry, 'click', this._onEntryClick.bind(this));
this._addMultipleEventListeners(entry, '.action-add-note', 'click', this._onNoteAdd.bind(this)); this._addMultipleEventListeners(entry, '.action-add-note', 'click', this._onNoteAdd.bind(this));
this._addMultipleEventListeners(entry, '.action-view-note', 'click', this._onNoteView.bind(this)); this._addMultipleEventListeners(entry, '.action-view-note', 'click', this._onNoteView.bind(this));
this._addMultipleEventListeners(entry, '.expression-kanji-link', 'click', this._onKanjiLookup.bind(this)); this._addMultipleEventListeners(entry, '.headword-kanji-link', 'click', this._onKanjiLookup.bind(this));
this._addMultipleEventListeners(entry, '.debug-log-link', 'click', this._onDebugLogClick.bind(this)); this._addMultipleEventListeners(entry, '.debug-log-link', 'click', this._onDebugLogClick.bind(this));
this._addMultipleEventListeners(entry, '.tag-label', 'click', this._onTagClick.bind(this)); this._addMultipleEventListeners(entry, '.tag-label', 'click', this._onTagClick.bind(this));
} }

4
ext/js/language/dictionary-database.js
View File

@ -392,7 +392,7 @@ class DictionaryDatabase {
definitionTags: this._splitField(row.definitionTags || row.tags || ''), definitionTags: this._splitField(row.definitionTags || row.tags || ''),
termTags: this._splitField(row.termTags || ''), termTags: this._splitField(row.termTags || ''),
rules: this._splitField(row.rules), rules: this._splitField(row.rules),
glossary: row.glossary, definitions: row.glossary,
score: row.score, score: row.score,
dictionary: row.dictionary, dictionary: row.dictionary,
id: row.id, id: row.id,
@ -407,7 +407,7 @@ class DictionaryDatabase {
onyomi: this._splitField(row.onyomi), onyomi: this._splitField(row.onyomi),
kunyomi: this._splitField(row.kunyomi), kunyomi: this._splitField(row.kunyomi),
tags: this._splitField(row.tags), tags: this._splitField(row.tags),
glossary: row.meanings, definitions: row.meanings,
stats: row.stats, stats: row.stats,
dictionary: row.dictionary dictionary: row.dictionary
}; };

8
ext/js/language/translator.js
View File

@ -148,13 +148,13 @@ class Translator {
this._sortDatabaseEntriesByIndex(databaseEntries); this._sortDatabaseEntriesByIndex(databaseEntries);
const dictionaryEntries = []; const dictionaryEntries = [];
for (const {character, onyomi, kunyomi, tags, glossary, stats, dictionary} of databaseEntries) { for (const {character, onyomi, kunyomi, tags, definitions, stats, dictionary} of databaseEntries) {
const expandedStats = await this._expandKanjiStats(stats, dictionary); const expandedStats = await this._expandKanjiStats(stats, dictionary);
const tagGroups = []; const tagGroups = [];
if (tags.length > 0) { tagGroups.push(this._createTagGroup(dictionary, tags)); } if (tags.length > 0) { tagGroups.push(this._createTagGroup(dictionary, tags)); }
const dictionaryEntry = this._createKanjiDictionaryEntry(character, dictionary, onyomi, kunyomi, tagGroups, expandedStats, glossary); const dictionaryEntry = this._createKanjiDictionaryEntry(character, dictionary, onyomi, kunyomi, tagGroups, expandedStats, definitions);
dictionaryEntries.push(dictionaryEntry); dictionaryEntries.push(dictionaryEntry);
} }
@ -960,7 +960,7 @@ class Translator {
} }
_createTermDictionaryEntryFromDatabaseEntry(databaseEntry, originalText, transformedText, deinflectedText, reasons, isPrimary, enabledDictionaryMap) { _createTermDictionaryEntryFromDatabaseEntry(databaseEntry, originalText, transformedText, deinflectedText, reasons, isPrimary, enabledDictionaryMap) {
const {term, reading: rawReading, definitionTags, termTags, glossary, score, dictionary, id, sequence, rules} = databaseEntry; const {term, reading: rawReading, definitionTags, termTags, definitions, score, dictionary, id, sequence, rules} = databaseEntry;
const reading = (rawReading.length > 0 ? rawReading : term); const reading = (rawReading.length > 0 ? rawReading : term);
const {index: dictionaryIndex, priority: dictionaryPriority} = this._getDictionaryOrder(dictionary, enabledDictionaryMap); const {index: dictionaryIndex, priority: dictionaryPriority} = this._getDictionaryOrder(dictionary, enabledDictionaryMap);
const sourceTermExactMatchCount = (isPrimary && deinflectedText === term ? 1 : 0); const sourceTermExactMatchCount = (isPrimary && deinflectedText === term ? 1 : 0);
@ -984,7 +984,7 @@ class Translator {
sourceTermExactMatchCount, sourceTermExactMatchCount,
maxTransformedTextLength, maxTransformedTextLength,
[this._createTermHeadword(0, term, reading, [source], headwordTagGroups, rules)], [this._createTermHeadword(0, term, reading, [source], headwordTagGroups, rules)],
[this._createTermDefinition(0, [0], dictionary, definitionTagGroups, glossary)] [this._createTermDefinition(0, [0], dictionary, definitionTagGroups, definitions)]
); );
} }

2
ext/popup.html
View File

@ -32,7 +32,7 @@
<div id="query-parser-content" lang="ja"></div> <div id="query-parser-content" lang="ja"></div>
</div> </div>
<div id="definitions"></div> <div id="dictionary-entries"></div>
<div id="no-results" hidden> <div id="no-results" hidden>
<div class="entry"> <div class="entry">

2
ext/search.html
View File

@ -55,7 +55,7 @@
<div id="query-parser-content" lang="ja"></div> <div id="query-parser-content" lang="ja"></div>
</div> </div>
<div id="definitions"></div> <div id="dictionary-entries"></div>
<div id="no-results" hidden> <div id="no-results" hidden>
<div class="entry"> <div class="entry">