Improve color picker

RoyalIcing · RoyalIcing · commit 84f3aea91bbc · 2020-05-23T22:04:56.000+10:00
diff --git a/apps/components_guide_web/lib/components_guide_web/live/color.ex b/apps/components_guide_web/lib/components_guide_web/live/color.ex
@@ -2,6 +2,8 @@ defmodule ComponentsGuideWeb.ColorLive do
   use ComponentsGuideWeb, :live_view
   alias ComponentsGuideWeb.StylingHelpers
 
+  @update_url_delay 500
+
   defmodule State do
     defstruct color: {:lab, 50, 100, -128}
 
@@ -25,17 +27,19 @@ defmodule ComponentsGuideWeb.ColorLive do
       %State{color: color}
     end
 
+    @lab_separator <<"~"::utf8>>
+
     def decode(:lab, input) when is_binary(input) do
-      {l, <<","::utf8>> <> rest} = Integer.parse(input)
-      {a, <<","::utf8>> <> rest} = Integer.parse(rest)
+      {l, @lab_separator <> rest} = Integer.parse(input)
+      {a, @lab_separator <> rest} = Integer.parse(rest)
       {b, ""} = Integer.parse(rest)
 
       %__MODULE__{color: {:lab, l, a, b}}
     end
 
-    def encode(%__MODULE__{color: color})  do
-      {:lab,l,a,b} = color
-      "#{l},#{a},#{b}"
+    def encode(%__MODULE__{color: color}) do
+      {:lab, l, a, b} = color
+      "#{l}#{@lab_separator}#{a}#{@lab_separator}#{b}"
     end
 
     def set_color(state = %__MODULE__{}, color), do: %{state | color: color}
@@ -44,7 +48,8 @@ defmodule ComponentsGuideWeb.ColorLive do
     def a(%__MODULE__{color: {:lab, _, a, _}}), do: a
     def b(%__MODULE__{color: {:lab, _, _, b}}), do: b
 
-    def css(%__MODULE__{color: color}), do: StylingHelpers.to_css(color)
+    def css_srgb(%__MODULE__{color: color}), do: StylingHelpers.to_css(color, :srgb)
+    def css(%__MODULE__{color: color}), do: StylingHelpers.to_css(color, nil)
 
     defp to_srgb(%__MODULE__{color: color}) do
       {:srgb, r, g, b} = color |> StylingHelpers.convert(:srgb) |> StylingHelpers.clamp()
@@ -65,23 +70,92 @@ defmodule ComponentsGuideWeb.ColorLive do
     end
   end
 
+  defp interpolate(t, {lowest, highest}) do
+    (highest - lowest) * t + lowest
+  end
+
   def render(assigns) do
     swatch_size = 100
     {:lab, l, a, b} = assigns.state.color
 
