summaryrefslogtreecommitdiff
path: root/ext/bg/js/settings
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-10-20 19:08:17 -0400
committerGitHub <noreply@github.com>2020-10-20 19:08:17 -0400
commitecbac2c5ea4aecfb4d43d5beb20792f644e334d0 (patch)
tree0890783bbecf2886610324625e7463155da969fa /ext/bg/js/settings
parent23230b8a7c5eb66357d5bcafb4184def13c5954b (diff)
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
Diffstat (limited to 'ext/bg/js/settings')
-rw-r--r--ext/bg/js/settings/popup-preview-controller.js2
-rw-r--r--ext/bg/js/settings/popup-preview-frame.js53
2 files changed, 46 insertions, 9 deletions
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();