Merge pull request #13 from pboivin/fix/preview-modal-pointer-events

fix: Inject pointer-events css into preview modal content
pboivin · Jun 5, 2023 · a66e0d6 · a66e0d6
2 parents 6af060e + 1d89b04
commit a66e0d6
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -41,7 +41,7 @@ This will add a `config/filament-peek.php` file to your project. Here are the ma
 | `devicePresets` | `array\|false` | Device presets allow users to quickly resize the preview iframe to specific dimensions. Set this to `false` to deactivate device presets. |
 | `initialDevicePreset` | `string` | The default device preset to be activated when the preview modal is open. |
 | `allowIframeOverflow` | `bool` | Set this to `true` if you want to allow the iframe dimensions to go beyond the capacity of the available preview modal area. |
-| `allowIframePointerEvents` | `bool` | Set this to `true` if you want to allow all pointer events (clicks, etc.) within the iframe. By default, only scrolling is allowed. |
+| `allowIframePointerEvents` | `bool` | Set this to `true` if you want to allow all pointer events (clicks, etc.) within the iframe. By default, only scrolling is allowed. (See [Pointer Events](#pointer-events)) |
 
 ## How it Works
 
@@ -236,7 +236,7 @@ class PageResource extends Resource
 
 ## Pointer Events
 
-By default, only scrolling is allowed in the preview iframe. If this doesn't work for your use-case, you can enable all pointer events with the [`allowIframePointerEvents` configuration](#configuration).
+By default, only scrolling is allowed in the preview iframe. This is done by inserting a very small `<style>` tag at the end of your preview's `<body>`. If this doesn't work for your use-case, you can enable all pointer events with the [`allowIframePointerEvents` configuration](#configuration).
 
 If you need finer control over pointer events in your previews, first set this option to `true`. Then, in your page template, add the required CSS or JS. Here's an exemple disabling preview pointer events only for `<a>` tags:
 

diff --git a/resources/css/plugin.css b/resources/css/plugin.css
@@ -32,17 +32,12 @@
 .filament-peek-preview-modal-body iframe {
     @apply shadow-2xl mx-auto;
     transition: all 200ms;
-    pointer-events: none;
 }
 
 .filament-peek-preview-modal-body.allow-iframe-overflow {
     @apply overflow-y-auto;
 }
 
-.filament-peek-preview-modal-body.allow-iframe-pointer-events iframe {
-    pointer-events: initial;
-}
-
 body.is-filament-peek-preview-modal-open {
     @apply overflow-hidden
 }
diff --git a/resources/dist/filament-peek.css b/resources/dist/filament-peek.css
diff --git a/resources/views/preview-modal.blade.php b/resources/views/preview-modal.blade.php
@@ -123,7 +123,6 @@ class="filament-peek-preview-modal"
         <div class="{{ Arr::toCssClasses([
             'filament-peek-preview-modal-body' => true,
             'allow-iframe-overflow' => config('filament-peek.allowIframeOverflow', false),
-            'allow-iframe-pointer-events' => config('filament-peek.allowIframePointerEvents', false),
         ]) }}">
             <template x-if="iframeUrl">
                 <iframe

diff --git a/src/Pages/Concerns/HasPreviewModal.php b/src/Pages/Concerns/HasPreviewModal.php
@@ -39,6 +39,17 @@ protected function renderPreviewModalView($view, $data): string
         return view($view, $data)->render();
     }
 
+    protected function injectPreviewModalStyle($htmlContent): string
+    {
+        if (config('filament-peek.allowIframePointerEvents', false)) {
+            return $htmlContent;
+        }
+
+        $style = '<style>body * { pointer-events: none !important; }</style>';
+
+        return preg_replace('#\</[ ]*body\>#', "$style</body>", $htmlContent);
+    }
+
     protected function preparePreviewModalData(): array
     {
         $data = $this->form->getState();
@@ -73,7 +84,9 @@ public function openPreviewModal(): void
             if ($previewModalUrl = $this->getPreviewModalUrl()) {
                 // pass
             } elseif ($view = $this->getPreviewModalView()) {
-                $previewModalHtmlContent = $this->renderPreviewModalView($view, $this->previewModalData);
+                $previewModalHtmlContent = $this->injectPreviewModalStyle(
+                    $this->renderPreviewModalView($view, $this->previewModalData)
+                );
             } else {
                 throw new InvalidArgumentException('Missing preview modal URL or Blade view.');
             }