-    gradient =
-      Styling.linear_gradient("150grad", [
-        {:lab, l * 1.5, a * 1.2, b * 0.8},
-        {:lab, l, a, b},
-        {:lab, l * 0.5, a * 0.8, b * 1.2}
-      ])
+    l_steps = 10
+
+    l_gradient =
+      Styling.linear_gradient(
+        "150grad",
+        for(n <- 0..l_steps, do: {:lab, n * (100 / l_steps), a, b})
+      )
+
+    l_gradient_svg =
+      Styling.svg_linear_gradient(
+        "rotate(45)",
+        for(n <- 0..l_steps, do: {:lab, interpolate(n / l_steps, {0.0, 100.0}), a, b})
+      )
+
+    a_steps = 10
+
+    a_gradient =
+      Styling.linear_gradient(
+        "150grad",
+        for(n <- 0..a_steps, do: {:lab, l, interpolate(n / a_steps, {-127.0, 127.0}), b})
+      )
+
+    a_gradient_svg =
+      Styling.svg_linear_gradient(
+        "rotate(45)",
+        for(n <- 0..a_steps, do: {:lab, l, interpolate(n / a_steps, {-127.0, 127.0}), b})
+      )
+
+    b_steps = 10
+
+    b_gradient =
+      Styling.linear_gradient(
+        "150grad",
+        for(n <- 0..b_steps, do: {:lab, l, a, interpolate(n / b_steps, {-127.0, 127.0})})
+      )
+
+    b_gradient_svg =
+      Styling.svg_linear_gradient(
+        "rotate(45)",
+        for(n <- 0..b_steps, do: {:lab, l, a, interpolate(n / b_steps, {-127.0, 127.0})})
+      )
 
     ~L"""
     <article class="text-2xl max-w-lg mx-auto text-white">
       <svg width="<%= swatch_size %>" height="<%= swatch_size %>" viewbox="0 0 1 1">
-        <rect fill="<%= State.hex(@state) %>" width="1" height="1" />
+        <rect fill="<%= State.css_srgb(@state) %>" width="1" height="1" />
       </svg>
-      <div style="width: 100px; height: 100px; background-image: <%= gradient %>"></div>
+      <div class="flex">
+        <svg viewBox="0 0 1 1" width="100" height="100">
+          <defs>
+            <%= l_gradient_svg %>
+          </defs>
+          <rect width="1" height="1" fill="url('#myGradient')" />
+          <circle cx="<%= l / 100.0 %>" cy="<%= l / 100.0 %>" r="0.05" fill="white" stroke="black" stroke-width="0.01" />
+        </svg>
+        <svg viewBox="0 0 1 1" width="100" height="100">
+          <defs>
+            <%= a_gradient_svg %>
+          </defs>
+          <rect width="1" height="1" fill="url('#myGradient')" />
+          <circle cx="<%= (a / 127.0) / 2.0 + 0.5 %>" cy="<%= (a / 127.0) / 2.0 + 0.5 %>" r="0.05" fill="white" stroke="black" stroke-width="0.01" />
+        </svg>
+        <svg viewBox="0 0 1 1" width="100" height="100">
+          <defs>
+            <%= b_gradient_svg %>
+          </defs>
+          <rect width="1" height="1" fill="url('#myGradient')" />
+          <circle cx="<%= (b / 127.0) / 2.0 + 0.5 %>" cy="<%= (b / 127.0) / 2.0 + 0.5 %>" r="0.05" fill="white" stroke="black" stroke-width="0.01" />
+        </svg>
+        <!--<div style="width: 100px; height: 100px; background-image: <%= l_gradient %>"></div>-->
+        <!--<div style="width: 100px; height: 100px; background-image: <%= a_gradient %>"></div>-->
+        <div style="width: 100px; height: 100px; background-image: <%= b_gradient %>"></div>
+        <svg width="100" height="100">
+          <foreignObject>
+            <div style="width: 100px; height: 100px; background-image: <%= b_gradient %>"></div>
+          </foreignObject>
+        </svg>
+      </div>
       <form phx-change="lab_changed" class="flex flex-col">
         <label>
           L
@@ -103,16 +177,16 @@ defmodule ComponentsGuideWeb.ColorLive do
         <dt class="font-bold">Hex:
         <dd><%= State.hex(@state) %>
         <dt class="font-bold">CSS:
-        <dd><pre class="text-base whitespace-pre-wrap"><code><%= State.css(@state) %></code></pre>
+        <dd><pre class="text-base whitespace-pre-wrap"><code><%= State.css_srgb(@state) %></code></pre>
         <dt class="font-bold">Gradient CSS:
-        <dd><pre class="text-base whitespace-pre-wrap"><code><%= gradient %></code></pre>
+        <dd><pre class="text-base whitespace-pre-wrap"><code><%= l_gradient %></code></pre>
       </dl>
     </article>
     """
   end
 
   def mount(_params, _session, socket) do
-    {:ok, assign(socket, state: %State{})}
+    {:ok, assign(socket, state: %State{}, tref: nil)}
   end
 
   def handle_params(%{"definition" => definition}, _path, socket) do
@@ -125,18 +199,37 @@ defmodule ComponentsGuideWeb.ColorLive do
     {:noreply, socket |> assign(:state, state)}
   end
 
+  def handle_info(:update_url, socket) do
+    state = socket.assigns.state
+    encoded = State.encode(state)
+
+    {:noreply,
+     socket
+     |> assign(:tref, nil)
+     |> push_patch(to: Routes.color_path(socket, :lab, encoded), replace: true)}
+  end
+
   def handle_event("lab_changed", %{"l" => l, "a" => a, "b" => b}, socket) do
     l = l |> String.to_integer()
     a = a |> String.to_integer()
     b = b |> String.to_integer()
 
     state = socket.assigns.state |> State.set_color({:lab, l, a, b})
-    encoded = State.encode(state)
 
-    # TODO: throttle for Safari’s
+    case socket.assigns.tref do
+      nil -> nil
+      tref -> :timer.cancel(tref)
+    end
+
+    # Throttle for Safari’s
     # SecurityError: Attempt to use history.replaceState() more than 100 times per 30 seconds
-    {:noreply,
-     socket
-     |> push_patch(to: Routes.color_path(socket, :lab, encoded), replace: true)}
+    {:ok, tref} = :timer.send_after(@update_url_delay, :update_url)
+
+    {
+      :noreply,
+      socket
+      |> assign(:state, state)
+      |> assign(:tref, tref)
+    }
   end
 end
diff --git a/apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/properties-cheatsheet.html.eex b/apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/properties-cheatsheet.html.eex
@@ -2,7 +2,7 @@
   theme = %Theme{text_color: "blue"}
   [h2, h3, h4] = Theme.headings(theme)
 %>
-<header class="text-white" style="background: <%= header_background %>;">
+<header class="text-white" style="background: <%= header_background() %>;">
   <div class="container px-6 pt-6 pb-6">
     <h1 class="mx-auto max-w-4xl text-4xl text-center font-bold leading-tight text-shadow">
       <%= "Accessible Properties Cheatsheet" %>
@@ -36,11 +36,11 @@
 
         <p>You can hide using a large range of techniques. What you first want to ask is, from whom do I want to hide the content?
 
