diff options
| -rw-r--r-- | ext/bg/js/settings/main.js | 49 | ||||
| -rw-r--r-- | ext/bg/js/settings/popup-preview.js | 62 | ||||
| -rw-r--r-- | ext/bg/settings.html | 1 | 
3 files changed, 63 insertions, 49 deletions
| 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 @@ -223,55 +223,6 @@ $(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 <alex@foosoft.net> + * Author: Alex Yatskov <alex@foosoft.net> + * + * 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 <http://www.gnu.org/licenses/>. + */ + + +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 @@          <script src="/bg/js/settings/anki-templates.js"></script>          <script src="/bg/js/settings/audio.js"></script>          <script src="/bg/js/settings/dictionaries.js"></script> +        <script src="/bg/js/settings/popup-preview.js"></script>          <script src="/bg/js/settings/profiles.js"></script>          <script src="/bg/js/settings/storage.js"></script> |