refactor: modal allow disabling scroll lock at page width (#590)

Author: alexbarnsley

resources/assets/js/modal.js

@@ -11,11 +11,13 @@ const Modal = {
     previousNavPaddingRight: undefined,
     trappedElement: null,
     trappedFocus: null,
+    bodyResizeDisableScrollLockHandler: null,
 
     defaultSettings: {
         reserveScrollBarGap: true,
         reserveNavScrollBarGap: true,
         disableFocusTrap: false,
+        disableScrollLockAtWidth: null,
     },
 
     disableBodyScroll(scrollable, settings = {}) {
@@ -59,6 +61,23 @@ const Modal = {
                 this.trapFocus(scrollable);
             }
         }, 50);
+
+        if (settings.disableScrollLockAtWidth !== null) {
+            this.bodyResizeDisableScrollLockHandler = () => {
+                settings = Object.assign({}, this.defaultSettings, settings);
+
+                if (window.innerWidth >= settings.disableScrollLockAtWidth) {
+                    enableBodyScroll(scrollable, settings);
+                } else {
+                    disableBodyScroll(scrollable, settings);
+                }
+            };
+
+            window.addEventListener(
+                "resize",
+                this.bodyResizeDisableScrollLockHandler
+            );
+        }
     },
 
     onModalClosed(scrollable, settings = {}) {
@@ -69,6 +88,15 @@ const Modal = {
         if (!document.querySelectorAll("[data-modal]").length) {
             clearAllBodyScrollLocks();
         }
+
+        if (this.bodyResizeDisableScrollLockHandler !== null) {
+            window.removeEventListener(
+                "resize",
+                this.bodyResizeDisableScrollLockHandler
+            );
+
+            this.bodyResizeDisableScrollLockHandler = null;
+        }
     },
 
     trapFocus(el) {

resources/views/modal.blade.php

@@ -18,6 +18,7 @@
     'wrapperClass' => 'modal-content-wrapper',
     'contentClass' => 'modal-content',
     'disableOverlayClose' => false,
+    'disableScrollLockAtWidth' => null,
 ])
 
 @php
@@ -42,7 +43,9 @@
     @else
         data-modal
     @endif
-    x-data="Modal.livewire({{ $xData }})"
+    x-data="Modal.livewire({{ $xData }}, {
+        disableScrollLockAtWidth: {{ $disableScrollLockAtWidth }},
+    })"
     @if(!$closeButtonOnly && $wireClose && ! $disableOverlayClose)
         @mousedown.self="$wire.{{ $wireClose }}()"
     @endif