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

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

@ -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;
}
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');
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';
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', '');
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});
}
_invoke(action, params) {
if (this._frame === null || this._frame.contentWindow === null) { return; }
this._frame.contentWindow.postMessage({action, params}, this._targetOrigin);
}
}