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();
+ }
- 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; }
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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index 97f73075..af1a6527 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -132,6 +132,7 @@ class Frontend {
}
async setTextSource(textSource) {
+ this._textScanner.setCurrentTextSource(null);
await this._textScanner.search(textSource);
}