diff --git a/.gitignore b/.gitignore
index 07e6e47..68b21f0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
/node_modules
+.DS_Store
diff --git a/birb.js b/birb.js
index fdd30c4..d12d343 100644
--- a/birb.js
+++ b/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 = `
+
+
+
+
`
+ 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;
diff --git a/dist/birb.js b/dist/birb.js
index e76484c..efc85b0 100644
--- a/dist/birb.js
+++ b/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 = `
+
+
+
+
`
+ 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;
diff --git a/dist/birb.user.js b/dist/birb.user.js
index d355539..1237ac0 100644
--- a/dist/birb.user.js
+++ b/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 = `
+
+
+
+
`
+ 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;
diff --git a/package.json b/package.json
index 4ecdf7b..4b4f18e 100644
--- a/package.json
+++ b/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"
diff --git a/stylesheet.css b/stylesheet.css
index 3192451..0a433af 100644
--- a/stylesheet.css
+++ b/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 {
@@ -289,4 +288,32 @@
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;
}
\ No newline at end of file