Skip to content

Commit 85524c7

Browse files
wmnndwmnnd
committed
Use unified preview dialog for all campaign types.
1 parent f639b2e commit 85524c7

7 files changed

+135
-152
lines changed

‎assets/js/hooks/campaign-edit-live.js

+12-9
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,19 @@ const putHtmlPreview = (el) => {
77
const content = el.innerText
88
if (!content) return
99

10-
const iframe = document.getElementById(el.dataset.iframe)
11-
if (!iframe) return
10+
const iframes = document.querySelectorAll(el.dataset.iframe)
11+
if (!iframes.length) return
1212

13-
const scrollX = iframe.contentWindow.scrollX
14-
const scrollY = iframe.contentWindow.scrollY
15-
const doc = iframe.contentDocument
16-
doc.open()
17-
doc.write(content)
18-
doc.close()
19-
iframe.contentWindow.scrollTo(scrollX, scrollY)
13+
for (let i = 0; i < iframes.length; i++) {
14+
const iframe = iframes[i]
15+
const scrollX = iframe.contentWindow.scrollX
16+
const scrollY = iframe.contentWindow.scrollY
17+
const doc = iframe.contentDocument
18+
doc.open()
19+
doc.write(content)
20+
doc.close()
21+
iframe.contentWindow.scrollTo(scrollX, scrollY)
22+
}
2023
}
2124

