alex/yomichan
1
Fork 0
Code Releases Activity

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

Browse Source 
* Convert popup-preview.js to a class

* Don't invoke 'prepare'
This commit is contained in:
toasted-nutbread 2020-05-29 20:28:12 -04:00 committed by GitHub
parent 418e8a57bf
commit 9624566d2a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 81 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ext/bg/js/settings/main.js
View File

@ -20,12 +20,12 @@
* AnkiTemplatesController * AnkiTemplatesController
* AudioController * AudioController
* DictionaryController * DictionaryController
* PopupPreviewController
* ProfileController * ProfileController
* SettingsBackup * SettingsBackup
* SettingsController * SettingsController
* StorageController * StorageController
* api * api
* appearanceInitialize
* utilBackend * utilBackend
* utilBackgroundIsolate * utilBackgroundIsolate
*/ */
@ -330,7 +330,7 @@ async function onReady() {
await settingsPopulateModifierKeys(); await settingsPopulateModifierKeys();
formSetupEventListeners(); formSetupEventListeners();
appearanceInitialize(); new PopupPreviewController().prepare();
new AudioController().prepare(); new AudioController().prepare();
await (new ProfileController()).prepare(); await (new ProfileController()).prepare();
dictionaryController = new DictionaryController(storageController); dictionaryController = new DictionaryController(storageController);

126
ext/bg/js/settings/popup-preview.js
View File

@ -20,65 +20,83 @@
* wanakana * wanakana
*/ */
function appearanceInitialize() { class PopupPreviewController {
let previewVisible = false; constructor() {
$('#settings-popup-preview-button').on('click', () => { this._previewVisible = false;
if (previewVisible) { return; } this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');
showAppearancePreview(); this._frame = null;
previewVisible = true; this._previewTextInput = null;
});
} }
function showAppearancePreview() { prepare() {
const container = $('#settings-popup-preview-container'); document.querySelector('#settings-popup-preview-button').addEventListener('click', this._onShowPopupPreviewButtonClick.bind(this), false);
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');
// 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'); 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.src = '/bg/settings-popup-preview.html';
frame.id = 'settings-popup-preview-frame'; frame.id = 'settings-popup-preview-frame';
wanakana.bind(text[0]); container.appendChild(frame);
if (buttonContainer.parentNode !== null) {
const targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, ''); buttonContainer.parentNode.removeChild(buttonContainer);
}
text.on('input', () => { settings.style.display = '';
const action = 'setText'; }
const params = {text: text.val()};
frame.contentWindow.postMessage({action, params}, targetOrigin); _onFrameLoad() {
}); this._onOptionsContextChange();
customCss.on('input', () => { this._setText(this._previewTextInput.value);
const action = 'setCustomCss'; }
const params = {css: customCss.val()};
frame.contentWindow.postMessage({action, params}, targetOrigin); _onTextChange(e) {
}); this._setText(e.currentTarget.value);
customOuterCss.on('input', () => { }
const action = 'setCustomOuterCss';
const params = {css: customOuterCss.val()}; _onCustomCssChange(e) {
frame.contentWindow.postMessage({action, params}, targetOrigin); this._invoke('setCustomCss', {css: e.currentTarget.value});
}); }
const updateOptionsContext = () => { _onCustomOuterCssChange(e) {
const action = 'updateOptionsContext'; this._invoke('setCustomOuterCss', {css: e.currentTarget.value});
const params = { }
optionsContext: getOptionsContext()
}; _onOptionsContextChange() {
frame.contentWindow.postMessage({action, params}, targetOrigin); this._invoke('updateOptionsContext', {optionsContext: getOptionsContext()});
}; }
yomichan.on('modifyingProfileChange', updateOptionsContext);
_setText(text) {
frame.addEventListener('load', () => { this._invoke('setText', {text});
const action = 'prepare'; }
const params = {
optionsContext: getOptionsContext() _invoke(action, params) {
}; if (this._frame === null || this._frame.contentWindow === null) { return; }
frame.contentWindow.postMessage({action, params}, targetOrigin); this._frame.contentWindow.postMessage({action, params}, this._targetOrigin);
}); }
container.append(frame);
buttonContainer.remove();
settings.css('display', '');
} }