From 9c6ff387a0836a78b7a755cfc99828e09d6a6cf8 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Fri, 6 Nov 2020 22:14:00 -0500 Subject: [PATCH] Popup preview update (#994) * Add options.global.showPopupPreview option * Add preview visibility control using a checkbox * Add attribute on page load * Disable animation until page is loaded --- ext/bg/css/popup-preview.css | 15 +++++++++---- ext/bg/data/options-schema.json | 7 ++++++- ext/bg/js/options.js | 2 ++ .../js/settings/popup-preview-controller.js | 21 ++++++++++++++++++- .../js/settings/popup-preview-frame-main.js | 2 ++ 5 files changed, 41 insertions(+), 6 deletions(-) diff --git a/ext/bg/css/popup-preview.css b/ext/bg/css/popup-preview.css index 3828d236..6f520db6 100644 --- a/ext/bg/css/popup-preview.css +++ b/ext/bg/css/popup-preview.css @@ -15,8 +15,15 @@ * along with this program. If not, see . */ +:root { + --animation-duration: 0s; +} +:root[data-loaded=true] { + --animation-duration: 0.25s; +} + html { - transition: background-color 0.25s linear 0s, color 0.25s linear 0s; + transition: background-color var(--animation-duration) linear 0s, color var(--animation-duration) linear 0s; background-color: rgba(255, 255, 255, 0); color: #333333; } @@ -81,7 +88,7 @@ body { color: inherit; background-color: transparent; white-space: pre; - transition: background-color 0.25s linear 0s, border-color 0.25s linear 0s; + transition: background-color var(--animation-duration) linear 0s, border-color var(--animation-duration) linear 0s; } .example-text:hover, .example-text-input { @@ -114,12 +121,12 @@ body { flex: 0 1 auto; visibility: hidden; opacity: 0; - transition: opacity 0.5s linear 0s, visibility 0s linear 0.5s; + transition: opacity var(--animation-duration) linear 0s, visibility 0s linear var(--animation-duration); } .placeholder-info.placeholder-info-visible { visibility: visible; opacity: 1; - transition: opacity 0.5s linear 0s, visibility 0s linear 0s; + transition: opacity var(--animation-duration) linear 0s, visibility 0s linear 0s; } .theme-button { diff --git a/ext/bg/data/options-schema.json b/ext/bg/data/options-schema.json index b66577f8..159ca009 100644 --- a/ext/bg/data/options-schema.json +++ b/ext/bg/data/options-schema.json @@ -790,7 +790,8 @@ "global": { "type": "object", "required": [ - "database" + "database", + "showPopupPreview" ], "properties": { "database": { @@ -804,6 +805,10 @@ "default": false } } + }, + "showPopupPreview": { + "type": "boolean", + "default": false } } } diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js index 00d4725a..0edbb82a 100644 --- a/ext/bg/js/options.js +++ b/ext/bg/js/options.js @@ -612,7 +612,9 @@ class OptionsUtil { async _updateVersion6(options) { // Version 6 changes: // Updated handlebars templates to include "conjugation" definition. + // Added global option showPopupPreview. await this._addFieldTemplatesToOptions(options, '/bg/data/anki-field-templates-upgrade-v6.handlebars'); + options.global.showPopupPreview = false; return options; } } diff --git a/ext/bg/js/settings/popup-preview-controller.js b/ext/bg/js/settings/popup-preview-controller.js index 80a64156..9dc29524 100644 --- a/ext/bg/js/settings/popup-preview-controller.js +++ b/ext/bg/js/settings/popup-preview-controller.js @@ -28,9 +28,11 @@ class PopupPreviewController { this._previewTextInput = null; this._customCss = null; this._customOuterCss = null; + this._previewFrameContainer = null; + this._showPopupPreviewCheckbox = null; } - prepare() { + async prepare() { const button = document.querySelector('#settings-popup-preview-button'); if (button !== null) { button.addEventListener('click', this._onShowPopupPreviewButtonClick.bind(this), false); @@ -38,13 +40,20 @@ class PopupPreviewController { this._frame = document.querySelector('#popup-preview-frame'); this._customCss = document.querySelector('#custom-popup-css'); this._customOuterCss = document.querySelector('#custom-popup-outer-css'); + this._previewFrameContainer = document.querySelector('.preview-frame-container'); + this._showPopupPreviewCheckbox = document.querySelector('#show-preview-checkbox'); this._customCss.addEventListener('input', this._onCustomCssChange.bind(this), false); this._customCss.addEventListener('settingChanged', this._onCustomCssChange.bind(this), false); this._customOuterCss.addEventListener('input', this._onCustomOuterCssChange.bind(this), false); this._customOuterCss.addEventListener('settingChanged', this._onCustomOuterCssChange.bind(this), false); this._frame.addEventListener('load', this._onFrameLoad2.bind(this), false); + this._showPopupPreviewCheckbox.addEventListener('change', this._onShowPreviewCheckboxChange.bind(this), false); this._settingsController.on('optionsContextChanged', this._onOptionsContextChange.bind(this)); + + const {global: {showPopupPreview}} = await this._settingsController.getOptionsFull(); + this._showPopupPreviewCheckbox.checked = showPopupPreview; + this._updatePopupPreviewVisibility(); } } @@ -56,6 +65,10 @@ class PopupPreviewController { this._previewVisible = true; } + _onShowPreviewCheckboxChange() { + this._updatePopupPreviewVisibility(); + } + _showAppearancePreview() { const container = document.querySelector('#settings-popup-preview-container'); const buttonContainer = document.querySelector('#settings-popup-preview-button-container'); @@ -124,4 +137,10 @@ class PopupPreviewController { if (this._frame === null || this._frame.contentWindow === null) { return; } this._frame.contentWindow.postMessage({action, params}, this._targetOrigin); } + + _updatePopupPreviewVisibility() { + const value = this._showPopupPreviewCheckbox.checked; + this._previewFrameContainer.classList.toggle('preview-frame-container-visible', value); + this._settingsController.setGlobalSetting('global.showPopupPreview', value); + } } diff --git a/ext/bg/js/settings/popup-preview-frame-main.js b/ext/bg/js/settings/popup-preview-frame-main.js index 866b9f57..038327cd 100644 --- a/ext/bg/js/settings/popup-preview-frame-main.js +++ b/ext/bg/js/settings/popup-preview-frame-main.js @@ -32,6 +32,8 @@ const preview = new PopupPreviewFrame(frameId, popupFactory); await preview.prepare(); + + document.documentElement.dataset.loaded = 'true'; } catch (e) { yomichan.logError(e); }