From 26ee0a64973a16584f8d51686ab357acfd526ee9 Mon Sep 17 00:00:00 2001 From: Dominic DiTaranto Date: Fri, 23 Aug 2024 23:32:26 -0400 Subject: init commit --- script.js | 183 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 script.js (limited to 'script.js') diff --git a/script.js b/script.js new file mode 100644 index 0000000..45faa15 --- /dev/null +++ b/script.js @@ -0,0 +1,183 @@ +chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { + createStickyNote(request['color']) +}) + +function setupPage(){ + var stickyMap = getStickyMap() + + if (stickyMap === "") { + stickyMap = {} + } + + for (const [currentId, mapData] of Object.entries(stickyMap)) { + createStickyNote(mapData['color'], currentId, mapData) + } + + setCookie(JSON.stringify(stickyMap)) +} + +function createStickyNote(backgroundColor, currentId=null, mapData=null) { + var stickyMap = getStickyMap() + + if (!currentId) { + var currentId = Object.keys(stickyMap).length + 1 + } + + var stickyContainerId = 'sticky-container-' + currentId + var stickyBodyId = 'sticky-body-' + currentId + var stickyHeaderTextId = 'sticky-header-text-' + currentId + + if (!mapData) { + mapData = { + 'text': null, + 'color': backgroundColor, + 'top': '50%', + 'left': '50%', + 'open': true + } + } + + stickyMap[currentId] = mapData + setCookie(JSON.stringify(stickyMap)) + + var container = document.createElement("div"); + container.id = stickyContainerId + container.classList.add('sticky-note-container') + container.style.backgroundColor = backgroundColor; + container.style.color = 'black'; + container.style.top = mapData['top']; + container.style.left = mapData['left']; + + var headerContainer = document.createElement("div"); + headerContainer.classList.add('sticky-note-header-container') + headerContainer.ondblclick = function() { toggleStickyNoteVisibility(stickyBodyId, stickyHeaderTextId, currentId) }; + + var headerText = document.createElement("div"); + headerText.classList.add('sticky-note-header-text') + headerText.id = stickyHeaderTextId + + var headerButtons = document.createElement("div"); + headerButtons.classList.add('sticky-note-header-buttons') + + var delButton = document.createElement("button") + delButton.classList.add('buttonastext') + delButton.innerHTML = "❌" + delButton.onclick = function() { deleteStickyNote(currentId) }; + + var stickyBody = document.createElement("textarea") + stickyBody.classList.add('sticky-note-body') + stickyBody.id = stickyBodyId + stickyBody.style.visibility = 'visible' + stickyBody.contentEditable = "true"; + stickyBody.onchange = function () { storeTextChange(currentId) } + stickyBody.value = mapData['text'] + + headerButtons.appendChild(delButton) + + headerContainer.appendChild(headerText) + headerContainer.appendChild(headerButtons) + + container.appendChild(headerContainer) + container.appendChild(stickyBody) + + document.body.appendChild(container) + + if (!mapData['open']) { + toggleStickyNoteVisibility('sticky-body-' + currentId, 'sticky-header-text-' + currentId, currentId) + } + + dragElement(headerContainer, container, currentId) +} + +function deleteStickyNote(stickyNoteId) { + var elem = document.getElementById('sticky-container-' + stickyNoteId) + elem.remove() + var stickyMap = getStickyMap() + delete stickyMap[stickyNoteId] + setCookie(JSON.stringify(stickyMap)) +} + +function toggleStickyNoteVisibility(stickyBodyId, stickyHeaderId, stickyId) { + var stickyBody = document.getElementById(stickyBodyId) + var stickyHeader = document.getElementById(stickyHeaderId) + var stickyMap = getStickyMap() + if (stickyBody.style.display === "none") { + stickyMap[stickyId]['open'] = true; + stickyBody.style.display = "block"; + stickyHeader.innerHTML = "" + } else { + stickyMap[stickyId]['open'] = false; + stickyBody.style.display = "none"; + stickyHeader.innerHTML = stickyBody.value + } + setCookie(JSON.stringify(stickyMap)) +} + +function dragElement(stickyNoteHeaderElem, stickyNoteContainerElem, stickyId) { + var elmnt = stickyNoteContainerElem + var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; + stickyNoteHeaderElem.onmousedown = dragMouseDown; + + function dragMouseDown(e) { + e = e || window.event; + e.preventDefault(); + pos3 = e.clientX; + pos4 = e.clientY; + document.onmouseup = closeDragElement; + document.onmousemove = elementDrag; + } + + function elementDrag(e) { + e = e || window.event; + e.preventDefault(); + pos1 = pos3 - e.clientX; + pos2 = pos4 - e.clientY; + pos3 = e.clientX; + pos4 = e.clientY; + + var top = (elmnt.offsetTop - pos2) + "px"; + var left = (elmnt.offsetLeft - pos1) + "px"; + + elmnt.style.top = top + elmnt.style.left = left + + var stickyMap = getStickyMap() + stickyMap[stickyId]['top'] = top + stickyMap[stickyId]['left'] = left + setCookie(JSON.stringify(stickyMap)) + } + + function closeDragElement() { + // stop moving when mouse button is released: + document.onmouseup = null; + document.onmousemove = null; + } +} + +function storeTextChange(stickyId) { + var stickyMap = getStickyMap() + var text = document.getElementById('sticky-body-' + stickyId).value + stickyMap[stickyId]['text'] = text + setCookie(JSON.stringify(stickyMap)) +} + +function setCookie(stickyObject) { + document.cookie = 'stickyMap' + "=" + stickyObject; +} + +function getStickyMap() { + let name = 'stickyMap' + "="; + let ca = document.cookie.split(';'); + for(let i = 0; i < ca.length; i++) { + let c = ca[i]; + while (c.charAt(0) == ' ') { + c = c.substring(1); + } + if (c.indexOf(name) == 0) { + return JSON.parse(c.substring(name.length, c.length)); + } + } + return ""; +} + +setupPage() -- cgit v1.2.3-70-g09d2