// ---------------------------------------------------------
// Helper: clear radios inside any container
// ---------------------------------------------------------
function clearRadiosIn(containerSelector) {
document
.querySelectorAll(`${containerSelector} input[type="radio"]`)
.forEach(input => {
input.checked = false;
input.classList.remove('w--redirected-checked');
const wrapper = input.closest('.w-radio');
if (wrapper) wrapper.classList.remove('w--redirected-checked');
});
}
// ---------------------------------------------------------
// Helper: set active tab
// ---------------------------------------------------------
function ensureOneVisibleTabActive(tabsSelector) {
const tabs = document.querySelector(tabsSelector);
if (!tabs) return;
const links = [...tabs.querySelectorAll('[role="tab"]')];
const active = links.find(l =>
isVisible(l) &&
l.getAttribute('aria-selected') === 'true'
);
if (active) return;
const firstVisible = links.find(l => isVisible(l));
if (firstVisible) firstVisible.click();
}
function isVisible(el) {
return !!(el.offsetParent || el.getClientRects().length);
}
// ---------------------------------------------------------
// 2. Canvas sections visibility
// ---------------------------------------------------------
function updateCanvasSectionsVisibility() {
const canvasFlag = getComputedStyle(document.documentElement)
.getPropertyValue('--sub-canvas')
.trim();
const isCanvasActive = canvasFlag === '1';
document
.querySelectorAll('[data-framer-section="canvas-finish"], [data-framer-section="canvas-format"]')
.forEach(el => {
el.style.display = isCanvasActive ? '' : 'none';
});
document.querySelectorAll('input[name="canvas-format"]').forEach(input => {
input.disabled = !isCanvasActive;
});
if (!isCanvasActive) {
clearRadiosIn('[data-framer-section="canvas-finish"]');
clearRadiosIn('[data-framer-section="canvas-format"]');
}
}
// ---------------------------------------------------------
// 2. Paper sections visibility
// ---------------------------------------------------------
function updatePaperSectionsVisibility() {
const paperFlag = getComputedStyle(document.documentElement)
.getPropertyValue('--sub-paper')
.trim();
const isPaperActive = paperFlag === '1';
document
.querySelectorAll('[data-framer-section="paper-type"]')
.forEach(el => {
el.style.display = isPaperActive ? '' : 'none';
});
if (!isPaperActive) {
clearRadiosIn('[data-framer-section="paper-type"]');
}
}
// ---------------------------------------------------------
// 3. Metal sections visibility
// ---------------------------------------------------------
function updateMetalSectionsVisibility() {
const metalFlag = getComputedStyle(document.documentElement)
.getPropertyValue('--sub-metal')
.trim();
const isMetalActive = metalFlag === '1';
document
.querySelectorAll('[data-framer-section="metal-finish"]')
.forEach(el => {
el.style.display = isMetalActive ? '' : 'none';
});
if (!isMetalActive) {
clearRadiosIn('[data-framer-section="metal-finish"]');
ensureOneVisibleTabActive('#frame-tabs');
}
}
// ---------------------------------------------------------
// 4. Floater + gallery-wrap frames visibility
// ---------------------------------------------------------
function updateFloaterAndGalleryWrapVisibility() {
const styles = getComputedStyle(document.documentElement);
const metalFlag = styles.getPropertyValue('--sub-metal').trim();
const canvasFlag = styles.getPropertyValue('--sub-canvas').trim();
const galleryWrapFlag = styles.getPropertyValue('--c-wrap').trim();
const isMetalActive = metalFlag === '1';
const isGalleryWrapActive = galleryWrapFlag === '1';
const isCanvasActive = canvasFlag === '1';
const isFloaterVisible = isMetalActive || (isCanvasActive && isGalleryWrapActive);
// Floater frames
document
.querySelectorAll('[data-frame-type="floater"]')
.forEach(el => {
el.style.display = isFloaterVisible ? '' : 'none';
ensureOneVisibleTabActive('#frame-tabs');
});
if (!isFloaterVisible) {
clearRadiosIn('[data-frame-type="floater"]');
ensureOneVisibleTabActive('#frame-tabs');
}
// Standard / Shadowbox visibility during gallery-wrap
document
.querySelectorAll('[data-frame-type="standard"], [data-frame-type="shadowbox"]')
.forEach(el => {
el.style.display = isGalleryWrapActive ? 'none' : '';
});
// Standard / Shadowbox visibility during gallery-wrap
if (!isGalleryWrapActive) {
clearRadiosIn('[data-frame-type="floater"]');
ensureOneVisibleTabActive('#frame-tabs');
}
if (isGalleryWrapActive) {
clearRadiosIn('[data-frame-type="standard"]');
clearRadiosIn('[data-frame-type="shadowbox"]');
ensureOneVisibleTabActive('#frame-tabs');
}
}
// ---------------------------------------------------------
// 5. Loose-canvas frame suppression
// ---------------------------------------------------------
function updateLooseCanvasFrameVisibility() {
const looseCanvasFlag = getComputedStyle(document.documentElement)
.getPropertyValue('--loose-canvas')
.trim();
const isLooseCanvasActive = looseCanvasFlag === '1';
const allFrames = document.querySelectorAll(
'[data-framer-section="frames"]'
);
allFrames.forEach(el => {
el.style.display = isLooseCanvasActive ? 'none' : '';
});
if (isLooseCanvasActive) {
clearRadiosIn('[data-frame-type="standard"]');
clearRadiosIn('[data-frame-type="shadowbox"]');
clearRadiosIn('[data-frame-type="floater"]');
}
if (!isLooseCanvasActive) {
ensureOneVisibleTabActive('#frame-tabs');
}
}
// ---------------------------------------------------------
// 6. Master visibility function
// ---------------------------------------------------------
function updateAllVisibility() {
updateCanvasSectionsVisibility();
updateMetalSectionsVisibility();
updateFloaterAndGalleryWrapVisibility();
updateLooseCanvasFrameVisibility();
updatePaperSectionsVisibility();
}
window.updateAllVisibility = updateAllVisibility;
