Refactor display styles (#1451)
* 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
GitHub
parent
c64a8eac1e
commit
8d3436fca3
@ -795,47 +795,47 @@ button.action-button[data-icon=source-term]::before {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.term-expression-text-container {
|
||||
.expression-text-container {
|
||||
display: inline-block;
|
||||
margin-left: calc(-1 * var(--expression-reading-space));
|
||||
}
|
||||
.term-expression-text-outer {
|
||||
.expression-text-outer {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-left: var(--expression-reading-space);
|
||||
}
|
||||
.term-expression-reading-outer {
|
||||
.expression-reading-outer {
|
||||
display: none;
|
||||
position: relative;
|
||||
margin-left: var(--expression-reading-space);
|
||||
}
|
||||
.term-expression-text {
|
||||
.expression-text {
|
||||
color: var(--expression-text-color);
|
||||
font-size: var(--expression-font-size);
|
||||
}
|
||||
.term-expression-reading {
|
||||
.expression-reading {
|
||||
color: var(--expression-text-color);
|
||||
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);
|
||||
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);
|
||||
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] .term-expression[data-frequency=popular] .term-expression-reading,
|
||||
.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .kanji-link {
|
||||
.entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-text,
|
||||
.entry[data-expression-multi=true] .expression[data-frequency=popular] .expression-reading,
|
||||
.entry[data-expression-multi=true] .expression[data-frequency=popular] .kanji-link {
|
||||
color: var(--expression-text-color-popular);
|
||||
}
|
||||
.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .term-expression-text,
|
||||
.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .term-expression-reading,
|
||||
.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .kanji-link {
|
||||
.entry[data-expression-multi=true] .expression[data-frequency=rare] .expression-text,
|
||||
.entry[data-expression-multi=true] .expression[data-frequency=rare] .expression-reading,
|
||||
.entry[data-expression-multi=true] .expression[data-frequency=rare] .kanji-link {
|
||||
color: var(--expression-text-color-rare);
|
||||
}
|
||||
.term-expression-text>ruby>rt {
|
||||
.expression-text>ruby>rt {
|
||||
color: var(--expression-furigana-text-color);
|
||||
}
|
||||
.entry-header2,
|
||||
@ -845,60 +845,60 @@ button.action-button[data-icon=source-term]::before {
|
||||
.entry+.entry {
|
||||
border-top: var(--thin-border-size) solid var(--light-border-color);
|
||||
}
|
||||
.term-reasons {
|
||||
.inflection-list {
|
||||
display: inline-block;
|
||||
color: var(--reason-text-color);
|
||||
}
|
||||
.term-reasons:empty {
|
||||
.inflection-list:empty {
|
||||
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 */
|
||||
white-space: pre-wrap;
|
||||
display: inline;
|
||||
}
|
||||
.term-expression-list {
|
||||
.expression-list {
|
||||
display: inline;
|
||||
margin-right: var(--expression-list-end-space);
|
||||
}
|
||||
.term-expression {
|
||||
.expression {
|
||||
display: inline-block;
|
||||
}
|
||||
.term-expression-details {
|
||||
.expression-details {
|
||||
display: inline;
|
||||
}
|
||||
.term-expression-details>.tags {
|
||||
.expression-tag-list {
|
||||
display: none;
|
||||
}
|
||||
.term-expression-details>.frequencies {
|
||||
.expression-details>.frequencies {
|
||||
display: none;
|
||||
}
|
||||
.term-details {
|
||||
.expression-list-details {
|
||||
display: inline;
|
||||
}
|
||||
.term-tags {
|
||||
.expression-list-tag-list {
|
||||
display: inline;
|
||||
}
|
||||
.entry[data-expression-multi=true] .term-details {
|
||||
.entry[data-expression-multi=true] .expression-list-details {
|
||||
display: block;
|
||||
}
|
||||
:root[data-term-display-mode=ruby-and-reading] .term-expression-text-outer::after,
|
||||
:root[data-term-display-mode=term-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] .expression-text-outer::after {
|
||||
display: none;
|
||||
}
|
||||
:root[data-term-display-mode=ruby-and-reading] .term-expression-reading-outer,
|
||||
:root[data-term-display-mode=term-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] .expression-reading-outer {
|
||||
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=term-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] .expression[data-reading-is-same=true] .expression-text-outer::after {
|
||||
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=term-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] .expression[data-reading-is-same=true] .expression-reading-outer {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -961,7 +961,7 @@ button.action-button[data-icon=source-term]::before {
|
||||
|
||||
|
||||
/* Triangle entry indicator */
|
||||
.term-expression-current-indicator {
|
||||
.expression-current-indicator {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
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,
|
||||
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));
|
||||
}
|
||||
.entry.entry-current .term-expression-current-indicator {
|
||||
.entry.entry-current .expression-current-indicator {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition:
|
||||
opacity var(--entry-current-indicator-transition-duration) linear,
|
||||
visibility 0s linear 0s;
|
||||
}
|
||||
.term-expression-current-indicator::after {
|
||||
.expression-current-indicator::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -1003,8 +1003,8 @@ button.action-button[data-icon=source-term]::before {
|
||||
-webkit-mask-size: contain;
|
||||
-webkit-mask-image: url(/images/material-right-arrow.svg);
|
||||
}
|
||||
.term-expression:not(:first-of-type) .term-expression-current-indicator,
|
||||
:root:not([data-popup-current-indicator-mode=triangle]) .term-expression-current-indicator {
|
||||
.expression:not(:first-of-type) .expression-current-indicator,
|
||||
:root:not([data-popup-current-indicator-mode=triangle]) .expression-current-indicator {
|
||||
display: none;
|
||||
transition: none;
|
||||
}
|
||||
@ -1033,7 +1033,7 @@ button.action-button[data-icon=source-term]::before {
|
||||
|
||||
|
||||
/* 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;
|
||||
position: relative;
|
||||
width: 0;
|
||||
@ -1041,78 +1041,78 @@ button.action-button[data-icon=source-term]::before {
|
||||
visibility: hidden;
|
||||
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));
|
||||
}
|
||||
.entry[data-expression-multi=true] .term-expression:hover .term-expression-details {
|
||||
.entry[data-expression-multi=true] .expression:hover .expression-details {
|
||||
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;
|
||||
left: 0;
|
||||
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;
|
||||
}
|
||||
.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.tags {
|
||||
.entry[data-expression-multi=true] .expression-list .expression-tag-list {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.5em;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
/* Definitions */
|
||||
.term-definition-list {
|
||||
.definition-list {
|
||||
margin: 0;
|
||||
padding: 0 0 0 var(--list-padding1);
|
||||
list-style-type: decimal;
|
||||
}
|
||||
.term-definition-list[data-count='0'],
|
||||
.term-definition-list[data-count='1'] {
|
||||
.definition-list[data-count='0'],
|
||||
.definition-list[data-count='1'] {
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.term-glossary-list {
|
||||
.glossary-list {
|
||||
margin: 0;
|
||||
padding: 0 0 0 var(--list-padding2);
|
||||
list-style-type: circle;
|
||||
}
|
||||
.term-glossary-list[data-count='0'],
|
||||
.term-glossary-list[data-count='1'] {
|
||||
.glossary-list[data-count='0'],
|
||||
.glossary-list[data-count='1'] {
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.term-definition-item::marker,
|
||||
.term-glossary-item::marker {
|
||||
.definition-item::marker,
|
||||
.glossary-item::marker {
|
||||
color: var(--text-color-light3);
|
||||
}
|
||||
.term-glossary {
|
||||
.glossary {
|
||||
white-space: pre-line;
|
||||
}
|
||||
.term-definition-disambiguation-list {
|
||||
.definition-disambiguation-list {
|
||||
color: var(--text-color-light3);
|
||||
padding-right: var(--disambiguation-space);
|
||||
}
|
||||
.term-definition-disambiguation-list[data-count='0'] {
|
||||
.definition-disambiguation-list[data-count='0'] {
|
||||
display: none;
|
||||
}
|
||||
.term-definition-disambiguation-list::before {
|
||||
.definition-disambiguation-list::before {
|
||||
content: var(--disambiguation-prefix);
|
||||
}
|
||||
.term-definition-disambiguation-list::after {
|
||||
.definition-disambiguation-list::after {
|
||||
content: var(--disambiguation-suffix);
|
||||
}
|
||||
.term-definition-disambiguation+.term-definition-disambiguation::before {
|
||||
.definition-disambiguation+.definition-disambiguation::before {
|
||||
content: var(--disambiguation-separator);
|
||||
}
|
||||
.term-glossary-separator,
|
||||
.term-reason-separator {
|
||||
.glossary-separator,
|
||||
.inflection-separator {
|
||||
display: inline;
|
||||
font-size: 0;
|
||||
opacity: 0;
|
||||
@ -1320,70 +1320,70 @@ button.action-button[data-icon=source-term]::before {
|
||||
|
||||
|
||||
/* Pitch accent styles */
|
||||
.term-pitch-accent-group-list {
|
||||
.pitch-accent-group-list {
|
||||
margin: 0;
|
||||
padding: 0 0 0 var(--list-padding1);
|
||||
list-style-type: decimal;
|
||||
}
|
||||
.term-pitch-accent-group-list[data-count='0'],
|
||||
.term-pitch-accent-group-list[data-count='1'] {
|
||||
.pitch-accent-group-list[data-count='0'],
|
||||
.pitch-accent-group-list[data-count='1'] {
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.term-pitch-accent-list {
|
||||
.pitch-accent-list {
|
||||
margin: 0;
|
||||
padding: 0 0 0 var(--list-padding2);
|
||||
list-style-type: circle;
|
||||
display: block;
|
||||
}
|
||||
.term-pitch-accent-list[data-count='0'],
|
||||
.term-pitch-accent-list[data-count='1'] {
|
||||
.pitch-accent-list[data-count='0'],
|
||||
.pitch-accent-list[data-count='1'] {
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
display: inline;
|
||||
}
|
||||
.term-pitch-accent-group::marker,
|
||||
.term-pitch-accent::marker {
|
||||
.pitch-accent-group::marker,
|
||||
.pitch-accent::marker {
|
||||
color: var(--text-color-light3);
|
||||
}
|
||||
.term-pitch-accent {
|
||||
.pitch-accent {
|
||||
display: list-item;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.term-pitch-accent-list[data-count='0'] .term-pitch-accent,
|
||||
.term-pitch-accent-list[data-count='1'] .term-pitch-accent {
|
||||
.pitch-accent-list[data-count='0'] .pitch-accent,
|
||||
.pitch-accent-list[data-count='1'] .pitch-accent {
|
||||
display: inline;
|
||||
}
|
||||
.term-pitch-accent-group-tag-list {
|
||||
.pitch-accent-group-tag-list {
|
||||
margin-right: 0.375em;
|
||||
}
|
||||
.term-pitch-accent-disambiguation-list {
|
||||
.pitch-accent-disambiguation-list {
|
||||
color: var(--text-color-light3);
|
||||
padding-right: var(--disambiguation-space);
|
||||
}
|
||||
.term-pitch-accent-disambiguation-list::before {
|
||||
.pitch-accent-disambiguation-list::before {
|
||||
content: var(--disambiguation-prefix);
|
||||
}
|
||||
.term-pitch-accent-disambiguation-list::after {
|
||||
.pitch-accent-disambiguation-list::after {
|
||||
content: var(--disambiguation-suffix);
|
||||
}
|
||||
.term-pitch-accent-disambiguation+.term-pitch-accent-disambiguation::before {
|
||||
.pitch-accent-disambiguation+.pitch-accent-disambiguation::before {
|
||||
content: var(--disambiguation-separator);
|
||||
}
|
||||
.term-pitch-accent-disambiguation-list[data-count='0'] {
|
||||
.pitch-accent-disambiguation-list[data-count='0'] {
|
||||
display: none;
|
||||
}
|
||||
.term-pitch-accent-tag-list:not([data-count='0']) {
|
||||
.pitch-accent-tag-list:not([data-count='0']) {
|
||||
margin-right: 0.375em;
|
||||
}
|
||||
.term-pitch-accent-character {
|
||||
.pitch-accent-character {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.term-pitch-accent-character::before {
|
||||
.pitch-accent-character::before {
|
||||
border-color: var(--pitch-accent-annotation-color);
|
||||
}
|
||||
.term-pitch-accent-character[data-pitch='high']::before {
|
||||
.pitch-accent-character[data-pitch='high']::before {
|
||||
content: '';
|
||||
display: block;
|
||||
user-select: none;
|
||||
@ -1396,23 +1396,23 @@ button.action-button[data-icon=source-term]::before {
|
||||
border-top-width: 0.1em;
|
||||
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;
|
||||
height: 0.4em;
|
||||
border-right-width: 0.1em;
|
||||
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;
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
.term-pitch-accent-position::before {
|
||||
.pitch-accent-position::before {
|
||||
content: ' [';
|
||||
}
|
||||
.term-pitch-accent-position::after {
|
||||
.pitch-accent-position::after {
|
||||
content: ']';
|
||||
}
|
||||
.term-pitch-accent-details {
|
||||
.pitch-accent-details {
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
padding: 0 0.25em;
|
||||
@ -1421,34 +1421,34 @@ button.action-button[data-icon=source-term]::before {
|
||||
|
||||
|
||||
/* Pitch accent graph styles */
|
||||
.term-pitch-accent-graph {
|
||||
.pitch-accent-graph {
|
||||
display: block;
|
||||
height: 1.5em;
|
||||
transform: translateY(-0.875em);
|
||||
}
|
||||
.term-pitch-accent-graph-line,
|
||||
.term-pitch-accent-graph-line-tail {
|
||||
.pitch-accent-graph-line,
|
||||
.pitch-accent-graph-line-tail {
|
||||
fill: none;
|
||||
stroke: var(--pitch-accent-annotation-color);
|
||||
stroke-width: 5;
|
||||
}
|
||||
.term-pitch-accent-graph-line-tail {
|
||||
.pitch-accent-graph-line-tail {
|
||||
stroke-dasharray: 5 5;
|
||||
}
|
||||
#term-pitch-accent-graph-dot {
|
||||
#pitch-accent-graph-dot {
|
||||
fill: var(--pitch-accent-annotation-color);
|
||||
stroke: var(--pitch-accent-annotation-color);
|
||||
stroke-width: 5;
|
||||
}
|
||||
#term-pitch-accent-graph-dot-downstep {
|
||||
#pitch-accent-graph-dot-downstep {
|
||||
fill: none;
|
||||
stroke: var(--pitch-accent-annotation-color);
|
||||
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);
|
||||
}
|
||||
#term-pitch-accent-graph-triangle {
|
||||
#pitch-accent-graph-triangle {
|
||||
fill: none;
|
||||
stroke: var(--pitch-accent-annotation-color);
|
||||
stroke-width: 5;
|
||||
@ -1456,7 +1456,7 @@ button.action-button[data-icon=source-term]::before {
|
||||
|
||||
|
||||
/* Glossary images */
|
||||
.term-glossary-image-container {
|
||||
.glossary-image-container {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
@ -1467,14 +1467,14 @@ button.action-button[data-icon=source-term]::before {
|
||||
overflow: hidden;
|
||||
background-color: var(--glossary-image-background-color);
|
||||
}
|
||||
.term-glossary-image-link {
|
||||
.glossary-image-link {
|
||||
cursor: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
.term-glossary-image-link[href]:hover {
|
||||
.glossary-image-link[href]:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.term-glossary-image-container-overlay {
|
||||
.glossary-image-container-overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -1487,7 +1487,7 @@ button.action-button[data-icon=source-term]::before {
|
||||
white-space: normal;
|
||||
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';
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
@ -1496,7 +1496,7 @@ button.action-button[data-icon=source-term]::before {
|
||||
text-align: center;
|
||||
padding: 0.25em;
|
||||
}
|
||||
.term-glossary-image {
|
||||
.glossary-image {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -1508,30 +1508,30 @@ button.action-button[data-icon=source-term]::before {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.term-glossary-image:not([src]) {
|
||||
.glossary-image:not([src]) {
|
||||
display: none;
|
||||
}
|
||||
.term-glossary-image[data-pixelated=true] {
|
||||
.glossary-image[data-pixelated=true] {
|
||||
image-rendering: auto;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
.term-glossary-image-aspect-ratio-sizer {
|
||||
.glossary-image-aspect-ratio-sizer {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
vertical-align: top;
|
||||
font-size: 0;
|
||||
}
|
||||
.term-glossary-image-link-text::before {
|
||||
.glossary-image-link-text::before {
|
||||
content: '[';
|
||||
}
|
||||
.term-glossary-image-link-text::after {
|
||||
.glossary-image-link-text::after {
|
||||
content: ']';
|
||||
}
|
||||
.term-glossary-image-description {
|
||||
.glossary-image-description {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
@ -1954,77 +1954,77 @@ button.footer-notification-close-button {
|
||||
:root[data-audio-enabled=false] .action-play-audio {
|
||||
display: none;
|
||||
}
|
||||
:root[data-glossary-layout-mode=compact] .term-definition-tag-list,
|
||||
:root[data-glossary-layout-mode=compact] .term-definition-disambiguation-list:not([data-count='0']) {
|
||||
:root[data-glossary-layout-mode=compact] .definition-tag-list,
|
||||
:root[data-glossary-layout-mode=compact] .definition-disambiguation-list:not([data-count='0']) {
|
||||
display: inline;
|
||||
}
|
||||
:root[data-glossary-layout-mode=compact] .term-glossary-list {
|
||||
:root[data-glossary-layout-mode=compact] .glossary-list {
|
||||
display: inline;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
:root[data-glossary-layout-mode=compact] .term-glossary-item {
|
||||
:root[data-glossary-layout-mode=compact] .glossary-item {
|
||||
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;
|
||||
content: var(--compact-list-separator);
|
||||
display: inline;
|
||||
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] .term-pitch-accent-disambiguation[data-type=reading] {
|
||||
: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[data-type=reading] {
|
||||
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;
|
||||
}
|
||||
: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;
|
||||
}
|
||||
:root[data-show-pitch-accent-graph=false] .term-pitch-accent-details {
|
||||
:root[data-show-pitch-accent-graph=false] .pitch-accent-details {
|
||||
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;
|
||||
list-style: none;
|
||||
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;
|
||||
}
|
||||
: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;
|
||||
content: var(--compact-list-separator);
|
||||
display: inline;
|
||||
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;
|
||||
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)) .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%;
|
||||
top: auto;
|
||||
}
|
||||
:root[data-glossary-layout-mode=compact] .term-glossary-image-link {
|
||||
:root[data-glossary-layout-mode=compact] .glossary-image-link {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
:root[data-glossary-layout-mode=compact] .term-glossary-image-link:hover .term-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:hover .glossary-image-container,
|
||||
:root[data-glossary-layout-mode=compact] .glossary-image-link:focus .glossary-image-container {
|
||||
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;
|
||||
}
|
||||
:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-description {
|
||||
:root:not([data-glossary-layout-mode=compact]) .glossary-image-description {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
<span class="entry-current-indicator-icon" title="Current entry"></span>
|
||||
</div>
|
||||
<div class="term-expression-list"></div>
|
||||
<div class="expression-list"></div>
|
||||
</div>
|
||||
<div class="term-details">
|
||||
<div class="term-tags tag-list"></div>
|
||||
<div class="term-reasons"></div>
|
||||
<div class="expression-list-details">
|
||||
<div class="expression-list-tag-list tag-list"></div>
|
||||
<div class="inflection-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -26,34 +26,34 @@
|
||||
<div class="entry-body-section-content frequency-group-list"></div>
|
||||
</div>
|
||||
<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 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 class="debug-info"><a class="debug-log-link">Log debug info to console</a></div>
|
||||
</div></template>
|
||||
<template id="term-expression-template" data-remove-whitespace-text="true"><div class="term-expression">
|
||||
<div class="term-expression-text-container" lang="ja">
|
||||
<span class="term-expression-text-outer source-text">
|
||||
<span class="term-expression-current-indicator"></span>
|
||||
<span class="term-expression-text"></span>
|
||||
<template id="expression-template" data-remove-whitespace-text="true"><div class="expression">
|
||||
<div class="expression-text-container" lang="ja">
|
||||
<span class="expression-text-outer source-text">
|
||||
<span class="expression-current-indicator"></span>
|
||||
<span class="expression-text"></span>
|
||||
</span>
|
||||
<span class="term-expression-reading-outer">
|
||||
<span class="term-expression-reading"></span>
|
||||
<span class="expression-reading-outer">
|
||||
<span class="expression-reading"></span>
|
||||
</span>
|
||||
</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>
|
||||
<div class="tags tag-list"></div>
|
||||
<div class="expression-tag-list tag-list"></div>
|
||||
</div>
|
||||
</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="term-definition-disambiguation-template"><span class="term-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="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="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator"> </span></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="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="inflection-template"><span class="inflection"></span><span class="inflection-separator"> </span></template>
|
||||
|
||||
<!-- 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>
|
||||
@ -77,17 +77,17 @@
|
||||
</span></span></template>
|
||||
|
||||
<!-- 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>
|
||||
<g id="term-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="term-pitch-accent-graph-triangle"><path d="M0 13 L15 -13 L-15 -13 Z" /></g>
|
||||
<g id="pitch-accent-graph-dot"><circle cx="0" cy="0" r="15" /></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="pitch-accent-graph-triangle"><path d="M0 13 L15 -13 L-15 -13 Z" /></g>
|
||||
</defs>
|
||||
</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="term-pitch-accent-disambiguation-template"><span class="term-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="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-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="pitch-accent-disambiguation-template"><span class="pitch-accent-disambiguation"></span></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="pitch-accent-character-template"><span class="pitch-accent-character"><span class="pitch-accent-character-inner"></span></span></template>
|
||||
|
||||
<!-- Kanji entry templates -->
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</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-section" data-section-type="frequencies">
|
||||
<div class="entry-body-section-content frequency-group-list"></div>
|
||||
|
||||
@ -279,7 +279,7 @@ class DisplayAudio {
|
||||
}
|
||||
|
||||
_getAudioPlayButtonExpressionIndex(button) {
|
||||
const expressionNode = button.closest('.term-expression');
|
||||
const expressionNode = button.closest('.expression');
|
||||
if (expressionNode !== null) {
|
||||
const expressionIndex = parseInt(expressionNode.dataset.index, 10);
|
||||
if (Number.isFinite(expressionIndex)) { return expressionIndex; }
|
||||
@ -293,7 +293,7 @@ class DisplayAudio {
|
||||
if (definitionIndex >= 0 && definitionIndex < definitionNodes.length) {
|
||||
const node = definitionNodes[definitionIndex];
|
||||
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 (button2 !== null) { results.push(button2); }
|
||||
}
|
||||
|
||||
@ -46,19 +46,19 @@ class DisplayGenerator {
|
||||
preparePitchAccents() {
|
||||
if (this._termPitchAccentStaticTemplateIsSetup) { return; }
|
||||
this._termPitchAccentStaticTemplateIsSetup = true;
|
||||
const t = this._templates.instantiate('term-pitch-accent-static');
|
||||
const t = this._templates.instantiate('pitch-accent-static');
|
||||
document.head.appendChild(t);
|
||||
}
|
||||
|
||||
createTermEntry(details) {
|
||||
const node = this._templates.instantiate('term-entry');
|
||||
|
||||
const expressionsContainer = node.querySelector('.term-expression-list');
|
||||
const reasonsContainer = node.querySelector('.term-reasons');
|
||||
const pitchesContainer = node.querySelector('.term-pitch-accent-group-list');
|
||||
const expressionsContainer = node.querySelector('.expression-list');
|
||||
const reasonsContainer = node.querySelector('.inflection-list');
|
||||
const pitchesContainer = node.querySelector('.pitch-accent-group-list');
|
||||
const frequencyGroupListContainer = node.querySelector('.frequency-group-list');
|
||||
const definitionsContainer = node.querySelector('.term-definition-list');
|
||||
const termTagsContainer = node.querySelector('.term-tags');
|
||||
const definitionsContainer = node.querySelector('.definition-list');
|
||||
const termTagsContainer = node.querySelector('.expression-list-tag-list');
|
||||
|
||||
const {expressions, type, reasons, frequencies} = details;
|
||||
const definitions = (type === 'term' ? [details] : details.definitions);
|
||||
@ -129,7 +129,7 @@ class DisplayGenerator {
|
||||
|
||||
const glyphContainer = node.querySelector('.kanji-glyph');
|
||||
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 chineseReadingsContainer = node.querySelector('.kanji-readings-chinese');
|
||||
const japaneseReadingsContainer = node.querySelector('.kanji-readings-japanese');
|
||||
@ -235,15 +235,15 @@ class DisplayGenerator {
|
||||
if (expression) { searchQueries.push(expression); }
|
||||
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 tagContainer = node.querySelector('.tags');
|
||||
const expressionContainer = node.querySelector('.expression-text');
|
||||
const tagContainer = node.querySelector('.expression-tag-list');
|
||||
|
||||
node.dataset.readingIsSame = `${!reading || reading === expression}`;
|
||||
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._appendMultiple(tagContainer, this._createTag.bind(this), termTags);
|
||||
@ -253,19 +253,19 @@ class DisplayGenerator {
|
||||
}
|
||||
|
||||
_createTermReason(reason) {
|
||||
const fragment = this._templates.instantiateFragment('term-reason');
|
||||
const node = fragment.querySelector('.term-reason');
|
||||
const fragment = this._templates.instantiateFragment('inflection');
|
||||
const node = fragment.querySelector('.inflection');
|
||||
this._setTextContent(node, reason);
|
||||
node.dataset.reason = reason;
|
||||
return fragment;
|
||||
}
|
||||
|
||||
_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 onlyListContainer = node.querySelector('.term-definition-disambiguation-list');
|
||||
const glossaryContainer = node.querySelector('.term-glossary-list');
|
||||
const tagListContainer = node.querySelector('.definition-tag-list');
|
||||
const onlyListContainer = node.querySelector('.definition-disambiguation-list');
|
||||
const glossaryContainer = node.querySelector('.glossary-list');
|
||||
|
||||
const {dictionary, definitionTags} = details;
|
||||
node.dataset.dictionary = dictionary;
|
||||
@ -291,8 +291,8 @@ class DisplayGenerator {
|
||||
}
|
||||
|
||||
_createTermGlossaryItemText(glossary) {
|
||||
const node = this._templates.instantiate('term-glossary-item');
|
||||
const container = node.querySelector('.term-glossary');
|
||||
const node = this._templates.instantiate('glossary-item');
|
||||
const container = node.querySelector('.glossary');
|
||||
this._setTextContent(container, glossary);
|
||||
return node;
|
||||
}
|
||||
@ -312,22 +312,22 @@ class DisplayGenerator {
|
||||
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.dictionary = dictionary;
|
||||
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`;
|
||||
if (typeof title === 'string') {
|
||||
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}%`;
|
||||
|
||||
const image = node.querySelector('img.term-glossary-image');
|
||||
const imageLink = node.querySelector('.term-glossary-image-link');
|
||||
const image = node.querySelector('img.glossary-image');
|
||||
const imageLink = node.querySelector('.glossary-image-link');
|
||||
image.dataset.pixelated = `${pixelated === true}`;
|
||||
|
||||
if (this._mediaLoader !== null) {
|
||||
@ -340,7 +340,7 @@ class DisplayGenerator {
|
||||
}
|
||||
|
||||
if (typeof description === 'string') {
|
||||
const container = node.querySelector('.term-glossary-image-description');
|
||||
const container = node.querySelector('.glossary-image-description');
|
||||
this._setTextContent(container, description);
|
||||
}
|
||||
|
||||
@ -360,7 +360,7 @@ class DisplayGenerator {
|
||||
}
|
||||
|
||||
_createTermDisambiguation(disambiguation) {
|
||||
const node = this._templates.instantiate('term-definition-disambiguation');
|
||||
const node = this._templates.instantiate('definition-disambiguation');
|
||||
node.dataset.term = disambiguation;
|
||||
this._setTextContent(node, disambiguation, 'ja');
|
||||
return node;
|
||||
@ -451,13 +451,13 @@ class DisplayGenerator {
|
||||
|
||||
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.pitchesMulti = 'true';
|
||||
node.dataset.pitchesCount = `${pitches.length}`;
|
||||
|
||||
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;
|
||||
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}`;
|
||||
this._appendMultiple(n, this._createPitch.bind(this), pitches);
|
||||
|
||||
@ -479,28 +479,28 @@ class DisplayGenerator {
|
||||
const {reading, position, tags, exclusiveExpressions, exclusiveReadings} = details;
|
||||
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.tagCount = `${tags.length}`;
|
||||
|
||||
let n = node.querySelector('.term-pitch-accent-position');
|
||||
let n = node.querySelector('.pitch-accent-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);
|
||||
|
||||
n = node.querySelector('.term-pitch-accent-disambiguation-list');
|
||||
n = node.querySelector('.pitch-accent-disambiguation-list');
|
||||
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) {
|
||||
const mora = morae[i];
|
||||
const highPitch = jp.isMoraPitchHigh(i, position);
|
||||
const highPitchNext = jp.isMoraPitchHigh(i + 1, position);
|
||||
|
||||
const n1 = this._templates.instantiate('term-pitch-accent-character');
|
||||
const n2 = n1.querySelector('.term-pitch-accent-character-inner');
|
||||
const n1 = this._templates.instantiate('pitch-accent-character');
|
||||
const n2 = n1.querySelector('.pitch-accent-character-inner');
|
||||
|
||||
n1.dataset.position = `${i}`;
|
||||
n1.dataset.pitch = highPitch ? 'high' : 'low';
|
||||
@ -511,14 +511,14 @@ class DisplayGenerator {
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
_createPitchAccentDisambiguations(container, exclusiveExpressions, exclusiveReadings) {
|
||||
const templateName = 'term-pitch-accent-disambiguation';
|
||||
const templateName = 'pitch-accent-disambiguation';
|
||||
for (const exclusiveExpression of exclusiveExpressions) {
|
||||
const node = this._templates.instantiate(templateName);
|
||||
node.dataset.type = 'expression';
|
||||
@ -548,7 +548,7 @@ class DisplayGenerator {
|
||||
for (let i = 0; i < ii; ++i) {
|
||||
const highPitch = jp.isMoraPitchHigh(i, 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 y = highPitch ? '25' : '75';
|
||||
const use = document.createElementNS(svgns, 'use');
|
||||
@ -559,7 +559,7 @@ class DisplayGenerator {
|
||||
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')}`);
|
||||
|
||||
pathPoints.splice(0, ii - 1);
|
||||
@ -568,14 +568,14 @@ class DisplayGenerator {
|
||||
const x = `${ii * 50 + 25}`;
|
||||
const y = highPitch ? '25' : '75';
|
||||
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('y', y);
|
||||
svg.appendChild(use);
|
||||
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')}`);
|
||||
}
|
||||
|
||||
|
||||
@ -22,25 +22,25 @@
|
||||
<li>
|
||||
<strong>Downstep notation</strong> -
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Downstep position</strong> -
|
||||
<span class="format-preview">
|
||||
<span class="term-pitch-accent-position">1</span>
|
||||
<span class="pitch-accent-position">1</span>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Graph</strong> -
|
||||
<span class="format-preview">
|
||||
<span class="term-pitch-accent-details">
|
||||
<svg class="term-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="term-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="#term-pitch-accent-graph-dot" x="75" y="75"></use>
|
||||
<use href="#term-pitch-accent-graph-triangle" x="125" y="75"></use>
|
||||
<span class="pitch-accent-details">
|
||||
<svg class="pitch-accent-graph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100" focusable="false">
|
||||
<path class="pitch-accent-graph-line" d="M25 25 L75 75"></path>
|
||||
<path class="pitch-accent-graph-line-tail" d="M75 75 L125 75"></path>
|
||||
<use href="#pitch-accent-graph-dot-downstep" x="25" y="25"></use>
|
||||
<use href="#pitch-accent-graph-dot" x="75" y="75"></use>
|
||||
<use href="#pitch-accent-graph-triangle" x="125" y="75"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user