Pitch accents preview (#987)

* Add public preparePitchAccents function to DisplayGenerator

* Add pitch accents preview HTML, CSS, and JS
This commit is contained in:
toasted-nutbread 2020-11-03 22:30:20 -05:00 committed by GitHub
parent 838175f06b
commit 255c8b724e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 157 additions and 5 deletions

View File

@ -0,0 +1,56 @@
/*
* Copyright (C) 2020 Yomichan Authors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
html {
background-color: transparent;
color: #333333;
}
html,
body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
width: 100%;
height: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: calc(20 / 14);
}
ul {
margin: 0;
padding: 0 0 0 1.5em;
}
li {
margin: 0.425em 0;
}
.content {
display: flex;
min-width: 100%;
min-height: 100%;
box-sizing: border-box;
padding: 0;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
.content-body {
max-width: 100%;
width: 700px;
flex: 0 0 auto;
}

View File

@ -0,0 +1,30 @@
/*
* Copyright (C) 2019-2020 Yomichan Authors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
/* global
* DisplayGenerator
*/
(async () => {
try {
const displayGenerator = new DisplayGenerator({mediaLoader: null});
await displayGenerator.prepare();
displayGenerator.preparePitchAccents();
} catch (e) {
yomichan.logError(e);
}
})();

View File

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Yomichan Pitch Accents Preview</title>
<link rel="icon" type="image/png" href="/mixed/img/icon16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/mixed/img/icon19.png" sizes="19x19">
<link rel="icon" type="image/png" href="/mixed/img/icon32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/mixed/img/icon38.png" sizes="38x38">
<link rel="icon" type="image/png" href="/mixed/img/icon48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/mixed/img/icon64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/mixed/img/icon128.png" sizes="128x128">
<link rel="stylesheet" type="text/css" href="/mixed/css/display.css">
<link rel="stylesheet" type="text/css" href="/bg/css/pitch-accents-preview.css">
</head>
<body>
<div class="content"><div class="content-body">
<ul>
<li>
<em>Downstep notation</em> -
<span class="format-preview">
<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>
</li>
<li>
<em>Downstep position</em> -
<span class="format-preview">
<span class="term-pitch-accent-position">1</span>
</span>
</li>
<li>
<em>Graph</em> -
<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">
<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>
</svg>
</span>
</span>
</li>
</ul>
</div></div>
<script src="/mixed/js/core.js"></script>
<script src="/mixed/js/yomichan.js"></script>
<script src="/mixed/js/comm.js"></script>
<script src="/mixed/js/api.js"></script>
<script src="/mixed/js/display-generator.js"></script>
<script src="/mixed/js/html-template-collection.js"></script>
<script src="/bg/js/settings/pitch-accents-preview-main.js"></script>
</body>
</html>

View File

@ -34,6 +34,13 @@ class DisplayGenerator {
this._templates = new HtmlTemplateCollection(html); this._templates = new HtmlTemplateCollection(html);
} }
preparePitchAccents() {
if (this._termPitchAccentStaticTemplateIsSetup) { return; }
this._termPitchAccentStaticTemplateIsSetup = true;
const t = this._templates.instantiate('term-pitch-accent-static');
document.head.appendChild(t);
}
createTermEntry(details) { createTermEntry(details) {
const node = this._templates.instantiate('term-entry'); const node = this._templates.instantiate('term-entry');
@ -357,11 +364,7 @@ class DisplayGenerator {
} }
_createPitches(details) { _createPitches(details) {
if (!this._termPitchAccentStaticTemplateIsSetup) { this.preparePitchAccents();
this._termPitchAccentStaticTemplateIsSetup = true;
const t = this._templates.instantiate('term-pitch-accent-static');
document.head.appendChild(t);
}
const {dictionary, pitches} = details; const {dictionary, pitches} = details;