54 lines
1.6 KiB
JavaScript
54 lines
1.6 KiB
JavaScript
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);
|
|
}
|
|
}
|