diff --git a/lib/alchemy_pub_web/components/layouts/root.html.heex b/lib/alchemy_pub_web/components/layouts/root.html.heex index e01a8d4..a6f7dfb 100644 --- a/lib/alchemy_pub_web/components/layouts/root.html.heex +++ b/lib/alchemy_pub_web/components/layouts/root.html.heex @@ -22,7 +22,7 @@ - + {@inner_content} diff --git a/lib/alchemy_pub_web/page_live.ex b/lib/alchemy_pub_web/page_live.ex index 175630b..b89b4ab 100644 --- a/lib/alchemy_pub_web/page_live.ex +++ b/lib/alchemy_pub_web/page_live.ex @@ -35,7 +35,8 @@ defmodule AlchemyPubWeb.PageLive do }, post_title: "Loading", viewers: 0, - track_valid: false + track_valid: false, + subpage: nil ) |> stream_configure(:deck, []) |> stream(:deck, [])} @@ -62,11 +63,11 @@ defmodule AlchemyPubWeb.PageLive do case param do %{"key" => "ArrowRight"} -> p + 1 %{"key" => "ArrowLeft"} -> max(0, p - 1) - _ -> p + _ -> nil end socket = - if socket.assigns.meta["rank"] == :deck do + if p && socket.assigns.meta["rank"] == :deck do socket |> push_patch(to: "/#{socket.assigns.title}?p=#{p}", replace: true) else socket @@ -120,17 +121,25 @@ defmodule AlchemyPubWeb.PageLive do socket = case page do {title, :deck, _date, meta, content} -> + direction = + cond do + socket.assigns.subpage == nil -> nil + socket.assigns.subpage > subpage -> :left + socket.assigns.subpage < subpage -> :right + true -> nil + end + socket |> assign( page_title: meta |> Map.get("title"), meta: meta, title: title, - content: content, + content: "", tag: nil, track_valid: true, subpage: subpage ) - |> stream_insert(:deck, paginate(content, subpage), at: -1, limit: -2) + |> stream_insert(:deck, paginate(content, subpage, direction), at: -1, limit: -2) {title, _rank, _date, meta, content} -> socket @@ -205,8 +214,19 @@ defmodule AlchemyPubWeb.PageLive do end) end - defp paginate(content, page) do - %{id: "deck-page-#{Ulid.generate()}", content: content |> Enum.at(page)} + defp paginate(deck, page, direction) do + animation = + case direction do + :left -> ["-translate-x-1/4", "scale-90", "opacity-0"] + :right -> ["translate-x-1/4", "scale-110", "opacity-0"] + nil -> [] + end + + %{ + id: "deck-page-#{Ulid.generate()}", + slide: deck |> Enum.at(page), + animation: animation, + } end defp build_content(tag, title, all) do @@ -266,4 +286,10 @@ defmodule AlchemyPubWeb.PageLive do |> Enum.sort() |> Enum.uniq_by(fn {t, _} -> t end) end + + defp remove_animation(js \\ %JS{}, classes, id) do + Enum.reduce(classes, js, fn c, js -> + JS.remove_class(js, c, to: "##{id}") + end) + end end diff --git a/lib/alchemy_pub_web/page_live.html.heex b/lib/alchemy_pub_web/page_live.html.heex index 0cc3e49..2978909 100644 --- a/lib/alchemy_pub_web/page_live.html.heex +++ b/lib/alchemy_pub_web/page_live.html.heex @@ -145,16 +145,15 @@
JS.remove_class("opacity-0", to: "##{id}") - } + class={[ + "p-4 absolute top-0 left-0 bg-base-200 border-1 border-accent rounded-box + overflow-hidden w-full h-full duration-250 ease-in-out transform transition", + content.animation + ]} + phx-mounted={remove_animation(content.animation, id)} >
- {raw(content.content)} + {raw(content.slide)}