From ecbac2c5ea4aecfb4d43d5beb20792f644e334d0 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Tue, 20 Oct 2020 19:08:17 -0400 Subject: Popup preview improvements (#947) * Move CSS * Update indent * Refactor HTML/CSS * Add support for editing the source text * Add WanaKana binding for input * Rename file --- ext/bg/css/popup-preview.css | 144 +++++++++++++++++++++++++ ext/bg/js/settings/popup-preview-controller.js | 2 +- ext/bg/js/settings/popup-preview-frame.js | 53 +++++++-- ext/bg/popup-preview.html | 60 +++++++++++ ext/bg/settings-popup-preview.html | 141 ------------------------ 5 files changed, 250 insertions(+), 150 deletions(-) create mode 100644 ext/bg/css/popup-preview.css create mode 100644 ext/bg/popup-preview.html delete mode 100644 ext/bg/settings-popup-preview.html (limited to 'ext/bg') diff --git a/ext/bg/css/popup-preview.css b/ext/bg/css/popup-preview.css new file mode 100644 index 00000000..fd8df47a --- /dev/null +++ b/ext/bg/css/popup-preview.css @@ -0,0 +1,144 @@ +/* + * 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 { + --text-color: #333333; + --background-color: #ffffff; + --theme-transition: background-color 0.25s linear 0s, color 0.25s linear 0s; + transition: var(--theme-transition); + background-color: var(--background-color); + color: var(--text-color); +} +html.dark { + --text-color: #d4d4d4; + --background-color: #1e1e1e; +} +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; +} + +.content { + display: flex; + min-width: 100%; + min-height: 100%; + box-sizing: border-box; + padding: 1em; + flex-flow: column nowrap; + align-items: center; + justify-content: center; +} +.content-body { + max-width: 100%; + width: 400px; +} +.top-options { + max-width: 100%; + display: flex; + flex-flow: row nowrap; + align-items: center; +} +.top-options-left { + flex: 1 1 auto; + overflow-x: hidden; +} +.top-options-right { + flex: 0 0 auto; +} + +.example-text-container { + position: relative; +} +.example-text { + display: block; + width: 100%; + font-size: 24px; + line-height: 1.25em; + height: 1.25em; + box-sizing: border-box; + border: 1px solid rgba(221, 221, 221, 0); + margin: 0; + padding: 0; + outline: none; + color: inherit; + background-color: transparent; + white-space: pre; + transition: background-color 0.25s linear 0s, border-color 0.25s linear 0s; +} +.example-text:hover, +.example-text-input { + border-color: #dddddd; +} +.example-text[hidden] { + display: none; +} +.example-text-input { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: var(--background-color); +} + +.popup-placeholder { + display: flex; + width: 100%; + height: 250px; + padding-top: 10px; + border: 1px solid rgba(0, 0, 0, 0); + flex-flow: column nowrap; + justify-content: center; +} +.placeholder-info { + flex: 0 1 auto; + visibility: hidden; + opacity: 0; + transition: opacity 0.5s linear 0s, visibility 0s linear 0.5s; +} +.placeholder-info.placeholder-info-visible { + visibility: visible; + opacity: 1; + transition: opacity 0.5s linear 0s, visibility 0s linear 0s; +} + +.theme-button { + display: inline-block; + margin-left: 0.5em; + text-decoration: none; + cursor: pointer; + white-space: nowrap; + line-height: 0; +} +.theme-button>input { + vertical-align: middle; + margin: 0 0.25em 0 0; + padding: 0; +} +.theme-button>span { + vertical-align: middle; +} +.theme-button:hover>span { + text-decoration: underline; +} diff --git a/ext/bg/js/settings/popup-preview-controller.js b/ext/bg/js/settings/popup-preview-controller.js index d4145b76..796b23ea 100644 --- a/ext/bg/js/settings/popup-preview-controller.js +++ b/ext/bg/js/settings/popup-preview-controller.js @@ -60,7 +60,7 @@ class PopupPreviewController { customOuterCss.addEventListener('input', this._onCustomOuterCssChange.bind(this), false); this._settingsController.on('optionsContextChanged', this._onOptionsContextChange.bind(this)); - frame.src = '/bg/settings-popup-preview.html'; + frame.src = '/bg/popup-preview.html'; frame.id = 'settings-popup-preview-frame'; container.appendChild(frame); diff --git a/ext/bg/js/settings/popup-preview-frame.js b/ext/bg/js/settings/popup-preview-frame.js index bce5919d..7e177453 100644 --- a/ext/bg/js/settings/popup-preview-frame.js +++ b/ext/bg/js/settings/popup-preview-frame.js @@ -20,6 +20,7 @@ * Popup * TextSourceRange * api + * wanakana */ class PopupPreviewFrame { @@ -34,10 +35,12 @@ class PopupPreviewFrame { this._themeChangeTimeout = null; this._textSource = null; this._optionsContext = null; + this._exampleText = null; + this._exampleTextInput = null; this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, ''); this._windowMessageHandlers = new Map([ - ['setText', this._setText.bind(this)], + ['setText', this._onSetText.bind(this)], ['setCustomCss', this._setCustomCss.bind(this)], ['setCustomOuterCss', this._setCustomOuterCss.bind(this)], ['updateOptionsContext', this._updateOptionsContext.bind(this)] @@ -45,10 +48,20 @@ class PopupPreviewFrame { } async prepare() { + this._exampleText = document.querySelector('#example-text'); + this._exampleTextInput = document.querySelector('#example-text-input'); + + if (this._exampleTextInput !== null && typeof wanakana !== 'undefined') { + wanakana.bind(this._exampleTextInput); + } + window.addEventListener('message', this._onMessage.bind(this), false); // Setup events document.querySelector('#theme-dark-checkbox').addEventListener('change', this._onThemeDarkCheckboxChanged.bind(this), false); + this._exampleText.addEventListener('click', this._onExampleTextClick.bind(this), false); + this._exampleTextInput.addEventListener('blur', this._onExampleTextInputBlur.bind(this), false); + this._exampleTextInput.addEventListener('input', this._onExampleTextInputInput.bind(this), false); // Overwrite API functions this._apiOptionsGetOld = api.optionsGet.bind(api); @@ -142,11 +155,36 @@ class PopupPreviewFrame { }, 300); } - _setText({text}) { - const exampleText = document.querySelector('#example-text'); - if (exampleText === null) { return; } + _onExampleTextClick() { + if (this._exampleTextInput === null) { return; } + const visible = this._exampleTextInput.hidden; + this._exampleTextInput.hidden = !visible; + if (!visible) { return; } + this._exampleTextInput.focus(); + this._exampleTextInput.select(); + } + + _onExampleTextInputBlur() { + if (this._exampleTextInput === null) { return; } + this._exampleTextInput.hidden = true; + } + + _onExampleTextInputInput(e) { + this._setText(e.currentTarget.value); + } + + _onSetText({text}) { + this._setText(text, true); + } + + _setText(text, setInput) { + if (setInput && this._exampleTextInput !== null) { + this._exampleTextInput.value = text; + } + + if (this._exampleText === null) { return; } - exampleText.textContent = text; + this._exampleText.textContent = text; if (this._frontend === null) { return; } this._updateSearch(); } @@ -180,10 +218,9 @@ class PopupPreviewFrame { } async _updateSearch() { - const exampleText = document.querySelector('#example-text'); - if (exampleText === null) { return; } + if (this._exampleText === null) { return; } - const textNode = exampleText.firstChild; + const textNode = this._exampleText.firstChild; if (textNode === null) { return; } const range = document.createRange(); diff --git a/ext/bg/popup-preview.html b/ext/bg/popup-preview.html new file mode 100644 index 00000000..61df0876 --- /dev/null +++ b/ext/bg/popup-preview.html @@ -0,0 +1,60 @@ + + + + + + Yomichan Popup Preview + + + + + + + + + + + + +
+
+
+
+ + 読め +
+
+
+ +
+
+
+ This page uses the dictionaries you have installed in order to show a preview. + If you see this message, make sure you have a dictionary installed. +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ext/bg/settings-popup-preview.html b/ext/bg/settings-popup-preview.html deleted file mode 100644 index 6487bd25..00000000 --- a/ext/bg/settings-popup-preview.html +++ /dev/null @@ -1,141 +0,0 @@ - - - - - - Yomichan Popup Preview - - - - - - - - - - - -
-
-
- 読め -
-
-
- This page uses the dictionaries you have installed in order to show a preview. - If you see this message, make sure you have a dictionary installed. -
-
-
- - - - - - - - - - - - - - - - - - - - - - -- cgit v1.2.3