Skip to content

Commit a0a2d45

Browse files
GigaGiorgadzeGigaGiorgadze
committed
refactor: move iframe to component and add auto resize easy add
1 parent bc97bb8 commit a0a2d45

File tree

7 files changed

+71
-81
lines changed

7 files changed

+71
-81
lines changed

‎resources/views/components/iframe.blade.php‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@props([
2+
'url',
3+
'data',
4+
'statePath',
5+
'autoResizeIframe'
6+
])
7+
8+
<iframe
9+
src="{{ $url }}"
10+
x-data="{
11+
data: @js($data),
12+
ready: $wire.entangle('{{ $statePath }}.ready'),
13+
@if($autoResizeIframe)
14+
height: $wire.entangle('{{ $statePath }}.height'),
15+
@endif
16+
init() {
17+
if (this.ready) {
18+
$root.contentWindow.postMessage(JSON.stringify(this.data), '*');
19+
}
20+
}
21+
}"
22+
@message.window="() => {
23+
if (!$data.ready) {
24+
$data.ready = $event.data?.type === 'readyForPreview';
25+
$root.contentWindow.postMessage(JSON.stringify($data.data), '*');
26+
}
27+
if ($event.data?.type === 'previewResized') {
28+
$data.height = $event.data.height + 'px';
29+
}
30+
}"
31+
{{
32+
$attributes->merge([
33+
'class' => 'w-full',
34+
])->when($autoResizeIframe, fn ($attributes) => $attributes->merge([
35+
'x-bind:height' => 'height',
36+
]))
37+
}}
38+
></iframe>

‎resources/views/forms/page-builder-preview.blade.php‎

Lines changed: 7 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -17,40 +17,12 @@
1717
@endforeach
1818
@endif
1919
@else
20-
<iframe
21-
src="{{ $getIframeUrl() }}"
22-
x-data="{
23-
data: @js($pageBuilderData),
24-
ready: $wire.entangle('{{ $getStatePath() }}.ready'),
25-
@if($autoResizeIframe)
26-
height: $wire.entangle('{{ $getStatePath() }}.height'),
27-
@endif
28-
init() {
29-
if (this.ready) {
30-
$root.contentWindow.postMessage(JSON.stringify(this.data), '*');
31-
}
32-
}
33-
}"
34-
{{-- TODO: move this to alpine component --}}
35-
@message.window="() => {
36-
if (!$data.ready) {
37-
$data.ready = $event.data?.type === 'readyForPreview';
38-
$root.contentWindow.postMessage(JSON.stringify($data.data), '*');
39-
}
40-
if ($event.data?.type === 'previewResized') {
41-
$data.height = $event.data.height + 'px';
42-
}
43-
}"
44-
frameborder="0"
45-
allowfullscreen
46-
{{
47-
$iframeAttributes->merge([
48-
'class' => 'w-full',
49-
])->when($autoResizeIframe, fn ($attributes) => $attributes->merge([
50-
'x-bind:height' => 'height',
51-
]))
52-
}}
53-
>
54-
</iframe>
20+
<x-page-builder-plugin::iframe
21+
url="{{ $getIframeUrl() }}"
22+
:data=$pageBuilderData
23+
statePath="{{ $getStatePath() }}"
24+
autoResizeIframe="{{ $autoResizeIframe }}"
25+
:attributes=$iframeAttributes
26+
/>
5527
@endif
5628
</x-dynamic-component>

‎resources/views/infolist/page-builder-preview-entry.blade.php‎

Lines changed: 7 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -9,41 +9,13 @@
99
<x-dynamic-component :component="$getEntryWrapperView()" :entry="$entry">
1010
@if (count($blocks) && $state)
1111
@if ($shouldRenderWithIframe)
12-
<iframe
13-
src="{{ $getIframeUrl() }}"
14-
x-data="{
15-
data: @js($state),
16-
ready: $wire.entangle('{{ $getStatePath() }}.ready'),
17-
@if($autoResizeIframe)
18-
height: $wire.entangle('{{ $getStatePath() }}.height'),
19-
@endif
20-
init() {
21-
if (this.ready) {
22-
$root.contentWindow.postMessage(JSON.stringify(this.data), '*');
23-
}
24-
}
25-
}"
26-
{{-- TODO: move this to alpine component --}}
27-
@message.window="() => {
28-
if (!$data.ready) {
29-
$data.ready = $event.data?.type === 'readyForPreview';
30-
$root.contentWindow.postMessage(JSON.stringify($data.data), '*');
31-
}
32-
if ($event.data?.type === 'previewResized') {
33-
$data.height = $event.data.height + 'px';
34-
}
35-
}"
36-
frameborder="0"
37-
allowfullscreen
38-
{{
39-
$iframeAttributes->merge([
40-
'class' => 'w-full',
41-
])->when($autoResizeIframe, fn ($attributes) => $attributes->merge([
42-
'x-bind:height' => 'height',
43-
]))
44-
}}
45-
>
46-
</iframe>
12+
<x-page-builder-plugin::iframe
13+
url="{{ $getIframeUrl() }}"
14+
:data=$state
15+
statePath="{{ $getStatePath() }}"
16+
autoResizeIframe="{{ $autoResizeIframe }}"
17+
:attributes=$iframeAttributes
18+
/>
4719
@else
4820
@foreach ($state as $block)
4921
@component($getViewForBlock($block['block_type']), ['block' => $block])

