fix(demo): Change submit button text to say Open Permalink (#308)

DenverCoder1 · web-flow · commit da620d7762c7 · 2022-08-11T11:38:35.000-06:00
diff --git a/src/demo/index.php b/src/demo/index.php
@@ -5,6 +5,8 @@
 // Get the keys of the first value in the translations array
 $LOCALES = array_keys($TRANSLATIONS);
 
+$darkmode = $_COOKIE["darkmode"] ?? null;
+
 /**
  * Convert a camelCase string to a skewer-case string
  * @param string $str The camelCase string
@@ -58,7 +60,7 @@ function gtag() {
     <script async defer src="https://buttons.github.io/buttons.js"></script>
 </head>
 
-<body <?php echo ($_COOKIE["darkmode"] ?? null) == "on" ? 'data-theme="dark"' : ""; ?>>
+<body <?php echo $darkmode === "on" ? 'data-theme="dark"' : ""; ?>>
     <h1>🔥 GitHub Readme Streak Stats</h1>
 
     <!-- GitHub badges/links section -->
@@ -76,10 +78,10 @@ function gtag() {
             <h2>Properties</h2>
             <form class="parameters">
                 <label for="user">Username<span title="required">*</span></label>
-                <input class="param" type="text" id="user" name="user" placeholder="DenverCoder1" required pattern="^[A-Za-z\d-]{0,39}[A-Za-z\d]$" title="Up to 40 letters or hyphens but not ending with hyphen">
+                <input class="param" type="text" id="user" name="user" placeholder="DenverCoder1" pattern="^[A-Za-z\d-]{0,39}[A-Za-z\d]$" title="Up to 40 letters or hyphens but not ending with hyphen">
 
                 <label for="theme">Theme</label>
-                <select class="param" id="theme" name="theme" placeholder="default">
+                <select class="param" id="theme" name="theme">
                     <?php foreach ($THEMES as $theme => $options): ?>
                         <?php
                         $dataAttrs = "";
@@ -97,7 +99,7 @@ function gtag() {
                 </select>
 
                 <label for="hide_border">Hide Border</label>
-                <select class="param" id="hide_border" name="hide_border" placeholder="false">
+                <select class="param" id="hide_border" name="hide_border">
                     <option>false</option>
                     <option>true</option>
                 </select>
@@ -127,7 +129,7 @@ function gtag() {
                     <summary>⚙ Advanced Options</summary>
                     <div class="content parameters">
                         <label for="theme">Add Property</label>
-                        <select id="properties" name="properties" placeholder="background">
+                        <select id="properties" name="properties">
                             <?php foreach ($THEMES["default"] as $option => $color): ?>
                                 <option><?php echo $option; ?></option>
                             <?php endforeach; ?>
@@ -136,10 +138,9 @@ function gtag() {
                     </div>
                     <button class="btn" type="button" onclick='return preview.exportPhp()'>Export to PHP</button>
                     <textarea id="exportedPhp" hidden></textarea>
-
                 </details>
 
-                <input class="btn" type="submit" value="Submit">
+                <input class="btn" type="submit" value="Open Permalink">
             </form>
         </div>
 
@@ -175,7 +176,7 @@ function gtag() {
     </div>
 
     <a href="javascript:toggleTheme()" class="darkmode" title="toggle dark mode">
-        <i class="<?php echo ($_COOKIE["darkmode"] ?? null) == "on" ? "gg-sun" : "gg-moon"; ?>"></i>
+        <i class="<?php echo $darkmode === "on" ? "gg-sun" : "gg-moon"; ?>"></i>
     </a>
 </body>
 
diff --git a/src/demo/js/script.js b/src/demo/js/script.js
@@ -19,10 +19,9 @@ const preview = {
     // get parameter values from all .param elements
     const params = this.objectFromElements(document.querySelectorAll(".param"));
     // convert parameters to query string
-    const encode = encodeURIComponent;
     const query = Object.keys(params)
       .filter((key) => params[key] !== this.defaults[key])
-      .map((key) => encode(key) + "=" + encode(params[key]))
+      .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
       .join("&");
     // generate links and markdown
     const imageURL = `${window.location.origin}?${query}`;
@@ -35,7 +34,7 @@ const preview = {
     document.querySelector(".md code").innerText = md;
     // disable copy button if username is invalid
     const copyButton = document.querySelector(".copy-button");
-    copyButton.disabled = Boolean(document.querySelectorAll("#user:invalid").length);
+    copyButton.disabled = Boolean(document.querySelector("#user:invalid") || !document.querySelector("#user").value);
   },
 
   /**
@@ -154,7 +153,7 @@ const preview = {
     const params = { ...defaultParams, ...advancedParams };
     // convert parameters to PHP code
     const mappings = Object.keys(params)
-      .map((key) => `    "${key}" => "#${params[key]}",`)
+      .map((key) => `  "${key}" => "#${params[key]}",`)
       .join("\n");
     const output = `[\n${mappings}\n]`;
     // set the textarea value to the output
