diff --git a/dist/birb.js b/dist/birb.js
index 5ac7341..11ed0f5 100644
--- a/dist/birb.js
+++ b/dist/birb.js
@@ -22,6 +22,134 @@
debug$1 = debugMode;
}
+ /**
+ * 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();
+ }
+ });
+ }
+
/** Indicators for parts of the base bird sprite sheet */
const SPRITE = {
THEME_HIGHLIGHT: "theme-highlight",
@@ -409,128 +537,6 @@
return true;
}
- /**
- * Create an HTML element with the specified parameters
- * @param {string} className
- * @param {string} [textContent]
- * @param {string} [id]
- * @returns {HTMLElement}
- */
- function makeElement$1(className, textContent, id) {
- const element = document.createElement("div");
- element.classList.add(className);
- return element;
- }
-
- /**
- * @param {Document|Element} element
- * @param {(e: Event) => void} action
- */
- function onClick$1(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$1(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$1(func, closeButton) {
- if (closeButton) {
- onClick$1(closeButton, func);
- }
- document.addEventListener("keydown", (e) => {
- if (closeButton && !document.body.contains(closeButton)) {
- return;
- }
- if (e.key === "Escape") {
- func();
- }
- });
- }
-
/**
* @param {StickyNote} stickyNote
* @param {() => void} onSave
@@ -546,7 +552,7 @@
`;
- const noteElement = makeElement$1("birb-window");
+ const noteElement = makeElement("birb-window");
noteElement.classList.add("birb-sticky-note");
noteElement.innerHTML = html;
@@ -554,7 +560,7 @@
noteElement.style.left = `${stickyNote.left}px`;
document.body.appendChild(noteElement);
- makeDraggable$1(noteElement.querySelector(".birb-window-header"), true, (top, left) => {
+ makeDraggable(noteElement.querySelector(".birb-window-header"), true, (top, left) => {
stickyNote.top = top;
stickyNote.left = left;
onSave();
@@ -562,7 +568,7 @@
const closeButton = noteElement.querySelector(".birb-window-close");
if (closeButton) {
- makeClosable$1(() => {
+ makeClosable(() => {
if (confirm("Are you sure you want to delete this sticky note?")) {
onDelete();
noteElement.remove();
@@ -664,128 +670,6 @@
}
}
- /**
- * 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) {
- document.addEventListener("keydown", (e) => {
- if (e.key === "Escape") {
- func();
- }
- });
- }
-
/**
* @param {MenuItem} item
* @param {() => void} removeMenuCallback
@@ -1832,22 +1716,6 @@
save();
}
- /**
- * 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 (id) {
- element.id = id;
- }
- return element;
- }
-
/**
* Create a window element with header and content
* @param {string} id
@@ -2084,24 +1952,6 @@
centerElement(fieldGuide);
}
- /**
- * @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();
- }
- });
- }
-
function removeFieldGuide() {
const fieldGuide = document.querySelector("#" + FIELD_GUIDE_ID);
if (fieldGuide) {
@@ -2119,97 +1969,6 @@
save();
}
- /**
- * @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) {
- error("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 {string[][]} array
* @param {number} sprite
diff --git a/dist/birb.user.js b/dist/birb.user.js
index 672d46d..e86804e 100644
--- a/dist/birb.user.js
+++ b/dist/birb.user.js
@@ -1,7 +1,7 @@
// ==UserScript==
// @name Pocket Bird
// @namespace https://idreesinc.com
-// @version 2025.10.26.163
+// @version 2025.10.26.184
// @description birb
// @author Idrees
// @downloadURL https://github.com/IdreesInc/Pocket-Bird/raw/refs/heads/main/dist/birb.user.js
@@ -36,6 +36,134 @@
debug$1 = debugMode;
}
+ /**
+ * 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();
+ }
+ });
+ }
+
/** Indicators for parts of the base bird sprite sheet */
const SPRITE = {
THEME_HIGHLIGHT: "theme-highlight",
@@ -423,128 +551,6 @@
return true;
}
- /**
- * Create an HTML element with the specified parameters
- * @param {string} className
- * @param {string} [textContent]
- * @param {string} [id]
- * @returns {HTMLElement}
- */
- function makeElement$1(className, textContent, id) {
- const element = document.createElement("div");
- element.classList.add(className);
- return element;
- }
-
- /**
- * @param {Document|Element} element
- * @param {(e: Event) => void} action
- */
- function onClick$1(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$1(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$1(func, closeButton) {
- if (closeButton) {
- onClick$1(closeButton, func);
- }
- document.addEventListener("keydown", (e) => {
- if (closeButton && !document.body.contains(closeButton)) {
- return;
- }
- if (e.key === "Escape") {
- func();
- }
- });
- }
-
/**
* @param {StickyNote} stickyNote
* @param {() => void} onSave
@@ -560,7 +566,7 @@
`;
- const noteElement = makeElement$1("birb-window");
+ const noteElement = makeElement("birb-window");
noteElement.classList.add("birb-sticky-note");
noteElement.innerHTML = html;
@@ -568,7 +574,7 @@
noteElement.style.left = `${stickyNote.left}px`;
document.body.appendChild(noteElement);
- makeDraggable$1(noteElement.querySelector(".birb-window-header"), true, (top, left) => {
+ makeDraggable(noteElement.querySelector(".birb-window-header"), true, (top, left) => {
stickyNote.top = top;
stickyNote.left = left;
onSave();
@@ -576,7 +582,7 @@
const closeButton = noteElement.querySelector(".birb-window-close");
if (closeButton) {
- makeClosable$1(() => {
+ makeClosable(() => {
if (confirm("Are you sure you want to delete this sticky note?")) {
onDelete();
noteElement.remove();
@@ -678,128 +684,6 @@
}
}
- /**
- * 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) {
- document.addEventListener("keydown", (e) => {
- if (e.key === "Escape") {
- func();
- }
- });
- }
-
/**
* @param {MenuItem} item
* @param {() => void} removeMenuCallback
@@ -1846,22 +1730,6 @@
save();
}
- /**
- * 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 (id) {
- element.id = id;
- }
- return element;
- }
-
/**
* Create a window element with header and content
* @param {string} id
@@ -2098,24 +1966,6 @@
centerElement(fieldGuide);
}
- /**
- * @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();
- }
- });
- }
-
function removeFieldGuide() {
const fieldGuide = document.querySelector("#" + FIELD_GUIDE_ID);
if (fieldGuide) {
@@ -2133,97 +1983,6 @@
save();
}
- /**
- * @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) {
- error("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 {string[][]} array
* @param {number} sprite
diff --git a/manifest.json b/manifest.json
index 53fd3c7..f09c262 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,7 +2,7 @@
"manifest_version": 3,
"name": "Pocket Bird",
"description": "It's a bird, in your browser. What more could you want?",
- "version": "2025.10.26.163",
+ "version": "2025.10.26.184",
"homepage_url": "https://idreesinc.com",
"content_scripts": [
{
diff --git a/src/birb.js b/src/birb.js
index 0cb3ba3..63dcb31 100644
--- a/src/birb.js
+++ b/src/birb.js
@@ -4,7 +4,11 @@ import Anim from './anim.js';
import {
Directions,
isDebug,
- setDebug
+ setDebug,
+ makeElement,
+ onClick,
+ makeDraggable,
+ makeClosable
} from './shared.js';
import {
SPRITE,
@@ -641,25 +645,6 @@ Promise.all([
save();
}
- /**
- * 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;
- }
-
/**
* Create a window element with header and content
* @param {string} id
@@ -917,24 +902,6 @@ Promise.all([
centerElement(fieldGuide);
}
- /**
- * @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();
- }
- });
- }
-
function removeFieldGuide() {
const fieldGuide = document.querySelector("#" + FIELD_GUIDE_ID);
if (fieldGuide) {
@@ -956,97 +923,6 @@ Promise.all([
save();
}
- /**
- * @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) {
- error("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 {string[][]} array
* @param {number} sprite
diff --git a/src/menu.js b/src/menu.js
index bd1e3b8..ba4c659 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -1,4 +1,10 @@
-import { isDebug } from './shared.js';
+import {
+ isDebug,
+ makeElement,
+ onClick,
+ makeDraggable,
+ makeClosable
+} from './shared.js';
export const MENU_ID = "birb-menu";
export const MENU_EXIT_ID = "birb-menu-exit";
@@ -34,134 +40,6 @@ export class Separator extends MenuItem {
}
}
-/**
- * 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 {MenuItem} item
* @param {() => void} removeMenuCallback
diff --git a/src/shared.js b/src/shared.js
index 9aa5d2c..e2c64b1 100644
--- a/src/shared.js
+++ b/src/shared.js
@@ -17,4 +17,132 @@ export function isDebug() {
*/
export function setDebug(debugMode) {
debug = debugMode;
+}
+
+/**
+ * Create an HTML element with the specified parameters
+ * @param {string} className
+ * @param {string} [textContent]
+ * @param {string} [id]
+ * @returns {HTMLElement}
+ */
+export 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
+ */
+export 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
+ */
+export 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]
+ */
+export 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();
+ }
+ });
}
\ No newline at end of file
diff --git a/src/stickyNotes.js b/src/stickyNotes.js
index 5027710..ef04e1f 100644
--- a/src/stickyNotes.js
+++ b/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