Title

From 26ee0a64973a16584f8d51686ab357acfd526ee9 Mon Sep 17 00:00:00 2001 From: Dominic DiTaranto Date: Fri, 23 Aug 2024 23:32:26 -0400 Subject: init commit --- buttonList.js | 30 ++++++++++ index.html | 30 ++++++++++ manifest.json | 21 +++++++ script.js | 183 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 51 ++++++++++++++++ 5 files changed, 315 insertions(+) create mode 100644 buttonList.js create mode 100644 index.html create mode 100644 manifest.json create mode 100644 script.js create mode 100644 style.css 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 @@ + + + + + Title + + + + + + + +

+ + +
+ + + Created By: Dominic DiTaranto | + Donate | + v.1.0 + + + + + \ 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": [""], + "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 -- cgit v1.2.3-70-g09d2