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
This commit is contained in:
toasted-nutbread 2020-10-20 19:08:17 -04:00 committed by GitHub
parent 23230b8a7c
commit ecbac2c5ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 251 additions and 150 deletions

View File

@ -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 <https://www.gnu.org/licenses/>.
*/
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;
}

View File

@ -60,7 +60,7 @@ class PopupPreviewController {
customOuterCss.addEventListener('input', this._onCustomOuterCssChange.bind(this), false); customOuterCss.addEventListener('input', this._onCustomOuterCssChange.bind(this), false);
this._settingsController.on('optionsContextChanged', this._onOptionsContextChange.bind(this)); 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'; frame.id = 'settings-popup-preview-frame';
container.appendChild(frame); container.appendChild(frame);

View File

@ -20,6 +20,7 @@
* Popup * Popup
* TextSourceRange * TextSourceRange
* api * api
* wanakana
*/ */
class PopupPreviewFrame { class PopupPreviewFrame {
@ -34,10 +35,12 @@ class PopupPreviewFrame {
this._themeChangeTimeout = null; this._themeChangeTimeout = null;
this._textSource = null; this._textSource = null;
this._optionsContext = null; this._optionsContext = null;
this._exampleText = null;
this._exampleTextInput = null;
this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, ''); this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');
this._windowMessageHandlers = new Map([ this._windowMessageHandlers = new Map([
['setText', this._setText.bind(this)], ['setText', this._onSetText.bind(this)],
['setCustomCss', this._setCustomCss.bind(this)], ['setCustomCss', this._setCustomCss.bind(this)],
['setCustomOuterCss', this._setCustomOuterCss.bind(this)], ['setCustomOuterCss', this._setCustomOuterCss.bind(this)],
['updateOptionsContext', this._updateOptionsContext.bind(this)] ['updateOptionsContext', this._updateOptionsContext.bind(this)]
@ -45,10 +48,20 @@ class PopupPreviewFrame {
} }
async prepare() { 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); window.addEventListener('message', this._onMessage.bind(this), false);
// Setup events // Setup events
document.querySelector('#theme-dark-checkbox').addEventListener('change', this._onThemeDarkCheckboxChanged.bind(this), false); 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 // Overwrite API functions
this._apiOptionsGetOld = api.optionsGet.bind(api); this._apiOptionsGetOld = api.optionsGet.bind(api);
@ -142,11 +155,36 @@ class PopupPreviewFrame {
}, 300); }, 300);
} }
_setText({text}) { _onExampleTextClick() {
const exampleText = document.querySelector('#example-text'); if (this._exampleTextInput === null) { return; }
if (exampleText === null) { return; } const visible = this._exampleTextInput.hidden;
this._exampleTextInput.hidden = !visible;
if (!visible) { return; }
this._exampleTextInput.focus();
this._exampleTextInput.select();
}
exampleText.textContent = text; _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; }
this._exampleText.textContent = text;
if (this._frontend === null) { return; } if (this._frontend === null) { return; }
this._updateSearch(); this._updateSearch();
} }
@ -180,10 +218,9 @@ class PopupPreviewFrame {
} }
async _updateSearch() { async _updateSearch() {
const exampleText = document.querySelector('#example-text'); if (this._exampleText === null) { return; }
if (exampleText === null) { return; }
const textNode = exampleText.firstChild; const textNode = this._exampleText.firstChild;
if (textNode === null) { return; } if (textNode === null) { return; }
const range = document.createRange(); const range = document.createRange();

60
ext/bg/popup-preview.html Normal file
View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Yomichan Popup 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="/bg/css/popup-preview.css">
<link rel="stylesheet" type="text/css" href="/fg/css/client.css" id="client-css">
</head>
<body>
<div class="content"><div class="content-body">
<div class="top-options">
<div class="top-options-left">
<div class="example-text-container">
<input type="text" class="example-text example-text-input" id="example-text-input" value="読め" hidden>
<span class="example-text" id="example-text">読め</span>
</div>
</div>
<div class="top-options-right">
<label class="theme-button"><input type="checkbox" id="theme-dark-checkbox"><span>dark</span></label>
</div>
</div>
<div class="popup-placeholder"><div class="placeholder-info">
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.
</div></div>
</div></div>
<script src="/mixed/lib/wanakana.min.js"></script>
<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/dynamic-loader.js"></script>
<script src="/mixed/js/frame-client.js"></script>
<script src="/mixed/js/text-scanner.js"></script>
<script src="/mixed/js/document-util.js"></script>
<script src="/fg/js/dom-text-scanner.js"></script>
<script src="/fg/js/popup.js"></script>
<script src="/fg/js/text-source-range.js"></script>
<script src="/fg/js/text-source-element.js"></script>
<script src="/fg/js/popup-factory.js"></script>
<script src="/fg/js/frontend.js"></script>
<script src="/fg/js/frame-offset-forwarder.js"></script>
<script src="/bg/js/settings/popup-preview-frame.js"></script>
<script src="/bg/js/settings/popup-preview-frame-main.js"></script>
</body>
</html>

View File

@ -1,141 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Yomichan Popup 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="/fg/css/client.css" id="client-css">
<style>
html {
transition: background-color 0.25s linear 0s, color 0.25s linear 0s;
color: #333333;
}
html.dark {
background-color: #1e1e1e;
color: #d4d4d4;
}
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;
}
iframe.yomichan-float {
resize: none;
}
.vertical-align-outer {
width: 100%;
height: 100%;
white-space: nowrap;
}
.vertical-align-outer::before {
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
}
.vertical-align-inner {
display: inline-block;
vertical-align: middle;
white-space: normal;
width: 100%;
}
.horizontal-size {
max-width: 400px;
padding: 15px;
margin: 0 auto;
}
.example-text-container {
font-size: 24px;
line-height: 1.25em;
height: 1.25em;
}
.popup-placeholder {
height: 250px;
padding-top: 10px;
border: 1px solid rgba(0, 0, 0, 0);
}
.placeholder-info {
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;
}
.options {
float: right;
font-size: 14px;
line-height: 30px;
}
.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;
}
</style>
</head>
<body>
<div class="vertical-align-outer"><div class="vertical-align-inner"><div class="horizontal-size">
<div class="example-text-container">
<div class="options"><label class="theme-button"><input type="checkbox" id="theme-dark-checkbox" /><span>dark</span></label></div>
<span id="example-text">読め</span>
</div>
<div class="popup-placeholder">
<div class="vertical-align-outer"><div class="vertical-align-inner placeholder-info">
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.
</div></div>
</div>
</div></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/dynamic-loader.js"></script>
<script src="/mixed/js/frame-client.js"></script>
<script src="/mixed/js/text-scanner.js"></script>
<script src="/mixed/js/document-util.js"></script>
<script src="/fg/js/dom-text-scanner.js"></script>
<script src="/fg/js/popup.js"></script>
<script src="/fg/js/text-source-range.js"></script>
<script src="/fg/js/text-source-element.js"></script>
<script src="/fg/js/popup-factory.js"></script>
<script src="/fg/js/frontend.js"></script>
<script src="/fg/js/frame-offset-forwarder.js"></script>
<script src="/bg/js/settings/popup-preview-frame.js"></script>
<script src="/bg/js/settings/popup-preview-frame-main.js"></script>
</body>
</html>

View File

@ -132,6 +132,7 @@ class Frontend {
} }
async setTextSource(textSource) { async setTextSource(textSource) {
this._textScanner.setCurrentTextSource(null);
await this._textScanner.search(textSource); await this._textScanner.search(textSource);
} }