5 files changed, 315 insertions, 0 deletions
diff --git a/buttonList.js b/buttonList.js
new file mode 100644
index 0000000..2b80165
--- /dev/null
+++ b/buttonList.js
@@ -0,0 +1,30 @@
+function createStickyButtons() {
+    var supportedColors = [
+        "Cornsilk",
+        "LightPink",
+        "LightCyan",
+        "MintCream",
+        "Gainsboro",
+        "HoneyDew",
+        "LightCoral",
+        "LightSalmon",
+        "Plum"
+    ]
+
+    var buttonList = document.getElementById('buttonList')
+
+    for (let i = 0; i < supportedColors.length; i++){
+        var btn = document.createElement('button')
+        btn.classList.add('new-sticky-button')
+        btn.onclick = function() {
+            chrome.tabs.query({active: true, currentWindow: true}, tabs => {
+                chrome.tabs.sendMessage(tabs[0].id, {color: supportedColors[i]}, response => {});
+            });
+        }
+
+        btn.style.backgroundColor = supportedColors[i];
+        buttonList.appendChild(btn)
+    }
+}
+
+createStickyButtons()
+\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3794fc2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<style>
+    html {
+        width: 320px;
+    }
+</style>
+
+<center>
+    <div id="buttonList"></div>
+</center>
+
+<br>
+
+<small>
+    Created By: <a href="https://www.domdit.com">Dominic DiTaranto</a> |
+    <a href="https://www.domdit.com/donate">Donate</a> |
+    v.1.0
+</small>
+
+<script src="buttonList.js"></script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..09ccb52
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,21 @@
+{
+  "manifest_version": 2,
+
+  "name": "STIQEE",
+  "description": "This extension shows a Google Image search result for the current page",
+  "version": "1.0",
+
+  "browser_action": {
+    "default_popup": "index.html"
+  },
+  "permissions": [
+    "activeTab",
+    "https://ajax.googleapis.com/"
+  ],
+  "content_security_policy":"script-src 'self' https://apis.google.com; object-src 'self'",
+  "content_scripts": [ {
+    "css": [ "style.css" ],
+    "matches": ["<all_urls>"],
+    "js": ["script.js"]
+} ]
+}
+\ No newline at end of file
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()
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a181bc4
--- /dev/null
+++ b/style.css
@@ -0,0 +1,51 @@
+
+
+.new-sticky-button {
+    width: 100px;
+    height: 50px;
+}
+
+.sticky-note-container {
+    width: 300px;
+    background-color: PeachPuff;
+    border: solid black 1px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.sticky-note-header-container {
+    height: 20px;
+    width: auto;
+    padding: 5px;
+    border-bottom: solid black 1px;
+}
+
+.sticky-note-header-text {
+    overflow: hidden;
+    float: left;
+    max-width: 80%;
+}
+
+.sticky-note-header-buttons {
+    float: right;
+}
+
+.sticky-note-body {
+    width: 278px;
+    height: 280px;
+    padding: 10px;
+    overflow: auto;
+    resize: none;
+    background-color: rgba(0, 0, 0, 0);
+    border-color: rgba(0, 0, 0, 0)
+}
+
+.buttonastext {
+    background:none;
+    border:none;
+    margin:0;
+    padding:0;
+    cursor: pointer;
+}
+\ No newline at end of file