Merge pull request #4212 from Laravel-Backpack/fix-new-error-frame

Fixed the Error Frame for the new ignition layout

Author: tabacitu

src/resources/views/crud/inc/ajax_error_frame.blade.php

@@ -1,73 +1,60 @@
-<style>
-.ajax-error-frame {
-    display: none;
-    position: fixed;
-    z-index: 1020;
-    top: 0;
-}
-.ajax-error-frame .content {
-    --width: 80vw;
-    --height: 90vh;
-    position: absolute;
-    width: var(--width);
-    height: var(--height);
-    box-shadow: 0px 0px 4rem;
-    transform: translate(calc((100vw - var(--width)) / 2), calc((100vh - var(--height)) / 2));
-    border-radius: 0.4rem;
-    background-color: #FFF;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-.ajax-error-frame iframe {
-    border: 0;
-    height: 100%;
-}
-.ajax-error-frame .close {
-    position: absolute;
-    right: 0.8rem;
-    top: 0.4rem;
-    cursor: pointer;
-}
-.ajax-error-frame .background {
-    position: absolute;
-    background-color: #0002;
-    width: 100vw;
-    height: 100vh;
-}
-.ajax-error-frame.active {
-    display: block;
-    opacity: 0;
-    animation-name: fadeIn;
-    animation-duration: .4s;
-    animation-fill-mode: forwards;
-}
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-</style>
-
-<div class="ajax-error-frame">
-    <div class="background"></div>
-    <div class="content">
-        <div class="close">×</div>
-        <iframe></iframe>
-    </div>
-</div>
-
 <script>
-const errorFrame = document.querySelector('.ajax-error-frame');
-
 $(document).ajaxComplete((e, result, settings) => {
     if(result.responseJSON?.exception !== undefined) {
         $.ajax({...settings, accepts: "text/html", backpackExceptionHandler: true});
     }
     else if(settings.backpackExceptionHandler) {
         Noty.closeAll();
-        errorFrame.classList.add('active');
-        errorFrame.querySelector('iframe').srcdoc = result.responseText;
-        errorFrame.querySelectorAll('.close, .background').forEach(e => e.onclick = () => errorFrame.classList.remove('active'));
+        showErrorFrame(result.responseText);
     }
 });
+
+const showErrorFrame = html => {
+    let page = document.createElement('html');
+    page.innerHTML = html;
+    page.querySelectorAll('a').forEach(a => a.setAttribute('target', '_top'));
+
+    let modal = document.getElementById('ajax-error-frame');
+
+    if (typeof modal !== 'undefined' && modal !== null) {
+        modal.innerHTML = '';
+    } else {
+        modal = document.createElement('div');
+        modal.id = 'ajax-error-frame';
+        modal.style.position = 'fixed';
+        modal.style.width = '100vw';
+        modal.style.height = '100vh';
+        modal.style.padding = '5vh 5vw';
+        modal.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
+        modal.style.zIndex = 200000;
+    }
+
+    let iframe = document.createElement('iframe');
+    iframe.style.backgroundColor = '#17161A';
+    iframe.style.borderRadius = '5px';
+    iframe.style.width = '100%';
+    iframe.style.height = '100%';
+    iframe.style.border = '0';
+    iframe.style.boxShadow = '0 0 4rem';
+    modal.appendChild(iframe);
+
+    document.body.prepend(modal);
+    document.body.style.overflow = 'hidden';
+    iframe.contentWindow.document.open();
+    iframe.contentWindow.document.write(page.outerHTML);
+    iframe.contentWindow.document.close();
+
+    // Close on click
+    modal.addEventListener('click', () => hideErrorFrame(modal));
+
+    // Close on escape key press
+    modal.setAttribute('tabindex', 0);
+    modal.addEventListener('keydown', e => e.key === 'Escape' && hideErrorFrame(modal));
+    modal.focus();
+}
+
+const hideErrorFrame = modal => {
+    modal.outerHTML = '';
+    document.body.style.overflow = 'visible';
+}
 </script>