aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ext/bg/js/settings/main.js4
-rw-r--r--ext/bg/js/settings/popup-preview.js138
2 files changed, 80 insertions, 62 deletions
diff --git a/ext/bg/js/settings/main.js b/ext/bg/js/settings/main.js
index 1d387749..b84824e6 100644
--- a/ext/bg/js/settings/main.js
+++ b/ext/bg/js/settings/main.js
@@ -20,12 +20,12 @@
* AnkiTemplatesController
* AudioController
* DictionaryController
+ * PopupPreviewController
* ProfileController
* SettingsBackup
* SettingsController
* StorageController
* api
- * appearanceInitialize
* utilBackend
* utilBackgroundIsolate
*/
@@ -330,7 +330,7 @@ async function onReady() {
await settingsPopulateModifierKeys();
formSetupEventListeners();
- appearanceInitialize();
+ new PopupPreviewController().prepare();
new AudioController().prepare();
await (new ProfileController()).prepare();
dictionaryController = new DictionaryController(storageController);
diff --git a/ext/bg/js/settings/popup-preview.js b/ext/bg/js/settings/popup-preview.js
index fdc3dd94..d5519959 100644
--- a/ext/bg/js/settings/popup-preview.js
+++ b/ext/bg/js/settings/popup-preview.js
@@ -20,65 +20,83 @@
* wanakana
*/
-function appearanceInitialize() {
- let previewVisible = false;
- $('#settings-popup-preview-button').on('click', () => {
- if (previewVisible) { return; }
- showAppearancePreview();
- previewVisible = true;
- });
-}
+class PopupPreviewController {
+ constructor() {
+ this._previewVisible = false;
+ this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');
+ this._frame = null;
+ this._previewTextInput = null;
+ }
+
+ prepare() {
+ document.querySelector('#settings-popup-preview-button').addEventListener('click', this._onShowPopupPreviewButtonClick.bind(this), false);
+ }
+
+ // Private
+
+ _onShowPopupPreviewButtonClick() {
+ if (this._previewVisible) { return; }
+ this._showAppearancePreview();
+ this._previewVisible = true;
+ }
+
+ _showAppearancePreview() {
+ const container = document.querySelector('#settings-popup-preview-container');
+ const buttonContainer = document.querySelector('#settings-popup-preview-button-container');
+ const settings = document.querySelector('#settings-popup-preview-settings');
+ const text = document.querySelector('#settings-popup-preview-text');
+ const customCss = document.querySelector('#custom-popup-css');
+ const customOuterCss = document.querySelector('#custom-popup-outer-css');
+ const frame = document.createElement('iframe');
+
+ this._previewTextInput = text;
+ this._frame = frame;
+
+ wanakana.bind(text);
+
+ frame.addEventListener('load', this._onFrameLoad.bind(this), false);
+ text.addEventListener('input', this._onTextChange.bind(this), false);
+ customCss.addEventListener('input', this._onCustomCssChange.bind(this), false);
+ customOuterCss.addEventListener('input', this._onCustomOuterCssChange.bind(this), false);
+ yomichan.on('modifyingProfileChange', this._onOptionsContextChange.bind(this));
+
+ frame.src = '/bg/settings-popup-preview.html';
+ frame.id = 'settings-popup-preview-frame';
+
+ container.appendChild(frame);
+ if (buttonContainer.parentNode !== null) {
+ buttonContainer.parentNode.removeChild(buttonContainer);
+ }
+ settings.style.display = '';
+ }
+
+ _onFrameLoad() {
+ this._onOptionsContextChange();
+ this._setText(this._previewTextInput.value);
+ }
+
+ _onTextChange(e) {
+ this._setText(e.currentTarget.value);
+ }
+
+ _onCustomCssChange(e) {
+ this._invoke('setCustomCss', {css: e.currentTarget.value});
+ }
+
+ _onCustomOuterCssChange(e) {
+ this._invoke('setCustomOuterCss', {css: e.currentTarget.value});
+ }
+
+ _onOptionsContextChange() {
+ this._invoke('updateOptionsContext', {optionsContext: getOptionsContext()});
+ }
+
+ _setText(text) {
+ this._invoke('setText', {text});
+ }
-function showAppearancePreview() {
- const container = $('#settings-popup-preview-container');
- const buttonContainer = $('#settings-popup-preview-button-container');
- const settings = $('#settings-popup-preview-settings');
- const text = $('#settings-popup-preview-text');
- const customCss = $('#custom-popup-css');
- const customOuterCss = $('#custom-popup-outer-css');
-
- const frame = document.createElement('iframe');
- frame.src = '/bg/settings-popup-preview.html';
- frame.id = 'settings-popup-preview-frame';
-
- wanakana.bind(text[0]);
-
- const targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');
-
- text.on('input', () => {
- const action = 'setText';
- const params = {text: text.val()};
- frame.contentWindow.postMessage({action, params}, targetOrigin);
- });
- customCss.on('input', () => {
- const action = 'setCustomCss';
- const params = {css: customCss.val()};
- frame.contentWindow.postMessage({action, params}, targetOrigin);
- });
- customOuterCss.on('input', () => {
- const action = 'setCustomOuterCss';
- const params = {css: customOuterCss.val()};
- frame.contentWindow.postMessage({action, params}, targetOrigin);
- });
-
- const updateOptionsContext = () => {
- const action = 'updateOptionsContext';
- const params = {
- optionsContext: getOptionsContext()
- };
- frame.contentWindow.postMessage({action, params}, targetOrigin);
- };
- yomichan.on('modifyingProfileChange', updateOptionsContext);
-
- frame.addEventListener('load', () => {
- const action = 'prepare';
- const params = {
- optionsContext: getOptionsContext()
- };
- frame.contentWindow.postMessage({action, params}, targetOrigin);
- });
-
- container.append(frame);
- buttonContainer.remove();
- settings.css('display', '');
+ _invoke(action, params) {
+ if (this._frame === null || this._frame.contentWindow === null) { return; }
+ this._frame.contentWindow.postMessage({action, params}, this._targetOrigin);
+ }
}