defmodule LiveBeatsWeb.LiveHelpers do import Phoenix.LiveView import Phoenix.LiveView.Helpers alias LiveBeatsWeb.Router.Helpers, as: Routes alias Phoenix.LiveView.JS alias LiveBeats.Accounts alias LiveBeats.MediaLibrary def home_path(nil = _current_user), do: "/" def home_path(%Accounts.User{} = current_user), do: profile_path(current_user) def profile_path(current_user_or_profile, action \\ :show) def profile_path(username, action) when is_binary(username) do Routes.profile_path(LiveBeatsWeb.Endpoint, action, username) end def profile_path(%Accounts.User{} = current_user, action) do profile_path(current_user.username, action) end def profile_path(%MediaLibrary.Profile{} = profile, action) do profile_path(profile.username, action) end def connection_status(assigns) do ~H""" """ end def flash(%{kind: :error} = assigns) do ~H""" <%= if live_flash(@flash, @kind) do %>
JS.remove_class("fade-in-scale", to: "#flash") |> hide("#flash")} phx-hook="Flash" >
<.icon name={:exclamation_circle} class="w-5 w-5"/>
<% end %> """ end def flash(%{kind: :info} = assigns) do ~H""" <%= if live_flash(@flash, @kind) do %>
JS.remove_class("fade-in-scale") |> hide("#flash")} phx-value-key="info" phx-hook="Flash" >
<.icon name={:check_circle} class="w-5 h-5"/>
<% end %> """ end def spinner(assigns) do ~H""" """ end def icon(assigns) do assigns = assigns |> assign_new(:outlined, fn -> false end) |> assign_new(:class, fn -> "w-4 h-4 inline-block" end) |> assign_new(:"aria-hidden", fn -> !Map.has_key?(assigns, :"aria-label") end) ~H""" <%= if @outlined do %> <%= apply(Heroicons.Outline, @name, [assigns_to_attributes(assigns, [:outlined, :name])]) %> <% else %> <%= apply(Heroicons.Solid, @name, [assigns_to_attributes(assigns, [:outlined, :name])]) %> <% end %> """ end def link(%{navigate: _to} = assigns) do assigns = assign_new(assigns, :class, fn -> nil end) ~H""" <%= render_slot(@inner_block) %> """ end def link(%{patch: to} = assigns) do opts = assigns |> assigns_to_attributes() |> Keyword.put(:to, to) assigns = assign(assigns, :opts, opts) ~H""" <%= live_patch @opts do %><%= render_slot(@inner_block) %><% end %> """ end def link(%{} = assigns) do opts = assigns |> assigns_to_attributes() |> Keyword.put(:to, assigns[:href] || "#") assigns = assign(assigns, :opts, opts) ~H""" <%= Phoenix.HTML.Link.link @opts do %><%= render_slot(@inner_block) %><% end %> """ end @doc """ Returns a button triggered dropdown with aria keyboard and focus supporrt. Accepts the follow slots: * `:id` - The id to uniquely identify this dropdown * `:img` - The optional img to show beside the button title * `:title` - The button title * `:subtitle` - The button subtitle ## Examples <.dropdown id={@id}> <:img src={@current_user.avatar_url}/> <:title><%= @current_user.name %> <:subtitle>@<%= @current_user.username %> <:link navigate={profile_path(@current_user)}>View Profile <:link navigate={Routes.settings_path(LiveBeatsWeb.Endpoint, :edit)}Settings """ def dropdown(assigns) do assigns = assigns |> assign_new(:img, fn -> nil end) |> assign_new(:title, fn -> nil end) |> assign_new(:subtitle, fn -> nil end) ~H"""
""" end def show_mobile_sidebar(js \\ %JS{}) do js |> JS.show(to: "#mobile-sidebar-container", transition: "fade-in") |> JS.show( to: "#mobile-sidebar", display: "flex", time: 300, transition: {"transition ease-in-out duration-300 transform", "-translate-x-full", "translate-x-0"} ) |> JS.hide(to: "#show-mobile-sidebar", transition: "fade-out") |> JS.dispatch("js:exec", to: "#hide-mobile-sidebar", detail: %{call: "focus", args: []}) end def hide_mobile_sidebar(js \\ %JS{}) do js |> JS.hide(to: "#mobile-sidebar-container", transition: "fade-out") |> JS.hide( to: "#mobile-sidebar", time: 300, transition: {"transition ease-in-out duration-300 transform", "translate-x-0", "-translate-x-full"} ) |> JS.show(to: "#show-mobile-sidebar", transition: "fade-in") |> JS.dispatch("js:exec", to: "#show-mobile-sidebar", detail: %{call: "focus", args: []}) end def show(js \\ %JS{}, selector) do JS.show(js, to: selector, time: 300, display: "inline-block", transition: {"ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95", "opacity-100 translate-y-0 sm:scale-100"} ) end def hide(js \\ %JS{}, selector) do JS.hide(js, to: selector, time: 300, transition: {"transition ease-in duration-300", "transform opacity-100 scale-100", "transform opacity-0 scale-95"} ) end def show_dropdown(to) do JS.show( to: to, transition: {"transition ease-out duration-120", "transform opacity-0 scale-95", "transform opacity-100 scale-100"} ) |> JS.set_attribute({"aria-expanded", "true"}, to: to) end def hide_dropdown(to) do JS.hide( to: to, transition: {"transition ease-in duration-120", "transform opacity-100 scale-100", "transform opacity-0 scale-95"} ) |> JS.remove_attribute("aria-expanded", to: to) end def show_modal(js \\ %JS{}, id) when is_binary(id) do js |> JS.show( to: "##{id}", display: "inline-block", transition: {"ease-out duration-300", "opacity-0", "opacity-100"} ) |> JS.show( to: "##{id}-container", display: "inline-block", transition: {"ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95", "opacity-100 translate-y-0 sm:scale-100"} ) |> js_exec("##{id}-confirm", "focus", []) end def hide_modal(js \\ %JS{}, id) do js |> JS.remove_class("fade-in", to: "##{id}") |> JS.hide( to: "##{id}", transition: {"ease-in duration-200", "opacity-100", "opacity-0"} ) |> JS.hide( to: "##{id}-container", transition: {"ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"} ) |> JS.dispatch("click", to: "##{id} [data-modal-return]") end def modal(assigns) do assigns = assigns |> assign_new(:show, fn -> false end) |> assign_new(:patch, fn -> nil end) |> assign_new(:navigate, fn -> nil end) |> assign_new(:on_cancel, fn -> %JS{} end) |> assign_new(:on_confirm, fn -> %JS{} end) # slots |> assign_new(:title, fn -> [] end) |> assign_new(:confirm, fn -> [] end) |> assign_new(:cancel, fn -> [] end) |> assign_rest(~w(id show patch navigate on_cancel on_confirm title confirm cancel)a) ~H"""
<.focus_wrap id={"#{@id}-focus-wrap"} content={"##{@id}-container"}>
""" end def focus_wrap(assigns) do ~H"""
<%= render_slot(@inner_block) %>
""" end def progress_bar(assigns) do assigns = assigns |> assign_new(:min, fn -> 0 end) |> assign_new(:max, fn -> 100 end) |> assign_new(:value, fn -> assigns[:min] || 0 end) ~H"""
""" end def title_bar(assigns) do assigns = assign_new(assigns, :actions, fn -> [] end) ~H"""

