Add metric forms

index.html

@@ -16,50 +16,51 @@
     <noscript>Requires javascript</noscript>
 
     <template id="metric-select-template">
-      <fieldset class="metric-select-fieldset">
-        <legend>Metric</legend>
-        <div>
-          <label>
-            <input type="radio" name="metricKind" value="whole" />
-            Set Comparison
-          </label>
-        </div>
-        <div>
-          <label>
-            <input type="radio" name="metricKind" value="mean" />
-            Mean Comparison
-          </label>
-        </div>
-        <div>
-          <label>
-            <input type="radio" name="metricKind" value="statistic" />
-            Set Statistics
-          </label>
-        </div>
-        <select name="whole" disabled>
-          <option value="alpha">Geometric Difference (α)</option>
-          <option value="sigma">RMS Deviation (σ)</option>
-          <option value="bigTheta">Cosine Difference (Θ)</option>
-        </select>
-        <select name="mean" disabled>
-          <option value="theta">Angular Difference (θ)</option>
-          <option value="phi">Hue Azimuth (ϕ)</option>
-          <option value="delta">Euclidean (δ)</option>
-          <option value="manhattan">Manhattan (M)</option>
-          <option value="ch">Chebyshev (Ч)</option>
-          <option value="lightnessDiff">Lightness (ℓ)</option>
-        </select>
-        <select name="statistic" disabled>
-          <option value="importance">Visual Importance (β)</option>
-          <option value="inertia">Inertia (I)</option>
-          <option value="variance">Variance (V)</option>
-          <option value="muNuAngle">Mu-Nu Angle (Φ)</option>
-          <option value="size">Size (N)</option>
-          <option value="lightness">Mean Lightness (L)</option>
-          <option value="chroma">Mean Chroma (C)</option>
-        </select>
-        <output name="sortMetric" hidden aria-hidden="true"></output>
-      </fieldset>
+      <form bind-to="form">
+        <fieldset class="metric-select-fieldset">
+          <legend bind-to="legend">Metric</legend>
+          <div>
+            <label>
+              <input type="radio" name="metricKind" value="whole" />
+              Set Comparison
+            </label>
+          </div>
+          <div>
+            <label>
+              <input type="radio" name="metricKind" value="mean" />
+              Mean Comparison
+            </label>
+          </div>
+          <div>
+            <label>
+              <input type="radio" name="metricKind" value="statistic" />
+              Set Statistics
+            </label>
+          </div>
+          <select name="whole" bind-to="wholeSelect" disabled>
+            <option value="alpha">Geometric Difference (α)</option>
+            <option value="sigma">RMS Deviation (σ)</option>
+            <option value="bigTheta">Cosine Difference (Θ)</option>
+          </select>
+          <select name="mean" bind-to="meanSelect" disabled>
+            <option value="theta">Angular Difference (θ)</option>
+            <option value="phi">Hue Azimuth (ϕ)</option>
+            <option value="delta">Euclidean (δ)</option>
+            <option value="manhattan">Manhattan (M)</option>
+            <option value="ch">Chebyshev (Ч)</option>
+            <option value="lightnessDiff">Lightness (ℓ)</option>
+          </select>
+          <select name="statistic" bind-to="statSelect" disabled>
+            <option value="importance">Visual Importance (β)</option>
+            <option value="inertia">Inertia (I)</option>
+            <option value="variance">Variance (V)</option>
+            <option value="muNuAngle">Mu-Nu Angle (Φ)</option>
+            <option value="size">Size (N)</option>
+            <option value="lightness">Mean Lightness (L)</option>
+            <option value="chroma">Mean Chroma (C)</option>
+          </select>
+        </fieldset>
+      </form>
     </template>
 
     <template id="pkmn-data-template">
@@ -193,10 +194,7 @@
         </div>
       </form> -->
 
-    <!-- <form id="sortMetric"></form>
-    <form id="clusterMetric"></form> -->
-
-    <div class="sidebar | section | flow">
+    <div id="sidebar" class="section | flow">
       <form id="colorSelect" class="flex col small-gap" autocomplete="off">
         <label class="emphasis" for="colorInputText">Target Color</label>
         <div class="color-inputs | flex small-gap">

script.js

@@ -12,8 +12,6 @@ U.element("colorSelect", ({ randomButton }, form) => {
   randomButton.addEventListener("click", randomizeTargetColor);
 });
 
-randomizeTargetColor();
-
 targetColor.subscribe((hex, { previous }) => {
   const style = document.querySelector(":root").style;
   style.setProperty("--background", hex);
@@ -32,3 +30,50 @@ targetColor.subscribe((hex, { previous }) => {
     document.getElementById("prevColors").prepend(prevButton);
   }
 });
+
+randomizeTargetColor();
+
+const addMetricForm = (legendText, initialKind, initialMetric) => {
+  const metricKind = U.obs(initialKind);
+  let metric;
+
+  U.template("metric-select-template", ({ form, legend }) => {
+    legend.innerText = legendText;
+    form.elements[initialKind].disabled = false;
+    // form.elements.sortMetric = form.elements[initialKind].value = initialMetric;
+    form.elements.metricKind.value = initialKind;
+
+    U.reactive(() => {
+      form.elements.whole.disabled = metricKind.value !== "whole";
+      form.elements.mean.disabled = metricKind.value !== "mean";
+      form.elements.statistic.disabled = metricKind.value !== "statistic";
+      // metric.value = form.elements[metricKindObs.value].value;
+    });
+
+    const metrics = U.obs([
+      U.field(form.elements.whole),
+      U.field(form.elements.mean),
+      U.field(form.elements.statistic),
+    ]);
+
+    U.form(form, {
+      onChange: {
+        metricKind(kind) {
+          metricKind.value = kind;
+        },
+      },
+    });
+
+    metric = U.obs(() => {
+      const [whole, mean, statistic] = metrics.value;
+      return { whole, mean, statistic }[metricKind.value];
+    });
+
+    return "sidebar";
+  });
+
+  return metric;
+};
+
+const sortMetric = addMetricForm("Sort Metric", "whole", "alpha");
+const clusterMetric = addMetricForm("Cluster Metric", "statistic", "importance");

styles.css

@@ -152,3 +152,7 @@ body > * + * {
 #colorSelect input[type="color"] {
   flex: 0 0 2rem;
 }
+
+#sidebar select:disabled {
+  display: none;
+}