first commit

project/assets/controllers/webview_controller.js

@@ -0,0 +1,53 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+ * Otwiera podgląd "live view" projektu w modalu stylizowanym na okno przeglądarki.
+ * Adres i tytuł są przekazywane przez przyciski z data-webview-url-param
+ * oraz data-webview-title-param. iframe ładuje się dopiero przy otwarciu.
+ */
+export default class extends Controller {
+    static targets = ['dialog', 'frame', 'address', 'title', 'external', 'fallback'];
+
+    connect() {
+        this.onKeydown = this.onKeydown.bind(this);
+    }
+
+    open(event) {
+        const { url, title } = event.params;
+
+        this.addressTarget.textContent = url.replace(/^https?:\/\//, '');
+        this.titleTarget.textContent = title;
+        this.externalTargets.forEach((el) => { el.href = url; });
+        this.fallbackTarget.hidden = true;
+
+        // Jeśli strona blokuje osadzanie (X-Frame-Options), pokaż podpowiedź.
+        this.frameTarget.onerror = () => { this.fallbackTarget.hidden = false; };
+        this.frameTarget.src = url;
+
+        this.dialogTarget.showModal();
+        this.dialogTarget.addEventListener('close', () => this.reset(), { once: true });
+        document.addEventListener('keydown', this.onKeydown);
+    }
+
+    close() {
+        this.dialogTarget.close();
+    }
+
+    backdrop(event) {
+        // Klik poza ramką (w tło <dialog>) zamyka podgląd.
+        if (event.target === this.dialogTarget) {
+            this.close();
+        }
+    }
+
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            this.close();
+        }
+    }
+
+    reset() {
+        this.frameTarget.src = 'about:blank';
+        document.removeEventListener('keydown', this.onKeydown);
+    }
+}