feat(demo): Support hiding sections on demo site (#519)

Author: DenverCoder1

src/demo/css/style.css

@@ -186,31 +186,31 @@ h2 {
   text-transform: capitalize;
 }
 
-.weekdays input {
+.checkbox-buttons input {
   display: none !important;
 }
 
-.weekdays input[type="checkbox"] + label {
+.checkbox-buttons input[type="checkbox"] + label {
   font-size: 90%;
   display: inline-block;
   border-radius: 6px;
   height: 30px;
-  width: 30px;
   margin: 2px 3px 2px 0;
   line-height: 28px;
   text-align: center;
   cursor: pointer;
   background: var(--card-background);
   color: var(--text);
   border: 1px solid var(--border);
+  padding: 0 10px;
 }
 
-.weekdays input[type="checkbox"]:checked + label {
+.checkbox-buttons input[type="checkbox"]:checked + label {
   background: var(--text);
   color: var(--background);
 }
 
-.weekdays input[type="checkbox"]:disabled + label {
+.checkbox-buttons input[type="checkbox"]:disabled + label {
   background: var(--card-background);
   color: var(--stroke);
 }

src/demo/index.php

@@ -138,7 +138,7 @@ function gtag() {
                 </select>
 
                 <span id="exclude-days-label">Exclude Days</span>
-                <div class="weekdays" role="group" aria-labelledby="exclude-days-label">
+                <div class="checkbox-buttons weekdays" role="group" aria-labelledby="exclude-days-label">
                     <input type="checkbox" value="Sun" id="weekday-sun" />
                     <label for="weekday-sun" data-tooltip="Exclude Sunday" title="Exclude Sunday">S</label>
                     <input type="checkbox" value="Mon" id="weekday-mon" />
@@ -156,16 +156,27 @@ function gtag() {
                     <input type="hidden" id="exclude-days" name="exclude_days" class="param" />
                 </div>
 
+                <span id="show-sections-label">Show Sections</span>
+                <div class="checkbox-buttons sections" role="group" aria-labelledby="show-sections-label">
+                    <input type="checkbox" value="total" id="section-total" checked />
+                    <label for="section-total" data-tooltip="Total Contributions" title="Total Contributions">Total</label>
+                    <input type="checkbox" value="current" id="section-current" checked />
+                    <label for="section-current" data-tooltip="Current Streak" title="Current Streak">Current</label>
+                    <input type="checkbox" value="longest" id="section-longest" checked />
+                    <label for="section-longest" data-tooltip="Longest Streak" title="Longest Streak">Longest</label>
+                    <input type="hidden" id="sections" name="sections" class="param" value="total,current,longest" />
+                </div>
+
+                <label for="card-width">Card Width</label>
+                <input class="param" type="number" id="card-width" name="card_width" placeholder="495" value="495" step="1" min="300" />
+
                 <label for="type">Output Type</label>
                 <select class="param" id="type" name="type">
                     <option value="svg">SVG</option>
                     <option value="png">PNG</option>
                     <option value="json">JSON</option>
                 </select>
 
-                <label for="card-width">Card Width</label>
-                <input class="param" type="number" id="card-width" name="card_width" placeholder="495" value="495" step="1" min="300" />
-
                 <details class="advanced">
                     <summary>⚙ Advanced Options</summary>
                     <div class="content">

src/demo/js/script.js

@@ -15,6 +15,9 @@ const preview = {
     type: "svg",
     exclude_days: "",
     card_width: "495",
+    hide_total_contributions: "false",
+    hide_current_streak: "false",
+    hide_longest_streak: "false",
   },
 
   /**
@@ -23,6 +26,11 @@ const preview = {
   update() {
     // get parameter values from all .param elements
     const params = this.objectFromElements(document.querySelectorAll(".param"));
+    // convert sections to hide_... parameters
+    params.hide_total_contributions = String(!params.sections.includes("total"));
+    params.hide_current_streak = String(!params.sections.includes("current"));
+    params.hide_longest_streak = String(!params.sections.includes("longest"));
+    delete params.sections;
     // convert parameters to query string
     const query = Object.keys(params)
       .filter((key) => params[key] !== this.defaults[key])
@@ -301,6 +309,29 @@ const preview = {
     this.update();
   },
 
+  /**
+   * Update checkboxes based on the query string parameter
+   *
+   * @param {string|null} param - the query string parameter to read
+   * @param {string} selector - the selector of the parent container to find the checkboxes
+   */
+  updateCheckboxes(param, selector) {
+    if (!param) {
+      return;
+    }
+    // uncheck all checkboxes
+    [...document.querySelectorAll(`${selector} input[value]`)].forEach((checkbox) => {
+      checkbox.checked = false;
+    });
+    // check checkboxes based on values in the query string
+    param.split(",").forEach((value) => {
+      const checkbox = document.querySelector(`${selector} input[value="${value}"]`);
+      if (checkbox) {
+        checkbox.checked = true;
+      }
+    });
+  },
+
   /**
    * Assign values to input boxes based on the query string
    *
@@ -334,15 +365,9 @@ const preview = {
       preview.checkColor(backgroundParams[2], "background-color2");
     }
     // set weekday checkboxes
-    const excludeDays = searchParams.get("exclude_days");
-    if (excludeDays) {
-      excludeDays.split(",").forEach((day) => {
-        const checkbox = document.querySelector(`.weekdays input[value="${day}"]`);
-        if (checkbox) {
-          checkbox.checked = true;
-        }
-      });
-    }
+    this.updateCheckboxes(searchParams.get("exclude_days"), ".weekdays");
+    // set show sections checkboxes
+    this.updateCheckboxes(searchParams.get("sections"), ".sections");
   },
 };
 
@@ -401,12 +426,22 @@ window.addEventListener(
     };
     document.querySelector("#background-type-solid").addEventListener("change", toggleBackgroundType, false);
     document.querySelector("#background-type-gradient").addEventListener("change", toggleBackgroundType, false);
+    // function to update the hidden input box when checkboxes are clicked
+    const updateCheckboxTextField = (parentSelector, inputSelector) => {
+      const checked = document.querySelectorAll(`${parentSelector} input:checked`);
+      document.querySelector(inputSelector).value = [...checked].map((node) => node.value).join(",");
+      preview.update();
+    };
     // when weekdays are toggled, update the input field
-    document.querySelectorAll('.weekdays input[type="checkbox"]').forEach((el) => {
+    document.querySelectorAll(".weekdays input[type='checkbox']").forEach((el) => {
+      el.addEventListener("click", () => {
+        updateCheckboxTextField(".weekdays", "#exclude-days");
+      });
+    });
+    // when sections are toggled, update the input field
+    document.querySelectorAll(".sections input[type='checkbox']").forEach((el) => {
       el.addEventListener("click", () => {
-        const checked = document.querySelectorAll(".weekdays input:checked");
-        document.querySelector("#exclude-days").value = [...checked].map((node) => node.value).join(",");
-        preview.update();
+        updateCheckboxTextField(".sections", "#sections");
       });
     });
     // when mode is set to "weekly", disable checkboxes, otherwise enable them