<%= render_slot(@inner_block) %>

<%= if Enum.count(@actions) > 0 do %>
<%= render_slot(@actions) %>
<% end %>
""" end def button(%{patch: _} = assigns) do assigns = assign_new(assigns, :primary, fn -> false end) ~H""" <%= if @primary do %> <%= live_patch [to: @patch, class: "order-0 inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:order-1 sm:ml-3"] ++ assigns_to_attributes(assigns, [:primary, :patch]) do %> <%= render_slot(@inner_block) %> <% end %> <% else %> <%= live_patch [to: @patch, class: "order-1 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:order-0 sm:ml-0 lg:ml-3"] ++ assigns_to_attributes(assigns, [:primary, :patch]) do %> <%= render_slot(@inner_block) %> <% end %> <% end %> """ end def button(%{} = assigns) do assigns = assigns |> assign_new(:primary, fn -> false end) |> assign(:rest, assigns_to_attributes(assigns)) ~H""" <%= if @primary do %> <% else %> <% end %> """ end def table(assigns) do assigns = assigns |> assign_new(:row_id, fn -> false end) |> assign(:col, for(col <- assigns.col, col[:if] != false, do: col)) ~H""" """ end def live_table(assigns) do assigns = assigns |> assign_new(:row_id, fn -> false end) |> assign_new(:active_id, fn -> nil end) |> assign_new(:owns_profile?, fn -> assigns.owns_profile? end) |> assign(:col, for(col <- assigns.col, col[:if] != false, do: col)) ~H""" """ end @doc """ Calls a wired up event listener to call a function with arguments. window.addEventListener("js:exec", e => e.target[e.detail.call](...e.detail.args)) """ def js_exec(js \\ %JS{}, to, call, args) do JS.dispatch(js, "js:exec", to: to, detail: %{call: call, args: args}) end def focus(js \\ %JS{}, parent, to) do JS.dispatch(js, "js:focus", to: to, detail: %{parent: parent}) end def focus_closest(js \\ %JS{}, to) do js |> JS.dispatch("js:focus-closest", to: to) |> hide(to) end defp assign_rest(assigns, exclude) do assign(assigns, :rest, assigns_to_attributes(assigns, exclude)) end end