-        <ul>
-          <li><%= line "Hide to **everyone**." %>
-          <li><%= line "**Screen reader affordance:** hide to sighted users, but show to screen reader users." %>
-          <li><%= line "**Visual affordance:** hide to screen reader users, but show to sighted users." %>
-        </ul>
+        <%= list [
+          "Hide to **everyone**.",
+          "**Screen reader affordance:** hide to sighted users, but show to screen reader users.",
+          "**Visual affordance:** hide to screen reader users, but show to sighted users."
+        ] %>
 
         <section aria-labelledby="hidden-all-heading">
           <%= h3.("Hide to everyone", id: "hidden-all-heading") %>
diff --git a/apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/widgets-cheatsheet.html.eex b/apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/widgets-cheatsheet.html.eex
@@ -25,6 +25,8 @@
       <li><%= link "Radio", to: "#radio" %>
       <li><%= link "Range", to: "#range" %>
       <li><%= link "Tabs", to: "#tabs" %>
+      <li><%= link "Modal Dialog", to: "#dialog" %>
+      <li role=separator>
       <li><%= link("List of roles 🔗", to: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques") %>
       <li><%= link("Queries 🔗", to: "https://testing-library.com/docs/dom-testing-library/api-queries") %>
       <li><%= link("Matchers 🔗", to: "https://github.com/testing-library/jest-dom") %>
diff --git a/apps/components_guide_web/lib/components_guide_web/views/accessibility_first_view.ex b/apps/components_guide_web/lib/components_guide_web/views/accessibility_first_view.ex
@@ -33,6 +33,16 @@ defmodule ComponentsGuideWeb.AccessibilityFirstView do
     """
   end
 
+  def list(items) do
+    ~E"""
+    <ul>
+    <%= for item <- items do %>
+      <li><%= line(item) %>
+    <% end %>
+    </ul>
+    """
+  end
+
   defmodule Theme do
     defstruct text_color: "blue"
 
diff --git a/apps/components_guide_web/lib/components_guide_web/views/styling_helpers.ex b/apps/components_guide_web/lib/components_guide_web/views/styling_helpers.ex
@@ -3,6 +3,8 @@ defmodule ComponentsGuideWeb.StylingHelpers do
   Conveniences for creating gradient backgrounds
   """
 
+  use Phoenix.HTML
+
   # Source: https://github.com/Evercoder/culori
 
   defp convert_component({:linear_srgb, c}, :srgb) do
@@ -132,15 +134,21 @@ defmodule ComponentsGuideWeb.StylingHelpers do
     {:srgb, r |> clamp_0_1(), g |> clamp_0_1(), b |> clamp_0_1()}
   end
 
-  def to_css(color = {:srgb, _, _, _}) do
+  def to_css(color = {:srgb, _, _, _}, :srgb) do
     {:srgb, r, g, b} = clamp(color)
     "rgba(#{(r * 255) |> round},#{(g * 255) |> round},#{(b * 255) |> round},1)"
   end
 
-  def to_css(color_tuple) when is_tuple(color_tuple) and elem(color_tuple, 0) in [:lab] do
-    color_tuple |> convert(:srgb) |> to_css()
+  def to_css(color, :srgb) do
+    color |> convert(:srgb) |> to_css(:srgb)
+  end
+
+  def to_css({:lab, l, a, b}, nil) do
+    "lab(#{l |> round}% #{a |> round} #{b |> round})"
   end
 
+  def to_css(color), do: to_css(color, :srgb)
+
   def linear_gradient(angle, colors) when is_list(colors) do
     linear_gradient(angle, :array.from_list(colors))
   end
@@ -154,13 +162,46 @@ defmodule ComponentsGuideWeb.StylingHelpers do
       :array.foldr(
         fn index, color, list ->
           percentage = "#{index / max * 100}%"
-          ["#{color |> to_css()} #{percentage}" | list]
+          ["#{color |> to_css(:srgb)} #{percentage}" | list]
         end,
         [],
         colors_array
       )
-      |> Enum.join(",")
+      |> Enum.join(", ")
 
     "linear-gradient(#{angle}, #{colors_css})"
   end
+
+  def svg_linear_gradient(angle, colors) when is_list(colors) do
+    svg_linear_gradient(angle, :array.from_list(colors))
+  end
+
+  def svg_linear_gradient(angle, colors_array) do
+    true = :array.is_array(colors_array)
+
+    max = :array.size(colors_array) - 1
+
+    stops =
+      :array.foldr(
+        fn index, color, list ->
+          percentage = "#{index / max * 100}%"
+
+          xml = ~E"""
+          <stop offset="<%= percentage %>" stop-color="<%= to_css(color, :srgb) %>" />
+          """
+
+          [
+            xml | list
+          ]
+        end,
+        [],
+        colors_array
+      )
+
+    ~E"""
+    <linearGradient id="myGradient" gradientTransform="scale(1.414) <%= angle %>">
+      <%= stops %>
+    </linearGradient>
+    """
+  end
 end
