summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--buttonList.js30
-rw-r--r--index.html30
-rw-r--r--manifest.json21
-rw-r--r--script.js183
-rw-r--r--style.css51
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
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-21 22:03:55 +0000