Update for latest conventions

assets/css/app.css

@@ -2,7 +2,6 @@
 
 @import "./phoenix.css";
 @import "./live_view.css";
-@import "./keyboarding.css";
 @import "./pacman.css";
 @import "./snake.css";
 @import "./thermostat.css";

assets/css/thermostat.css

@@ -190,6 +190,28 @@
   position: absolute;
   right: -20px;
 }
+
+
+.thermostat .controls .weather input {
+  max-width: 90px;
+  background: transparent;
+  border: 0;
+  outline: none;
+  font-size: 19px;
+  color: #57545f;
+  font-weight: 300;
+  text-decoration: underline;
+}
+.thermostat .controls .weather {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  top: 10px;
+  font-size: 19px;
+  color: #57545f;
+  font-weight: 300;
+}
+
 .thermostat .controls .reading {
   position: absolute;
   width: 150px;

assets/js/app.js

@@ -3,6 +3,6 @@ import "phoenix_html"
 import LiveSocket from "phoenix_live_view"
 
 let liveSocket = new LiveSocket("/live")
-liveSocket.connect()
 
+liveSocket.connect()
 

assets/package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "phoenix": "../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
-    "phoenix_live_view": "file:../deps/phoenix_live_view"
+    "phoenix_live_view": "file:~/oss/phoenix_live_view"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",

config/dev.exs

@@ -56,7 +56,7 @@ config :demo, DemoWeb.Endpoint,
 
 # Do not include metadata nor timestamps in development logs
 config :logger, :console, format: "[$level] $message\n"
-config :logger, level: :warn
+config :logger, level: :debug
 
 # Set a higher stacktrace during development. Avoid configuring such
 # in production as building large stacktraces may be expensive.

lib/demo_web.ex

@@ -42,6 +42,8 @@ defmodule DemoWeb do
       import DemoWeb.ErrorHelpers
       import DemoWeb.Gettext
       alias DemoWeb.Router.Helpers, as: Routes
+
+      import Phoenix.LiveView, only: [live_render: 2, live_render: 3]
     end
   end
 

lib/demo_web/controllers/page_controller.ex

@@ -1,23 +1,15 @@
 defmodule DemoWeb.PageController do
   use DemoWeb, :controller
 
+  alias Phoenix.LiveView
+
   def index(conn, _params) do
     render(conn, "index.html")
   end
 
-  def count(conn, _) do
-    Phoenix.LiveView.live_render(conn, DemoWeb.CounterView, session: %{params: conn.params})
-  end
-
   def snake(conn, _) do
     conn
     |> put_layout(:game)
-    |> Phoenix.LiveView.live_render(DemoWeb.SnakeView, session: %{})
-  end
-
-  def thermostat(conn, _) do
-    conn
-    |> put_layout(:bare)
-    |> Phoenix.LiveView.live_render(DemoWeb.ThermostatView, session: %{})
+    |> LiveView.Controller.live_render(DemoWeb.SnakeLive, session: %{})
   end
 end

lib/demo_web/views/clock_view.ex → lib/demo_web/live/clock_live.ex

@@ -1,12 +1,12 @@
-defmodule DemoWeb.ClockView do
+defmodule DemoWeb.ClockLive do
   use Phoenix.LiveView
   import Calendar.Strftime
 
   def render(assigns) do
     ~L"""
     <div>
       <h2 phx-click="boom">It's <%= strftime!(@date, "%r") %></h2>
-      <%= live_render(@socket, DemoWeb.ImageView) %>
+      <%= live_render(@socket, DemoWeb.ImageLive) %>
     </div>
     """
   end

lib/demo_web/views/counter_view.ex → lib/demo_web/live/counter_live.ex

@@ -1,4 +1,4 @@
-defmodule DemoWeb.CounterView do
+defmodule DemoWeb.CounterLive do
   use Phoenix.LiveView
 
   def render(assigns) do
@@ -10,9 +10,9 @@ defmodule DemoWeb.CounterView do
       <button phx-click="inc">+</button>
     </div>
     <%= if @val < 5 do %>
-      <%= live_render(@socket, DemoWeb.ClockView) %>
+      <%= live_render(@socket, DemoWeb.ClockLive) %>
     <% else %>
-      <%= live_render(@socket, DemoWeb.ImageView) %>
+      <%= live_render(@socket, DemoWeb.ImageLive) %>
     <% end %>
     """
   end

lib/demo_web/live/image_live.ex

@@ -0,0 +1,37 @@
+defmodule DemoWeb.ImageLive do
+  use Phoenix.LiveView
+
+  def radio_tag(assigns) do
+    assigns = Enum.into(assigns, %{})
+    ~L"""
+    <input type="radio" name="<%= @name %>" value="<%= @value %>"
+      <%= if @value == @checked, do: "checked" %> />
+    """
+  end
+
+  def render(assigns) do
+    ~L"""
+    <div style="margin-left: <%= @depth * 50 %>px;">
+      <form phx-change="update">
+        <input type="range" min="10" max="630" name="width" value="<%= @width %>" />
+        <%= @width %>px
+        <fieldset>
+          White <%= radio_tag(name: :bg, value: "white", checked: @bg) %>
+          Black <%= radio_tag(name: :bg, value: "black", checked: @bg) %>
+          Blue <%= radio_tag(name: :bg, value: "blue", checked: @bg) %>
+        </fieldset>
+      </form>
+      <br/>
+      <img phx-click="boom" src="/images/phx.png" width="<%= @width %>" style="background: <%= @bg %>;" />
+    </div>
+    """
+  end
+
+  def mount(_session, socket) do
+    {:ok, assign(socket, width: 100, bg: "white", depth: 0, max_depth: 0)}
+  end
+
+  def handle_event("update", %{"width" => width, "bg" => bg}, socket) do
+    {:noreply, assign(socket, width: String.to_integer(width), bg: bg)}
+  end
+end