feat: Clear advanced props button (DenverCoder1#438)

Co-authored-by: Jonah Lawrence <[email protected]>
Fixes DenverCoder1#433

Author: timagixe

src/demo/index.php

@@ -149,6 +149,7 @@ function gtag() {
                         <button class="plus btn" type="button" onclick="return preview.addProperty()">+</button>
                     </div>
                     <button class="btn" type="button" onclick="return preview.exportPhp()">Export to PHP</button>
+                    <button id="clear_button" class="btn" type="button" onclick="return preview.removeAllProperties()">Clear Options</button>
                     <textarea id="exportedPhp" hidden></textarea>
                 </details>
 

src/demo/js/script.js

@@ -37,6 +37,9 @@ const preview = {
     // disable copy button if username is invalid
     const copyButton = document.querySelector(".copy-button");
     copyButton.disabled = Boolean(document.querySelector("#user:invalid") || !document.querySelector("#user").value);
+    // disable clear button if no added advanced options
+    const clearButton = document.querySelector("#clear_button");
+    clearButton.disabled = !document.querySelectorAll(".minus").length;
   },
 
   /**
@@ -120,6 +123,20 @@ const preview = {
     return false;
   },
 
+  /**
+   * Removes all properties from the advanced section
+   */
+  removeAllProperties() {
+    const parent = document.querySelector(".advanced .parameters");
+    const activeProperties = parent.querySelectorAll("[data-property]");
+    // select active and unique property names
+    const propertyNames = Array.prototype.map
+      .call(activeProperties, (prop) => prop.getAttribute("data-property"))
+      .filter((value, index, self) => self.indexOf(value) === index);
+    // remove each active property name
+    propertyNames.forEach((prop) => this.removeProperty(prop));
+  },
+
   /**
    * Create a key-value mapping of ids to values from all elements in a Node list
    * @param {NodeList} elements - the elements to get the values from