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);
|
||||
}
|
||||
|
||||
preparePitchAccents() {
|
||||
if (this._termPitchAccentStaticTemplateIsSetup) { return; }
|
||||
this._termPitchAccentStaticTemplateIsSetup = true;
|
||||
const t = this._templates.instantiate('term-pitch-accent-static');
|
||||
document.head.appendChild(t);
|
||||
}
|
||||
|
||||
createTermEntry(details) {
|
||||
const node = this._templates.instantiate('term-entry');
|
||||
|
||||
@ -357,11 +364,7 @@ class DisplayGenerator {
|
||||
}
|
||||
|
||||
_createPitches(details) {
|
||||
if (!this._termPitchAccentStaticTemplateIsSetup) {
|
||||
this._termPitchAccentStaticTemplateIsSetup = true;
|
||||
const t = this._templates.instantiate('term-pitch-accent-static');
|
||||
document.head.appendChild(t);
|
||||
}
|
||||
this.preparePitchAccents();
|
||||
|
||||
const {dictionary, pitches} = details;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user