Convert popup-preview.js to a class (#571)

* Convert popup-preview.js to a class

* Don't invoke 'prepare'

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);
+    }
 }