From 383defb480d458eefff4596e811702de20942386 Mon Sep 17 00:00:00 2001
From: Mark Woodard <mark.c.woodard@gmail.com>
Date: Thu, 26 Sep 2024 09:41:11 -0500
Subject: [PATCH] adding background no scroll to when the off canvas area is
 open

---
 includes/assets/js/kb-off-canvas-trigger.min.js  |  2 +-
 src/assets/js/kb-off-canvas-trigger.js           |  9 +++++++++
 src/blocks/header/children/off-canvas/style.scss | 11 +++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/includes/assets/js/kb-off-canvas-trigger.min.js b/includes/assets/js/kb-off-canvas-trigger.min.js
index ccd42ee45..f12901086 100644
--- a/includes/assets/js/kb-off-canvas-trigger.min.js
+++ b/includes/assets/js/kb-off-canvas-trigger.min.js
@@ -1 +1 @@
-(function(){const a=function(a,b,c){let d=b.querySelectorAll("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex=\"0\"], [contenteditable]");d=Array.prototype.slice.call(d);const e=d[0],f=d[d.length-1],g=function(c){c.target.classList.add("triggered"),b.classList.add("show-off-canvas"),setTimeout(function(){b.classList.add("active"),a.forEach(a=>a.setAttribute("aria-expanded","true")),e.focus()},10)},h=function(){b.classList.remove("active"),a.forEach(a=>a.setAttribute("aria-expanded","false"));for(let b=0;b<a.length;b++)a[b].classList.contains("triggered")&&(a[b].focus(),a[b].classList.remove("triggered"));setTimeout(function(){b.classList.remove("show-off-canvas")},250)};a.forEach(a=>{a.addEventListener("click",g)}),c.addEventListener("click",h),document.addEventListener("click",function(a){var b=a.target,c=document.querySelector(".kb-off-canvas-overlay");b===c&&h()}),b.addEventListener("keydown",function(a){const b="Tab"===a.key||9===a.keyCode;b&&(a.shiftKey?document.activeElement===e&&(a.preventDefault(),f.focus()):document.activeElement===f&&(a.preventDefault(),e.focus()))}),document.addEventListener("keydown",function(a){("Escape"===a.key||27===a.keyCode)&&h()});var j=b.querySelectorAll("a:not(.kt-tab-title)");if(j.length)for(let a=0;a<j.length;a++)j[a].addEventListener("click",function(){h()})};(function(){const b=document.querySelectorAll(".wp-block-kadence-off-canvas-trigger"),c=document.querySelector(".wp-block-kadence-off-canvas"),d=c.querySelector(".kb-off-canvas-close");0<b.length&&c&&d&&a(b,c,d)})()})();
\ No newline at end of file
+(function(){const a=function(a,b,c){let d=b.querySelectorAll("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex=\"0\"], [contenteditable]");d=Array.prototype.slice.call(d);const e=d[0],f=d[d.length-1],g=window.innerWidth-document.documentElement.clientWidth,h=function(c){document.body.style.setProperty("--kb-scrollbar-offset",g+"px"),document.body.classList.add("kb-modal-open"),document.body.classList.add("kb-scrollbar-fixer"),c.target.classList.add("triggered"),b.classList.add("show-off-canvas"),setTimeout(function(){b.classList.add("active"),a.forEach(a=>a.setAttribute("aria-expanded","true")),e.focus()},10)},i=function(){document.body.classList.remove("kb-modal-open"),document.body.classList.remove("kb-scrollbar-fixer"),b.classList.remove("active"),a.forEach(a=>a.setAttribute("aria-expanded","false"));for(let b=0;b<a.length;b++)a[b].classList.contains("triggered")&&(a[b].focus(),a[b].classList.remove("triggered"));setTimeout(function(){b.classList.remove("show-off-canvas")},250)};a.forEach(a=>{a.addEventListener("click",h)}),c.addEventListener("click",i),document.addEventListener("click",function(a){var b=a.target,c=document.querySelector(".kb-off-canvas-overlay");b===c&&i()}),b.addEventListener("keydown",function(a){const b="Tab"===a.key||9===a.keyCode;b&&(a.shiftKey?document.activeElement===e&&(a.preventDefault(),f.focus()):document.activeElement===f&&(a.preventDefault(),e.focus()))}),document.addEventListener("keydown",function(a){("Escape"===a.key||27===a.keyCode)&&i()});var j=b.querySelectorAll("a:not(.kt-tab-title)");if(j.length)for(let a=0;a<j.length;a++)j[a].addEventListener("click",function(){i()})};(function(){const b=document.querySelectorAll(".wp-block-kadence-off-canvas-trigger"),c=document.querySelector(".wp-block-kadence-off-canvas"),d=c.querySelector(".kb-off-canvas-close");0<b.length&&c&&d&&a(b,c,d)})()})();
\ No newline at end of file
diff --git a/src/assets/js/kb-off-canvas-trigger.js b/src/assets/js/kb-off-canvas-trigger.js
index d3a11f1ee..91df81491 100644
--- a/src/assets/js/kb-off-canvas-trigger.js
+++ b/src/assets/js/kb-off-canvas-trigger.js
@@ -11,10 +11,16 @@
 		focusableElements = Array.prototype.slice.call(focusableElements);
 		const firstFocusableElement = focusableElements[0];
 		const lastFocusableElement = focusableElements[focusableElements.length - 1];
+		const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
 
 		const openOffCanvas = function (event) {
+			document.body.style.setProperty('--kb-scrollbar-offset', scrollBarWidth + 'px');
+			document.body.classList.add('kb-modal-open');
+			document.body.classList.add('kb-scrollbar-fixer');
+
 			event.target.classList.add('triggered');
 			offCanvasArea.classList.add('show-off-canvas');
+
 			setTimeout(function () {
 				offCanvasArea.classList.add('active');
 				triggerButtons.forEach((button) => button.setAttribute('aria-expanded', 'true'));
@@ -23,6 +29,9 @@
 		};
 
 		const closeOffCanvas = function () {
+			document.body.classList.remove('kb-modal-open');
+			document.body.classList.remove('kb-scrollbar-fixer');
+
 			offCanvasArea.classList.remove('active');
 			triggerButtons.forEach((button) => button.setAttribute('aria-expanded', 'false'));
 			for (let i = 0; i < triggerButtons.length; i++) {
diff --git a/src/blocks/header/children/off-canvas/style.scss b/src/blocks/header/children/off-canvas/style.scss
index 2529d16d1..2780ef66e 100644
--- a/src/blocks/header/children/off-canvas/style.scss
+++ b/src/blocks/header/children/off-canvas/style.scss
@@ -108,3 +108,14 @@ body.admin-bar .kb-off-canvas-inner-wrap {
 		top: $admin-bar-height;
 	}
 }
+
+body.kb-modal-open {
+	overflow: hidden;
+}
+
+.kb-scrollbar-fixer {
+	margin-right: var(--kb-scrollbar-offset, unset);
+	.item-is-fixed {
+		right: var(--kb-scrollbar-offset, 0);
+	}
+}