summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ext/css/display.css258
-rw-r--r--ext/display-templates.html60
-rw-r--r--ext/js/display/display-audio.js4
-rw-r--r--ext/js/display/display-generator.js84
-rw-r--r--ext/pitch-accents-preview.html18
5 files changed, 212 insertions, 212 deletions
diff --git a/ext/css/display.css b/ext/css/display.css
index dc0c4336..b80a949c 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -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;
}
diff --git a/ext/display-templates.html b/ext/display-templates.html
index f7523c87..1ff8a4e4 100644
--- a/ext/display-templates.html
+++ b/ext/display-templates.html
@@ -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>
diff --git a/ext/js/display/display-audio.js b/ext/js/display/display-audio.js
index d793c287..f1feff5c 100644
--- a/ext/js/display/display-audio.js
+++ b/ext/js/display/display-audio.js
@@ -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); }
}
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 221cb772..1a73ff80 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -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')}`);
}
diff --git a/ext/pitch-accents-preview.html b/ext/pitch-accents-preview.html
index 8c185aea..f649779d 100644
--- a/ext/pitch-accents-preview.html
+++ b/ext/pitch-accents-preview.html
@@ -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>