From 255c8b724e036d9d38e1dab4540974d11fc00bfa Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Tue, 3 Nov 2020 22:30:20 -0500 Subject: Pitch accents preview (#987) * Add public preparePitchAccents function to DisplayGenerator * Add pitch accents preview HTML, CSS, and JS --- ext/bg/css/pitch-accents-preview.css | 56 +++++++++++++++++++++ ext/bg/js/settings/pitch-accents-preview-main.js | 30 +++++++++++ ext/bg/pitch-accents-preview.html | 63 ++++++++++++++++++++++++ ext/mixed/js/display-generator.js | 13 +++-- 4 files changed, 157 insertions(+), 5 deletions(-) create mode 100644 ext/bg/css/pitch-accents-preview.css create mode 100644 ext/bg/js/settings/pitch-accents-preview-main.js create mode 100644 ext/bg/pitch-accents-preview.html 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 . + */ + +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 . + */ + +/* 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 @@ + + + + + + Yomichan Pitch Accents Preview + + + + + + + + + + + + +
+ +
    +
  • + Downstep notation - + + よむ + +
    • +
  • + Downstep position - + + 1 + +
    • +
  • + Graph - + + + + + + + + + + + +
    • +
+ +
+ + + + + + + + + + + + + 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; -- cgit v1.2.3