alex/yomichan
1
Fork 0
Code Releases Activity

Update the popup preview to show live updates to outer CSS changes

Browse Source
This commit is contained in:
toasted-nutbread 2019-10-13 11:51:59 -04:00
parent c9158a37b5
commit 42d67249c9
2 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -127,6 +127,11 @@ class SettingsPopupPreview {
this.frontend.popup.setCustomCss(css); this.frontend.popup.setCustomCss(css);
} }
setCustomOuterCss(css) {
if (this.frontend === null) { return; }
this.frontend.popup.setCustomOuterCss(css, true);
}
async updateSearch() { async updateSearch() {
const exampleText = document.querySelector('#example-text'); const exampleText = document.querySelector('#example-text');
if (exampleText === null) { return; } if (exampleText === null) { return; }
@ -152,7 +157,8 @@ class SettingsPopupPreview {
SettingsPopupPreview.messageHandlers = { SettingsPopupPreview.messageHandlers = {
setText: (self, {text}) => self.setText(text), setText: (self, {text}) => self.setText(text),
setCustomCss: (self, {css}) => self.setCustomCss(css) setCustomCss: (self, {css}) => self.setCustomCss(css),
setCustomOuterCss: (self, {css}) => self.setCustomOuterCss(css)
}; };
SettingsPopupPreview.instance = SettingsPopupPreview.create(); SettingsPopupPreview.instance = SettingsPopupPreview.create();

6
ext/bg/js/settings.js
View File

@ -285,6 +285,7 @@ function showAppearancePreview() {
const settings = $('#settings-popup-preview-settings'); const settings = $('#settings-popup-preview-settings');
const text = $('#settings-popup-preview-text'); const text = $('#settings-popup-preview-text');
const customCss = $('#custom-popup-css'); const customCss = $('#custom-popup-css');
const customOuterCss = $('#custom-popup-outer-css');
const frame = document.createElement('iframe'); const frame = document.createElement('iframe');
frame.src = '/bg/settings-popup-preview.html'; frame.src = '/bg/settings-popup-preview.html';
@ -302,6 +303,11 @@ function showAppearancePreview() {
const params = {css: customCss.val()}; const params = {css: customCss.val()};
frame.contentWindow.postMessage({action, params}, '*'); frame.contentWindow.postMessage({action, params}, '*');
}); });
customOuterCss.on('input', () => {
const action = 'setCustomOuterCss';
const params = {css: customOuterCss.val()};
frame.contentWindow.postMessage({action, params}, '*');
});
container.append(frame); container.append(frame);
buttonContainer.remove(); buttonContainer.remove();