‎src/Components/Forms/Actions/CreatePageBuilderBlockAction.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ protected function setUp(): void
5353
]
5454
)->columnSpan(1),
5555
Hidden::make('block_type')->default($blockType),
56+
Hidden::make('block_id')->default(app(config('page-builder-plugin.block_model_class'))->newUniqueId()),
5657
$preview,
5758
]
5859
)->columns(2);

‎src/Components/Forms/Actions/EditPageBuilderBlockAction.php‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ protected function setUp(): void
3939
$this->fillForm([
4040
'data' => $block['data'],
4141
'block_type' => $block['block_type'],
42+
'block_id' => $block['id'],
4243
]);
4344

4445
return $form->schema(
@@ -58,7 +59,8 @@ protected function setUp(): void
5859
)->live(),
5960
]
6061
)->columnSpan(1),
61-
Hidden::make('block_type')->default($block['block_type']),
62+
Hidden::make('block_type'),
63+
Hidden::make('block_id'),
6264
$preview,
6365
]
6466
)->columns(2);

‎src/Components/Forms/PageBuilder.php‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -370,20 +370,25 @@ public function relationship(
370370
public function renderPreviewWithIframes(
371371
bool | Closure $condition,
372372
string | Closure $createUrl,
373-
// TODO: make one of them optional
374-
string | Closure $updateUrl,
373+
string | Closure | null $updateUrl = null,
374+
bool | Closure $autoResize = true,
375375
) {
376376
$condition = (bool) $this->evaluate($condition);
377+
$autoResize = (bool) $this->evaluate($autoResize);
377378

378-
$this->createAction(function (CreatePageBuilderBlockAction $action) use ($createUrl) {
379-
return $action->pageBuilderPreviewField(function (PageBuilderPreview $field) use ($createUrl) {
380-
return $field->iframeUrl($createUrl);
379+
if (! $updateUrl) {
380+
$updateUrl = $createUrl;
381+
}
382+
383+
$this->createAction(function (CreatePageBuilderBlockAction $action) use ($createUrl, $autoResize) {
384+
return $action->pageBuilderPreviewField(function (PageBuilderPreview $field) use ($createUrl, $autoResize) {
385+
return $field->iframeUrl($createUrl)->autoResizeIframe($autoResize);
381386
});
382387
});
383388

384-
$this->editAction(function (EditPageBuilderBlockAction $action) use ($updateUrl) {
385-
return $action->pageBuilderPreviewField(function (PageBuilderPreview $field) use ($updateUrl) {
386-
return $field->iframeUrl($updateUrl);
389+
$this->editAction(function (EditPageBuilderBlockAction $action) use ($updateUrl, $autoResize) {
390+
return $action->pageBuilderPreviewField(function (PageBuilderPreview $field) use ($updateUrl, $autoResize) {
391+
return $field->iframeUrl($updateUrl)->autoResizeIframe($autoResize);
387392
});
388393
});
389394

‎src/Components/Forms/PageBuilderPreview.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,13 +64,13 @@ public function getPageBuilderData(): array
6464

6565
if ($this->singleItemPreview) {
6666
$blockType = $data['block_type'] ?? null;
67+
$id = $data['block_id'];
6768

6869
if ($blockType) {
6970
$formatted = $blockType::formatForSinglePreview($data['data']);
7071

7172
return [
72-
'id' => app(config('page-builder-plugin.block_model_class'))->newUniqueId(),
73-
...$data,
73+
'id' => $id,
7474
'block_name' => $blockType::getBlockName(),
7575
'data' => $formatted,
7676
];

0 commit comments

Comments
 (0)