Packages
livebook
0.17.2
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