Merge branch 'v2.x' of https://github.com/nascent-africa/jetstrap int…

…o v2.x
nascent-africa · May 18, 2021 · a939bda · a939bda
2 parents f4f62cf + e83ed7e
commit a939bda
Showing 1 changed file with 23 additions and 1 deletion.
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
@@ -27,12 +27,26 @@
 <div 
     x-data="{
         show: @entangle($attributes->wire('model')).defer,
+        focusables() {
+            // All focusable element types...
+            let selector = 'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
+            return [...$el.querySelectorAll(selector)]
+                // All non-disabled elements...
+                .filter(el => ! el.hasAttribute('disabled'))
+        },
+        firstFocusable() { return this.focusables()[0] },
+        lastFocusable() { return this.focusables().slice(-1)[0] },
+        nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
+        prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
+        nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
+        prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
     }"
     x-init="() => {
         let modal = $('#{{ $id }}');
         $watch('show', value => {
             if (value) {
                 modal.modal('show')
+                setTimeout(() => (focusables()[0]).focus(), 250);
             } else {
                 modal.modal('hide')
             }
@@ -41,10 +55,18 @@
         modal.on('hide.bs.modal', function () {
             show = false
         })
+        
+        modal.click(function(e) {
+            if (e.target == this) {
+                show = false;
+            }
+        });
     }"
+    x-on:keydown.escape.window="show = false"
+    x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
+    x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
     wire:ignore.self 
     class="modal fade" 
-    tabindex="-1" 
     id="{{ $id }}" 
     aria-labelledby="{{ $id }}" 
     aria-hidden="true"