From a4de2d425a160954aa0311c7a501a5ec83449502 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 1 Dec 2019 16:17:44 -0500 Subject: Move popup preview settings into new script --- ext/bg/js/settings/main.js | 49 ----------------------------- ext/bg/js/settings/popup-preview.js | 62 +++++++++++++++++++++++++++++++++++++ ext/bg/settings.html | 1 + 3 files changed, 63 insertions(+), 49 deletions(-) create mode 100644 ext/bg/js/settings/popup-preview.js (limited to 'ext/bg') diff --git a/ext/bg/js/settings/main.js b/ext/bg/js/settings/main.js index 48471ccb..5724cdb3 100644 --- a/ext/bg/js/settings/main.js +++ b/ext/bg/js/settings/main.js @@ -222,55 +222,6 @@ async function onReady() { $(document).ready(() => onReady()); -/* - * Appearance - */ - -function appearanceInitialize() { - let previewVisible = false; - $('#settings-popup-preview-button').on('click', () => { - if (previewVisible) { return; } - showAppearancePreview(); - previewVisible = true; - }); -} - -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'; - - window.wanakana.bind(text[0]); - - text.on('input', () => { - const action = 'setText'; - const params = {text: text.val()}; - frame.contentWindow.postMessage({action, params}, '*'); - }); - customCss.on('input', () => { - const action = 'setCustomCss'; - const params = {css: customCss.val()}; - frame.contentWindow.postMessage({action, params}, '*'); - }); - customOuterCss.on('input', () => { - const action = 'setCustomOuterCss'; - const params = {css: customOuterCss.val()}; - frame.contentWindow.postMessage({action, params}, '*'); - }); - - container.append(frame); - buttonContainer.remove(); - settings.css('display', ''); -} - - /* * Remote options updates */ diff --git a/ext/bg/js/settings/popup-preview.js b/ext/bg/js/settings/popup-preview.js new file mode 100644 index 00000000..d8579eb1 --- /dev/null +++ b/ext/bg/js/settings/popup-preview.js @@ -0,0 +1,62 @@ +/* + * Copyright (C) 2019 Alex Yatskov + * Author: Alex Yatskov + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + + +function appearanceInitialize() { + let previewVisible = false; + $('#settings-popup-preview-button').on('click', () => { + if (previewVisible) { return; } + showAppearancePreview(); + previewVisible = true; + }); +} + +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'; + + window.wanakana.bind(text[0]); + + text.on('input', () => { + const action = 'setText'; + const params = {text: text.val()}; + frame.contentWindow.postMessage({action, params}, '*'); + }); + customCss.on('input', () => { + const action = 'setCustomCss'; + const params = {css: customCss.val()}; + frame.contentWindow.postMessage({action, params}, '*'); + }); + customOuterCss.on('input', () => { + const action = 'setCustomOuterCss'; + const params = {css: customOuterCss.val()}; + frame.contentWindow.postMessage({action, params}, '*'); + }); + + container.append(frame); + buttonContainer.remove(); + settings.css('display', ''); +} diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 1b527327..0e6701e6 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -886,6 +886,7 @@ + -- cgit v1.2.3