Create sticky note element

.gitignore

@@ -1 +1,2 @@
 /node_modules
+.DS_Store

birb.js

@@ -739,6 +739,43 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
 		return settings().birbMode ? "Birb" : "Bird";
 	}
 
+	function makeStickyNote(top = 500, left = 500) {
+		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..."></textarea>
+			</div>`
+		const stickyNote = makeElement("birb-window");
+		stickyNote.classList.add("birb-sticky-note");
+		stickyNote.innerHTML = html;
+
+		stickyNote.style.top = `${top}px`;
+		stickyNote.style.left = `${left}px`;
+		document.body.appendChild(stickyNote);
+
+		makeDraggable(stickyNote.querySelector(".birb-window-header"));
+
+		const closeButton = stickyNote.querySelector(".birb-window-close");
+		if (closeButton) {
+			makeClosable(() => {
+				confirm("Are you sure you want to delete this sticky note?") && stickyNote.remove();
+			}, closeButton);
+		}
+
+		centerElement(stickyNote);
+
+		// On window resize
+		window.addEventListener("resize", () => {
+			const modTop = `${top - Math.min(window.innerHeight - stickyNote.offsetHeight, top)}px`;
+			const modLeft = `${left - Math.min(window.innerWidth - stickyNote.offsetWidth, left)}px`;
+			stickyNote.style.transform = `translate(-${modLeft}, -${modTop})`;
+		});
+
+	}
+
 	function init() {
 		if (window !== window.top) {
 			// Skip installation if within an iframe
@@ -791,6 +828,8 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
 			}
 		});
 
+		makeStickyNote();
+
 		setInterval(update, 1000 / 60);
 	}
 
@@ -1445,7 +1484,7 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
 	}
 
 	function focusOnElement() {
-		const elements = document.querySelectorAll("img, video");
+		const elements = document.querySelectorAll("img, video, .birb-sticky-note");
 		const inWindow = Array.from(elements).filter((img) => {
 			const rect = img.getBoundingClientRect();
 			return rect.left >= 0 && rect.top >= 80 && rect.right <= window.innerWidth && rect.top <= window.innerHeight;

dist/birb.js

@@ -107,7 +107,6 @@ const STYLESHEET = `@font-face {
 	flex-direction: column;
 	animation: pop-in 0.08s;
 	transition-timing-function: ease-in;
-	/* drop-shadow(0 0 0 var(--border-color)); */
 }
 
 #birb-menu {
@@ -337,6 +336,34 @@ const STYLESHEET = `@font-face {
 	padding-bottom: 4px;
 	font-size: 14px;
 	color: rgb(124, 108, 75);
+}
+
+.birb-sticky-note {
+	position: absolute;
+	box-sizing: border-box;
+}
+
+.birb-sticky-note > .birb-window-content {
+	padding: 0;
+}
+
+.birb-sticky-note-input {
+	width: 100%;
+	height: 100%;
+	padding: 10px;
+	resize: both;
+	min-width: 100%;
+	min-height: 130px;
+	box-sizing: border-box;
+	font-family: "Monocraft", monospace;
+	font-size: 14px;
+	color: black;
+	background-color: transparent;
+	border: none;
+}
+
+.birb-sticky-note-input:focus {
+	outline: none;
 }`;
 
 class Layer {
@@ -1030,6 +1057,43 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
 		return settings().birbMode ? "Birb" : "Bird";
 	}
 
+	function makeStickyNote(top = 500, left = 500) {
+		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..."></textarea>
+			</div>`
+		const stickyNote = makeElement("birb-window");
+		stickyNote.classList.add("birb-sticky-note");
+		stickyNote.innerHTML = html;
+
+		stickyNote.style.top = `${top}px`;
+		stickyNote.style.left = `${left}px`;
+		document.body.appendChild(stickyNote);
+
+		makeDraggable(stickyNote.querySelector(".birb-window-header"));
+
+		const closeButton = stickyNote.querySelector(".birb-window-close");
+		if (closeButton) {
+			makeClosable(() => {
+				confirm("Are you sure you want to delete this sticky note?") && stickyNote.remove();
+			}, closeButton);
+		}
+
+		centerElement(stickyNote);
+
+		// On window resize
+		window.addEventListener("resize", () => {
+			const modTop = `${top - Math.min(window.innerHeight - stickyNote.offsetHeight, top)}px`;
+			const modLeft = `${left - Math.min(window.innerWidth - stickyNote.offsetWidth, left)}px`;
+			stickyNote.style.transform = `translate(-${modLeft}, -${modTop})`;
+		});
+
+	}
+
 	function init() {
 		if (window !== window.top) {
 			// Skip installation if within an iframe
@@ -1082,6 +1146,8 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
 			}
 		});
 
+		makeStickyNote();
+
 		setInterval(update, 1000 / 60);
 	}
 
@@ -1736,7 +1802,7 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
 	}
 
 	function focusOnElement() {
-		const elements = document.querySelectorAll("img, video");
+		const elements = document.querySelectorAll("img, video, .birb-sticky-note");
 		const inWindow = Array.from(elements).filter((img) => {
 			const rect = img.getBoundingClientRect();
 			return rect.left >= 0 && rect.top >= 80 && rect.right <= window.innerWidth && rect.top <= window.innerHeight;

dist/birb.user.js

@@ -120,7 +120,6 @@ const STYLESHEET = `@font-face {
 	flex-direction: column;
 	animation: pop-in 0.08s;
 	transition-timing-function: ease-in;
-	/* drop-shadow(0 0 0 var(--border-color)); */
 }
 
 #birb-menu {
@@ -350,6 +349,34 @@ const STYLESHEET = `@font-face {
 	padding-bottom: 4px;
 	font-size: 14px;
 	color: rgb(124, 108, 75);
+}
+
+.birb-sticky-note {
+	position: absolute;
+	box-sizing: border-box;
+}
+
+.birb-sticky-note > .birb-window-content {
+	padding: 0;
+}
+
+.birb-sticky-note-input {
+	width: 100%;
+	height: 100%;
+	padding: 10px;
+	resize: both;
+	min-width: 100%;
+	min-height: 130px;
+	box-sizing: border-box;
+	font-family: "Monocraft", monospace;
+	font-size: 14px;
+	color: black;
+	background-color: transparent;
+	border: none;
+}
+
+.birb-sticky-note-input:focus {
+	outline: none;
 }`;
 
 class Layer {
@@ -1043,6 +1070,43 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
 		return settings().birbMode ? "Birb" : "Bird";
 	}
 
+	function makeStickyNote(top = 500, left = 500) {
+		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..."></textarea>
+			</div>`
+		const stickyNote = makeElement("birb-window");
+		stickyNote.classList.add("birb-sticky-note");
+		stickyNote.innerHTML = html;
+
+		stickyNote.style.top = `${top}px`;
+		stickyNote.style.left = `${left}px`;
+		document.body.appendChild(stickyNote);
+
+		makeDraggable(stickyNote.querySelector(".birb-window-header"));
+
+		const closeButton = stickyNote.querySelector(".birb-window-close");
+		if (closeButton) {
+			makeClosable(() => {
+				confirm("Are you sure you want to delete this sticky note?") && stickyNote.remove();
+			}, closeButton);
+		}
+
+		centerElement(stickyNote);
+
+		// On window resize
+		window.addEventListener("resize", () => {
+			const modTop = `${top - Math.min(window.innerHeight - stickyNote.offsetHeight, top)}px`;
+			const modLeft = `${left - Math.min(window.innerWidth - stickyNote.offsetWidth, left)}px`;
+			stickyNote.style.transform = `translate(-${modLeft}, -${modTop})`;
+		});
+
+	}
+
 	function init() {
 		if (window !== window.top) {
 			// Skip installation if within an iframe
@@ -1095,6 +1159,8 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
 			}
 		});
 
+		makeStickyNote();
+
 		setInterval(update, 1000 / 60);
 	}
 
@@ -1749,7 +1815,7 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
 	}
 
 	function focusOnElement() {
-		const elements = document.querySelectorAll("img, video");
+		const elements = document.querySelectorAll("img, video, .birb-sticky-note");
 		const inWindow = Array.from(elements).filter((img) => {
 			const rect = img.getBoundingClientRect();
 			return rect.left >= 0 && rect.top >= 80 && rect.right <= window.innerWidth && rect.top <= window.innerHeight;

package.json

@@ -7,7 +7,7 @@
   "type": "module",
   "scripts": {
     "build": "node build.js",
-    "dev": "nodemon --watch birb.js --exec \"npm run build\""
+    "dev": "nodemon --watch birb.js --watch stylesheet.css --watch build.js --exec \"npm run build\""
   },
   "devDependencies": {
     "nodemon": "^3.1.10"

stylesheet.css

@@ -59,7 +59,6 @@
 	flex-direction: column;
 	animation: pop-in 0.08s;
 	transition-timing-function: ease-in;
-	/* drop-shadow(0 0 0 var(--border-color)); */
 }
 
 #birb-menu {
@@ -290,3 +289,31 @@
 	font-size: 14px;
 	color: rgb(124, 108, 75);
 }
+
+.birb-sticky-note {
+	position: absolute;
+	box-sizing: border-box;
+}
+
+.birb-sticky-note > .birb-window-content {
+	padding: 0;
+}
+
+.birb-sticky-note-input {
+	width: 100%;
+	height: 100%;
+	padding: 10px;
+	resize: both;
+	min-width: 100%;
+	min-height: 130px;
+	box-sizing: border-box;
+	font-family: "Monocraft", monospace;
+	font-size: 14px;
+	color: black;
+	background-color: transparent;
+	border: none;
+}
+
+.birb-sticky-note-input:focus {
+	outline: none;
+}