2225
const MarkdownSimpleEditorHook = {

‎lib/keila_web/templates/campaign/_block_editor.html.heex

+7-24
Original file line numberDiff line numberDiff line change
@@ -74,28 +74,11 @@
7474
<%= raw(@styles) %>
7575
</style>
7676
</div>
77-
78-
<div x-data="{previewMode: false}" x-on:x-toggle-preview.document="previewMode = !previewMode">
79-
<div id="preview-container" x-show="previewMode">
80-
<iframe
81-
id="block-html-preview"
82-
data-source="html-preview-data"
83-
class="bg-gray-100 fixed left-0 top-0 w-full h-screen inset-0 pb-10 z-40"
84-
>
85-
</iframe>
86-
<button
87-
@click.prevent="previewMode = !previewMode"
88-
class="fixed h-10 bg-emerald-600 text-white w-full bottom-0 left-0 z-50"
89-
>
90-
<%= gettext("Close preview") %>
91-
</button>
92-
</div>
93-
<div
94-
id="block-html-preview-data"
95-
phx-hook="HtmlPreview"
96-
class="hidden"
97-
data-iframe="block-html-preview"
98-
>
99-
<%= @preview %>
100-
</div>
77+
<div
78+
id="block-html-preview-data"
79+
phx-hook="HtmlPreview"
80+
class="hidden"
81+
data-iframe="#html-preview"
82+
>
83+
<%= @preview %>
10184
</div>

‎lib/keila_web/templates/campaign/_markdown_editor.html.heex

+8-11
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<button
2727
title={gettext("Preview")}
2828
class="flex w-10 h-10 p-2 items-center justify-center bg-gray-800 hover:bg-gray-600 text-white"
29-
@click.prevent="previewMode = !previewMode"
29+
x-on:click.prevent="$dispatch('x-toggle-preview')"
3030
>
3131
<%= render_icon(:eye) %>
3232
</button>
@@ -42,22 +42,19 @@
4242
phx-update="ignore"
4343
>
4444
<iframe
45-
id="html-preview"
45+
id="html-inline-preview"
4646
src="about:blank"
4747
data-source="html-preview-data"
4848
class="bg-gray-100 flex-grow"
49-
:class="previewMode ? 'fixed w-full h-full inset-0 pb-10 z-40' : ''"
5049
>
5150
</iframe>
52-
<button
53-
x-show="previewMode"
54-
@click.prevent="previewMode = !previewMode"
55-
class="fixed h-10 bg-emerald-600 text-white w-full bottom-0 left-0 z-50"
56-
>
57-
<%= gettext("Close preview") %>
58-
</button>
5951
</div>
60-
<div id="html-preview-data" phx-hook="HtmlPreview" class="hidden" data-iframe="html-preview">
52+
<div
53+
id="html-preview-data"
54+
phx-hook="HtmlPreview"
55+
class="hidden"
56+
data-iframe="#html-preview, #html-inline-preview"
57+
>
6158
<%= @preview %>
6259
</div>
6360
</div>

‎lib/keila_web/templates/campaign/_mjml_editor.html.heex

+35-64
Original file line numberDiff line numberDiff line change
@@ -27,70 +27,41 @@
2727
</div>
2828
</div>
2929

30-
<% f = form_for(@changeset, "#") %>
31-
<div class="flex" x-data="{previewMode: false, previewDevice: 'desktop', editorExpanded: false}">
32-
<%= textarea(f, :mjml_body,
33-
rows: 20,
34-
class: "hidden",
35-
phx_debounce: "1000"
36-
) %>
37-
<div
38-
id="mjml-editor-container"
39-
class="editor flex-grow flex-shrink-0 transition-all"
40-
:class="editorExpanded ? 'w-2/3' : 'w-2/5'"
41-
phx-update="ignore"
42-
x-on:x-toggle-expand-editor.document="editorExpanded = !editorExpanded"
43-
>
30+
<div
31+
id="mjml-editor-wrapper"
32+
phx-update="ignore"
33+
class="flex bg-blue-200"
34+
x-data="{editorExpanded: false}"
35+
x-on:x-toggle-expand-editor.document="editorExpanded = !editorExpanded"
36+
>
37+
<%!--
38+
NOTE: using width: 0 for the editor is a weird hack here because otherwise the editor kept
39+
causing the entire page to overflow.
40+
The width of the editor is controlled via the (inverse) width of the iframe instead.
41+
--%>
42+
<div class="flex-grow transition-all" style="width: 0">
43+
<div id="mjml-editor"></div>
4444
</div>
45-
<div
46-
id="preview-container-mjml"
47-
class="flex-grow flex-shrink w-1/3 flex flex-col"
48-
phx-update="ignore"
49-
x-on:x-toggle-preview.document="previewMode = !previewMode"
50-
x-on:x-toggle-desktop-preview.document="previewDevice = 'desktop'"
51-
x-on:x-toggle-mobile-preview.document="previewDevice = 'mobile'"
52-
:class="previewMode ? 'fixed z-40 w-full min-h-full inset-0 bg-gray-900 items-center' : 'w-3/5 flex-grow'"
45+
<iframe
46+
id="html-inline-preview"
47+
src="about:blank"
48+
class="transition-all w-1/2"
49+
x-bind:class="editorExpanded ? 'w-0' : 'w-3/5'"
5350
>
54-
<div x-show="previewMode" style="display: none">
55-
<div class="relative shadow z-10 flex overflow-x-auto my-4">
56-
<div class="flex-grow"></div>
57-
<button
58-
title={gettext("Desktop preview")}
59-
class="flex w-10 h-10 p-2 items-center justify-center bg-gray-800 hover:bg-gray-600 text-white"
60-
:class="previewDevice == 'desktop' && 'bg-gray-700'"
61-
@click.prevent="$dispatch('x-toggle-desktop-preview')"
62-
>
63-
<%= render_icon(:desktop_computer) %>
64-
</button>
65-
<button
66-
title={gettext("Mobile preview")}
67-
class="flex w-10 h-10 p-2 items-center justify-center bg-gray-800 hover:bg-gray-600 text-white"
68-
:class="previewDevice == 'mobile' && 'bg-gray-700'"
69-
@click.prevent="$dispatch('x-toggle-mobile-preview')"
70-
>
71-
<%= render_icon(:device_mobile) %>
72-
</button>
73-
<div class="w-4"></div>
74-
<button
75-
x-show="previewMode"
76-
@click.prevent="previewMode = !previewMode"
77-
class="h-10 p-2 items-center justify-center bg-gray-800 hover:bg-gray-600 text-white"
78-
>
79-
<%= gettext("Close preview") %>
80-
</button>
81-
</div>
82-
</div>
83-
<iframe
84-
id="html-preview"
85-
src="about:blank"
86-
data-source="html-preview-data"
87-
class="bg-gray-100 flex-grow transition-all"
88-
:class="previewMode ? 'w-20 flex-grow-0 h-full' : ''"
89-
:style="previewMode ? previewDevice == 'desktop' ? 'width: 100%' : 'width: 360px' : ''"
90-
>
91-
</iframe>
92-
</div>
93-
<div id="html-preview-data" phx-hook="HtmlPreview" class="hidden" data-iframe="html-preview">
94-
<%= @preview %>
95-
</div>
51+
</iframe>
52+
</div>
53+
54+
<% f = form_for(@changeset, "#") %>
55+
<%= textarea(f, :mjml_body,
56+
rows: 20,
57+
class: "hidden",
58+
phx_debounce: "1000"
59+
) %>
60+
<div
61+
id="html-preview-data"
62+
phx-hook="HtmlPreview"
63+
class="hidden"
64+
data-iframe="#html-inline-preview, #html-preview"
65+
>
66+
<%= @preview %>
9667
</div>

‎lib/keila_web/templates/campaign/_preview_dialog.html.heex

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<div id="preview-container" phx-update="ignore">
2+
<div
3+
style="display: none"
4+
class="fixed z-40 w-full h-full inset-0 bg-gray-900 flex flex-col items-center"
5+
x-data="{previewMode: false, previewDevice: 'desktop'}"
6+
x-show.transition="previewMode"
7+
x-on:x-toggle-desktop-preview.document="previewDevice = 'desktop'"
8+
x-on:x-toggle-mobile-preview.document="previewDevice = 'mobile'"
9+
x-on:x-toggle-preview.document="previewMode = !previewMode; sos = 'saas'"
10+
>
11+
<div class="relative shadow z-10 flex overflow-x-auto my-4">
12+
<div class="flex-grow"></div>
13+
<button
14+
title={gettext("Desktop preview")}
15+
class="flex w-10 h-10 p-2 items-center justify-center bg-gray-800 hover:bg-gray-600 text-white"
16+
x-bind:class="previewDevice == 'desktop' && 'bg-gray-700'"
17+
x-on:click.prevent="$dispatch('x-toggle-desktop-preview')"
18+
>
19+
<%= render_icon(:desktop_computer) %>
20+
</button>
21+
<button
22+
title={gettext("Mobile preview")}
23+
class="flex w-10 h-10 p-2 items-center justify-center bg-gray-800 hover:bg-gray-600 text-white"
24+
x-bind:class="previewDevice == 'mobile' && 'bg-gray-700'"
25+
x-on:click.prevent="$dispatch('x-toggle-mobile-preview')"
26+
>
27+
<%= render_icon(:device_mobile) %>
28+
</button>
29+
<div class="w-4"></div>
30+
<button
31+
x-on:click.prevent="previewMode = !previewMode"
32+
class="h-10 p-2 items-center justify-center bg-gray-800 hover:bg-gray-600 text-white"
33+
>
34+
<%= gettext("Close preview") %>
35+
</button>
36+
</div>
37+
<iframe
38+
id="html-preview"
39+
src="about:blank"
40+
class="bg-gray-100 flex-grow transition-all"
41+
x-bind:style="previewDevice == 'desktop' ? 'width: 100%' : 'width: 360px'"
42+
>
43+
</iframe>
44+
</div>
45+
</div>

‎lib/keila_web/templates/campaign/_wysiwyg_editor.html.heex

+2-17
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div id="wysiwyg" phx-update="ignore" x-on:x-toggle-preview="previewMode = !previewMode">
1+
<div id="wysiwyg" phx-update="ignore">
22
<div class="wysiwyg--menu bg-white relative shadow z-10 flex overflow-x-auto">
33
<button
44
title={gettext("Bold")}
@@ -114,26 +114,11 @@
114114
<%= raw(@styles) %>
115115
</style>
116116

117-
<div id="preview-container" x-show="previewMode">
118-
<iframe
119-
id="wysiwyg-html-preview"
120-
src="about:blank"
121-
data-source="html-preview-data"
122-
class="bg-gray-100 fixed w-full h-full inset-0 pb-10 z-40"
123-
>
124-
</iframe>
125-
<button
126-
@click.prevent="previewMode = !previewMode"
127-
class="fixed h-10 bg-emerald-600 text-white w-full bottom-0 left-0 z-50"
128-
>
129-
<%= gettext("Close preview") %>
130-
</button>
131-
</div>
132117
<div
133118
id="wysiwyg-html-preview-data"
134119
phx-hook="HtmlPreview"
120+
data-iframe="#html-preview"
135121
class="hidden"
136-
data-iframe="wysiwyg-html-preview"
137122
>
138123
<%= @preview %>
139124
</div>

‎lib/keila_web/templates/campaign/edit_live.html.heex

+26-27
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@
121121
let={f}
122122
for={@changeset}
123123
id="campaign"
124-
class="flex flex-col gap-4"
124+
class="flex flex-col gap-4 w-full"
125125
phx-change="update"
126126
phx-submit="save"
127127
x-on:change="setUnsavedReminder(true)"
@@ -135,37 +135,36 @@
135135
<% end %>
136136
</div>
137137

138-
<div class="flex flex-col">
139-
<div x-data="{previewMode: false}">
140-
<% type = Ecto.Changeset.get_field(@changeset, :settings).type %>
141-
<% enable_wysiwyg? = Ecto.Changeset.get_field(@changeset, :settings).enable_wysiwyg %>
142-
<%= cond do %>
143-
<% (type == :markdown && enable_wysiwyg?) -> %>
144-
<%= textarea(f, :text_body, class: "hidden") %>
145-
<div
146-
id="wysiwyg-container"
147-
phx-hook="MarkdownEditor"
148-
class="flex-grow bg-white mt-4 min-h-10"
149-
>
150-
<%= render("_wysiwyg_editor.html", assigns) %>
151-
</div>
152-
<% (type == :block) -> %>
153-
<%= render("_block_editor.html", assigns) %>
154-
<% (type == :mjml) -> %>
155-
<div id="mjml-container" phx-hook="MjmlEditor">
156-
<%= render("_mjml_editor.html", assigns) %>
157-
</div>
158-
<% true -> %>
159-
<div id="markdown-simple-container" phx-hook="MarkdownSimpleEditor">
160-
<%= render("_markdown_editor.html", assigns) %>
161-
</div>
162-
<% end %>
163-
</div>
138+
<div class="flex flex-col w-full">
139+
<% type = Ecto.Changeset.get_field(@changeset, :settings).type %>
140+
<% enable_wysiwyg? = Ecto.Changeset.get_field(@changeset, :settings).enable_wysiwyg %>
141+
<%= cond do %>
142+
<% (type == :markdown && enable_wysiwyg?) -> %>
143+
<%= textarea(f, :text_body, class: "hidden") %>
144+
<div
145+
id="wysiwyg-container"
146+
phx-hook="MarkdownEditor"
147+
class="flex-grow bg-white mt-4 min-h-10"
148+
>
149+
<%= render("_wysiwyg_editor.html", assigns) %>
150+
</div>
151+
<% (type == :block) -> %>
152+
<%= render("_block_editor.html", assigns) %>
153+
<% (type == :mjml) -> %>
154+
<div id="mjml-container" class="bg-blue-500 p-2" phx-hook="MjmlEditor">
155+
<%= render("_mjml_editor.html", assigns) %>
156+
</div>
157+
<% true -> %>
158+
<div id="markdown-simple-container" phx-hook="MarkdownSimpleEditor">
159+
<%= render("_markdown_editor.html", assigns) %>
160+
</div>
161+
<% end %>
164162
</div>
165163
</.form>
166164
</div>
167165
<%= render("_send_dialogs.html", assigns) %>
168166
<%= render("_settings_dialog.html", assigns) %>
167+
<%= render("_preview_dialog.html", assigns) %>
169168
</div>
170169

171170
<%= render("_wysiwyg_dialogs.html", assigns) %>

0 commit comments

Comments
 (0)