memEx/lib/memex_web/live/live_helpers.ex

81 lines
2.5 KiB
Elixir
Raw Normal View History

2022-07-25 19:31:54 -04:00
defmodule MemexWeb.LiveHelpers do
2022-01-22 20:44:38 -05:00
@moduledoc """
Contains resuable methods for all liveviews
"""
2022-11-16 21:11:02 -05:00
import Phoenix.Component
2022-02-25 21:55:27 -05:00
alias Phoenix.LiveView.JS
2021-09-02 23:32:53 -04:00
@doc """
2022-02-25 21:55:27 -05:00
Renders a live component inside a modal.
2021-09-02 23:32:53 -04:00
The rendered modal receives a `:return_to` option to properly update
the URL when the modal is closed.
## Examples
2022-02-25 21:55:27 -05:00
<.modal return_to={Routes.<%= schema.singular %>_index_path(Endpoint, :index)}>
<.live_component
module={<%= inspect context.web_module %>.<%= inspect Module.concat(schema.web_namespace, schema.alias) %>Live.FormComponent}
id={@<%= schema.singular %>.id || :new}
title={@page_title}
action={@live_action}
return_to={Routes.<%= schema.singular %>_index_path(Endpoint, :index)}
<%= schema.singular %>: @<%= schema.singular %>
/>
</.modal>
2021-09-02 23:32:53 -04:00
"""
2022-02-25 21:55:27 -05:00
def modal(assigns) do
~H"""
2022-11-16 21:11:02 -05:00
<.link
patch={@return_to}
id="modal-bg"
class="fade-in fixed z-10 left-0 top-0
2022-10-26 22:09:49 -04:00
w-screen h-screen overflow-hidden
2022-11-16 21:11:02 -05:00
p-8 flex flex-col justify-center items-center cursor-auto"
style="background-color: rgba(0,0,0,0.4);"
phx-remove={hide_modal()}
>
2022-02-25 21:55:27 -05:00
<span class="hidden"></span>
2022-11-16 21:11:02 -05:00
</.link>
2021-09-02 23:32:53 -04:00
2022-02-25 21:55:27 -05:00
<div
id="modal"
class="fixed z-10 left-0 top-0 pointer-events-none
2022-10-26 22:09:49 -04:00
w-screen h-screen overflow-hidden
2022-02-25 21:55:27 -05:00
p-4 sm:p-8 flex flex-col justify-center items-center"
>
<div
id="modal-content"
2022-10-26 22:09:49 -04:00
class="fade-in-scale max-w-3xl max-h-3xl relative w-full
2022-02-25 21:55:27 -05:00
pointer-events-auto overflow-hidden
2022-10-26 22:09:49 -04:00
px-8 py-4 sm:py-8 flex flex-col justify-start items-stretch
bg-primary-800 text-primary-400 border-primary-900 border-2 rounded-lg"
2022-02-25 21:55:27 -05:00
>
2022-11-16 21:11:02 -05:00
<.link
patch={@return_to}
id="close"
class="absolute top-8 right-10
2022-02-25 21:55:27 -05:00
text-gray-500 hover:text-gray-800
2022-11-16 21:11:02 -05:00
transition-all duration-500 ease-in-out"
phx-remove={hide_modal()}
>
2022-02-25 21:55:27 -05:00
<i class="fa-fw fa-lg fas fa-times"></i>
2022-11-16 21:11:02 -05:00
</.link>
2022-02-25 21:55:27 -05:00
2022-10-26 22:09:49 -04:00
<div class="overflow-x-hidden overflow-y-visible p-8 flex flex-col space-y-4 justify-start items-stretch">
2022-02-25 21:55:27 -05:00
<%= render_slot(@inner_block) %>
</div>
</div>
</div>
"""
2021-09-02 23:32:53 -04:00
end
2022-01-22 13:01:36 -05:00
2022-02-25 21:55:27 -05:00
def hide_modal(js \\ %JS{}) do
js
|> JS.hide(to: "#modal", transition: "fade-out")
|> JS.hide(to: "#modal-bg", transition: "fade-out")
|> JS.hide(to: "#modal-content", transition: "fade-out-scale")
2021-09-02 23:32:53 -04:00
end
end