Version 5.0.0 beta 10

applications/core/interface/themeeditor/themeEditor.js

@@ -82,6 +82,9 @@ customElements.define('theme-editor', class extends HTMLElement {
         // iFrame Sync
         document.getElementById('themeEditorIframe').addEventListener('load', e => this.iframeSync());
 
+        // Color scheme sync
+        document.addEventListener("ips:colorScheme", this.closeColorPicker);
+
         // Update value of "color-scheme" button if system setting changes, and preference was set to auto
         window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
             if (document.documentElement.getAttribute('data-ips-scheme-active') != 'system') return;
@@ -136,9 +139,6 @@ customElements.define('theme-editor', class extends HTMLElement {
             this.removeAttribute('data-loading');
         }, 3000);
 
-        // Update the active Color Scheme button
-        this.querySelector(`[data-workspace='color'] [value='${document.documentElement.getAttribute("data-ips-scheme")}']`).setAttribute('data-active', true);
-
         // Add custom setting UIs (header drag, etc)
         this.customSettingUIs();
 
@@ -243,15 +243,8 @@ customElements.define('theme-editor', class extends HTMLElement {
             target.setAttribute('data-active', true);
             document.documentElement.setAttribute(`data-workspace-${type}`, target.value);
         }
-
-        // Update color scheme by clicking a color scheme button in the iframe
-        if(type === 'color' && e.isTrusted){
-            this.iframe.document.querySelector(`[data-ips-prefers-color-scheme=${target.value}]`).click();
-        }
     }
 
-
-
     /**
      * Navigate through panels, and store the history in an array so we can 'go back'
      * @param {Event} event 
@@ -493,19 +486,14 @@ customElements.define('theme-editor', class extends HTMLElement {
 
 
     /**
-     * When a "change color-scheme" button inside the iframe is clicked, change the color of the theme editor.
-     * @param {HTMLElement} target  The 'prefers color scheme' button
+     * When a "change color-scheme" button is clicked, close the color picker if it's open
+     * @param {Event} event  The event
      */
-    colorSchemeSync(target){
-
-        document.querySelector('[data-ips-prefers-color-scheme=' + target.getAttribute('data-ips-prefers-color-scheme') + ']').click();
-
-        // .. update the value of the workspace options to either light/dark
-        this.querySelector('[data-workspace=color] [value=' + document.documentElement.getAttribute('data-ips-scheme') +']').click();
+    closeColorPicker(event){
 
         // If we're editing a color setting (such as Body Background), and if we change color scheme, we need to flick back to the "color settings" list otherwise we'll be editing the wrong color	
-        if(this.currentPanel.matches('#panel__colorSelector')){
-            this.currentPanel.querySelector('[data-panel-nav="back"]').click();
+        if(document.querySelector("#panel__colorSelector[aria-hidden='false']")){
+            document.querySelector('#panel__colorSelector [data-panel-nav="back"]').click();
         }
 
     }
@@ -1055,9 +1043,6 @@ customElements.define('theme-editor', class extends HTMLElement {
             this.applyDataAttributes(attr, value);
         }
 
-        // Add click events to iframe (for color scheme sync)
-        this.iframe.addEventListener('click', e => this.handleIframeClicks(e));
-
         this.removeAttribute('data-loading');
 
     }
@@ -1081,16 +1066,6 @@ customElements.define('theme-editor', class extends HTMLElement {
 
     }
 
-    /**
-     * Handle all iframe click events
-     * @param {Event} e 
-     */
-    handleIframeClicks(e){
-        let el;
-        if(el = e.target.closest('[data-ips-prefers-color-scheme]')) this.colorSchemeSync(el);
-    }
-
-
     /* Handle drag/reorder elements */
     handleDragStart(e) {
         e.currentTarget.setAttribute('data-dragging', true);