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

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