alex/yomichan
1
Fork 0
Code Releases Activity

Refactor display styles (#1451)

Browse Source 
* term-expression => expression

* term-pitch-accent => pitch-accent

* term-reason => inflection, term-reasons => inflection-list

* term-details => expression-list-details

* term-glossary => glossary

* Update tag list classes

* term-definition => definition
This commit is contained in:
toasted-nutbread 2021-02-27 16:32:44 -05:00 committed by GitHub
parent c64a8eac1e
commit 8d3436fca3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 212 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

258
ext/css/display.css
View File

@ -795,47 +795,47 @@ button.action-button[data-icon=source-term]::before {
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
.term-expression-text-container { .expression-text-container {
display: inline-block; display: inline-block;
margin-left: calc(-1 * var(--expression-reading-space)); margin-left: calc(-1 * var(--expression-reading-space));
} }
.term-expression-text-outer { .expression-text-outer {
display: inline-block; display: inline-block;
position: relative; position: relative;
margin-left: var(--expression-reading-space); margin-left: var(--expression-reading-space);
} }
.term-expression-reading-outer { .expression-reading-outer {
display: none; display: none;
position: relative; position: relative;
margin-left: var(--expression-reading-space); margin-left: var(--expression-reading-space);
} }
.term-expression-text { .expression-text {
color: var(--expression-text-color); color: var(--expression-text-color);
font-size: var(--expression-font-size); font-size: var(--expression-font-size);
} }
.term-expression-reading { .expression-reading {
color: var(--expression-text-color); color: var(--expression-text-color);
font-size: var(--expression-reading-font-size); font-size: var(--expression-reading-font-size);
} }
.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-text-outer::after { .expression-list>.expression:not(:last-of-type)>.expression-text-container>.expression-text-outer::after {
content: var(--expression-separator); content: var(--expression-separator);
font-size: var(--expression-font-size); font-size: var(--expression-font-size);
} }
.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-reading-outer::after { .expression-list>.expression:not(:last-of-type)>.expression-text-container>.expression-reading-outer::after {
content: var(--expression-separator); content: var(--expression-separator);
font-size: var(--expression-reading-font-size); font-size: var(--expression-reading-font-size);
} }
.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .term-expression-text, .entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-text,
.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .term-expression-reading, .entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-reading,
.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .kanji-link { .entry[data-expression-multi=true] .expression[data-frequency=popular] .kanji-link {
color: var(--expression-text-color-popular); color: var(--expression-text-color-popular);
} }
.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .term-expression-text, .entry[data-expression-multi=true] .expression[data-frequency=rare] .expression-text,
.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .term-expression-reading, .entry[data-expression-multi=true] .expression[data-frequency=rare] .expression-reading,
.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .kanji-link { .entry[data-expression-multi=true] .expression[data-frequency=rare] .kanji-link {
color: var(--expression-text-color-rare); color: var(--expression-text-color-rare);
} }
.term-expression-text>ruby>rt { .expression-text>ruby>rt {
color: var(--expression-furigana-text-color); color: var(--expression-furigana-text-color);
} }
.entry-header2, .entry-header2,
@ -845,60 +845,60 @@ button.action-button[data-icon=source-term]::before {
.entry+.entry { .entry+.entry {
border-top: var(--thin-border-size) solid var(--light-border-color); border-top: var(--thin-border-size) solid var(--light-border-color);
} }
.term-reasons { .inflection-list {
display: inline-block; display: inline-block;
color: var(--reason-text-color); color: var(--reason-text-color);
} }
.term-reasons:empty { .inflection-list:empty {
display: none; display: none;
} }
.term-reasons>.term-reason+.term-reason-separator+.term-reason::before { .inflection-list>.inflection+.inflection-separator+.inflection::before {
content: ' \00AB '; /* The two spaces is not a typo */ content: ' \00AB '; /* The two spaces is not a typo */
white-space: pre-wrap; white-space: pre-wrap;
display: inline; display: inline;
} }
.term-expression-list { .expression-list {
display: inline; display: inline;
margin-right: var(--expression-list-end-space); margin-right: var(--expression-list-end-space);
} }
.term-expression { .expression {
display: inline-block; display: inline-block;
} }
.term-expression-details { .expression-details {
display: inline; display: inline;
} }
.term-expression-details>.tags { .expression-tag-list {
display: none; display: none;
} }
.term-expression-details>.frequencies { .expression-details>.frequencies {
display: none; display: none;
} }
.term-details { .expression-list-details {
display: inline; display: inline;
} }
.term-tags { .expression-list-tag-list {
display: inline; display: inline;
} }
.entry[data-expression-multi=true] .term-details { .entry[data-expression-multi=true] .expression-list-details {
display: block; display: block;
} }
:root[data-term-display-mode=ruby-and-reading] .term-expression-text-outer::after, :root[data-term-display-mode=ruby-and-reading] .expression-text-outer::after,
:root[data-term-display-mode=term-and-reading] .term-expression-text-outer::after { :root[data-term-display-mode=term-and-reading] .expression-text-outer::after {
display: none; display: none;
} }
:root[data-term-display-mode=ruby-and-reading] .term-expression-reading-outer, :root[data-term-display-mode=ruby-and-reading] .expression-reading-outer,
:root[data-term-display-mode=term-and-reading] .term-expression-reading-outer { :root[data-term-display-mode=term-and-reading] .expression-reading-outer {
display: inline-block; display: inline-block;
} }
:root[data-term-display-mode=ruby-and-reading] .term-expression[data-reading-is-same=true] .term-expression-text-outer::after, :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] .term-expression[data-reading-is-same=true] .term-expression-text-outer::after { :root[data-term-display-mode=term-and-reading] .expression[data-reading-is-same=true] .expression-text-outer::after {
display: inline-block; display: inline-block;
} }
:root[data-term-display-mode=ruby-and-reading] .term-expression[data-reading-is-same=true] .term-expression-reading-outer, :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] .term-expression[data-reading-is-same=true] .term-expression-reading-outer { :root[data-term-display-mode=term-and-reading] .expression[data-reading-is-same=true] .expression-reading-outer {
display: none; display: none;
} }
:root[data-term-display-mode=term-and-reading] .term-expression-text>ruby>rt { :root[data-term-display-mode=term-and-reading] .expression-text>ruby>rt {
display: none; display: none;
} }
@ -961,7 +961,7 @@ button.action-button[data-icon=source-term]::before {
/* Triangle entry indicator */ /* Triangle entry indicator */
.term-expression-current-indicator { .expression-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));
@ -973,17 +973,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);
} }
.term-expression-text .term-expression-current-indicator { .expression-text .expression-current-indicator {
font-size: calc(1em / var(--expression-font-size-no-units)); font-size: calc(1em / var(--expression-font-size-no-units));
} }
.entry.entry-current .term-expression-current-indicator { .entry.entry-current .expression-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;
} }
.term-expression-current-indicator::after { .expression-current-indicator::after {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
@ -1003,8 +1003,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);
} }
.term-expression:not(:first-of-type) .term-expression-current-indicator, .expression:not(:first-of-type) .expression-current-indicator,
:root:not([data-popup-current-indicator-mode=triangle]) .term-expression-current-indicator { :root:not([data-popup-current-indicator-mode=triangle]) .expression-current-indicator {
display: none; display: none;
transition: none; transition: none;
} }
@ -1033,7 +1033,7 @@ button.action-button[data-icon=source-term]::before {
/* Merged term styles */ /* Merged term styles */
.entry[data-expression-multi=true] .term-expression-list .term-expression-details { .entry[data-expression-multi=true] .expression-list .expression-details {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 0; width: 0;
@ -1041,78 +1041,78 @@ button.action-button[data-icon=source-term]::before {
visibility: hidden; visibility: hidden;
z-index: 1; z-index: 1;
} }
.entry[data-expression-multi=true] .term-expression-list>.term-expression:not(:last-of-type) .term-expression-details { .entry[data-expression-multi=true] .expression-list>.expression:not(:last-of-type) .expression-details {
left: calc(-1 * var(--expression-font-size)); left: calc(-1 * var(--expression-font-size));
} }
.entry[data-expression-multi=true] .term-expression:hover .term-expression-details { .entry[data-expression-multi=true] .expression:hover .expression-details {
visibility: visible; visibility: visible;
} }
.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.action-play-audio { .entry[data-expression-multi=true] .expression-list .expression-details>.action-play-audio {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0.5em; bottom: 0.5em;
} }
.entry:not([data-expression-multi=true]) .term-expression-list .term-expression-details>.action-play-audio { .entry:not([data-expression-multi=true]) .expression-list .expression-details>.action-play-audio {
display: none; display: none;
} }
.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.tags { .entry[data-expression-multi=true] .expression-list .expression-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;
} }
.entry[data-type=term][data-expression-multi=true] .term-tags>.tag[data-category=search] { .entry[data-type=term][data-expression-multi=true] .expression-list-tag-list>.tag[data-category=search] {
display: none; display: none;
} }
/* Definitions */ /* Definitions */
.term-definition-list { .definition-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;
} }
.term-definition-list[data-count='0'], .definition-list[data-count='0'],
.term-definition-list[data-count='1'] { .definition-list[data-count='1'] {
padding-left: 0; padding-left: 0;
list-style-type: none; list-style-type: none;
} }
.term-glossary-list { .glossary-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;
} }
.term-glossary-list[data-count='0'], .glossary-list[data-count='0'],
.term-glossary-list[data-count='1'] { .glossary-list[data-count='1'] {
padding-left: 0; padding-left: 0;
list-style-type: none; list-style-type: none;
} }
.term-definition-item::marker, .definition-item::marker,
.term-glossary-item::marker { .glossary-item::marker {
color: var(--text-color-light3); color: var(--text-color-light3);
} }
.term-glossary { .glossary {
white-space: pre-line; white-space: pre-line;
} }
.term-definition-disambiguation-list { .definition-disambiguation-list {
color: var(--text-color-light3); color: var(--text-color-light3);
padding-right: var(--disambiguation-space); padding-right: var(--disambiguation-space);
} }
.term-definition-disambiguation-list[data-count='0'] { .definition-disambiguation-list[data-count='0'] {
display: none; display: none;
} }
.term-definition-disambiguation-list::before { .definition-disambiguation-list::before {
content: var(--disambiguation-prefix); content: var(--disambiguation-prefix);
} }
.term-definition-disambiguation-list::after { .definition-disambiguation-list::after {
content: var(--disambiguation-suffix); content: var(--disambiguation-suffix);
} }
.term-definition-disambiguation+.term-definition-disambiguation::before { .definition-disambiguation+.definition-disambiguation::before {
content: var(--disambiguation-separator); content: var(--disambiguation-separator);
} }
.term-glossary-separator, .glossary-separator,
.term-reason-separator { .inflection-separator {
display: inline; display: inline;
font-size: 0; font-size: 0;
opacity: 0; opacity: 0;
@ -1320,70 +1320,70 @@ button.action-button[data-icon=source-term]::before {
/* Pitch accent styles */ /* Pitch accent styles */
.term-pitch-accent-group-list { .pitch-accent-group-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;
} }
.term-pitch-accent-group-list[data-count='0'], .pitch-accent-group-list[data-count='0'],
.term-pitch-accent-group-list[data-count='1'] { .pitch-accent-group-list[data-count='1'] {
padding-left: 0; padding-left: 0;
list-style-type: none; list-style-type: none;
} }
.term-pitch-accent-list { .pitch-accent-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;
display: block; display: block;
} }
.term-pitch-accent-list[data-count='0'], .pitch-accent-list[data-count='0'],
.term-pitch-accent-list[data-count='1'] { .pitch-accent-list[data-count='1'] {
padding-left: 0; padding-left: 0;
list-style-type: none; list-style-type: none;
display: inline; display: inline;
} }
.term-pitch-accent-group::marker, .pitch-accent-group::marker,
.term-pitch-accent::marker { .pitch-accent::marker {
color: var(--text-color-light3); color: var(--text-color-light3);
} }
.term-pitch-accent { .pitch-accent {
display: list-item; display: list-item;
line-height: 1.5; line-height: 1.5;
} }
.term-pitch-accent-list[data-count='0'] .term-pitch-accent, .pitch-accent-list[data-count='0'] .pitch-accent,
.term-pitch-accent-list[data-count='1'] .term-pitch-accent { .pitch-accent-list[data-count='1'] .pitch-accent {
display: inline; display: inline;
} }
.term-pitch-accent-group-tag-list { .pitch-accent-group-tag-list {
margin-right: 0.375em; margin-right: 0.375em;
} }
.term-pitch-accent-disambiguation-list { .pitch-accent-disambiguation-list {
color: var(--text-color-light3); color: var(--text-color-light3);
padding-right: var(--disambiguation-space); padding-right: var(--disambiguation-space);
} }
.term-pitch-accent-disambiguation-list::before { .pitch-accent-disambiguation-list::before {
content: var(--disambiguation-prefix); content: var(--disambiguation-prefix);
} }
.term-pitch-accent-disambiguation-list::after { .pitch-accent-disambiguation-list::after {
content: var(--disambiguation-suffix); content: var(--disambiguation-suffix);
} }
.term-pitch-accent-disambiguation+.term-pitch-accent-disambiguation::before { .pitch-accent-disambiguation+.pitch-accent-disambiguation::before {
content: var(--disambiguation-separator); content: var(--disambiguation-separator);
} }
.term-pitch-accent-disambiguation-list[data-count='0'] { .pitch-accent-disambiguation-list[data-count='0'] {
display: none; display: none;
} }
.term-pitch-accent-tag-list:not([data-count='0']) { .pitch-accent-tag-list:not([data-count='0']) {
margin-right: 0.375em; margin-right: 0.375em;
} }
.term-pitch-accent-character { .pitch-accent-character {
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
.term-pitch-accent-character::before { .pitch-accent-character::before {
border-color: var(--pitch-accent-annotation-color); border-color: var(--pitch-accent-annotation-color);
} }
.term-pitch-accent-character[data-pitch='high']::before { .pitch-accent-character[data-pitch='high']::before {
content: ''; content: '';
display: block; display: block;
user-select: none; user-select: none;
@ -1396,23 +1396,23 @@ button.action-button[data-icon=source-term]::before {
border-top-width: 0.1em; border-top-width: 0.1em;
border-top-style: solid; border-top-style: solid;
} }
.term-pitch-accent-character[data-pitch='high'][data-pitch-next='low']::before { .pitch-accent-character[data-pitch='high'][data-pitch-next='low']::before {
right: -0.1em; right: -0.1em;
height: 0.4em; height: 0.4em;
border-right-width: 0.1em; border-right-width: 0.1em;
border-right-style: solid; border-right-style: solid;
} }
.term-pitch-accent-character[data-pitch='high'][data-pitch-next='low'] { .pitch-accent-character[data-pitch='high'][data-pitch-next='low'] {
padding-right: 0.1em; padding-right: 0.1em;
margin-right: 0.1em; margin-right: 0.1em;
} }
.term-pitch-accent-position::before { .pitch-accent-position::before {
content: ' ['; content: ' [';
} }
.term-pitch-accent-position::after { .pitch-accent-position::after {
content: ']'; content: ']';
} }
.term-pitch-accent-details { .pitch-accent-details {
display: inline-block; display: inline-block;
height: 0; height: 0;
padding: 0 0.25em; padding: 0 0.25em;
@ -1421,34 +1421,34 @@ button.action-button[data-icon=source-term]::before {
/* Pitch accent graph styles */ /* Pitch accent graph styles */
.term-pitch-accent-graph { .pitch-accent-graph {
display: block; display: block;
height: 1.5em; height: 1.5em;
transform: translateY(-0.875em); transform: translateY(-0.875em);
} }
.term-pitch-accent-graph-line, .pitch-accent-graph-line,
.term-pitch-accent-graph-line-tail { .pitch-accent-graph-line-tail {
fill: none; fill: none;
stroke: var(--pitch-accent-annotation-color); stroke: var(--pitch-accent-annotation-color);
stroke-width: 5; stroke-width: 5;
} }
.term-pitch-accent-graph-line-tail { .pitch-accent-graph-line-tail {
stroke-dasharray: 5 5; stroke-dasharray: 5 5;
} }
#term-pitch-accent-graph-dot { #pitch-accent-graph-dot {
fill: var(--pitch-accent-annotation-color); fill: var(--pitch-accent-annotation-color);
stroke: var(--pitch-accent-annotation-color); stroke: var(--pitch-accent-annotation-color);
stroke-width: 5; stroke-width: 5;
} }
#term-pitch-accent-graph-dot-downstep { #pitch-accent-graph-dot-downstep {
fill: none; fill: none;
stroke: var(--pitch-accent-annotation-color); stroke: var(--pitch-accent-annotation-color);
stroke-width: 5; stroke-width: 5;
} }
#term-pitch-accent-graph-dot-downstep>circle:last-of-type { #pitch-accent-graph-dot-downstep>circle:last-of-type {
fill: var(--pitch-accent-annotation-color); fill: var(--pitch-accent-annotation-color);
} }
#term-pitch-accent-graph-triangle { #pitch-accent-graph-triangle {
fill: none; fill: none;
stroke: var(--pitch-accent-annotation-color); stroke: var(--pitch-accent-annotation-color);
stroke-width: 5; stroke-width: 5;
@ -1456,7 +1456,7 @@ button.action-button[data-icon=source-term]::before {
/* Glossary images */ /* Glossary images */
.term-glossary-image-container { .glossary-image-container {
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
max-width: 100%; max-width: 100%;
@ -1467,14 +1467,14 @@ button.action-button[data-icon=source-term]::before {
overflow: hidden; overflow: hidden;
background-color: var(--glossary-image-background-color); background-color: var(--glossary-image-background-color);
} }
.term-glossary-image-link { .glossary-image-link {
cursor: inherit; cursor: inherit;
color: inherit; color: inherit;
} }
.term-glossary-image-link[href]:hover { .glossary-image-link[href]:hover {
cursor: pointer; cursor: pointer;
} }
.term-glossary-image-container-overlay { .glossary-image-container-overlay {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -1487,7 +1487,7 @@ button.action-button[data-icon=source-term]::before {
white-space: normal; white-space: normal;
color: var(--text-color-light3); color: var(--text-color-light3);
} }
.term-glossary-item[data-has-image=true][data-image-load-state=load-error] .term-glossary-image-container-overlay::after { .glossary-item[data-has-image=true][data-image-load-state=load-error] .glossary-image-container-overlay::after {
content: 'Image failed to load'; content: 'Image failed to load';
display: table-cell; display: table-cell;
width: 100%; width: 100%;
@ -1496,7 +1496,7 @@ button.action-button[data-icon=source-term]::before {
text-align: center; text-align: center;
padding: 0.25em; padding: 0.25em;
} }
.term-glossary-image { .glossary-image {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
left: 0; left: 0;
@ -1508,30 +1508,30 @@ button.action-button[data-icon=source-term]::before {
border: none; border: none;
outline: none; outline: none;
} }
.term-glossary-image:not([src]) { .glossary-image:not([src]) {
display: none; display: none;
} }
.term-glossary-image[data-pixelated=true] { .glossary-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;
} }
.term-glossary-image-aspect-ratio-sizer { .glossary-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;
} }
.term-glossary-image-link-text::before { .glossary-image-link-text::before {
content: '['; content: '[';
} }
.term-glossary-image-link-text::after { .glossary-image-link-text::after {
content: ']'; content: ']';
} }
.term-glossary-image-description { .glossary-image-description {
white-space: pre-line; white-space: pre-line;
} }
@ -1954,77 +1954,77 @@ button.footer-notification-close-button {
:root[data-audio-enabled=false] .action-play-audio { :root[data-audio-enabled=false] .action-play-audio {
display: none; display: none;
} }
:root[data-glossary-layout-mode=compact] .term-definition-tag-list, :root[data-glossary-layout-mode=compact] .definition-tag-list,
:root[data-glossary-layout-mode=compact] .term-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] .term-glossary-list { :root[data-glossary-layout-mode=compact] .glossary-list {
display: inline; display: inline;
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
} }
:root[data-glossary-layout-mode=compact] .term-glossary-item { :root[data-glossary-layout-mode=compact] .glossary-item {
display: inline; display: inline;
} }
:root[data-glossary-layout-mode=compact] .term-glossary-item:not(:first-child)::before { :root[data-glossary-layout-mode=compact] .glossary-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] .term-pitch-accent-disambiguation-list[data-expression-count='0'], :root[data-show-pitch-accent-downstep-notation=true] .pitch-accent-disambiguation-list[data-expression-count='0'],
:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation[data-type=reading] { :root[data-show-pitch-accent-downstep-notation=true] .pitch-accent-disambiguation[data-type=reading] {
display: none; display: none;
} }
:root[data-show-pitch-accent-downstep-notation=false] .term-pitch-accent-characters { :root[data-show-pitch-accent-downstep-notation=false] .pitch-accent-characters {
display: none; display: none;
} }
:root[data-show-pitch-accent-position-notation=false] .term-pitch-accent-position { :root[data-show-pitch-accent-position-notation=false] .pitch-accent-position {
display: none; display: none;
} }
:root[data-show-pitch-accent-graph=false] .term-pitch-accent-details { :root[data-show-pitch-accent-graph=false] .pitch-accent-details {
display: none; display: none;
} }
:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .term-pitch-accent-list:not([data-has-tags=true]) { :root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .pitch-accent-list:not([data-has-tags=true]) {
display: inline; display: inline;
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
} }
:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .term-pitch-accent-list:not([data-has-tags=true]) .term-pitch-accent { :root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .pitch-accent-list:not([data-has-tags=true]) .pitch-accent {
display: inline; display: inline;
} }
:root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .term-pitch-accent-list:not([data-has-tags=true]) .term-pitch-accent:not(:first-child)::before { :root[data-glossary-layout-mode=compact][data-show-pitch-accent-graph=false] .pitch-accent-list:not([data-has-tags=true]) .pitch-accent: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-glossary-layout-mode=compact] .term-glossary-image-container { :root[data-glossary-layout-mode=compact] .glossary-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)) .term-glossary-image-container { :root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .glossary-image-container {
bottom: 100%; bottom: 100%;
top: auto; top: auto;
} }
:root[data-glossary-layout-mode=compact] .term-glossary-image-link { :root[data-glossary-layout-mode=compact] .glossary-image-link {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
:root[data-glossary-layout-mode=compact] .term-glossary-image-link:hover .term-glossary-image-container, :root[data-glossary-layout-mode=compact] .glossary-image-link:hover .glossary-image-container,
:root[data-glossary-layout-mode=compact] .term-glossary-image-link:focus .term-glossary-image-container { :root[data-glossary-layout-mode=compact] .glossary-image-link:focus .glossary-image-container {
display: block; display: block;
} }
:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-link-text { :root:not([data-glossary-layout-mode=compact]) .glossary-image-link-text {
display: none; display: none;
} }
:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-description { :root:not([data-glossary-layout-mode=compact]) .glossary-image-description {
display: block; display: block;
} }

60
ext/display-templates.html
View File

@ -13,11 +13,11 @@
<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="term-expression-list"></div> <div class="expression-list"></div>
</div> </div>
<div class="term-details"> <div class="expression-list-details">
<div class="term-tags tag-list"></div> <div class="expression-list-tag-list tag-list"></div>
<div class="term-reasons"></div> <div class="inflection-list"></div>
</div> </div>
</div> </div>
</div> </div>
@ -26,34 +26,34 @@
<div class="entry-body-section-content frequency-group-list"></div> <div class="entry-body-section-content frequency-group-list"></div>
</div> </div>
<div class="entry-body-section" data-section-type="pitch-accents"> <div class="entry-body-section" data-section-type="pitch-accents">
<ol class="entry-body-section-content term-pitch-accent-group-list"></ol> <ol class="entry-body-section-content pitch-accent-group-list"></ol>
</div> </div>
<div class="entry-body-section" data-section-type="definitions"> <div class="entry-body-section" data-section-type="definitions">
<ol class="entry-body-section-content term-definition-list"></ol> <ol class="entry-body-section-content definition-list"></ol>
</div> </div>
</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="term-expression-template" data-remove-whitespace-text="true"><div class="term-expression"> <template id="expression-template" data-remove-whitespace-text="true"><div class="expression">
<div class="term-expression-text-container" lang="ja"> <div class="expression-text-container" lang="ja">
<span class="term-expression-text-outer source-text"> <span class="expression-text-outer source-text">
<span class="term-expression-current-indicator"></span> <span class="expression-current-indicator"></span>
<span class="term-expression-text"></span> <span class="expression-text"></span>
</span> </span>
<span class="term-expression-reading-outer"> <span class="expression-reading-outer">
<span class="term-expression-reading"></span> <span class="expression-reading"></span>
</span> </span>
</div> </div>
<div class="term-expression-details"> <div class="expression-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="tags tag-list"></div> <div class="expression-tag-list tag-list"></div>
</div> </div>
</div></template> </div></template>
<template id="term-definition-item-template"><li class="term-definition-item"><div class="term-definition-tag-list tag-list"></div><div class="term-definition-disambiguation-list"></div><ul class="term-glossary-list"></ul></li></template> <template id="definition-item-template"><li class="definition-item"><div class="definition-tag-list tag-list"></div><div class="definition-disambiguation-list"></div><ul class="glossary-list"></ul></li></template>
<template id="term-definition-disambiguation-template"><span class="term-definition-disambiguation"></span></template> <template id="definition-disambiguation-template"><span class="definition-disambiguation"></span></template>
<template id="term-glossary-item-template"><li class="term-glossary-item click-scannable"><span class="term-glossary-separator"> </span><span class="term-glossary"></span></li></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="term-glossary-item-image-template"><li class="term-glossary-item click-scannable" data-has-image="true"><span class="term-glossary-separator"> </span><span class="term-glossary"><a class="term-glossary-image-link" target="_blank" rel="noreferrer noopener"><span class="term-glossary-image-container"><span class="term-glossary-image-aspect-ratio-sizer"></span><img class="term-glossary-image" alt=""><span class="term-glossary-image-container-overlay"></span></span><span class="term-glossary-image-link-text">Image</span></a> <span class="term-glossary-image-description"></span></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="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator"> </span></template> <template id="inflection-template"><span class="inflection"></span><span class="inflection-separator"> </span></template>
<!-- Frequency templates --> <!-- Frequency templates -->
<template id="frequency-group-item-template"><span class="frequency-group-item"><span class="tag tag-has-body frequency-group-tag" data-category="frequency"><span class="tag-label"><span class="tag-label-content"></span></span><span class="tag-body"><span class="tag-body-content frequency-list"></span></span></span></span></template> <template id="frequency-group-item-template"><span class="frequency-group-item"><span class="tag tag-has-body frequency-group-tag" data-category="frequency"><span class="tag-label"><span class="tag-label-content"></span></span><span class="tag-body"><span class="tag-body-content frequency-list"></span></span></span></span></template>
@ -77,17 +77,17 @@
</span></span></template> </span></span></template>
<!-- Pitch accent templates --> <!-- Pitch accent templates -->
<template id="term-pitch-accent-static-template"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;" focusable="false"> <template id="pitch-accent-static-template"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;" focusable="false">
<defs> <defs>
<g id="term-pitch-accent-graph-dot"><circle cx="0" cy="0" r="15" /></g> <g id="pitch-accent-graph-dot"><circle cx="0" cy="0" r="15" /></g>
<g id="term-pitch-accent-graph-dot-downstep"><circle cx="0" cy="0" r="15" /><circle cx="0" cy="0" r="5" /></g> <g id="pitch-accent-graph-dot-downstep"><circle cx="0" cy="0" r="15" /><circle cx="0" cy="0" r="5" /></g>
<g id="term-pitch-accent-graph-triangle"><path d="M0 13 L15 -13 L-15 -13 Z" /></g> <g id="pitch-accent-graph-triangle"><path d="M0 13 L15 -13 L-15 -13 Z" /></g>
</defs> </defs>
</svg></template> </svg></template>
<template id="term-pitch-accent-group-template"><li class="term-pitch-accent-group"><span class="term-pitch-accent-group-tag-list tag-list"></span><ul class="term-pitch-accent-list"></ul></li></template> <template id="pitch-accent-group-template"><li class="pitch-accent-group"><span class="pitch-accent-group-tag-list tag-list"></span><ul class="pitch-accent-list"></ul></li></template>
<template id="term-pitch-accent-disambiguation-template"><span class="term-pitch-accent-disambiguation"></span></template> <template id="pitch-accent-disambiguation-template"><span class="pitch-accent-disambiguation"></span></template>
<template id="term-pitch-accent-template"><li class="term-pitch-accent"><span class="term-pitch-accent-tag-list tag-list"></span><span class="term-pitch-accent-disambiguation-list"></span><span class="term-pitch-accent-characters"></span><span class="term-pitch-accent-position"></span><span class="term-pitch-accent-details"><svg class="term-pitch-accent-graph" xmlns="http://www.w3.org/2000/svg" focusable="false"><path class="term-pitch-accent-graph-line" /><path class="term-pitch-accent-graph-line-tail" /></svg></span></li></template> <template id="pitch-accent-template"><li class="pitch-accent"><span class="pitch-accent-tag-list tag-list"></span><span class="pitch-accent-disambiguation-list"></span><span class="pitch-accent-characters"></span><span class="pitch-accent-position"></span><span class="pitch-accent-details"><svg class="pitch-accent-graph" xmlns="http://www.w3.org/2000/svg" focusable="false"><path class="pitch-accent-graph-line" /><path class="pitch-accent-graph-line-tail" /></svg></span></li></template>
<template id="term-pitch-accent-character-template"><span class="term-pitch-accent-character"><span class="term-pitch-accent-character-inner"></span></span></template> <template id="pitch-accent-character-template"><span class="pitch-accent-character"><span class="pitch-accent-character-inner"></span></span></template>
<!-- Kanji entry templates --> <!-- Kanji entry templates -->
<template id="kanji-entry-template" data-remove-whitespace-text="true"><div class="entry" data-type="kanji"> <template id="kanji-entry-template" data-remove-whitespace-text="true"><div class="entry" data-type="kanji">
@ -101,13 +101,13 @@
<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="term-expression-current-indicator"></span> <span class="expression-current-indicator"></span>
<div class="kanji-glyph source-text"></div> <div class="kanji-glyph source-text"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="tags tag-list"></div> <div class="kanji-tag-list tag-list"></div>
<div class="entry-body"> <div class="entry-body">
<div class="entry-body-section" data-section-type="frequencies"> <div class="entry-body-section" data-section-type="frequencies">
<div class="entry-body-section-content frequency-group-list"></div> <div class="entry-body-section-content frequency-group-list"></div>

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

@ -279,7 +279,7 @@ class DisplayAudio {
} }
_getAudioPlayButtonExpressionIndex(button) { _getAudioPlayButtonExpressionIndex(button) {
const expressionNode = button.closest('.term-expression'); const expressionNode = button.closest('.expression');
if (expressionNode !== null) { if (expressionNode !== null) {
const expressionIndex = parseInt(expressionNode.dataset.index, 10); const expressionIndex = parseInt(expressionNode.dataset.index, 10);
if (Number.isFinite(expressionIndex)) { return expressionIndex; } if (Number.isFinite(expressionIndex)) { return expressionIndex; }
@ -293,7 +293,7 @@ class DisplayAudio {
if (definitionIndex >= 0 && definitionIndex < definitionNodes.length) { if (definitionIndex >= 0 && definitionIndex < definitionNodes.length) {
const node = definitionNodes[definitionIndex]; const node = definitionNodes[definitionIndex];
const button1 = (expressionIndex === 0 ? node.querySelector('.action-play-audio') : null); const button1 = (expressionIndex === 0 ? node.querySelector('.action-play-audio') : null);
const button2 = node.querySelector(`.term-expression:nth-of-type(${expressionIndex + 1}) .action-play-audio`); const button2 = node.querySelector(`.expression:nth-of-type(${expressionIndex + 1}) .action-play-audio`);
if (button1 !== null) { results.push(button1); } if (button1 !== null) { results.push(button1); }
if (button2 !== null) { results.push(button2); } if (button2 !== null) { results.push(button2); }
} }

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

@ -46,19 +46,19 @@ class DisplayGenerator {
preparePitchAccents() { preparePitchAccents() {
if (this._termPitchAccentStaticTemplateIsSetup) { return; } if (this._termPitchAccentStaticTemplateIsSetup) { return; }
this._termPitchAccentStaticTemplateIsSetup = true; this._termPitchAccentStaticTemplateIsSetup = true;
const t = this._templates.instantiate('term-pitch-accent-static'); const t = this._templates.instantiate('pitch-accent-static');
document.head.appendChild(t); document.head.appendChild(t);
} }
createTermEntry(details) { createTermEntry(details) {
const node = this._templates.instantiate('term-entry'); const node = this._templates.instantiate('term-entry');
const expressionsContainer = node.querySelector('.term-expression-list'); const expressionsContainer = node.querySelector('.expression-list');
const reasonsContainer = node.querySelector('.term-reasons'); const reasonsContainer = node.querySelector('.inflection-list');
const pitchesContainer = node.querySelector('.term-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('.term-definition-list'); const definitionsContainer = node.querySelector('.definition-list');
const termTagsContainer = node.querySelector('.term-tags'); const termTagsContainer = node.querySelector('.expression-list-tag-list');
const {expressions, type, reasons, frequencies} = details; const {expressions, type, reasons, frequencies} = details;
const definitions = (type === 'term' ? [details] : details.definitions); const definitions = (type === 'term' ? [details] : details.definitions);
@ -129,7 +129,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('.tags'); const tagContainer = node.querySelector('.kanji-tag-list');
const glossaryContainer = node.querySelector('.kanji-glossary-list'); const glossaryContainer = node.querySelector('.kanji-glossary-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');
@ -235,15 +235,15 @@ class DisplayGenerator {
if (expression) { searchQueries.push(expression); } if (expression) { searchQueries.push(expression); }
if (reading) { searchQueries.push(reading); } if (reading) { searchQueries.push(reading); }
const node = this._templates.instantiate('term-expression'); const node = this._templates.instantiate('expression');
const expressionContainer = node.querySelector('.term-expression-text'); const expressionContainer = node.querySelector('.expression-text');
const tagContainer = node.querySelector('.tags'); const tagContainer = node.querySelector('.expression-tag-list');
node.dataset.readingIsSame = `${!reading || reading === expression}`; node.dataset.readingIsSame = `${!reading || reading === expression}`;
node.dataset.frequency = termFrequency; node.dataset.frequency = termFrequency;
this._setTextContent(node.querySelector('.term-expression-reading'), reading.length > 0 ? reading : expression); this._setTextContent(node.querySelector('.expression-reading'), reading.length > 0 ? reading : expression);
this._appendFurigana(expressionContainer, furiganaSegments, this._appendKanjiLinks.bind(this)); this._appendFurigana(expressionContainer, furiganaSegments, this._appendKanjiLinks.bind(this));
this._appendMultiple(tagContainer, this._createTag.bind(this), termTags); this._appendMultiple(tagContainer, this._createTag.bind(this), termTags);
@ -253,19 +253,19 @@ class DisplayGenerator {
} }
_createTermReason(reason) { _createTermReason(reason) {
const fragment = this._templates.instantiateFragment('term-reason'); const fragment = this._templates.instantiateFragment('inflection');
const node = fragment.querySelector('.term-reason'); const node = fragment.querySelector('.inflection');
this._setTextContent(node, reason); this._setTextContent(node, reason);
node.dataset.reason = reason; node.dataset.reason = reason;
return fragment; return fragment;
} }
_createTermDefinitionItem(details, dictionaryTag) { _createTermDefinitionItem(details, dictionaryTag) {
const node = this._templates.instantiate('term-definition-item'); const node = this._templates.instantiate('definition-item');
const tagListContainer = node.querySelector('.term-definition-tag-list'); const tagListContainer = node.querySelector('.definition-tag-list');
const onlyListContainer = node.querySelector('.term-definition-disambiguation-list'); const onlyListContainer = node.querySelector('.definition-disambiguation-list');
const glossaryContainer = node.querySelector('.term-glossary-list'); const glossaryContainer = node.querySelector('.glossary-list');
const {dictionary, definitionTags} = details; const {dictionary, definitionTags} = details;
node.dataset.dictionary = dictionary; node.dataset.dictionary = dictionary;
@ -291,8 +291,8 @@ class DisplayGenerator {
} }
_createTermGlossaryItemText(glossary) { _createTermGlossaryItemText(glossary) {
const node = this._templates.instantiate('term-glossary-item'); const node = this._templates.instantiate('glossary-item');
const container = node.querySelector('.term-glossary'); const container = node.querySelector('.glossary');
this._setTextContent(container, glossary); this._setTextContent(container, glossary);
return node; return node;
} }
@ -312,22 +312,22 @@ class DisplayGenerator {
width / height width / height
); );
const node = this._templates.instantiate('term-glossary-item-image'); const node = this._templates.instantiate('glossary-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('.term-glossary-image-container'); const imageContainer = node.querySelector('.glossary-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('.term-glossary-image-aspect-ratio-sizer'); const aspectRatioSizer = node.querySelector('.glossary-image-aspect-ratio-sizer');
aspectRatioSizer.style.paddingTop = `${aspectRatio * 100.0}%`; aspectRatioSizer.style.paddingTop = `${aspectRatio * 100.0}%`;
const image = node.querySelector('img.term-glossary-image'); const image = node.querySelector('img.glossary-image');
const imageLink = node.querySelector('.term-glossary-image-link'); const imageLink = node.querySelector('.glossary-image-link');
image.dataset.pixelated = `${pixelated === true}`; image.dataset.pixelated = `${pixelated === true}`;
if (this._mediaLoader !== null) { if (this._mediaLoader !== null) {
@ -340,7 +340,7 @@ class DisplayGenerator {
} }
if (typeof description === 'string') { if (typeof description === 'string') {
const container = node.querySelector('.term-glossary-image-description'); const container = node.querySelector('.glossary-image-description');
this._setTextContent(container, description); this._setTextContent(container, description);
} }
@ -360,7 +360,7 @@ class DisplayGenerator {
} }
_createTermDisambiguation(disambiguation) { _createTermDisambiguation(disambiguation) {
const node = this._templates.instantiate('term-definition-disambiguation'); const node = this._templates.instantiate('definition-disambiguation');
node.dataset.term = disambiguation; node.dataset.term = disambiguation;
this._setTextContent(node, disambiguation, 'ja'); this._setTextContent(node, disambiguation, 'ja');
return node; return node;
@ -451,13 +451,13 @@ class DisplayGenerator {
const {dictionary, pitches} = details; const {dictionary, pitches} = details;
const node = this._templates.instantiate('term-pitch-accent-group'); const node = this._templates.instantiate('pitch-accent-group');
node.dataset.dictionary = dictionary; node.dataset.dictionary = dictionary;
node.dataset.pitchesMulti = 'true'; node.dataset.pitchesMulti = 'true';
node.dataset.pitchesCount = `${pitches.length}`; node.dataset.pitchesCount = `${pitches.length}`;
const tag = this._createTag({notes: '', name: dictionary, category: 'pitch-accent-dictionary'}); const tag = this._createTag({notes: '', name: dictionary, category: 'pitch-accent-dictionary'});
node.querySelector('.term-pitch-accent-group-tag-list').appendChild(tag); node.querySelector('.pitch-accent-group-tag-list').appendChild(tag);
let hasTags = false; let hasTags = false;
for (const {tags} of pitches) { for (const {tags} of pitches) {
@ -467,7 +467,7 @@ class DisplayGenerator {
} }
} }
const n = node.querySelector('.term-pitch-accent-list'); const n = node.querySelector('.pitch-accent-list');
n.dataset.hasTags = `${hasTags}`; n.dataset.hasTags = `${hasTags}`;
this._appendMultiple(n, this._createPitch.bind(this), pitches); this._appendMultiple(n, this._createPitch.bind(this), pitches);
@ -479,28 +479,28 @@ class DisplayGenerator {
const {reading, position, tags, exclusiveExpressions, exclusiveReadings} = details; const {reading, position, tags, exclusiveExpressions, exclusiveReadings} = details;
const morae = jp.getKanaMorae(reading); const morae = jp.getKanaMorae(reading);
const node = this._templates.instantiate('term-pitch-accent'); const node = this._templates.instantiate('pitch-accent');
node.dataset.pitchAccentPosition = `${position}`; node.dataset.pitchAccentPosition = `${position}`;
node.dataset.tagCount = `${tags.length}`; node.dataset.tagCount = `${tags.length}`;
let n = node.querySelector('.term-pitch-accent-position'); let n = node.querySelector('.pitch-accent-position');
this._setTextContent(n, `${position}`, ''); this._setTextContent(n, `${position}`, '');
n = node.querySelector('.term-pitch-accent-tag-list'); n = node.querySelector('.pitch-accent-tag-list');
this._appendMultiple(n, this._createTag.bind(this), tags); this._appendMultiple(n, this._createTag.bind(this), tags);
n = node.querySelector('.term-pitch-accent-disambiguation-list'); n = node.querySelector('.pitch-accent-disambiguation-list');
this._createPitchAccentDisambiguations(n, exclusiveExpressions, exclusiveReadings); this._createPitchAccentDisambiguations(n, exclusiveExpressions, exclusiveReadings);
n = node.querySelector('.term-pitch-accent-characters'); n = node.querySelector('.pitch-accent-characters');
for (let i = 0, ii = morae.length; i < ii; ++i) { for (let i = 0, ii = morae.length; i < ii; ++i) {
const mora = morae[i]; const mora = morae[i];
const highPitch = jp.isMoraPitchHigh(i, position); const highPitch = jp.isMoraPitchHigh(i, position);
const highPitchNext = jp.isMoraPitchHigh(i + 1, position); const highPitchNext = jp.isMoraPitchHigh(i + 1, position);
const n1 = this._templates.instantiate('term-pitch-accent-character'); const n1 = this._templates.instantiate('pitch-accent-character');
const n2 = n1.querySelector('.term-pitch-accent-character-inner'); const n2 = n1.querySelector('.pitch-accent-character-inner');
n1.dataset.position = `${i}`; n1.dataset.position = `${i}`;
n1.dataset.pitch = highPitch ? 'high' : 'low'; n1.dataset.pitch = highPitch ? 'high' : 'low';
@ -511,14 +511,14 @@ class DisplayGenerator {
} }
if (morae.length > 0) { if (morae.length > 0) {
this._populatePitchGraph(node.querySelector('.term-pitch-accent-graph'), position, morae); this._populatePitchGraph(node.querySelector('.pitch-accent-graph'), position, morae);
} }
return node; return node;
} }
_createPitchAccentDisambiguations(container, exclusiveExpressions, exclusiveReadings) { _createPitchAccentDisambiguations(container, exclusiveExpressions, exclusiveReadings) {
const templateName = 'term-pitch-accent-disambiguation'; const templateName = 'pitch-accent-disambiguation';
for (const exclusiveExpression of exclusiveExpressions) { for (const exclusiveExpression of exclusiveExpressions) {
const node = this._templates.instantiate(templateName); const node = this._templates.instantiate(templateName);
node.dataset.type = 'expression'; node.dataset.type = 'expression';
@ -548,7 +548,7 @@ class DisplayGenerator {
for (let i = 0; i < ii; ++i) { for (let i = 0; i < ii; ++i) {
const highPitch = jp.isMoraPitchHigh(i, position); const highPitch = jp.isMoraPitchHigh(i, position);
const highPitchNext = jp.isMoraPitchHigh(i + 1, position); const highPitchNext = jp.isMoraPitchHigh(i + 1, position);
const graphic = (highPitch && !highPitchNext ? '#term-pitch-accent-graph-dot-downstep' : '#term-pitch-accent-graph-dot'); const graphic = (highPitch && !highPitchNext ? '#pitch-accent-graph-dot-downstep' : '#pitch-accent-graph-dot');
const x = `${i * 50 + 25}`; const x = `${i * 50 + 25}`;
const y = highPitch ? '25' : '75'; const y = highPitch ? '25' : '75';
const use = document.createElementNS(svgns, 'use'); const use = document.createElementNS(svgns, 'use');
@ -559,7 +559,7 @@ class DisplayGenerator {
pathPoints.push(`${x} ${y}`); pathPoints.push(`${x} ${y}`);
} }
let path = svg.querySelector('.term-pitch-accent-graph-line'); let path = svg.querySelector('.pitch-accent-graph-line');
path.setAttribute('d', `M${pathPoints.join(' L')}`); path.setAttribute('d', `M${pathPoints.join(' L')}`);
pathPoints.splice(0, ii - 1); pathPoints.splice(0, ii - 1);
@ -568,14 +568,14 @@ class DisplayGenerator {
const x = `${ii * 50 + 25}`; const x = `${ii * 50 + 25}`;
const y = highPitch ? '25' : '75'; const y = highPitch ? '25' : '75';
const use = document.createElementNS(svgns, 'use'); const use = document.createElementNS(svgns, 'use');
use.setAttribute('href', '#term-pitch-accent-graph-triangle'); use.setAttribute('href', '#pitch-accent-graph-triangle');
use.setAttribute('x', x); use.setAttribute('x', x);
use.setAttribute('y', y); use.setAttribute('y', y);
svg.appendChild(use); svg.appendChild(use);
pathPoints.push(`${x} ${y}`); pathPoints.push(`${x} ${y}`);
} }
path = svg.querySelector('.term-pitch-accent-graph-line-tail'); path = svg.querySelector('.pitch-accent-graph-line-tail');
path.setAttribute('d', `M${pathPoints.join(' L')}`); path.setAttribute('d', `M${pathPoints.join(' L')}`);
} }

18
ext/pitch-accents-preview.html
View File

@ -22,25 +22,25 @@
<li> <li>
<strong>Downstep notation</strong> - <strong>Downstep notation</strong> -
<span class="format-preview" lang="ja"> <span class="format-preview" lang="ja">
<span class="term-pitch-accent-characters"><span class="term-pitch-accent-character" data-position="0" data-pitch="high" data-pitch-next="low"><span class="term-pitch-accent-character-inner">よ</span></span><span class="term-pitch-accent-character" data-position="1" data-pitch="low" data-pitch-next="low"><span class="term-pitch-accent-character-inner">む</span></span></span> <span class="pitch-accent-characters"><span class="pitch-accent-character" data-position="0" data-pitch="high" data-pitch-next="low"><span class="pitch-accent-character-inner">よ</span></span><span class="pitch-accent-character" data-position="1" data-pitch="low" data-pitch-next="low"><span class="pitch-accent-character-inner">む</span></span></span>
</span> </span>
</li> </li>
<li> <li>
<strong>Downstep position</strong> - <strong>Downstep position</strong> -
<span class="format-preview"> <span class="format-preview">
<span class="term-pitch-accent-position">1</span> <span class="pitch-accent-position">1</span>
</span> </span>
</li> </li>
<li> <li>
<strong>Graph</strong> - <strong>Graph</strong> -
<span class="format-preview"> <span class="format-preview">
<span class="term-pitch-accent-details"> <span class="pitch-accent-details">
<svg class="term-pitch-accent-graph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100" focusable="false"> <svg class="pitch-accent-graph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100" focusable="false">
<path class="term-pitch-accent-graph-line" d="M25 25 L75 75"></path> <path class="pitch-accent-graph-line" d="M25 25 L75 75"></path>
<path class="term-pitch-accent-graph-line-tail" d="M75 75 L125 75"></path> <path class="pitch-accent-graph-line-tail" d="M75 75 L125 75"></path>
<use href="#term-pitch-accent-graph-dot-downstep" x="25" y="25"></use> <use href="#pitch-accent-graph-dot-downstep" x="25" y="25"></use>
<use href="#term-pitch-accent-graph-dot" x="75" y="75"></use> <use href="#pitch-accent-graph-dot" x="75" y="75"></use>
<use href="#term-pitch-accent-graph-triangle" x="125" y="75"></use> <use href="#pitch-accent-graph-triangle" x="125" y="75"></use>
</svg> </svg>
</span> </span>
</span> </span>