fix(demo): fill missing php export colors from selected theme (#253)

DenverCoder1 · web-flow · commit c9133c3c0ff8 · 2022-06-12T10:38:46.000-06:00
* feat(demo): fill missing php export colors from selected theme

* style: Formatted code with Prettier

* use same var for consistency

Co-authored-by: DenverCoder1 &lt;DenverCoder1@users.noreply.github.com&gt;
diff --git a/src/demo/index.php b/src/demo/index.php
@@ -4,6 +4,22 @@
 $TRANSLATIONS = include "../translations.php";
 // Get the keys of the first value in the translations array
 $LOCALES = array_keys($TRANSLATIONS);
+
+/**
+ * Convert a camelCase string to a skewer-case string
+ * @param string $str The camelCase string
+ * @return string The skewer-case string
+ */
+function camel_to_skewer(string $str): string
+{
+    return preg_replace_callback(
+        "/([A-Z])/",
+        function ($matches) {
+            return "-" . strtolower($matches[0]);
+        },
+        $str
+    );
+}
 ?>
 
 <!DOCTYPE html>
@@ -65,7 +81,18 @@ function gtag() {
                 <label for="theme">Theme</label>
                 <select class="param" id="theme" name="theme" placeholder="default">
                     <?php foreach ($THEMES as $theme => $options): ?>
-                        <option><?php echo $theme; ?></option>
+                        <?php
+                        $dataAttrs = "";
+                        foreach ($options as $key => $value) {
+                            // convert key from camelCase to skewer-case
+                            $key = camel_to_skewer($key);
+                            // remove '#' from hex color value
+                            $value = preg_replace("/^\#/", "", $value);
+                            // add data attribute
+                            $dataAttrs .= "data-" . $key . "=\"" . $value . "\" ";
+                        }
+                        ?>
+                        <option value="<?php echo $theme; ?>" <?php echo $dataAttrs; ?>><?php echo $theme; ?></option>
                     <?php endforeach; ?>
                 </select>
 
diff --git a/src/demo/js/script.js b/src/demo/js/script.js
@@ -144,12 +144,20 @@ const preview = {
    * Export the advanced parameters to PHP code for creating a new theme
    */
   exportPhp() {
-    const params = this.objectFromElements(document.querySelectorAll(".advanced .param.jscolor"));
+    // get default values from the currently selected theme
+    const themeSelect = document.querySelector("#theme");
+    const selectedOption = themeSelect.options[themeSelect.selectedIndex];
+    const defaultParams = selectedOption.dataset;
+    // get parameters with the advanced options
+    const advancedParams = this.objectFromElements(document.querySelectorAll(".advanced .param.jscolor"));
+    // update default values with the advanced options
+    const params = { ...defaultParams, ...advancedParams };
+    // convert parameters to PHP code
     const mappings = Object.keys(params)
       .map((key) => `    "${key}" => "#${params[key]}",`)
       .join("\n");
     const output = `[\n${mappings}\n]`;
-
+    // set the textarea value to the output
     const textarea = document.getElementById("exportedPhp");
     textarea.value = output;
     textarea.hidden = false;
