Remove duplicate code

src/stickyNotes.js

@@ -1,3 +1,9 @@
+import {
+	makeElement,
+	makeDraggable,
+	makeClosable
+} from './shared.js';
+
 /**
  * @typedef {Object} SavedStickyNote
  * @property {string} id
@@ -64,134 +70,6 @@ export function isStickyNoteApplicable(stickyNote) {
 	return true;
 }
 
-/**
- * Create an HTML element with the specified parameters
- * @param {string} className
- * @param {string} [textContent]
- * @param {string} [id]
- * @returns {HTMLElement}
- */
-function makeElement(className, textContent, id) {
-	const element = document.createElement("div");
-	element.classList.add(className);
-	if (textContent) {
-		element.textContent = textContent;
-	}
-	if (id) {
-		element.id = id;
-	}
-	return element;
-}
-
-/**
- * @param {Document|Element} element
- * @param {(e: Event) => void} action
- */
-function onClick(element, action) {
-	element.addEventListener("click", (e) => action(e));
-	element.addEventListener("touchend", (e) => {
-		if (e instanceof TouchEvent === false) {
-			return;
-		} else if (element instanceof HTMLElement === false) {
-			return;
-		}
-		const touch = e.changedTouches[0];
-		const rect = element.getBoundingClientRect();
-		if (
-			touch.clientX >= rect.left &&
-			touch.clientX <= rect.right &&
-			touch.clientY >= rect.top &&
-			touch.clientY <= rect.bottom
-		) {
-			action(e);
-		}
-	});
-}
-
-/**
- * @param {HTMLElement|null} element The element to detect drag events on
- * @param {boolean} [parent] Whether to move the parent element when the child is dragged
- * @param {(top: number, left: number) => void} [callback] Callback for when element is moved
- */
-function makeDraggable(element, parent = true, callback = () => { }) {
-	if (!element) {
-		return;
-	}
-
-	let isMouseDown = false;
-	let offsetX = 0;
-	let offsetY = 0;
-	let elementToMove = parent ? element.parentElement : element;
-
-	if (!elementToMove) {
-		console.error("Birb: Parent element not found");
-		return;
-	}
-
-	element.addEventListener("mousedown", (e) => {
-		isMouseDown = true;
-		offsetX = e.clientX - elementToMove.offsetLeft;
-		offsetY = e.clientY - elementToMove.offsetTop;
-	});
-
-	element.addEventListener("touchstart", (e) => {
-		isMouseDown = true;
-		const touch = e.touches[0];
-		offsetX = touch.clientX - elementToMove.offsetLeft;
-		offsetY = touch.clientY - elementToMove.offsetTop;
-		e.preventDefault();
-	});
-
-	document.addEventListener("mouseup", (e) => {
-		if (isMouseDown) {
-			callback(elementToMove.offsetTop, elementToMove.offsetLeft);
-			e.preventDefault();
-		}
-		isMouseDown = false;
-	});
-
-	document.addEventListener("touchend", (e) => {
-		if (isMouseDown) {
-			callback(elementToMove.offsetTop, elementToMove.offsetLeft);
-			e.preventDefault();
-		}
-		isMouseDown = false;
-	});
-
-	document.addEventListener("mousemove", (e) => {
-		if (isMouseDown) {
-			elementToMove.style.left = `${Math.max(0, e.clientX - offsetX)}px`;
-			elementToMove.style.top = `${Math.max(0, e.clientY - offsetY)}px`;
-		}
-	});
-
-	document.addEventListener("touchmove", (e) => {
-		if (isMouseDown) {
-			const touch = e.touches[0];
-			elementToMove.style.left = `${Math.max(0, touch.clientX - offsetX)}px`;
-			elementToMove.style.top = `${Math.max(0, touch.clientY - offsetY)}px`;
-		}
-	});
-}
-
-/**
- * @param {() => void} func
- * @param {Element} [closeButton]
- */
-function makeClosable(func, closeButton) {
-	if (closeButton) {
-		onClick(closeButton, func);
-	}
-	document.addEventListener("keydown", (e) => {
-		if (closeButton && !document.body.contains(closeButton)) {
-			return;
-		}
-		if (e.key === "Escape") {
-			func();
-		}
-	});
-}
-
 /**
  * @param {StickyNote} stickyNote
  * @param {() => void} onSave