noham/Pocket-Bird
1
0
Fork 0
mirror of https://github.com/NohamR/Pocket-Bird.git synced 2026-05-26 04:07:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove duplicate code

Browse Source
This commit is contained in:
Idrees Hassan
2025-10-26 16:05:00 -04:00
parent 7c146aa575
commit 476c75cecb
7 changed files with 410 additions and 1132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

503
dist/birb.js vendored
View File

@@ -22,6 +22,134 @@
debug$1 = debugMode; 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 */ /** Indicators for parts of the base bird sprite sheet */
const SPRITE = { const SPRITE = {
THEME_HIGHLIGHT: "theme-highlight", THEME_HIGHLIGHT: "theme-highlight",
@@ -409,128 +537,6 @@
return true; 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 {StickyNote} stickyNote
* @param {() => void} onSave * @param {() => void} onSave
@@ -546,7 +552,7 @@
<div class="birb-window-content"> <div class="birb-window-content">
<textarea class="birb-sticky-note-input" style="width: 150px;" placeholder="Write your notes here and they'll stick to the page!">${stickyNote.content}</textarea> <textarea class="birb-sticky-note-input" style="width: 150px;" placeholder="Write your notes here and they'll stick to the page!">${stickyNote.content}</textarea>
</div>`; </div>`;
const noteElement = makeElement$1("birb-window"); const noteElement = makeElement("birb-window");
noteElement.classList.add("birb-sticky-note"); noteElement.classList.add("birb-sticky-note");
noteElement.innerHTML = html; noteElement.innerHTML = html;
@@ -554,7 +560,7 @@
noteElement.style.left = `${stickyNote.left}px`; noteElement.style.left = `${stickyNote.left}px`;
document.body.appendChild(noteElement); 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.top = top;
stickyNote.left = left; stickyNote.left = left;
onSave(); onSave();
@@ -562,7 +568,7 @@
const closeButton = noteElement.querySelector(".birb-window-close"); const closeButton = noteElement.querySelector(".birb-window-close");
if (closeButton) { if (closeButton) {
makeClosable$1(() => { makeClosable(() => {
if (confirm("Are you sure you want to delete this sticky note?")) { if (confirm("Are you sure you want to delete this sticky note?")) {
onDelete(); onDelete();
noteElement.remove(); 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 {MenuItem} item
* @param {() => void} removeMenuCallback * @param {() => void} removeMenuCallback
@@ -1832,22 +1716,6 @@
save(); 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 * Create a window element with header and content
* @param {string} id * @param {string} id
@@ -2084,24 +1952,6 @@
centerElement(fieldGuide); 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() { function removeFieldGuide() {
const fieldGuide = document.querySelector("#" + FIELD_GUIDE_ID); const fieldGuide = document.querySelector("#" + FIELD_GUIDE_ID);
if (fieldGuide) { if (fieldGuide) {
@@ -2119,97 +1969,6 @@
save(); 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 {string[][]} array
* @param {number} sprite * @param {number} sprite

505
dist/birb.user.js vendored
View File

@@ -1,7 +1,7 @@
// ==UserScript== // ==UserScript==
// @name Pocket Bird // @name Pocket Bird
// @namespace https://idreesinc.com // @namespace https://idreesinc.com
// @version 2025.10.26.163 // @version 2025.10.26.184
// @description birb // @description birb
// @author Idrees // @author Idrees
// @downloadURL https://github.com/IdreesInc/Pocket-Bird/raw/refs/heads/main/dist/birb.user.js // @downloadURL https://github.com/IdreesInc/Pocket-Bird/raw/refs/heads/main/dist/birb.user.js
@@ -36,6 +36,134 @@
debug$1 = debugMode; 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 */ /** Indicators for parts of the base bird sprite sheet */
const SPRITE = { const SPRITE = {
THEME_HIGHLIGHT: "theme-highlight", THEME_HIGHLIGHT: "theme-highlight",
@@ -423,128 +551,6 @@
return true; 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 {StickyNote} stickyNote
* @param {() => void} onSave * @param {() => void} onSave
@@ -560,7 +566,7 @@
<div class="birb-window-content"> <div class="birb-window-content">
<textarea class="birb-sticky-note-input" style="width: 150px;" placeholder="Write your notes here and they'll stick to the page!">${stickyNote.content}</textarea> <textarea class="birb-sticky-note-input" style="width: 150px;" placeholder="Write your notes here and they'll stick to the page!">${stickyNote.content}</textarea>
</div>`; </div>`;
const noteElement = makeElement$1("birb-window"); const noteElement = makeElement("birb-window");
noteElement.classList.add("birb-sticky-note"); noteElement.classList.add("birb-sticky-note");
noteElement.innerHTML = html; noteElement.innerHTML = html;
@@ -568,7 +574,7 @@
noteElement.style.left = `${stickyNote.left}px`; noteElement.style.left = `${stickyNote.left}px`;
document.body.appendChild(noteElement); 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.top = top;
stickyNote.left = left; stickyNote.left = left;
onSave(); onSave();
@@ -576,7 +582,7 @@
const closeButton = noteElement.querySelector(".birb-window-close"); const closeButton = noteElement.querySelector(".birb-window-close");
if (closeButton) { if (closeButton) {
makeClosable$1(() => { makeClosable(() => {
if (confirm("Are you sure you want to delete this sticky note?")) { if (confirm("Are you sure you want to delete this sticky note?")) {
onDelete(); onDelete();
noteElement.remove(); 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 {MenuItem} item
* @param {() => void} removeMenuCallback * @param {() => void} removeMenuCallback
@@ -1846,22 +1730,6 @@
save(); 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 * Create a window element with header and content
* @param {string} id * @param {string} id
@@ -2098,24 +1966,6 @@
centerElement(fieldGuide); 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() { function removeFieldGuide() {
const fieldGuide = document.querySelector("#" + FIELD_GUIDE_ID); const fieldGuide = document.querySelector("#" + FIELD_GUIDE_ID);
if (fieldGuide) { if (fieldGuide) {
@@ -2133,97 +1983,6 @@
save(); 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 {string[][]} array
* @param {number} sprite * @param {number} sprite

2
manifest.json
View File

@@ -2,7 +2,7 @@
"manifest_version": 3, "manifest_version": 3,
"name": "Pocket Bird", "name": "Pocket Bird",
"description": "It's a bird, in your browser. What more could you want?", "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", "homepage_url": "https://idreesinc.com",
"content_scripts": [ "content_scripts": [
{ {

134
src/birb.js
View File

@@ -4,7 +4,11 @@ import Anim from './anim.js';
import { import {
Directions, Directions,
isDebug, isDebug,
setDebug setDebug,
makeElement,
onClick,
makeDraggable,
makeClosable
} from './shared.js'; } from './shared.js';
import { import {
SPRITE, SPRITE,
@@ -641,25 +645,6 @@ Promise.all([
save(); 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 * Create a window element with header and content
* @param {string} id * @param {string} id
@@ -917,24 +902,6 @@ Promise.all([
centerElement(fieldGuide); 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() { function removeFieldGuide() {
const fieldGuide = document.querySelector("#" + FIELD_GUIDE_ID); const fieldGuide = document.querySelector("#" + FIELD_GUIDE_ID);
if (fieldGuide) { if (fieldGuide) {
@@ -956,97 +923,6 @@ Promise.all([
save(); 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 {string[][]} array
* @param {number} sprite * @param {number} sprite

136
src/menu.js
View File

@@ -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_ID = "birb-menu";
export const MENU_EXIT_ID = "birb-menu-exit"; 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 {MenuItem} item
* @param {() => void} removeMenuCallback * @param {() => void} removeMenuCallback

128
src/shared.js
View File

@@ -17,4 +17,132 @@ export function isDebug() {
*/ */
export function setDebug(debugMode) { export function setDebug(debugMode) {
debug = 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();
}
});
} }

134
src/stickyNotes.js
View File

@@ -1,3 +1,9 @@
import {
makeElement,
makeDraggable,
makeClosable
} from './shared.js';
/** /**
* @typedef {Object} SavedStickyNote * @typedef {Object} SavedStickyNote
* @property {string} id * @property {string} id
@@ -64,134 +70,6 @@ export function isStickyNoteApplicable(stickyNote) {
return true; 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 {StickyNote} stickyNote
* @param {() => void} onSave * @param {() => void} onSave