plausible/analytics
1
1
Fork 0
mirror of https://github.com/plausible/analytics.git synced 2024-11-22 18:52:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

Implement a criminal hack to track removal of modal's child live components

Browse Source
This commit is contained in:
Adrian Gruntkowski 2024-06-07 13:49:44 +02:00
parent 1b1c801981
commit f34ceb78f1
1 changed files with 44 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
lib/plausible_web/live/components/modal.ex
View File

@ -104,13 +104,27 @@ defmodule PlausibleWeb.Live.Components.Modal do
end end
@impl true @impl true
def update(%{live_cids: live_cids}, socket) do
socket =
if live_cids == [] do
assign(socket, load_content?: true)
else
track_live_cids(socket)
socket
end
{:ok, put_private(socket, :live_cids, live_cids)}
end
def update(assigns, socket) do def update(assigns, socket) do
socket = socket =
assign(socket, socket
|> assign(
id: assigns.id, id: assigns.id,
inner_block: assigns.inner_block, inner_block: assigns.inner_block,
load_content?: true load_content?: true
) )
|> put_private(:live_cids, [])
{:ok, socket} {:ok, socket}
end end
@ -127,14 +141,14 @@ defmodule PlausibleWeb.Live.Components.Modal do
assigns = assigns =
assign(assigns, assign(assigns,
class: ["modal-dialog relative opacity-0 translate-y-4 sm:translate-y-0" | class], class: ["modal-dialog relative opacity-0 translate-y-4 sm:translate-y-0 z-[51]" | class],
dialog_id: assigns.id <> "-dialog" dialog_id: assigns.id <> "-dialog"
) )
~H""" ~H"""
<div <div
id={@id} id={@id}
class="relative z-[49] [&[data-phx-ref]_div.modal-dialog]:hidden [&[data-phx-ref]_div.modal-loading]:block" class="relative z-[49] [&[data-phx-ref]_div.modal-dialog]:hidden"
data-modal data-modal
x-cloak x-cloak
x-data="{ x-data="{
@ -144,7 +158,6 @@ defmodule PlausibleWeb.Live.Components.Modal do
document.body.style['overflow-y'] = 'hidden'; document.body.style['overflow-y'] = 'hidden';
if (this.firstLoadDone) { if (this.firstLoadDone) {
liveSocket.execJS($el, $el.dataset.onclose);
liveSocket.execJS($el, $el.dataset.onopen); liveSocket.execJS($el, $el.dataset.onopen);
} else { } else {
this.firstLoadDone = true; this.firstLoadDone = true;
@ -154,6 +167,7 @@ defmodule PlausibleWeb.Live.Components.Modal do
}, },
closeModal() { closeModal() {
this.modalOpen = false; this.modalOpen = false;
liveSocket.execJS($el, $el.dataset.onclose);
setTimeout(function() { setTimeout(function() {
document.body.style['overflow-y'] = 'auto'; document.body.style['overflow-y'] = 'auto';
@ -206,7 +220,7 @@ defmodule PlausibleWeb.Live.Components.Modal do
> >
<%= render_slot(@inner_block) %> <%= render_slot(@inner_block) %>
</Phoenix.Component.focus_wrap> </Phoenix.Component.focus_wrap>
<div class="modal-loading hidden w-full self-center"> <div class="modal-loading absolute w-full self-center">
<div class="text-center"> <div class="text-center">
<PlausibleWeb.Components.Generic.spinner class="inline-block h-8 w-8" /> <PlausibleWeb.Components.Generic.spinner class="inline-block h-8 w-8" />
</div> </div>
@ -218,10 +232,34 @@ defmodule PlausibleWeb.Live.Components.Modal do
@impl true @impl true
def handle_event("open", _, socket) do def handle_event("open", _, socket) do
{:noreply, assign(socket, load_content?: true)} track_live_cids(socket)
{:noreply, socket}
end end
def handle_event("close", _, socket) do def handle_event("close", _, socket) do
socket = put_private(socket, :live_cids, socket.private.children_cids)
{:noreply, assign(socket, load_content?: false)} {:noreply, assign(socket, load_content?: false)}
end end
defp track_live_cids(socket) do
if socket.private.live_cids != [] do
pid = self()
Task.start(fn ->
Process.sleep(60)
{cid_to_component, _, _} = :sys.get_state(pid).components
existing_cids = Map.keys(cid_to_component)
new_live_cids = Enum.filter(socket.private.live_cids, &(&1 in existing_cids))
send_update(pid, socket.assigns.myself, live_cids: new_live_cids)
end)
else
send_update(socket.assigns.myself, live_cids: [])
end
socket
end
end end