feat: Palette UI synchronization ( Fixes #132 )

Author: StartAutomating

4bitcss.com/_includes/SelectPalette.ps1

@@ -31,15 +31,24 @@ function SetPalette() {
         palette.id = 'palette'
         document.head.appendChild(palette)
     }
-    var selectedPalette = document.getElementById('$SelectPaletteId').value
-    palette.href = '$PaletteCDN' + selectedPalette + '.css'        
+    var selectPalette = document.getElementById('$SelectPaletteId')
+    var selectedPalette = selectPalette.value
+    palette.href = '$PaletteCDN' + selectedPalette + '.css'
+    
+    const paletteChangedEvent = new CustomEvent('paletteChanged', {
+        bubbles: true,
+        detail: {
+            name: selectedPalette,
+            href: palette.href
+        }
+    })
+    palette.dispatchEvent(paletteChangedEvent)
+    palette.addEventListener('paletteChanged', (e)=>{
+        console.log(e.detail)
+    })
 }
 "@
 
-if ($palleteList) {
-
-}
-
 $paletteSelector = @"
 <select id='$SelectPaletteId' onchange='SetPalette()'>
 $(

4bitcss.com/_views/Palette.ps1

@@ -58,27 +58,37 @@ $($site.Palettes.Count) CSS color palettes for web or terminal
 
 @"
 <script>
-    function UpdatePaletteLinks() {
+    function UpdatePaletteLinks(paletteName) {
+        if (! paletteName) {
+            paletteName = getComputedStyle(link).getPropertyValue('--PaletteFileName')
+        }
+
         document.
             querySelectorAll('.paletteLink').
             forEach(
-                (link) => {
-                    var paletteName = getComputedStyle(link).getPropertyValue('--PaletteFileName');
+                (link) => {                    
                     link.href = '/' + paletteName
                 }
             )
                 
         document.
             querySelectorAll('.paletteFileLink').
             forEach(
-                (link) => {
-                    var paletteName = getComputedStyle(link).getPropertyValue('--PaletteFileName');
+                (link) => {                    
                     link.href = '/css/' + paletteName + '.css'
                 }
             )        
     }
 
-    UpdatePaletteLinks()    
+    var paletteStylesheetLink = document.getElementById('palette')
+    
+    if (paletteStylesheetLink) {
+        paletteStylesheetLink.addEventListener('paletteChanged', (event)=>{
+            UpdatePaletteLinks(event.detail.name) 
+        })
+        var paletteName = getComputedStyle(paletteStylesheetLink).getPropertyValue('--PaletteFileName')
+        UpdatePaletteLinks(paletteName)
+    }
 </script>
 "@