/* 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(); } }); });