/* Default Off-Canvas (Hidden) */
.e-off-canvas {
z-index: 100;
display: none;
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.2s, opacity 0.2s linear;
}
/* Show Off-Canvas */
.e-off-canvas-visible {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 9999 !important;
}
/* Hide Off-Canvas */
.e-off-canvas-hidden {
visibility: hidden !important;
opacity: 0 !important;
z-index: 10 !important;
}
/* White Background Behind Off-Canvas (Using ::before on Body) */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(255, 255, 255, 1); /* Solid White */
opacity: 0;
visibility: hidden;
z-index: 9998; /* Just behind Off-Canvas */
transition: opacity 0.2s linear, visibility 0s linear 0.2s;
}
/* When an Off-Canvas is Open, Show the Background */
body.off-canvas-active::before {
opacity: 1;
visibility: visible;
transition: opacity 0.2s linear;
}
jQuery(function($) {
// Function to force repaint/reflow
function forceRepaint() {
document.body.style.display = 'none';
document.body.offsetHeight; // Force reflow
document.body.style.display = 'block';
window.dispatchEvent(new Event('resize'));
}
function closeAllOffCanvas(exceptID = null) {
let anyOpen = false; // Track if another Off-Canvas remains open
$(".e-off-canvas").each(function() {
let canvasID = $(this).attr("id");
if (!exceptID || canvasID !== exceptID) {
$(this).removeClass("e-off-canvas-visible")
.addClass("e-off-canvas-hidden")
.attr("aria-hidden", "true")
.css({
"z-index": "10",
"visibility": "hidden",
"opacity": "0"
});
// Full removal delay set to 0ms
setTimeout(() => {
if ($(this).attr("aria-hidden") === "true") {
$(this).css("display", "none");
}
}, 0);
} else {
anyOpen = true; // At least one Off-Canvas is still open
}
});
// Remove white background delay set to 0ms
setTimeout(() => {
if (!$(".e-off-canvas-visible").length) {
$("body").removeClass("off-canvas-active");
forceRepaint(); // Force repaint when closing all
}
}, 0);
}
function openOffCanvas(targetID) {
let targetCanvas = $(targetID);
if (targetCanvas.length) {
// Close all others EXCEPT the one we're opening
closeAllOffCanvas(targetID);
// Open immediately with delay set to 0ms
setTimeout(() => {
targetCanvas.removeClass("e-off-canvas-hidden")
.addClass("e-off-canvas-visible")
.attr("aria-hidden", "false")
.css({
"z-index": "9999",
"visibility": "visible",
"opacity": "1",
"display": "block"
});
// Ensure the White Background Stays Visible
$("body").addClass("off-canvas-active");
// Force repaint after opening
forceRepaint();
}, 0);
}
}
// Decode Base64
function decodeBase64(str) {
try {
return atob(str);
} catch (e) {
return null;
}
}
// Handle Elementor Off-Canvas OPEN clicks
$(document).on('click', '[href*="elementor-action%3Aaction%3Doff_canvas%3Aopen"]', function(event) {
event.preventDefault();
let href = decodeURIComponent($(this).attr("href"));
let base64Match = href.match(/settings=([^&]+)/);
if (base64Match) {
let decodedSettings = decodeBase64(base64Match[1]);
try {
let settingsObj = JSON.parse(decodedSettings);
if (settingsObj.id) {
let offCanvasID = "#off-canvas-" + settingsObj.id;
openOffCanvas(offCanvasID);
}
} catch (e) {}
}
});
// Handle Elementor Off-Canvas CLOSE clicks
$(document).on('click', '[href*="elementor-action%3Aaction%3Doff_canvas%3Aclose"]', function(event) {
event.preventDefault();
closeAllOffCanvas();
});
// Ensure all Off-Canvas elements start hidden
$(".e-off-canvas").each(function() {
$(this).attr("aria-hidden", "true").css({
"z-index": "10",
"visibility": "hidden",
"opacity": "0",
"display": "none"
});
});
// Handle same-page anchor link clicks
$(document).on('click', 'a[href*="#"]', function(event) {
let href = $(this).attr('href');
if (href.indexOf('#') !== -1) {
// Close all off-canvas widgets when an anchor link is clicked
closeAllOffCanvas();
}
});
});