diff options
Diffstat (limited to 'ext')
-rw-r--r-- | ext/bg/css/pitch-accents-preview.css | 56 | ||||
-rw-r--r-- | ext/bg/js/settings/pitch-accents-preview-main.js | 30 | ||||
-rw-r--r-- | ext/bg/pitch-accents-preview.html | 63 | ||||
-rw-r--r-- | ext/mixed/js/display-generator.js | 13 |
4 files changed, 157 insertions, 5 deletions
diff --git a/ext/bg/css/pitch-accents-preview.css b/ext/bg/css/pitch-accents-preview.css new file mode 100644 index 00000000..75a3a08b --- /dev/null +++ b/ext/bg/css/pitch-accents-preview.css @@ -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; +} diff --git a/ext/bg/js/settings/pitch-accents-preview-main.js b/ext/bg/js/settings/pitch-accents-preview-main.js new file mode 100644 index 00000000..59e5b194 --- /dev/null +++ b/ext/bg/js/settings/pitch-accents-preview-main.js @@ -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); + } +})(); diff --git a/ext/bg/pitch-accents-preview.html b/ext/bg/pitch-accents-preview.html new file mode 100644 index 00000000..bc6d44ae --- /dev/null +++ b/ext/bg/pitch-accents-preview.html @@ -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> diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js index 926eb25d..910d45da 100644 --- a/ext/mixed/js/display-generator.js +++ b/ext/mixed/js/display-generator.js @@ -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; |