alex/yomichan
1
Fork 0
Code Releases Activity

Add support for accent graph

Browse Source
This commit is contained in:
toasted-nutbread 2020-03-01 14:20:11 -05:00
parent 97a520cc15
commit 803a464fb9
5 changed files with 117 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ext/mixed/css/display-dark.css
View File

@ -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;
}

13
ext/mixed/css/display-default.css
View File

@ -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;
}

38
ext/mixed/css/display.css
View File

@ -537,6 +537,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
*/

9
ext/mixed/display-templates.html
View File

@ -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">

45
ext/mixed/js/display-generator.js
View File

@ -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');