mirror of
https://github.com/NohamR/Pocket-Bird.git
synced 2026-05-25 04:07:23 +00:00
Separate sticky note logic
This commit is contained in:
Idrees Hassan
292
src/stickyNotes.js
Normal file
292
src/stickyNotes.js
Normal file
@@ -0,0 +1,292 @@
|
||||
/**
|
||||
* @typedef {Object} SavedStickyNote
|
||||
* @property {string} id
|
||||
* @property {string} site
|
||||
* @property {string} content
|
||||
* @property {number} top
|
||||
* @property {number} left
|
||||
*/
|
||||
|
||||
export class StickyNote {
|
||||
/**
|
||||
* @param {string} id
|
||||
* @param {string} [site]
|
||||
* @param {string} [content]
|
||||
* @param {number} [top]
|
||||
* @param {number} [left]
|
||||
*/
|
||||
constructor(id, site = "", content = "", top = 0, left = 0) {
|
||||
this.id = id;
|
||||
this.site = site;
|
||||
this.content = content;
|
||||
this.top = top;
|
||||
this.left = left;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse URL parameters into a key-value map
|
||||
* @param {string} url
|
||||
* @returns {Record<string, string>}
|
||||
*/
|
||||
export function parseUrlParams(url) {
|
||||
const queryString = url.split("?")[1];
|
||||
if (!queryString) return {};
|
||||
|
||||
return queryString.split("&").reduce((params, param) => {
|
||||
const [key, value] = param.split("=");
|
||||
return { ...params, [key]: value };
|
||||
}, {});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {StickyNote} stickyNote
|
||||
* @returns {boolean} Whether the given sticky note is applicable to the current site/page
|
||||
*/
|
||||
export function isStickyNoteApplicable(stickyNote) {
|
||||
const stickyNoteUrl = stickyNote.site;
|
||||
const currentUrl = window.location.href;
|
||||
const stickyNoteWebsite = stickyNoteUrl.split("?")[0];
|
||||
const currentWebsite = currentUrl.split("?")[0];
|
||||
|
||||
if (stickyNoteWebsite !== currentWebsite) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const stickyNoteParams = parseUrlParams(stickyNoteUrl);
|
||||
const currentParams = parseUrlParams(currentUrl);
|
||||
|
||||
if (window.location.hostname === "www.youtube.com") {
|
||||
if (currentParams.v !== undefined && currentParams.v !== stickyNoteParams.v) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
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
|
||||
* @param {() => void} onDelete
|
||||
* @returns {HTMLElement}
|
||||
*/
|
||||
export function renderStickyNote(stickyNote, onSave, onDelete) {
|
||||
let html = `
|
||||
<div class="birb-window-header">
|
||||
<div class="birb-window-title">Sticky Note</div>
|
||||
<div class="birb-window-close">x</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>`
|
||||
const noteElement = makeElement("birb-window");
|
||||
noteElement.classList.add("birb-sticky-note");
|
||||
noteElement.innerHTML = html;
|
||||
|
||||
noteElement.style.top = `${stickyNote.top}px`;
|
||||
noteElement.style.left = `${stickyNote.left}px`;
|
||||
document.body.appendChild(noteElement);
|
||||
|
||||
makeDraggable(noteElement.querySelector(".birb-window-header"), true, (top, left) => {
|
||||
stickyNote.top = top;
|
||||
stickyNote.left = left;
|
||||
onSave();
|
||||
});
|
||||
|
||||
const closeButton = noteElement.querySelector(".birb-window-close");
|
||||
if (closeButton) {
|
||||
makeClosable(() => {
|
||||
if (confirm("Are you sure you want to delete this sticky note?")) {
|
||||
onDelete();
|
||||
noteElement.remove();
|
||||
}
|
||||
}, closeButton);
|
||||
}
|
||||
|
||||
const textarea = noteElement.querySelector(".birb-sticky-note-input");
|
||||
if (textarea && textarea instanceof HTMLTextAreaElement) {
|
||||
let saveTimeout;
|
||||
// Save after debounce
|
||||
textarea.addEventListener("input", () => {
|
||||
stickyNote.content = textarea.value;
|
||||
if (saveTimeout) {
|
||||
clearTimeout(saveTimeout);
|
||||
}
|
||||
saveTimeout = setTimeout(() => {
|
||||
onSave();
|
||||
}, 250);
|
||||
});
|
||||
}
|
||||
|
||||
// On window resize
|
||||
window.addEventListener("resize", () => {
|
||||
const modTop = `${stickyNote.top - Math.min(window.innerHeight - noteElement.offsetHeight, stickyNote.top)}px`;
|
||||
const modLeft = `${stickyNote.left - Math.min(window.innerWidth - noteElement.offsetWidth, stickyNote.left)}px`;
|
||||
noteElement.style.transform = `scale(var(--birb-ui-scale)) translate(-${modLeft}, -${modTop})`;
|
||||
});
|
||||
|
||||
return noteElement;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {StickyNote[]} stickyNotes
|
||||
* @param {() => void} onSave
|
||||
* @param {(note: StickyNote) => void} onDelete
|
||||
*/
|
||||
export function drawStickyNotes(stickyNotes, onSave, onDelete) {
|
||||
// Remove all existing sticky notes
|
||||
const existingNotes = document.querySelectorAll(".birb-sticky-note");
|
||||
existingNotes.forEach(note => note.remove());
|
||||
// Render all sticky notes
|
||||
for (let stickyNote of stickyNotes) {
|
||||
if (isStickyNoteApplicable(stickyNote)) {
|
||||
renderStickyNote(stickyNote, onSave, () => onDelete(stickyNote));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {StickyNote[]} stickyNotes
|
||||
* @param {() => void} onSave
|
||||
* @param {(note: StickyNote) => void} onDelete
|
||||
*/
|
||||
export function createNewStickyNote(stickyNotes, onSave, onDelete) {
|
||||
const id = Date.now().toString();
|
||||
const site = window.location.href;
|
||||
const stickyNote = new StickyNote(id, site, "");
|
||||
const element = renderStickyNote(stickyNote, onSave, () => onDelete(stickyNote));
|
||||
element.style.left = `${window.innerWidth / 2 - element.offsetWidth / 2}px`;
|
||||
element.style.top = `${window.scrollY + window.innerHeight / 2 - element.offsetHeight / 2}px`;
|
||||
stickyNote.top = parseInt(element.style.top, 10);
|
||||
stickyNote.left = parseInt(element.style.left, 10);
|
||||
stickyNotes.push(stickyNote);
|
||||
onSave();
|
||||
}
|
||||
Reference in New Issue
Block a user