/* Default Off-Canvas (Hidden) */ .e-off-canvas { z-index: 100; display: none; visibility: hidden; opacity: 0; transition: opacity 0.15s ease-in-out; } /* 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 */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255, 255, 255, 1); opacity: 0; visibility: hidden; z-index: 9998; transition: opacity 0.15s ease-in-out; } body.off-canvas-active::before { opacity: 1; visibility: visible; } jQuery(function($) { const TRANSITION_DELAY = 150; // Tussenoptie: 150ms function forceRepaint() { document.body.style.display = 'none'; document.body.offsetHeight; document.body.style.display = 'block'; window.dispatchEvent(new Event('resize')); } function closeAllOffCanvas(exceptID = null) { $(".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" }); setTimeout(() => { if ($(this).attr("aria-hidden") === "true") { $(this).css("display", "none"); } }, TRANSITION_DELAY); } }); setTimeout(() => { if (!$(".e-off-canvas-visible").length) { $("body").removeClass("off-canvas-active"); forceRepaint(); } }, TRANSITION_DELAY); } function openOffCanvas(targetID) { let targetCanvas = $(targetID); if (targetCanvas.length) { closeAllOffCanvas(targetID); 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" }); $("body").addClass("off-canvas-active"); }, TRANSITION_DELAY); } } function decodeBase64(str) { try { return atob(str); } catch (e) { return null; } } $(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) {} } }); $(document).on('click', '[href*="elementor-action%3Aaction%3Doff_canvas%3Aclose"]', function(event) { event.preventDefault(); closeAllOffCanvas(); }); $(".e-off-canvas").each(function() { $(this).attr("aria-hidden", "true").css({ "z-index": "10", "visibility": "hidden", "opacity": "0", "display": "none" }); }); $(document).on('click', 'a[href*="#"]', function(event) { let href = $(this).attr('href'); if (href.indexOf('#') !== -1) { closeAllOffCanvas(); } }); });