From 13069f4e57ec244a8c4a6f9b6374dc5ad8b6af68 Mon Sep 17 00:00:00 2001
From: sorax <robert@hausgedacht.de>
Date: Sat, 23 Nov 2024 20:48:14 +0100
Subject: [PATCH] make nodes selectable

---
 assets/js/hooks/events/listener.ts            | 20 ++++++++++++++-----
 assets/js/hooks/index.ts                      |  3 ++-
 .../live/outline_component.html.heex          |  6 +++---
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/assets/js/hooks/events/listener.ts b/assets/js/hooks/events/listener.ts
index 454e1b62..67e2bd45 100644
--- 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
index 2142d035..92b51817 100644
--- 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
index 0eef88bf..c2ee2432 100644
--- 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"