noham/Pocket-Bird
1
0
Fork 0
mirror of https://github.com/NohamR/Pocket-Bird.git synced 2026-05-25 12:17:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create sticky note element

Browse Source
This commit is contained in:
Idrees Hassan
2025-08-16 17:14:24 -04:00
parent 674142351f
commit 9f3b36adb7
6 changed files with 206 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

41
birb.js
View File

@@ -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;

70
dist/birb.js vendored
View File

@@ -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;

70
dist/birb.user.js vendored
View File

@@ -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;

2
package.json
View File

@@ -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"

29
stylesheet.css
View File

@@ -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;
}