fix color pickers

nomadjimbob · Oct 15, 2023 · dea1f08 · dea1f08
1 parent f02b8ab
commit dea1f08
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -237,6 +237,10 @@ If the plugin is installed, the **Template Styles Settings** page will be expand
 
 ## Releases
 
+-   **_2023-10-16_**
+
+    -   Added color picker selector back to style page. Requested by Jan.
+
 -   **_2023-10-14_**
 
     -   Fixed bug where external page tools where not showing in the tool bar. Thanks Jan.

diff --git a/assets/mikio.css b/assets/mikio.css
@@ -1989,6 +1989,23 @@ pre {
 .mikio .mode_admin input[type=email] {
   width: 100%;
 }
+.mikio .mode_admin div.mikio-color-picker {
+  position: relative;
+}
+.mikio .mode_admin div.mikio-color-picker input[type=color] {
+  height: 35px;
+  border: 0;
+  border-radius: 0;
+}
+.mikio .mode_admin div.mikio-color-picker input[type=text] {
+  width: auto;
+}
+.mikio .mode_admin div.mikio-color-button {
+  position: absolute;
+  top: 4px;
+  right: 0;
+  color: #999999;
+}
 .mikio .mode_admin p button + button {
   margin-left: .5rem;
 }

diff --git a/assets/mikio.js b/assets/mikio.js
@@ -351,6 +351,29 @@ var mikio = {
                 }
             }
         }
+
+        // Update color text field when selector changes
+        let colorSelectorInputs = document.querySelectorAll('div.mikio-color-picker input[type="color"]');
+        colorSelectorInputs.forEach(input => {
+            input.addEventListener('input', () => {
+                let colorTextInput = document.querySelector(`div.mikio-color-picker input[for="${input.id}"]`);
+                if (colorTextInput) {
+                    colorTextInput.value = input.value;
+                }
+            });
+        });
+
+        let colorTextInputs = document.querySelectorAll('div.mikio-color-picker input[type="text"]');
+        colorTextInputs.forEach(input => {
+            input.addEventListener('blur', () => {
+                const id = input.getAttribute('for');
+                let colorSelectorInput = document.querySelector(`div.mikio-color-picker input[id="${id}"]`);
+                if (colorSelectorInput) {
+                    let s = this.colorToHex(input.value);
+                    colorSelectorInput.value = s;
+                }
+            });
+        });
     },
 
     initDarkMode: function () {
@@ -729,6 +752,26 @@ var mikio = {
 
     clearCookie: function(cname) {
         document.cookie = cname + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";
+    },
+
+    colorToHex: function(color) {
+        // Create a canvas element
+        let canvas = document.createElement('canvas');
+        canvas.height = 1;
+        canvas.width = 1;
+        let ctx = canvas.getContext('2d');
+
+        // Set the fillStyle to the color input
+        ctx.fillStyle = color;
+        ctx.fillRect(0, 0, 1, 1);
+
+        // Get the pixel data from the canvas
+        let data = ctx.getImageData(0, 0, 1, 1).data;
+
+        // Convert the RGB values to HEX
+        let hex = '#' + ((1 << 24) + (data[0] << 16) + (data[1] << 8) + data[2]).toString(16).slice(1).toUpperCase();
+
+        return hex;
     }
 };
 

diff --git a/assets/mikio.less b/assets/mikio.less
@@ -1696,6 +1696,27 @@ code, pre {
         width: 100%;
     }
 
+    div.mikio-color-picker {
+        position: relative;
+
+        input[type=color] {
+            height: 35px;
+            border: 0;
+            border-radius: 0;
+        }
+
+        input[type=text] {
+            width: auto;
+        }
+    }
+
+    div.mikio-color-button {
+        position: absolute;
+        top: 4px;
+        right: 0;
+        color: #999999;
+    }
+
     p {
         button + button {
             margin-left: .5rem;

diff --git a/mikio.php b/mikio.php
@@ -1802,7 +1802,16 @@ public function parseContent(string $content)
                 );
             }
 
-            $content = preg_replace('/type="color"/', 'type="text"', $content);
+            $content = preg_replace_callback('/<input type="color"[^>]*>/', function ($match) {
+                // Get the ID of the <input type="color"> element
+                preg_match('/id="([^"]*)"/', $match[0], $matches);
+                $id = isset($matches[1]) ? $matches[1] : null;
+
+                // Replace type with text and remove the id attribute
+                $replacement = preg_replace(['/type="color"/', '/id="([^"]*)"/'], ['type="text" class="mikio-color-text-input"', 'for="$1"'], $match[0]);
+
+                return '<div class="mikio-color-picker">' . $replacement . $match[0] . '</div>';
+            }, $content);
         }//end if
 
         if (strcasecmp($ACT, 'admin') === 0 && isset($_GET['page']) === false) {