aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ext/mixed/css/display-dark.css13
-rw-r--r--ext/mixed/css/display-default.css13
-rw-r--r--ext/mixed/css/display.css38
-rw-r--r--ext/mixed/display-templates.html9
-rw-r--r--ext/mixed/js/display-generator.js45
5 files changed, 117 insertions, 1 deletions
diff --git a/ext/mixed/css/display-dark.css b/ext/mixed/css/display-dark.css
index dc344099..8e5d2f51 100644
--- a/ext/mixed/css/display-dark.css
+++ b/ext/mixed/css/display-dark.css
@@ -78,3 +78,16 @@ h2 { border-bottom-color: #2f2f2f; }
}
.term-pitch-accent-character:before { border-color: #ffffff; }
+
+.term-pitch-accent-graph-line,
+.term-pitch-accent-graph-line-tail,
+#term-pitch-accent-graph-dot,
+#term-pitch-accent-graph-dot-downstep,
+#term-pitch-accent-graph-triangle {
+ stroke: #ffffff;
+}
+
+#term-pitch-accent-graph-dot,
+#term-pitch-accent-graph-dot-downstep>circle:last-of-type {
+ fill: #ffffff;
+}
diff --git a/ext/mixed/css/display-default.css b/ext/mixed/css/display-default.css
index 81623ebc..893e7bc1 100644
--- a/ext/mixed/css/display-default.css
+++ b/ext/mixed/css/display-default.css
@@ -78,3 +78,16 @@ h2 { border-bottom-color: #eeeeee; }
}
.term-pitch-accent-character:before { border-color: #000000; }
+
+.term-pitch-accent-graph-line,
+.term-pitch-accent-graph-line-tail,
+#term-pitch-accent-graph-dot,
+#term-pitch-accent-graph-dot-downstep,
+#term-pitch-accent-graph-triangle {
+ stroke: #000000;
+}
+
+#term-pitch-accent-graph-dot,
+#term-pitch-accent-graph-dot-downstep>circle:last-of-type {
+ fill: #000000;
+}
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 0a1ba658..7bd82785 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -538,6 +538,44 @@ button.action-button {
/*
+ * Pitch accent graph styles
+ */
+
+.term-pitch-accent-graph {
+ display: block;
+ height: 1.5em;
+ transform: translateY(-0.875em);
+}
+.term-pitch-accent-graph-line,
+.term-pitch-accent-graph-line-tail {
+ fill: none;
+ stroke: #000000;
+ stroke-width: 5;
+}
+.term-pitch-accent-graph-line-tail {
+ stroke-dasharray: 5 5;
+}
+#term-pitch-accent-graph-dot {
+ fill: #000000;
+ stroke: #000000;
+ stroke-width: 5;
+}
+#term-pitch-accent-graph-dot-downstep {
+ fill: none;
+ stroke: #000000;
+ stroke-width: 5;
+}
+#term-pitch-accent-graph-dot-downstep>circle:last-of-type {
+ fill: #000000;
+}
+#term-pitch-accent-graph-triangle {
+ fill: none;
+ stroke: #000000;
+ stroke-width: 5;
+}
+
+
+/*
* Kanji
*/
diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html
index c6f208a8..e2f55c22 100644
--- a/ext/mixed/display-templates.html
+++ b/ext/mixed/display-templates.html
@@ -37,9 +37,16 @@
<template id="term-glossary-item-template"><li class="term-glossary-item"><span class="term-glossary-separator"> </span><span class="term-glossary"></span></li></template>
<template id="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator"> </span></template>
+<template id="term-pitch-accent-static-template"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+ <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>
+ </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-expression-template"><span class="term-pitch-accent-expression"></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-expression-list"></span><span class="term-pitch-accent-characters"></span><span class="term-pitch-accent-position"></span></li></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-expression-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"><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="kanji-entry-template"><div class="entry" data-type="kanji">
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index 449bac1d..326f3f54 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -25,6 +25,7 @@
class DisplayGenerator {
constructor() {
this._templateHandler = null;
+ this._termPitchAccentStaticTemplateIsSetup = false;
}
async prepare() {
@@ -337,6 +338,10 @@ class DisplayGenerator {
n.appendChild(n1);
}
+ if (morae.length > 0) {
+ this.populatePitchGraph(node.querySelector('.term-pitch-accent-graph'), position, morae);
+ }
+
return node;
}
@@ -346,6 +351,46 @@ class DisplayGenerator {
return node;
}
+ populatePitchGraph(svg, position, morae) {
+ const svgns = svg.getAttribute('xmlns');
+ const ii = morae.length;
+ svg.setAttribute('viewBox', `0 0 ${50 * (ii + 1)} 100`);
+
+ const pathPoints = [];
+ for (let i = 0; i < ii; ++i) {
+ const highPitch = DisplayGenerator._jpIsMoraPitchHigh(i, position);
+ const highPitchNext = DisplayGenerator._jpIsMoraPitchHigh(i + 1, position);
+ const graphic = (highPitch && !highPitchNext ? '#term-pitch-accent-graph-dot-downstep' : '#term-pitch-accent-graph-dot');
+ const x = `${i * 50 + 25}`;
+ const y = highPitch ? '25' : '75';
+ const use = document.createElementNS(svgns, 'use');
+ use.setAttribute('href', graphic);
+ use.setAttribute('x', x);
+ use.setAttribute('y', y);
+ svg.appendChild(use);
+ pathPoints.push(`${x} ${y}`);
+ }
+
+ let path = svg.querySelector('.term-pitch-accent-graph-line');
+ path.setAttribute('d', `M${pathPoints.join(' L')}`);
+
+ pathPoints.splice(0, ii - 1);
+ {
+ const highPitch = DisplayGenerator._jpIsMoraPitchHigh(ii, position);
+ 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('x', x);
+ use.setAttribute('y', y);
+ svg.appendChild(use);
+ pathPoints.push(`${x} ${y}`);
+ }
+
+ path = svg.querySelector('.term-pitch-accent-graph-line-tail');
+ path.setAttribute('d', `M${pathPoints.join(' L')}`);
+ }
+
createFrequencyTag(details) {
const node = this._templateHandler.instantiate('tag-frequency');