Merge pull request #29 from nallwhy/add_top_center_bottom_center_corn…

…er_opts Add :top_center, :bottom_center corner options
srcrip · Dec 30, 2024 · bdc33a6 · bdc33a6
2 parents 0983a4d + c5b26f0
commit bdc33a6
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 7 deletions.
diff --git a/assets/js/live_toast/live_toast.ts b/assets/js/live_toast/live_toast.ts
@@ -103,6 +103,7 @@ function doAnimations(
 
     if (
       toast.dataset.corner === 'bottom_left' ||
+      toast.dataset.corner === 'bottom_center' ||
       toast.dataset.corner === 'bottom_right'
     ) {
       direction = '-'
@@ -170,6 +171,7 @@ async function animateOut(this: ViewHook) {
 
   if (
     this.el.dataset.corner === 'bottom_left' ||
+    this.el.dataset.corner === 'bottom_center' ||
     this.el.dataset.corner === 'bottom_right'
   ) {
     direction = '-'

diff --git a/demo/lib/demo_web/components/layouts.ex b/demo/lib/demo_web/components/layouts.ex
@@ -25,8 +25,11 @@ defmodule DemoWeb.Layouts do
       "fixed z-50 max-h-screen w-full p-4 md:max-w-[420px] pointer-events-none grid origin-center",
       # classes to set container positioning
       assigns[:corner] == :bottom_left && "items-end bottom-0 left-0 flex-col-reverse sm:top-auto",
+      assigns[:corner] == :bottom_center &&
+        "items-end bottom-0 left-1/2 transform -translate-x-1/2 flex-col-reverse sm:top-auto",
       assigns[:corner] == :bottom_right && "items-end bottom-0 right-0 flex-col-reverse sm:top-auto",
       assigns[:corner] == :top_left && "items-start top-0 left-0 flex-col sm:bottom-auto",
+      assigns[:corner] == :top_center && "items-start top-0 left-1/2 transform -translate-x-1/2 flex-col sm:bottom-auto",
       assigns[:corner] == :top_right && "items-start top-0 right-0 flex-col sm:bottom-auto"
     ]
   end

diff --git a/demo/lib/demo_web/components/layouts/app.html.heex b/demo/lib/demo_web/components/layouts/app.html.heex
@@ -8,13 +8,15 @@
     connected={assigns[:socket] != nil}
     {
       if assigns[:settings] do
-      [
-      corner: case assigns[:settings]["corner"] do
-      "top_right" -> :top_right
-      "top_left" -> :top_left
+        [
+          corner: case assigns[:settings]["corner"] do
+              "top_right" -> :top_right
+              "top_center" -> :top_center
+              "top_left" -> :top_left
               "bottom_right" -> :bottom_right
+              "bottom_center" -> :bottom_center
               "bottom_left" -> :bottom_left
-          end
+            end,
         ]
       else
         []

diff --git a/demo/lib/demo_web/live/tabs/demo.html.heex b/demo/lib/demo_web/live/tabs/demo.html.heex
@@ -115,6 +115,24 @@
       Top Right
     </.button>
 
+    <.button
+      class={
+        if @settings["corner"] == "top_center", do: "!border-2 !border-indigo-400/80", else: ""
+      }
+      phx-click={
+        JS.push("toast",
+          value: %{
+            "kind" => "info",
+            "title" => "Position changed",
+            "body" => "Position set to top center."
+          }
+        )
+        |> JS.push("change_settings", value: %{"corner" => "top_center"})
+      }
+    >
+      Top Center
+    </.button>
+
     <.button
       class={
         if @settings["corner"] == "top_left", do: "!border-2 !border-indigo-400/80", else: ""
@@ -151,6 +169,24 @@
       Bottom Right
     </.button>
 
+    <.button
+      class={
+        if @settings["corner"] == "bottom_center", do: "!border-2 !border-indigo-400/80", else: ""
+      }
+      phx-click={
+        JS.push("toast",
+          value: %{
+            "kind" => "info",
+            "title" => "Position changed",
+            "body" => "Position set to bottom center."
+          }
+        )
+        |> JS.push("change_settings", value: %{"corner" => "bottom_center"})
+      }
+    >
+      Bottom Center
+    </.button>
+
     <.button
       class={
         if @settings["corner"] == "bottom_left", do: "!border-2 !border-indigo-400/80", else: ""

diff --git a/lib/live_toast.ex b/lib/live_toast.ex
@@ -203,8 +203,11 @@ defmodule LiveToast do
       "fixed z-50 max-h-screen w-full p-4 md:max-w-[420px] pointer-events-none grid origin-center",
       # classes to set container positioning
       assigns[:corner] == :bottom_left && "items-end bottom-0 left-0 flex-col-reverse sm:top-auto",
+      assigns[:corner] == :bottom_center &&
+        "items-end bottom-0 left-1/2 transform -translate-x-1/2 flex-col-reverse sm:top-auto",
       assigns[:corner] == :bottom_right && "items-end bottom-0 right-0 flex-col-reverse sm:top-auto",
       assigns[:corner] == :top_left && "items-start top-0 left-0 flex-col sm:bottom-auto",
+      assigns[:corner] == :top_center && "items-start top-0 left-1/2 transform -translate-x-1/2 flex-col sm:bottom-auto",
       assigns[:corner] == :top_right && "items-start top-0 right-0 flex-col sm:bottom-auto"
     ]
   end
@@ -215,7 +218,7 @@ defmodule LiveToast do
   attr(:kinds, :list, default: [:info, :error], doc: "the valid severity level kinds")
 
   attr(:corner, :atom,
-    values: [:top_left, :top_right, :bottom_left, :bottom_right],
+    values: [:top_left, :top_center, :top_right, :bottom_left, :bottom_center, :bottom_right],
     default: :bottom_right,
     doc: "the corner to display the toasts"
   )

diff --git a/lib/live_toast/components.ex b/lib/live_toast/components.ex
@@ -109,7 +109,7 @@ defmodule LiveToast.Components do
   attr(:f, :map, required: true, doc: "the map of flash messages")
 
   attr(:corner, :atom,
-    values: [:top_left, :top_right, :bottom_left, :bottom_right],
+    values: [:top_left, :top_center, :top_right, :bottom_left, :bottom_center, :bottom_right],
     default: :bottom_right,
     doc: "the corner to display the toasts"
   )