properly generate link

lib/labelmaker_web/constants.ex

@@ -3,25 +3,25 @@ defmodule LabelmakerWeb.Constants do
     align: "center",
     color: "black",
     font: "Helvetica",
-    height: "",
+    height: "300",
     label: "",
     label_too_long: false,
     link: "",
-    outline: "none",
+    outline: "white",
     size: "72",
-    sizing: "font",
     rows: 2,
-    width: ""
+    width: "400"
   }
 
-  @preview %{
+  @form_defaults %{
+    sizing: "font",
     preview_background: "r",
     preview_height: @defaults.size,
     preview_text: []
   }
 
   @permitted_keys @defaults
-                  |> Map.merge(@preview)
+                  |> Map.merge(@form_defaults)
                   |> Map.keys()
                   |> Enum.map(&Atom.to_string/1)
 
@@ -85,6 +85,8 @@ defmodule LabelmakerWeb.Constants do
          |> Enum.take_every(8)
          |> Enum.map(&Integer.to_string/1)
 
+  @sizing_values ["font", "wxh"]
+
   def colors, do: @colors
   def danger, do: @danger
   def defaults, do: @defaults
@@ -105,8 +107,9 @@ defmodule LabelmakerWeb.Constants do
   def permitted_alignments, do: @alignments
   def permitted_gravity, do: @gravity
   def permitted_keys, do: @permitted_keys
-  def preview, do: @preview
+  def form_defaults, do: @form_defaults
   def rows_min, do: @rows_min
   def rows_max, do: @rows_max
   def sizes, do: @sizes
+  def sizing_values, do: @sizing_values
 end

lib/labelmaker_web/live/home.ex

@@ -7,10 +7,10 @@ defmodule LabelmakerWeb.Home do
   def mount(_params, _session, socket) do
     assigns =
       Constants.defaults()
-      |> Map.merge(Constants.preview())
+      |> Map.merge(Constants.form_defaults())
       |> Map.put(
         :preview_background,
-        Tools.process_preview_background(Constants.preview().preview_background)
+        Tools.process_preview_background(Constants.form_defaults().preview_background)
       )
       |> Enum.to_list()
 
@@ -39,6 +39,15 @@ defmodule LabelmakerWeb.Home do
     {:noreply, assign(socket, :preview_background, Tools.process_preview_background(bg))}
   end
 
+  def handle_event("update_sizing", %{"sizing" => sizing}, socket) do
+    sizing =
+      if sizing in Constants.sizing_values(), do: sizing, else: Constants.form_defaults().sizing
+
+    assigns = Map.put(socket.assigns, :sizing, sizing)
+
+    {:noreply, assign(socket, sizing: sizing, link: Tools.generate_link(assigns))}
+  end
+
   def handle_event("update_alignment", %{"option" => option}, socket) do
     {:noreply, assign(socket, :align, option)}
   end

lib/labelmaker_web/live/home.html.heex

@@ -107,7 +107,11 @@
         </select>
       </div>
 
-      <div class={if(@sizing == "wxh", do: "opacity-50", else: "")}>
+      <div
+        phx-click="update_sizing"
+        phx-value-sizing="font"
+        class={if(@sizing == "wxh", do: "opacity-50", else: "")}
+      >
         <label for="size" class="block text-sm font-medium">Size</label>
         <select
           id="size"
@@ -120,7 +124,11 @@
         </select>
       </div>
 
-      <div class={if(@sizing == "font", do: "opacity-50", else: "")}>
+      <div
+        phx-click="update_sizing"
+        phx-value-sizing="wxh"
+        class={if(@sizing == "font", do: "opacity-50", else: "")}
+      >
         <label for="width" class="block text-sm font-medium">Width</label>
         <input
           type="number"
@@ -139,7 +147,11 @@
         />
       </div>
 
-      <div class={if(@sizing == "font", do: "opacity-50", else: "")}>
+      <div
+        phx-click="update_sizing"
+        phx-value-sizing="wxh"
+        class={if(@sizing == "font", do: "opacity-50", else: "")}
+      >
         <label for="height" class="block text-sm font-medium">Height</label>
         <input
           type="number"
@@ -155,17 +167,29 @@
       </div>
     </div>
 
-    <.radio_component
+    <div
-      options={Constants.permitted_alignments()}
+      phx-click="update_sizing"
-      selected={@align}
+      phx-value-sizing="wxh"
-      event_name="update_alignment"
       class={if(@sizing == "font", do: "opacity-50", else: "")}
-    />
+    >
+      <.radio_component
+        options={Constants.permitted_alignments()}
+        selected={@align}
+        event_name="update_alignment"
+      />
+    </div>
   </form>
 
   <div class="text-center">
     <a href={@link}>
-      <button class="inline-block bg-primary text-fg-light px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light focus:dark:ring-fg-dark">
+      <button
+        disabled={
+          if(@sizing == "wxh" && (@height == "" || @height == 0 || @width == "" || @width == 0),
+            do: true
+          )
+        }
+        class="inline-block bg-primary text-fg-light px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light focus:dark:ring-fg-dark"
+      >
         Create
       </button>
     </a>

lib/labelmaker_web/tools.ex

@@ -94,11 +94,22 @@ defmodule LabelmakerWeb.Tools do
     |> String.slice(0, Constants.max_label_length())
   end
 
-  defp generate_link(%{height: "", label: label, width: ""} = parameters) do
+  def generate_link(%{sizing: "font"} = parameters),
+    do: generate_font_link(parameters)
+
+  def generate_link(%{sizing: "wxh"} = parameters),
+    do: generate_wxh_link(parameters)
+
+  def generate_link(%{height: "", width: ""} = parameters),
+    do: generate_font_link(parameters)
+
+  def generate_link(parameters), do: generate_wxh_link(parameters)
+
+  defp generate_font_link(%{label: label} = parameters) do
     ~p"/#{label}?#{Map.take(parameters, [:color, :font, :outline, :size])}"
   end
 
-  defp generate_link(%{label: label} = parameters) do
+  defp generate_wxh_link(%{label: label} = parameters) do
     ~p"/#{label}?#{Map.take(parameters, [:align, :color, :font, :height, :outline, :width])}"
   end