Merge pull request #97 from DissNik/patch-modal

moonshine-software · Feb 9, 2023 · 72541cc · 72541cc
2 parents a7e0c4f + 310945e
commit 72541cc
Showing 1 changed file with 51 additions and 44 deletions.
diff --git a/resources/views/components/async-modal.blade.php b/resources/views/components/async-modal.blade.php
@@ -2,51 +2,58 @@
     'id',
     'route',
 ])
-<x-moonshine::modal wide>
-    <div x-data="{}" id="{{ $id }}">
-        <div class="moonshine-loader" style="height: 50px; width: 50px;"></div>
-    </div>
-
-    <x-slot name="outerHtml">
-        <button x-on:click="isOpen = !isOpen; getData_{{ $id }}();"
-                type="button"
-            {{ $attributes }}
-        >
-            {{ $slot ?? '' }}
-        </button>
-
-        <script>
-            function getData_{{ $id }}() {
-                fetch('{!! str_replace('&amp;', '&', $route) !!}', {
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest'
-                    },
-                }).then(function (response) {
-                    return response.text()
-                }).then(function (html) {
-                    let containerElement = document
-                        .getElementById('{{ $id }}')
-
-                    containerElement.innerHTML = html
-
-                    const scriptElements = containerElement.querySelectorAll("script");
-
-                    Array.from(scriptElements).forEach((scriptElement) => {
-                        const clonedElement = document.createElement("script");
-
-                        Array.from(scriptElement.attributes).forEach((attribute) => {
-                            clonedElement.setAttribute(attribute.name, attribute.value);
+
+<span id="button_{{ $id }}"></span>
+
+<template x-teleport="body">
+    <x-moonshine::modal wide>
+        <div x-data="{}" id="{{ $id }}">
+            <div class="moonshine-loader" style="height: 50px; width: 50px;"></div>
+        </div>
+
+        <x-slot name="outerHtml">
+            <template x-teleport="#button_{{ $id }}">
+                <button x-on:click="isOpen = !isOpen; getData_{{ $id }}();"
+                        type="button"
+                    {{ $attributes }}
+                >
+                    {{ $slot ?? '' }}
+                </button>
+            </template>
+
+            <script>
+                function getData_{{ $id }}() {
+                    fetch('{!! str_replace('&amp;', '&', $route) !!}', {
+                        headers: {
+                            'X-Requested-With': 'XMLHttpRequest'
+                        },
+                    }).then(function (response) {
+                        return response.text()
+                    }).then(function (html) {
+                        let containerElement = document
+                            .getElementById('{{ $id }}')
+
+                        containerElement.innerHTML = html
+
+                        const scriptElements = containerElement.querySelectorAll("script");
+
+                        Array.from(scriptElements).forEach((scriptElement) => {
+                            const clonedElement = document.createElement("script");
+
+                            Array.from(scriptElement.attributes).forEach((attribute) => {
+                                clonedElement.setAttribute(attribute.name, attribute.value);
+                            });
+
+                            clonedElement.text = scriptElement.text;
+
+                            scriptElement.parentNode.replaceChild(clonedElement, scriptElement);
                         });
 
-                        clonedElement.text = scriptElement.text;
+                    }).catch(function (err) {
 
-                        scriptElement.parentNode.replaceChild(clonedElement, scriptElement);
                     });
-
-                }).catch(function (err) {
-
-                });
-            }
-        </script>
-    </x-slot>
-</x-moonshine::modal>
+                }
+            </script>
+        </x-slot>
+    </x-moonshine::modal>
+</template>