make nodes selectable

podlove · Nov 23, 2024 · 13069f4 · 13069f4
1 parent e195828
commit 13069f4
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/assets/js/hooks/events/listener.ts b/assets/js/hooks/events/listener.ts
@@ -7,19 +7,29 @@ import {
   focusNode,
 } from "../node";
 
-let watchdog;
+// let watchdog;
 const watchdogInterval = 400;
 
+export function click(event: MouseEvent) {
+  const target = event.target as HTMLDivElement;
+  const select = target!.querySelector("input.selected") as HTMLInputElement;
+
+  select.checked = !select.checked;
+}
+
 export function input(event: KeyboardEvent) {
   const target = event.target as HTMLDivElement;
   const node = target.parentNode as HTMLDivElement;
   const { uuid, content } = getNodeData(node);
 
   this.pushEventTo(this.el.phxHookId, "save", { uuid, content });
-  //clearTimeout(watchdog);
-  //watchdog = setTimeout(() => {
-  //  this.pushEventTo(this.el.phxHookId, "save", { uuid, content });
-  //}, watchdogInterval);
+
+  /*
+    clearTimeout(watchdog);
+    watchdog = setTimeout(() => {
+      this.pushEventTo(this.el.phxHookId, "save", { uuid, content });
+    }, watchdogInterval);
+  */
 }
 
 export function keydown(event: KeyboardEvent) {

diff --git a/assets/js/hooks/index.ts b/assets/js/hooks/index.ts
@@ -6,7 +6,7 @@ import {
   handleMoveNodes,
   handleSetContent,
 } from "./events/handler";
-import { input, keydown, toggleCollapse } from "./events/listener";
+import { input, click, keydown, toggleCollapse } from "./events/listener";
 
 import Sortable from "../../vendor/sortable";
 // import Quill from "../../vendor/quill";
@@ -48,6 +48,7 @@ export const Hooks = {
 
       this.handleEvent("set_content", handleSetContent.bind(this));
 
+      this.el.addEventListener("click", click.bind(this));
       this.el.addEventListener("input", input.bind(this));
       this.el.addEventListener("keydown", keydown.bind(this));
       this.el.addEventListener("toggle_collapse", toggleCollapse.bind(this));

diff --git a/lib/radiator_web/live/outline_component.html.heex b/lib/radiator_web/live/outline_component.html.heex
@@ -20,6 +20,7 @@
       data-parent={form[:parent_id].value}
       data-prev={form[:prev_id].value}
     >
+      <input class="my-2 peer selected" type="checkbox" />
       <OutlineComponents.outline_form
         for={form}
         class=""
@@ -28,10 +29,9 @@
         phx-target={@myself}
       >
         <!--
-        <.icon name="hero-check-circle" class="w-5 h-5" />
         <.icon name="hero-ellipsis-vertical" class="w-5 h-5" />
+        <.icon name="hero-check-circle" class="w-5 h-5" />
         <.icon name="hero-cog-6-tooth" class="w-5 h-5" />
-        <.input field={form[:selected]} type="checkbox" />
         <.input field={form[:checked]} type="checkbox" />
 
         <.input field={form[:priority]} type="radio" value="red"/>
@@ -61,7 +61,7 @@
       </button>
       <div
         id={[id, "-content"]}
-        class="flex-1 px-1 py-0.5 content focus:outline-none drag-ghost:opacity-0"
+        class="peer-checked:bg-yellow-100 inline-block pr-4 px-1 py-0.5 content focus:outline-none drag-ghost:opacity-0"
         contenteditable
         phx-value-uuid={form[:uuid].value}
         phx-focus="focus"