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
GitHub
parent
838175f06b
commit
255c8b724e
56
ext/bg/css/pitch-accents-preview.css
Normal file
56
ext/bg/css/pitch-accents-preview.css
Normal 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;
|
||||||
|
}
|
||||||
30
ext/bg/js/settings/pitch-accents-preview-main.js
Normal file
30
ext/bg/js/settings/pitch-accents-preview-main.js
Normal 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);
|
||||||
|
}
|
||||||
|
})();
|
||||||
63
ext/bg/pitch-accents-preview.html
Normal file
63
ext/bg/pitch-accents-preview.html
Normal 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>
|
||||||
@ -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;
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user