Remove some innerHTML setting and add version

This commit is contained in:
Idrees Hassan
2025-10-26 20:23:47 -04:00
parent 5818aadad6
commit 69c0d0c1bc
7 changed files with 119 additions and 77 deletions

View File

@@ -77,29 +77,38 @@ export function isStickyNoteApplicable(stickyNote) {
* @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;
// Create header
const header = makeElement("birb-window-header");
const titleDiv = makeElement("birb-window-title", "Sticky Note");
const closeButton = makeElement("birb-window-close", "x");
header.appendChild(titleDiv);
header.appendChild(closeButton);
// Create content
const content = makeElement("birb-window-content");
const textarea = document.createElement("textarea");
textarea.className = "birb-sticky-note-input";
textarea.style.width = "150px";
textarea.placeholder = "Write your notes here and they'll stick to the page!";
textarea.value = stickyNote.content;
content.appendChild(textarea);
noteElement.appendChild(header);
noteElement.appendChild(content);
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) => {
makeDraggable(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?")) {
@@ -109,7 +118,6 @@ export function renderStickyNote(stickyNote, onSave, onDelete) {
}, closeButton);
}
const textarea = noteElement.querySelector(".birb-sticky-note-input");
if (textarea && textarea instanceof HTMLTextAreaElement) {
let saveTimeout;
// Save after debounce