cleanup: combine js files

assets/js/hooks/events/handler.ts

@@ -1,23 +1,23 @@
-import { Node, UserAction } from "../types";
+import { NodeData, UserAction } from "../types";
 import {
-  getItemById,
+  getNodeById,
   addEditingUserLabel,
   removeEditingUserLabel,
-} from "../item";
+} from "../node";
 import { moveNode, setAttribute } from "../node";
 
 export function handleFocus({ uuid, user_name }: UserAction) {
-  const item = getItemById(uuid)!;
-  addEditingUserLabel(item, user_name);
+  const node = getNodeById(uuid)!;
+  addEditingUserLabel(node, user_name);
 }
 
 export function handleBlur({ uuid, user_name }: UserAction) {
-  const item = getItemById(uuid)!;
-  removeEditingUserLabel(item, user_name);
+  const node = getNodeById(uuid)!;
+  removeEditingUserLabel(node, user_name);
 }
 
-export function handleMove({ uuid, parent_id, prev_id }: Node) {
-  const node = getItemById(uuid)!;
+export function handleMove({ uuid, parent_id, prev_id }: NodeData) {
+  const node = getNodeById(uuid)!;
   setAttribute(node, "parent", parent_id);
   setAttribute(node, "prev", prev_id);
 

assets/js/hooks/events/listener.ts

@@ -1,5 +1,5 @@
 import { CollapseParams } from "../types";
-import { getItemById } from "../item";
+import { getNodeById } from "../node";
 
 export function keydown(event: KeyboardEvent) {
   if (event.key == "Tab") {
@@ -8,8 +8,8 @@ export function keydown(event: KeyboardEvent) {
 }
 
 export function toggleCollapse({ detail: { uuid } }: CollapseParams) {
-  const item = getItemById(uuid);
-  item!.toggleAttribute("data-collapsed");
+  const node = getNodeById(uuid);
+  node!.toggleAttribute("data-collapsed");
 
   const collapsedStatus = localStorage.getItem(this.el.id) || "{}";
   const collapsed = JSON.parse(collapsedStatus);

assets/js/hooks/node.ts

@@ -1,10 +1,9 @@
-import { UUID, Node } from "./types";
-import { getItemById } from "./item";
+import { NodeData, UUID } from "./types";
 
-export function moveNode(node: HTMLDivElement): Node {
+export function moveNode(node: HTMLDivElement): NodeData {
   const { uuid, parent_id, prev_id } = getNodeData(node);
-  const parentNode = getItemById(parent_id);
-  const prevNode = getItemById(prev_id);
+  const parentNode = getNodeById(parent_id);
+  const prevNode = getNodeById(prev_id);
 
   if (prevNode) {
     prevNode.after(node);
@@ -15,7 +14,7 @@ export function moveNode(node: HTMLDivElement): Node {
   return { uuid, parent_id, prev_id };
 }
 
-function getNodeData(node: HTMLDivElement) {
+function getNodeData(node: HTMLDivElement): NodeData {
   const uuid = getUUID(node);
   const parent_id = getAttribute(node, "parent");
   const prev_id = getAttribute(node, "prev");
@@ -24,17 +23,17 @@ function getNodeData(node: HTMLDivElement) {
   return { uuid, parent_id, prev_id, content };
 }
 
-function getUUID(item: HTMLDivElement) {
-  return item.id.split("nodes-form-")[1] as UUID;
+function getUUID(node: HTMLDivElement) {
+  return node.id.split("nodes-form-")[1] as UUID;
 }
 
-function getContent(item: HTMLDivElement) {
-  const input = item.querySelector("input") as HTMLInputElement;
+function getContent(node: HTMLDivElement) {
+  const input = node.querySelector("input") as HTMLInputElement;
   return input.value;
 }
 
-function getAttribute(item: HTMLDivElement, key: string) {
-  return (item.getAttribute(`data-${key}`) as UUID) || undefined;
+function getAttribute(node: HTMLDivElement, key: string) {
+  return (node.getAttribute(`data-${key}`) as UUID) || undefined;
 }
 
 export function setAttribute(
@@ -45,3 +44,53 @@ export function setAttribute(
   const attrValue = value === undefined ? "" : String(value);
   node.setAttribute(`data-${key}`, attrValue);
 }
+
+export function getNodeById(uuid: UUID | undefined) {
+  if (!uuid) return null;
+
+  return document.getElementById(`nodes-form-${uuid}`) as HTMLDivElement;
+}
+
+/*
+  Showing which users are editing a node.
+  The color is based on the ascii of user's name first char and the length of user's name.
+  The tailwindcss color names are build dynamically.
+*/
+
+const colors = [
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "sky",
+  "orange",
+  "lime",
+  "amber",
+  "emerald",
+  "teal",
+  "cyan",
+];
+const intesities = ["500", "600", "700"];
+
+function pickColor(user_name: string) {
+  const colorIndex = user_name.charCodeAt(0) % 12;
+  const intesity = user_name.length % 3;
+  return `bg-${colors[colorIndex]}-${intesities[intesity]}`;
+}
+
+export function addEditingUserLabel(node: HTMLDivElement, user_name: string) {
+  node!.querySelector(
+    ".editing"
+  )!.innerHTML += `<span id="${user_name}" class="mr-1 px-1 rounded ${pickColor(
+    user_name
+  )}">${user_name}</span>`;
+}
+
+export function removeEditingUserLabel(
+  node: HTMLDivElement,
+  user_name: string
+) {
+  const span = node!.querySelector(`#${user_name}`)!;
+  span.remove();
+}

assets/js/hooks/types.ts

@@ -9,7 +9,7 @@ export type CollapseParams = {
   detail: UserAction;
 };
 
-export interface Node {
+export interface NodeData {
   uuid: UUID;
   content?: string;
   creator_id?: number;