diff options
-rw-r--r-- | ext/css/display.css | 300 | ||||
-rw-r--r-- | ext/display-templates.html | 40 | ||||
-rw-r--r-- | ext/js/display/display-generator.js | 64 | ||||
-rw-r--r-- | ext/js/display/display.js | 4 | ||||
-rw-r--r-- | ext/js/language/dictionary-database.js | 4 | ||||
-rw-r--r-- | ext/js/language/translator.js | 8 | ||||
-rw-r--r-- | ext/popup.html | 2 | ||||
-rw-r--r-- | ext/search.html | 2 |
8 files changed, 212 insertions, 212 deletions
diff --git a/ext/css/display.css b/ext/css/display.css index 79704fb1..077b7d2d 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -25,7 +25,7 @@ --disambiguation-separator: ', '; --disambiguation-reading-separator: ':'; - --expression-separator: '\3001'; + --headword-separator: '\3001'; --inflection-separator: '\00AB'; @@ -37,13 +37,13 @@ --h2-font-size-no-units: 1.25; --h2-font-size: calc(1em * var(--h2-font-size-no-units)); - --expression-font-size-no-units: 2; - --expression-font-size: calc(1em * var(--expression-font-size-no-units)); - --expression-reading-font-size-no-units: 0.75; - --expression-reading-font-size: calc(var(--expression-reading-font-size-no-units) * var(--expression-font-size)); - --expression-reading-space: 0.5em; - --expression-list-end-space: 0.5em; - --expression-thin-border-size: calc(1em / (var(--expression-font-size-no-units) * var(--font-size-no-units))); + --headword-font-size-no-units: 2; + --headword-font-size: calc(1em * var(--headword-font-size-no-units)); + --headword-reading-font-size-no-units: 0.75; + --headword-reading-font-size: calc(var(--headword-reading-font-size-no-units) * var(--headword-font-size)); + --headword-reading-space: 0.5em; + --headword-list-end-space: 0.5em; + --headword-thin-border-size: calc(1em / (var(--headword-font-size-no-units) * var(--font-size-no-units))); --line-height-no-units: 20; --line-height: calc(var(--line-height-no-units) / var(--font-size-no-units)); @@ -106,27 +106,27 @@ /* Colors */ --background-color: #ffffff; - --glossary-image-background-color: #eeeeee; + --gloss-image-background-color: #eeeeee; --link-color: var(--accent-color); --text-color: #000000; --reason-text-color: var(--text-color-light3); - --expression-text-color: var(--text-color); - --expression-text-color-popular: var(--accent-color); - --expression-text-color-rare: var(--text-color-light4); - --expression-furigana-text-color: var(--expression-text-color); - --expression-furigana-text-color-popular: var(--expression-text-color-popular); - --expression-furigana-text-color-rare: var(--expression-text-color-rare); - --expression-reading-text-color: var(--expression-furigana-text-color); - --expression-reading-text-color-popular: var(--expression-furigana-text-color-popular); - --expression-reading-text-color-rare: var(--expression-furigana-text-color-rare); - --expression-kanji-text-color: var(--expression-text-color); - --expression-kanji-text-color-popular: var(--expression-text-color-popular); - --expression-kanji-text-color-rare: var(--expression-text-color-rare); - --expression-kanji-border-color: var(--dark-border-color); - --expression-kanji-border-color-popular: var(--expression-kanji-border-color); - --expression-kanji-border-color-rare: var(--expression-kanji-border-color); + --headword-text-color: var(--text-color); + --headword-text-color-popular: var(--accent-color); + --headword-text-color-rare: var(--text-color-light4); + --headword-furigana-text-color: var(--headword-text-color); + --headword-furigana-text-color-popular: var(--headword-text-color-popular); + --headword-furigana-text-color-rare: var(--headword-text-color-rare); + --headword-reading-text-color: var(--headword-furigana-text-color); + --headword-reading-text-color-popular: var(--headword-furigana-text-color-popular); + --headword-reading-text-color-rare: var(--headword-furigana-text-color-rare); + --headword-kanji-text-color: var(--headword-text-color); + --headword-kanji-text-color-popular: var(--headword-text-color-popular); + --headword-kanji-text-color-rare: var(--headword-text-color-rare); + --headword-kanji-border-color: var(--dark-border-color); + --headword-kanji-border-color-popular: var(--headword-kanji-border-color); + --headword-kanji-border-color-rare: var(--headword-kanji-border-color); --light-border-color: #eeeeee; --medium-border-color: #dddddd; @@ -181,22 +181,22 @@ :root[data-theme=dark] { /* Colors */ --background-color: #1e1e1e; - --glossary-image-background-color: #2f2f2f; + --gloss-image-background-color: #2f2f2f; --link-color: var(--accent-color); --text-color: #d4d4d4; --reason-text-color: var(--text-color-light3); - --expression-text-color: var(--text-color); - --expression-text-color-popular: var(--accent-color); - --expression-text-color-rare: var(--text-color-light4); - --expression-furigana-text-color: var(--expression-text-color); - --expression-furigana-text-color-popular: var(--expression-text-color-popular); - --expression-furigana-text-color-rare: var(--expression-text-color-rare); - --expression-reading-text-color: var(--expression-furigana-text-color); - --expression-reading-text-color-popular: var(--expression-furigana-text-color-popular); - --expression-reading-text-color-rare: var(--expression-furigana-text-color-rare); - --expression-kanji-border-color: var(--dark-border-color); + --headword-text-color: var(--text-color); + --headword-text-color-popular: var(--accent-color); + --headword-text-color-rare: var(--text-color-light4); + --headword-furigana-text-color: var(--headword-text-color); + --headword-furigana-text-color-popular: var(--headword-text-color-popular); + --headword-furigana-text-color-rare: var(--headword-text-color-rare); + --headword-reading-text-color: var(--headword-furigana-text-color); + --headword-reading-text-color-popular: var(--headword-furigana-text-color-popular); + --headword-reading-text-color-rare: var(--headword-furigana-text-color-rare); + --headword-kanji-border-color: var(--dark-border-color); --light-border-color: #2f2f2f; --medium-border-color: #3f3f3f; @@ -589,7 +589,7 @@ button.sidebar-button.sidebar-button-highlight { padding-left: var(--entry-horizontal-padding); padding-right: var(--entry-horizontal-padding); 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 { margin-top: 0.5em; @@ -839,105 +839,105 @@ button.action-button[data-icon=source-term]::before { } -/* Expressions */ -.expression-list { +/* Headwords */ +.headword-list { display: inline; - margin-right: var(--expression-list-end-space); + margin-right: var(--headword-list-end-space); } -.expression { - --expression-current-text-color: var(--expression-text-color); - --expression-current-reading-text-color: var(--expression-reading-text-color); - --expression-current-furigana-text-color: var(--expression-furigana-text-color); - --expression-current-kanji-text-color: var(--expression-kanji-text-color); - --expression-current-kanji-border-color: var(--expression-kanji-border-color); +.headword { + --headword-current-text-color: var(--headword-text-color); + --headword-current-reading-text-color: var(--headword-reading-text-color); + --headword-current-furigana-text-color: var(--headword-furigana-text-color); + --headword-current-kanji-text-color: var(--headword-kanji-text-color); + --headword-current-kanji-border-color: var(--headword-kanji-border-color); display: inline-block; } -:root[data-result-output-mode=merge] .expression[data-frequency=popular] { - --expression-current-text-color: var(--expression-text-color-popular); - --expression-current-reading-text-color: var(--expression-reading-text-color-popular); - --expression-current-furigana-text-color: var(--expression-furigana-text-color-popular); - --expression-current-kanji-text-color: var(--expression-kanji-text-color-popular); - --expression-current-kanji-border-color: var(--expression-kanji-border-color-popular); -} -:root[data-result-output-mode=merge] .expression[data-frequency=rare] { - --expression-current-text-color: var(--expression-text-color-rare); - --expression-current-reading-text-color: var(--expression-reading-text-color-rare); - --expression-current-furigana-text-color: var(--expression-furigana-text-color-rare); - --expression-current-kanji-text-color: var(--expression-kanji-text-color-rare); - --expression-current-kanji-border-color: var(--expression-kanji-border-color-rare); -} -.expression-details { +:root[data-result-output-mode=merge] .headword[data-frequency=popular] { + --headword-current-text-color: var(--headword-text-color-popular); + --headword-current-reading-text-color: var(--headword-reading-text-color-popular); + --headword-current-furigana-text-color: var(--headword-furigana-text-color-popular); + --headword-current-kanji-text-color: var(--headword-kanji-text-color-popular); + --headword-current-kanji-border-color: var(--headword-kanji-border-color-popular); +} +:root[data-result-output-mode=merge] .headword[data-frequency=rare] { + --headword-current-text-color: var(--headword-text-color-rare); + --headword-current-reading-text-color: var(--headword-reading-text-color-rare); + --headword-current-furigana-text-color: var(--headword-furigana-text-color-rare); + --headword-current-kanji-text-color: var(--headword-kanji-text-color-rare); + --headword-current-kanji-border-color: var(--headword-kanji-border-color-rare); +} +.headword-details { display: inline; } -.expression-tag-list { +.headword-tag-list { display: none; } -.expression-list-details { +.headword-list-details { display: inline; } -.expression-list-tag-list { +.headword-list-tag-list { display: inline; } -.expression-text-container { +.headword-text-container { 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; position: relative; - margin-left: var(--expression-reading-space); + margin-left: var(--headword-reading-space); } -.expression-reading-outer { +.headword-reading-outer { display: none; position: relative; - margin-left: var(--expression-reading-space); + margin-left: var(--headword-reading-space); } -.expression-text { - color: var(--expression-current-text-color); - font-size: var(--expression-font-size); +.headword-term { + color: var(--headword-current-text-color); + font-size: var(--headword-font-size); } -.expression-reading { - color: var(--expression-current-reading-text-color); - font-size: var(--expression-reading-font-size); +.headword-reading { + color: var(--headword-current-reading-text-color); + font-size: var(--headword-reading-font-size); } -.expression-list>.expression:not(:last-of-type)>.expression-text-container>.expression-text-outer::after { - content: var(--expression-separator); - font-size: var(--expression-font-size); +.headword-list>.headword:not(:last-of-type)>.headword-text-container>.headword-term-outer::after { + content: var(--headword-separator); + font-size: var(--headword-font-size); } -.expression-list>.expression:not(:last-of-type)>.expression-text-container>.expression-reading-outer::after { - content: var(--expression-separator); - font-size: var(--expression-reading-font-size); +.headword-list>.headword:not(:last-of-type)>.headword-text-container>.headword-reading-outer::after { + content: var(--headword-separator); + font-size: var(--headword-reading-font-size); } -.expression-text>ruby>rt { - color: var(--expression-current-furigana-text-color); +.headword-term>ruby>rt { + color: var(--headword-current-furigana-text-color); } -.expression-kanji-link { - border-bottom: var(--expression-thin-border-size) dashed var(--expression-current-kanji-border-color); - color: var(--expression-current-kanji-text-color); +.headword-kanji-link { + border-bottom: var(--headword-thin-border-size) dashed var(--headword-current-kanji-border-color); + color: var(--headword-current-kanji-text-color); text-decoration: none; cursor: pointer; } -:root[data-result-output-mode=merge] .expression-list-details { +:root[data-result-output-mode=merge] .headword-list-details { display: block; } -:root[data-term-display-mode=ruby-and-reading] .expression-text-outer::after, -:root[data-term-display-mode=term-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] .headword-term-outer::after { display: none; } -:root[data-term-display-mode=ruby-and-reading] .expression-reading-outer, -:root[data-term-display-mode=term-and-reading] .expression-reading-outer { +:root[data-term-display-mode=ruby-and-reading] .headword-reading-outer, +:root[data-term-display-mode=term-and-reading] .headword-reading-outer { 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=term-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] .headword[data-reading-is-same=true] .headword-term-outer::after { 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=term-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] .headword[data-reading-is-same=true] .headword-reading-outer { 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; } @@ -1000,7 +1000,7 @@ button.action-button[data-icon=source-term]::before { /* Triangle entry indicator */ -.expression-current-indicator { +.headword-current-indicator { pointer-events: none; position: absolute; 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, visibility 0s linear var(--entry-current-indicator-transition-duration); } -.expression-text .expression-current-indicator { - font-size: calc(1em / var(--expression-font-size-no-units)); +.headword-term .headword-current-indicator { + font-size: calc(1em / var(--headword-font-size-no-units)); } -.entry.entry-current .expression-current-indicator { +.entry.entry-current .headword-current-indicator { opacity: 1; visibility: visible; transition: opacity var(--entry-current-indicator-transition-duration) linear, visibility 0s linear 0s; } -.expression-current-indicator::after { +.headword-current-indicator::after { content: ''; display: block; position: absolute; @@ -1042,8 +1042,8 @@ button.action-button[data-icon=source-term]::before { -webkit-mask-size: contain; -webkit-mask-image: url(/images/material-right-arrow.svg); } -.expression:not(:first-of-type) .expression-current-indicator, -:root:not([data-popup-current-indicator-mode=triangle]) .expression-current-indicator { +headword-list:not(:first-of-type) .headword-current-indicator, +:root:not([data-popup-current-indicator-mode=triangle]) .headword-current-indicator { display: none; transition: none; } @@ -1072,7 +1072,7 @@ button.action-button[data-icon=source-term]::before { /* 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; position: relative; width: 0; @@ -1080,28 +1080,28 @@ button.action-button[data-icon=source-term]::before { visibility: hidden; z-index: 1; } -:root[data-result-output-mode=merge] .expression-list>.expression:not(:last-of-type) .expression-details { - left: calc(-1 * var(--expression-font-size)); +:root[data-result-output-mode=merge] .headword-list>.headword:not(:last-of-type) .headword-details { + 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; } -: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; left: 0; 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; } -:root[data-result-output-mode=merge] .expression-list .expression-tag-list { +:root[data-result-output-mode=merge] .headword-list .headword-tag-list { display: block; position: absolute; left: 0; bottom: -0.5em; 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; } @@ -1117,21 +1117,21 @@ button.action-button[data-icon=source-term]::before { padding-left: 0; list-style-type: none; } -.glossary-list { +.gloss-list { margin: 0; padding: 0 0 0 var(--list-padding2); list-style-type: circle; } -.glossary-list[data-count='0'], -.glossary-list[data-count='1'] { +.gloss-list[data-count='0'], +.gloss-list[data-count='1'] { padding-left: 0; list-style-type: none; } .definition-item::marker, -.glossary-item::marker { +.gloss-item::marker { color: var(--text-color-light3); } -.glossary { +.gloss-content { white-space: pre-line; } .definition-disambiguation-list { @@ -1150,7 +1150,7 @@ button.action-button[data-icon=source-term]::before { .definition-disambiguation+.definition-disambiguation::before { content: var(--disambiguation-separator); } -.glossary-separator, +.gloss-separator, .inflection-separator { display: inline; font-size: 0; @@ -1256,14 +1256,14 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con display: inline; color: var(--text-color-light3); } -.entry[data-unique-expression-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-term-count='1'] .frequency-item[data-has-reading=false] .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-reading, .frequency-item[data-has-reading=false] .frequency-disambiguation-separator, .frequency-item[data-has-reading=false] .frequency-disambiguation-reading, -.entry[data-unique-expression-count='1'] .frequency-disambiguation-separator, -.entry[data-unique-expression-count='1'] .frequency-disambiguation-expression, +.entry[data-unique-term-count='1'] .frequency-disambiguation-separator, +.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-reading { display: none; @@ -1561,7 +1561,7 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con /* Glossary images */ -.glossary-image-container { +.gloss-image-container { display: inline-block; white-space: nowrap; max-width: 100%; @@ -1570,16 +1570,16 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con line-height: 0; font-size: calc(1em / var(--font-size-no-units)); overflow: hidden; - background-color: var(--glossary-image-background-color); + background-color: var(--gloss-image-background-color); } -.glossary-image-link { +.gloss-image-link { cursor: inherit; color: inherit; } -.glossary-image-link[href]:hover { +.gloss-image-link[href]:hover { cursor: pointer; } -.glossary-image-container-overlay { +.gloss-image-container-overlay { position: absolute; left: 0; top: 0; @@ -1592,7 +1592,7 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con white-space: normal; 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'; display: table-cell; width: 100%; @@ -1601,7 +1601,7 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con text-align: center; padding: 0.25em; } -.glossary-image { +.gloss-image { display: inline-block; position: absolute; left: 0; @@ -1613,30 +1613,30 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con border: none; outline: none; } -.glossary-image:not([src]) { +.gloss-image:not([src]) { display: none; } -.glossary-image[data-pixelated=true] { +.gloss-image[data-pixelated=true] { image-rendering: auto; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; image-rendering: crisp-edges; } -.glossary-image-aspect-ratio-sizer { +.gloss-image-aspect-ratio-sizer { content: ''; display: inline-block; width: 0; vertical-align: top; font-size: 0; } -.glossary-image-link-text::before { +.gloss-image-link-text::before { content: '['; } -.glossary-image-link-text::after { +.gloss-image-link-text::after { content: ']'; } -.glossary-image-description { +.gloss-image-description { white-space: pre-line; } @@ -1685,20 +1685,20 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con .kanji-glyph-data dd { margin-left: 0; } -.kanji-glossary-list { +.kanji-gloss-list { margin: 0; padding: 0 0 0 var(--list-padding1); list-style-type: decimal; } -.kanji-glossary-list[data-count='0'], -.kanji-glossary-list[data-count='1'] { +.kanji-gloss-list[data-count='0'], +.kanji-gloss-list[data-count='1'] { padding-left: 0; list-style-type: none; } -.kanji-glossary-item::marker { +.kanji-gloss-item::marker { color: var(--text-color-light3); } -.kanji-glossary { +.kanji-gloss-content { white-space: pre-line; } .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']) { display: inline; } -:root[data-glossary-layout-mode=compact] .glossary-list { +:root[data-glossary-layout-mode=compact] .gloss-list { display: inline; list-style: none; padding-left: 0; } -:root[data-glossary-layout-mode=compact] .glossary-item { +:root[data-glossary-layout-mode=compact] .gloss-item { 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; content: var(--compact-list-separator); display: inline; 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] { display: none; } @@ -2114,29 +2114,29 @@ button.footer-notification-close-button { 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; position: absolute; left: 0; top: 100%; 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%; top: auto; } -:root[data-glossary-layout-mode=compact] .glossary-image-link { +:root[data-glossary-layout-mode=compact] .gloss-image-link { position: relative; display: inline-block; } -:root[data-glossary-layout-mode=compact] .glossary-image-link:hover .glossary-image-container, -:root[data-glossary-layout-mode=compact] .glossary-image-link:focus .glossary-image-container { +:root[data-glossary-layout-mode=compact] .gloss-image-link:hover .gloss-image-container, +:root[data-glossary-layout-mode=compact] .gloss-image-link:focus .gloss-image-container { 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; } -:root:not([data-glossary-layout-mode=compact]) .glossary-image-description { +:root:not([data-glossary-layout-mode=compact]) .gloss-image-description { display: block; } diff --git a/ext/display-templates.html b/ext/display-templates.html index 25beacb0..6496b73e 100644 --- a/ext/display-templates.html +++ b/ext/display-templates.html @@ -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> <span class="entry-current-indicator-icon" title="Current entry"></span> </div> - <div class="expression-list"></div> - <div class="expression-list-details"> - <div class="expression-list-tag-list tag-list"></div> + <div class="headword-list"></div> + <div class="headword-list-details"> + <div class="headword-list-tag-list tag-list"></div> <div class="inflection-list"></div> </div> </div> @@ -30,19 +30,19 @@ </div> <div class="debug-info"><a class="debug-log-link">Log debug info to console</a></div> </div></template> -<template id="expression-template" data-remove-whitespace-text="true"><div class="expression"> - <div class="expression-text-container"> - <span class="expression-text-outer source-text"> - <span class="expression-current-indicator"></span> - <span class="expression-text"></span> +<template id="headword-template" data-remove-whitespace-text="true"><div class="headword"> + <div class="headword-text-container"> + <span class="headword-term-outer source-text"> + <span class="headword-current-indicator"></span> + <span class="headword-term"></span> </span> - <span class="expression-reading-outer"> - <span class="expression-reading"></span> + <span class="headword-reading-outer"> + <span class="headword-reading"></span> </span> </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> - <div class="expression-tag-list tag-list"></div> + <div class="headword-tag-list tag-list"></div> </div> </div></template> <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-tag-list tag-list"></div> <div class="definition-disambiguation-list"></div> - <ul class="glossary-list"></ul> + <ul class="gloss-list"></ul> </div> </div> </li></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="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-template"><li class="gloss-item click-scannable"><span class="gloss-separator"> </span><span class="gloss-content"></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> <!-- Frequency templates --> @@ -66,7 +66,7 @@ <span class="tag-label"><span class="tag-label-content"></span></span> <span class="tag-body"><span class="tag-body-content frequency-body"> <span class="frequency-disambiguation"><ruby> - <span class="frequency-disambiguation-expression"></span> + <span class="frequency-disambiguation-term"></span> <span class="frequency-disambiguation-separator"></span> <rt class="frequency-disambiguation-reading"></rt> </ruby></span> @@ -104,7 +104,7 @@ <span class="entry-current-indicator-icon" title="Current entry"></span> </div> <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> <div class="kanji-tag-list tag-list"></div> @@ -116,12 +116,12 @@ </div> <table class="kanji-glyph-data"><tbody> <tr> - <th>Glossary</th> + <th>Meaning</th> <th>Readings</th> <th>Statistics</th> </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-statistics"></td> </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-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-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> <!-- Tag templates --> diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js index 32699ec7..61c93b4a 100644 --- a/ext/js/display/display-generator.js +++ b/ext/js/display/display-generator.js @@ -53,12 +53,12 @@ class DisplayGenerator { createTermEntry(dictionaryEntry) { 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 pitchesContainer = node.querySelector('.pitch-accent-group-list'); const frequencyGroupListContainer = node.querySelector('.frequency-group-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 pitches = DictionaryDataUtil.getPitchAccentInfos(dictionaryEntry); @@ -74,11 +74,11 @@ class DisplayGenerator { } node.dataset.format = type; - node.dataset.expressionCount = `${headwords.length}`; + node.dataset.headwordCount = `${headwords.length}`; node.dataset.definitionCount = `${definitions.length}`; node.dataset.pitchAccentDictionaryCount = `${pitches.length}`; node.dataset.pitchAccentCount = `${pitchCount}`; - node.dataset.uniqueExpressionCount = `${uniqueTerms.size}`; + node.dataset.uniqueTermCount = `${uniqueTerms.size}`; node.dataset.uniqueReadingCount = `${uniqueReadings.size}`; node.dataset.frequencyCount = `${frequencies.length}`; node.dataset.groupedFrequencyCount = `${groupedFrequencies.length}`; @@ -93,14 +93,14 @@ class DisplayGenerator { this._appendMultiple(inflectionsContainer, this._createTermInflection.bind(this), inflections); this._appendMultiple(frequencyGroupListContainer, this._createFrequencyGroup.bind(this), groupedFrequencies, false); 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) { - termTagsContainer.appendChild(this._createSearchTag(term)); + headwordTagsContainer.appendChild(this._createSearchTag(term)); } for (const reading of uniqueReadings) { if (uniqueTerms.has(reading)) { continue; } - termTagsContainer.appendChild(this._createSearchTag(reading)); + headwordTagsContainer.appendChild(this._createSearchTag(reading)); } // Add definitions @@ -132,7 +132,7 @@ class DisplayGenerator { const glyphContainer = node.querySelector('.kanji-glyph'); const frequencyGroupListContainer = node.querySelector('.frequency-group-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 japaneseReadingsContainer = node.querySelector('.kanji-readings-japanese'); const statisticsContainer = node.querySelector('.kanji-statistics'); @@ -188,7 +188,7 @@ class DisplayGenerator { if (disambiguationHeadwords.length > 0 && disambiguationHeadwords.length < headwords.length) { const disambiguationContainer = node.querySelector('.tag-details-disambiguation-list'); - const copyAttributes = ['totalExpressionCount', 'matchedExpressionCount', 'unmatchedExpressionCount']; + const copyAttributes = ['totalHeadwordCount', 'matchedHeadwordCount', 'unmatchedHeadwordCount']; for (const attribute of copyAttributes) { const value = tagNode.dataset[attribute]; if (typeof value === 'undefined') { continue; } @@ -242,10 +242,10 @@ class DisplayGenerator { if (term) { searchQueries.push(term); } if (reading) { searchQueries.push(reading); } - const node = this._templates.instantiate('expression'); + const node = this._templates.instantiate('headword'); - const termContainer = node.querySelector('.expression-text'); - const tagContainer = node.querySelector('.expression-tag-list'); + const termContainer = node.querySelector('.headword-term'); + const tagContainer = node.querySelector('.headword-tag-list'); node.dataset.readingIsSame = `${reading === term}`; node.dataset.frequency = DictionaryDataUtil.getTermFrequency(tags); @@ -259,7 +259,7 @@ class DisplayGenerator { 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._appendMultiple(tagContainer, this._createTag.bind(this), tags); @@ -284,7 +284,7 @@ class DisplayGenerator { const tagListContainer = node.querySelector('.definition-tag-list'); const onlyListContainer = node.querySelector('.definition-disambiguation-list'); - const entriesContainer = node.querySelector('.glossary-list'); + const entriesContainer = node.querySelector('.gloss-list'); node.dataset.dictionary = dictionary; @@ -309,8 +309,8 @@ class DisplayGenerator { } _createTermDefinitionEntryText(text) { - const node = this._templates.instantiate('glossary-item'); - const container = node.querySelector('.glossary'); + const node = this._templates.instantiate('gloss-item'); + const container = node.querySelector('.gloss-content'); this._setMultilineTextContent(container, text); return node; } @@ -330,22 +330,22 @@ class DisplayGenerator { width / height ); - const node = this._templates.instantiate('glossary-item-image'); + const node = this._templates.instantiate('gloss-item-image'); node.dataset.path = path; node.dataset.dictionary = dictionary; node.dataset.imageLoadState = 'not-loaded'; - const imageContainer = node.querySelector('.glossary-image-container'); + const imageContainer = node.querySelector('.gloss-image-container'); imageContainer.style.width = `${usedWidth}em`; if (typeof title === 'string') { 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}%`; - const image = node.querySelector('img.glossary-image'); - const imageLink = node.querySelector('.glossary-image-link'); + const image = node.querySelector('img.gloss-image'); + const imageLink = node.querySelector('.gloss-image-link'); image.dataset.pixelated = `${pixelated === true}`; if (this._mediaLoader !== null) { @@ -358,7 +358,7 @@ class DisplayGenerator { } if (typeof description === 'string') { - const container = node.querySelector('.glossary-image-description'); + const container = node.querySelector('.gloss-image-description'); this._setMultilineTextContent(container, description); } @@ -386,14 +386,14 @@ class DisplayGenerator { _createKanjiLink(character) { const node = document.createElement('a'); - node.className = 'expression-kanji-link'; + node.className = 'headword-kanji-link'; this._setTextContent(node, character, 'ja'); return node; } _createKanjiDefinition(text) { - const node = this._templates.instantiate('kanji-glossary-item'); - const container = node.querySelector('.kanji-glossary'); + const node = this._templates.instantiate('kanji-gloss-item'); + const container = node.querySelector('.kanji-gloss-content'); this._setMultilineTextContent(container, text); return node; } @@ -452,9 +452,9 @@ class DisplayGenerator { const {tag, headwordIndices} = tagInfo; const node = this._createTag(tag); node.dataset.headwords = headwordIndices.join(' '); - node.dataset.totalExpressionCount = `${totalHeadwordCount}`; - node.dataset.matchedExpressionCount = `${headwordIndices.length}`; - node.dataset.unmatchedExpressionCount = `${Math.max(0, totalHeadwordCount - headwordIndices.length)}`; + node.dataset.totalHeadwordCount = `${totalHeadwordCount}`; + node.dataset.matchedHeadwordCount = `${headwordIndices.length}`; + node.dataset.unmatchedHeadwordCount = `${Math.max(0, totalHeadwordCount - headwordIndices.length)}`; return node; } @@ -549,7 +549,7 @@ class DisplayGenerator { const templateName = 'pitch-accent-disambiguation'; for (const term of exclusiveTerms) { const node = this._templates.instantiate(templateName); - node.dataset.type = 'expression'; + node.dataset.type = 'term'; this._setTextContent(node, term, 'ja'); container.appendChild(node); } @@ -562,7 +562,7 @@ class DisplayGenerator { } container.dataset.count = `${exclusiveTerms.length + exclusiveReadings.length}`; - container.dataset.expressionCount = `${exclusiveTerms.length}`; + container.dataset.termCount = `${exclusiveTerms.length}`; container.dataset.readingCount = `${exclusiveReadings.length}`; } @@ -639,11 +639,11 @@ class DisplayGenerator { 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-value'), frequency, 'ja'); - node.dataset.expression = term; + node.dataset.term = term; node.dataset.reading = reading; node.dataset.hasReading = `${reading !== null}`; node.dataset.readingIsSame = `${reading === term}`; diff --git a/ext/js/display/display.js b/ext/js/display/display.js index ab3ec7e1..fcfa0244 100644 --- a/ext/js/display/display.js +++ b/ext/js/display/display.js @@ -46,7 +46,7 @@ class Display extends EventDispatcher { this._japaneseUtil = japaneseUtil; this._documentFocusController = documentFocusController; this._hotkeyHandler = hotkeyHandler; - this._container = document.querySelector('#definitions'); + this._container = document.querySelector('#dictionary-entries'); this._dictionaryEntries = []; this._dictionaryEntryNodes = []; 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._addMultipleEventListeners(entry, '.action-add-note', 'click', this._onNoteAdd.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, '.tag-label', 'click', this._onTagClick.bind(this)); } diff --git a/ext/js/language/dictionary-database.js b/ext/js/language/dictionary-database.js index 98f56986..6b235fb6 100644 --- a/ext/js/language/dictionary-database.js +++ b/ext/js/language/dictionary-database.js @@ -392,7 +392,7 @@ class DictionaryDatabase { definitionTags: this._splitField(row.definitionTags || row.tags || ''), termTags: this._splitField(row.termTags || ''), rules: this._splitField(row.rules), - glossary: row.glossary, + definitions: row.glossary, score: row.score, dictionary: row.dictionary, id: row.id, @@ -407,7 +407,7 @@ class DictionaryDatabase { onyomi: this._splitField(row.onyomi), kunyomi: this._splitField(row.kunyomi), tags: this._splitField(row.tags), - glossary: row.meanings, + definitions: row.meanings, stats: row.stats, dictionary: row.dictionary }; diff --git a/ext/js/language/translator.js b/ext/js/language/translator.js index 68a55cf9..28634f9c 100644 --- a/ext/js/language/translator.js +++ b/ext/js/language/translator.js @@ -148,13 +148,13 @@ class Translator { this._sortDatabaseEntriesByIndex(databaseEntries); 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 tagGroups = []; 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); } @@ -960,7 +960,7 @@ class Translator { } _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 {index: dictionaryIndex, priority: dictionaryPriority} = this._getDictionaryOrder(dictionary, enabledDictionaryMap); const sourceTermExactMatchCount = (isPrimary && deinflectedText === term ? 1 : 0); @@ -984,7 +984,7 @@ class Translator { sourceTermExactMatchCount, maxTransformedTextLength, [this._createTermHeadword(0, term, reading, [source], headwordTagGroups, rules)], - [this._createTermDefinition(0, [0], dictionary, definitionTagGroups, glossary)] + [this._createTermDefinition(0, [0], dictionary, definitionTagGroups, definitions)] ); } diff --git a/ext/popup.html b/ext/popup.html index 76a0032b..622e98f3 100644 --- a/ext/popup.html +++ b/ext/popup.html @@ -32,7 +32,7 @@ <div id="query-parser-content" lang="ja"></div> </div> - <div id="definitions"></div> + <div id="dictionary-entries"></div> <div id="no-results" hidden> <div class="entry"> diff --git a/ext/search.html b/ext/search.html index d67dca45..41f3b92b 100644 --- a/ext/search.html +++ b/ext/search.html @@ -55,7 +55,7 @@ <div id="query-parser-content" lang="ja"></div> </div> - <div id="definitions"></div> + <div id="dictionary-entries"></div> <div id="no-results" hidden> <div class="entry"> |