feat: better supported hybrid units

js/measurements.js

@@ -15,6 +15,7 @@
 
   var showingAlt = {};
   var scale = 1;
+  var measureByVolume = false;
 
   var TYPE_LABELS = {
     temperature: { toAlt: '°F', toDefault: '°C' },
@@ -157,8 +158,17 @@
     var spans = document.querySelectorAll('span.measurement');
     spans.forEach(function (span) {
       var type = span.getAttribute('data-measurement-type');
-      var imperial = !!showingAlt[type];
-      var scalableRaw = span.getAttribute('data-scalable');
+      var isHybrid = span.getAttribute('data-hybrid') === 'true';
+      var useVolumeMode = isHybrid && measureByVolume;
+
+      var effectiveType = useVolumeMode ? 'volume' : type;
+      var imperial = !!showingAlt[effectiveType];
+
+      var scalableAttr = useVolumeMode ? 'data-volume-scalable' : 'data-scalable';
+      var defaultAttr = useVolumeMode ? 'data-volume-default' : 'data-default';
+      var altAttr = useVolumeMode ? 'data-volume-alt' : 'data-alt';
+
+      var scalableRaw = span.getAttribute(scalableAttr);
 
       if (scalableRaw && scale !== 1) {
         // Use scaling computation
@@ -171,8 +181,8 @@
 
       // No scaling or not scalable — use pre-computed text
       var text = imperial
-        ? span.getAttribute('data-alt')
-        : span.getAttribute('data-default');
+        ? span.getAttribute(altAttr)
+        : span.getAttribute(defaultAttr);
       if (text) span.textContent = text;
     });
   }
@@ -190,6 +200,23 @@
     }
   }
 
+  // ─── Measure Mode Toggle ───────────────────────────────
+
+  function setMeasureMode(mode) {
+    measureByVolume = (mode === 'volume');
+
+    var btns = document.querySelectorAll('.measure-mode-btn');
+    btns.forEach(function (btn) {
+      if (btn.getAttribute('data-mode') === mode) {
+        btn.classList.add('active');
+      } else {
+        btn.classList.remove('active');
+      }
+    });
+
+    updateAll();
+  }
+
   // ─── Scale Toggle ───────────────────────────────────────
 
   function setScale(newScale) {
@@ -219,6 +246,7 @@
     // Detect which types have toggleable content
     var typeHasToggle = {};
     var hasScalable = false;
+    var hasHybrid = false;
     var spans = document.querySelectorAll('span.measurement');
     spans.forEach(function (span) {
       var type = span.getAttribute('data-measurement-type');
@@ -227,10 +255,43 @@
       var alt = span.getAttribute('data-alt');
       if (def !== alt) typeHasToggle[type] = true;
       if (span.getAttribute('data-scalable')) hasScalable = true;
+      if (span.getAttribute('data-hybrid') === 'true') hasHybrid = true;
     });
 
+    // Hybrid measurements in volume mode need the volume metric/imperial toggle
+    if (hasHybrid) {
+      typeHasToggle['volume'] = true;
+    }
+
     var hasAny = false;
 
+    // Measure mode toggle (Weight vs Volume) — only if hybrid measurements exist
+    if (hasHybrid) {
+      hasAny = true;
+      var measureRow = document.createElement('div');
+      measureRow.className = 'toggle-row';
+
+      var measureLabel = document.createElement('span');
+      measureLabel.className = 'measure-label';
+      measureLabel.textContent = 'Measure:';
+      measureRow.appendChild(measureLabel);
+
+      var modes = [
+        { mode: 'weight', label: 'Weight' },
+        { mode: 'volume', label: 'Volume' },
+      ];
+      modes.forEach(function (m) {
+        var btn = document.createElement('button');
+        btn.className = 'measure-mode-btn' + (m.mode === 'weight' ? ' active' : '');
+        btn.setAttribute('data-mode', m.mode);
+        btn.textContent = m.label;
+        btn.addEventListener('click', function () { setMeasureMode(m.mode); });
+        measureRow.appendChild(btn);
+      });
+
+      container.appendChild(measureRow);
+    }
+
     // Unit toggle buttons
     var unitRow = document.createElement('div');
     unitRow.className = 'toggle-row';