1 files changed, 183 insertions, 0 deletions
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()