Packages
livebook
0.14.0-rc.1
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.6
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.3
0.17.2
0.17.1
0.17.0
0.16.4
0.16.3
0.16.2
0.16.1
0.16.0
0.15.5
0.15.4
0.15.3
0.15.2
0.15.1
0.15.0
0.14.7
0.14.6
0.14.5
0.14.4
0.14.3
0.14.2
0.14.1
0.14.0
0.14.0-rc.1
0.14.0-rc.0
0.13.3
0.13.2
0.13.1
0.13.0
0.12.1
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.2
0.8.1
0.8.0
0.7.2
0.7.1
0.7.0
0.6.3
0.6.2
0.6.1
0.6.0
0.5.2
0.5.1
0.5.0
0.4.1
0.4.0
0.3.2
0.3.1
0.3.0
0.2.3
0.2.2
0.2.1
0.2.0
0.1.2
0.1.1
0.1.0
Automate code & data workflows with interactive notebooks
Current section
Files
Jump to
Current section
Files
lib/livebook_web/live/output/control_component.ex
defmodule LivebookWeb.Output.ControlComponent do
use LivebookWeb, :live_component
@impl true
def mount(socket) do
{:ok, assign(socket, keyboard_enabled: false)}
end
@impl true
def render(assigns) when assigns.control.attrs.type == :keyboard do
~H"""
<div
class="flex"
id={"#{@id}-root"}
phx-hook="KeyboardControl"
data-p-cell-id={hook_prop(@cell_id)}
data-p-default-handlers={hook_prop(@control.attrs.default_handlers)}
data-p-keydown-enabled={hook_prop(@keyboard_enabled and :keydown in @control.attrs.events)}
data-p-keyup-enabled={hook_prop(@keyboard_enabled and :keyup in @control.attrs.events)}
data-p-target={hook_prop(@myself)}
>
<span class="tooltip right" data-tooltip="Toggle keyboard control">
<.button
color={if(@keyboard_enabled, do: "blue", else: "gray")}
small
type="button"
aria-label="toggle keyboard control"
phx-click={JS.push("toggle_keyboard", target: @myself)}
>
<.remix_icon icon="keyboard-line" class="text-xl leading-none py-1" />
</.button>
</span>
</div>
"""
end
def render(assigns) when assigns.control.attrs.type == :button do
~H"""
<div class="flex">
<.button color="gray" type="button" phx-click={JS.push("button_click", target: @myself)}>
<%= @control.attrs.label %>
</.button>
</div>
"""
end
def render(assigns) when assigns.control.attrs.type == :form do
~H"""
<div>
<.live_component
module={LivebookWeb.Output.ControlFormComponent}
id={@id}
control={@control}
input_views={@input_views}
session_pid={@session_pid}
client_id={@client_id}
/>
</div>
"""
end
def render(assigns) do
~H"""
<div class="text-red-600">
Unknown control type <%= @control.attrs.type %>
</div>
"""
end
@impl true
def handle_event("toggle_keyboard", %{}, socket) do
enabled = !socket.assigns.keyboard_enabled
maybe_report_status(socket, enabled)
{:noreply, assign(socket, keyboard_enabled: enabled)}
end
def handle_event("enable_keyboard", %{}, socket) do
maybe_report_status(socket, true)
{:noreply, assign(socket, keyboard_enabled: true)}
end
def handle_event("disable_keyboard", %{}, socket) do
maybe_report_status(socket, false)
{:noreply, assign(socket, keyboard_enabled: false)}
end
def handle_event("button_click", %{}, socket) do
report_event(socket, %{type: :click})
{:noreply, socket}
end
def handle_event("keydown", %{"key" => key}, socket) do
report_event(socket, %{type: :keydown, key: key})
{:noreply, socket}
end
def handle_event("keyup", %{"key" => key}, socket) do
report_event(socket, %{type: :keyup, key: key})
{:noreply, socket}
end
defp maybe_report_status(socket, enabled) do
%{assigns: %{control: %{attrs: attrs}, keyboard_enabled: current}} = socket
if :status in attrs.events and enabled != current do
report_event(socket, %{type: :status, enabled: enabled})
end
end
defp report_event(socket, attrs) do
topic = socket.assigns.control.ref
event = Map.merge(%{origin: socket.assigns.client_id}, attrs)
send(socket.assigns.control.destination, {:event, topic, event})
end
end