87 lines
No EOL
2.7 KiB
JavaScript
87 lines
No EOL
2.7 KiB
JavaScript
/**
|
|
* Client-side measurement toggle.
|
|
* Default: metric units, collapsed times (rendered at build time).
|
|
* Each measurement type gets its own toggle button.
|
|
*
|
|
* Each measurement span has data-default and data-alt attributes
|
|
* pre-computed at build time. This script just swaps between them
|
|
* per measurement type.
|
|
*/
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
// Track which types are showing alt text
|
|
var showingAlt = {};
|
|
|
|
var TYPE_LABELS = {
|
|
temperature: { toAlt: '°F', toDefault: '°C' },
|
|
weight: { toAlt: 'lb', toDefault: 'kg' },
|
|
volume: { toAlt: 'cups', toDefault: 'ml' },
|
|
dimension: { toAlt: 'inch', toDefault: 'cm' },
|
|
time: { toAlt: 'hr+min', toDefault: 'min' },
|
|
};
|
|
|
|
function toggleType(type) {
|
|
showingAlt[type] = !showingAlt[type];
|
|
var isAlt = showingAlt[type];
|
|
|
|
// Update all spans of this type
|
|
var spans = document.querySelectorAll('span.measurement[data-measurement-type="' + type + '"]');
|
|
spans.forEach(function (span) {
|
|
var text = isAlt
|
|
? span.getAttribute('data-alt')
|
|
: span.getAttribute('data-default');
|
|
if (text) span.textContent = text;
|
|
});
|
|
|
|
// Update button text
|
|
var btn = document.querySelector('.measurement-toggle-btn[data-toggle-type="' + type + '"]');
|
|
if (btn) {
|
|
var labels = TYPE_LABELS[type];
|
|
btn.textContent = isAlt ? labels.toAlt : labels.toDefault;
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
var container = document.querySelector('.measurement-toggles');
|
|
if (!container) return;
|
|
|
|
// Detect which types exist and have toggleable content
|
|
var typeHasToggle = {};
|
|
var spans = document.querySelectorAll('span.measurement');
|
|
spans.forEach(function (span) {
|
|
var type = span.getAttribute('data-measurement-type');
|
|
if (!type) return;
|
|
var def = span.getAttribute('data-default');
|
|
var alt = span.getAttribute('data-alt');
|
|
if (def !== alt) typeHasToggle[type] = true;
|
|
});
|
|
|
|
var typeOrder = ['temperature', 'weight', 'volume', 'dimension', 'time'];
|
|
var hasAny = false;
|
|
|
|
typeOrder.forEach(function (type) {
|
|
if (!typeHasToggle[type]) return;
|
|
hasAny = true;
|
|
showingAlt[type] = false;
|
|
|
|
var btn = document.createElement('button');
|
|
btn.className = 'measurement-toggle-btn';
|
|
btn.setAttribute('data-toggle-type', type);
|
|
btn.textContent = TYPE_LABELS[type].toDefault;
|
|
btn.addEventListener('click', function () { toggleType(type); });
|
|
container.appendChild(btn);
|
|
});
|
|
|
|
if (hasAny) {
|
|
container.style.display = 'flex';
|
|
}
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
})(); |