Menkir

Trigger CSS transitions from server side

Hi guys.
I’m currently working with the new LV JS API and it’s pretty cool. However i have a case where i need to trigger transitions of html elements from the server side. e.g.: A Notification that pops up after the last action was verified by the backend. Something that happens quite often.

I came up with a solution with a hook that triggers the transition by clicking on a hidden button.

Here a minimal example in surface:

LV template

...
<Notification id="notify-fail" 
type="error" 
title={@notitication} 
message={@message}/>

<Submit/>
...

LV callback

def handle_event("submit", params, socket) do
    socket = if valid?(params) do
         redirect(socket, to: "/foo")
    else
        socket 
        |> assign(title: "Something went wrong", message: "Pls check your foo")
        |> Notification.open("notify-fail")
    end
    {:noreply, socket}
end

Notification Component

defmodule Notification do
    use Surface.LiveComponent
    alias Phoenix.LiveView.JS

    prop message, :string
    prop title, :string

    def render(assigns) do
        ~F"""
            <div id={@id} class="..." :hook="Notification">
                <button id={@id <> "-trigger"} type="button" hidden :on-click={__MODULE__.show(@id)}></button>
               {!-- some template stuff  with @message and @string --}
            </div>
        """
    end

    # clientside open
    def show(id, js \\ %JS{}),
    do: JS.show(js, to: "##{id}", transition: {"ease-out duration-300", "opacity-0", "opacity-100"})

    # serverside open
    def open(socket, id) do
        socket |> push_event("open", %{id: id})
    end
    ...
end

Notification Hook

...
mounted() {
    this.handleEvent("open", ({id}) => {
        if(id == this.el.id){
            this.el.querySelector(`#${id}-trigger`).click()
        }
    })
}
...

Imo this solution seems like a dirty workaround because it created the necessity of writing an extra hook as well as providing two additional functions in the module doing basically the same thing . Will there be a feature handling this behaviour? Or do you know a better way of solving this issue?

greets

3 comments

/phoenix #liveview #surface

2 1404 3

2022-03-05 01:11:02 UTC

Most Liked

DecoyLexi

I had a similar problem and managed to solve it without using hooks. In addition to pushing events to hooks, LiveView also dispatches events sent with push_event/3 to the window with a phx: prefix.

live_helpers.ex:

def push_js(socket, js \\ %JS{}) do
  cmd = Jason.encode!(js.ops) # LiveView expects this to be a string when we call `execJS` on the client

  socket
  |> push_event("exec_js", %{id: socket.id, cmd: cmd})
end

app.js:

window.addEventListener("phx:exec_js", (e) => {
  let el = document.getElementById(e.detail.id)

  liveSocket.execJS(el, e.detail.cmd)
})

Then in your LiveView, you can just do

def open(socket, id) do  
  socket
  |> push_js(show(id))
end

There might be a better way to do this, but I haven’t found one yet.

Post #4

riebeekn

I think hooks are currently the only option when wanting to call javascript from the server. I’d probably just put the necessary plain javascript in the hook however instead of going with the hidden button technique.

Post #2

CherryPoppins

You can checkout Apline.js to handle stuff like this. I’ve found it works pretty good with typical controllers/templates, but in my experience it can be buggy in liveviews and I’ve only had limited success there before giving up on it. It’s been a few months though since i tried it out so maybe they have worked out some of the liveview issues where you seemingly lose your Alpine instance on DOM updates.

Post #3