Basic functional done

js/aside-script.js

@@ -1,40 +1,327 @@
-chrome.runtime.onMessage.addListener(function(sender, request, sendResponse)
+if (document.location.protocol == "chrome-extension:")
+	InitializeStandalone();
+else
 {
-	var pane = document.querySelector("#aside-pane");
-	if (pane.style.transform == "translateX(110%)")
+	setTimeout(function ()
 	{
-		pane.style.transform = "translateX(0%)";
-	}
-	else
-	{
-		pane.style.transform = "translateX(110%)";
-	}
+		var pane = document.querySelector(".tabsAside.pane");
 
-	UpdateTheme();
-	
-	sendResponse();
-});
+		if (pane == null)
+		{
+			var xhr = new XMLHttpRequest();
+			xhr.open('GET', chrome.extension.getURL("collections.html"), true);
+			xhr.onreadystatechange = function ()
+			{
+				if (this.status !== 200 || document.querySelector("#aside-pane") != null)
+					return;
 
-var xhr = new XMLHttpRequest();
-xhr.open('GET', chrome.extension.getURL("collections.html"), true);
-xhr.onreadystatechange = function () 
+				if (document.querySelector(".tabsAside.pane") == null)
+				{
+					document.body.innerHTML += this.responseText;
+					chrome.runtime.sendMessage({ command: "loadData" }, function (collections)
+					{
+						if (document.querySelector(".tabsAside.pane section div") == null)
+							collections.forEach(i => 
+							{
+								AddCollection(i);
+							});
+					});
+				}
+
+				setTimeout(function ()
+				{
+					pane = document.querySelector(".tabsAside.pane");
+
+					if (window.matchMedia("(prefers-color-scheme: dark)").matches)
+						pane.parentElement.setAttribute("darkmode", "");
+
+					document.querySelector(".tabsAside .saveTabs").onclick = SetTabsAside;
+
+
+					document.querySelectorAll(".tabsAside.pane > header nav button").forEach(i => 
+					{
+						i.onclick = function () { window.open(i.value, '_blank'); };
+					});
+
+					document.querySelector(".tabsAside.background").addEventListener("click", function (event)
+					{
+						if (event.target == pane.parentElement)
+						{
+							pane.removeAttribute("opened");
+							pane.parentElement.style.opacity = 0;
+							document.body.style.overflow = "";
+							setTimeout(function ()
+							{
+								pane.parentElement.remove();
+							}, 300);
+						}
+					});
+
+					pane.setAttribute("opened", "");
+					pane.parentElement.style.opacity = 1;
+					document.body.style.overflow = "hidden";
+				}, 50);
+			};
+			xhr.send();
+		}
+		else
+		{
+			if (pane.hasAttribute("opened"))
+			{
+				pane.removeAttribute("opened");
+				pane.parentElement.style.opacity = 0;
+				document.body.style.overflow = "";
+				setTimeout(function ()
+				{
+					if (!pane.hasAttribute("opened"))
+						pane.parentElement.remove();
+				}, 300);
+			}
+			else
+			{
+				pane.setAttribute("opened", "");
+				pane.parentElement.style.opacity = 1;
+			}
+		}
+	}, 50);
+}
+
+function InitializeStandalone()
 {
-	if (this.status !== 200 || document.querySelector("#aside-pane") != null)
-		return;
+	pane = document.querySelector(".tabsAside.pane");
 
-	document.body.innerHTML += this.responseText.split("%EXTENSION_PATH%").join(chrome.extension.getURL(""));
-};
-xhr.send();
-
-function UpdateTheme()
-{
-	var css = document.querySelector("#aside-pane #darkCSS")
 	if (window.matchMedia("(prefers-color-scheme: dark)").matches)
 	{
-		css.removeAttribute("disabled");
+		pane.parentElement.setAttribute("darkmode", "");
+		document.querySelector("#icon").href = "icons/dark/empty/16.png";
 	}
-	else
+
+	document.querySelector(".tabsAside .saveTabs").onclick = SetTabsAside;
+
+	document.querySelectorAll(".tabsAside.pane > header nav button").forEach(i => 
 	{
-		css.setAttribute("disabled", true);
+		i.onclick = function () { window.open(i.value, '_blank'); };
+	});
+
+	chrome.runtime.sendMessage({ command: "loadData" }, function (collections)
+	{
+		if (document.querySelector(".tabsAside.pane section div") == null)
+			collections.forEach(i => 
+			{
+				AddCollection(i);
+			});
+	});
+}
+
+function AddCollection(collection)
+{
+	var list = document.querySelector(".tabsAside section");
+	list.querySelector("h2").setAttribute("hidden", "");
+
+	var rawTabs = "";
+
+	for (var i = 0; i < collection.links.length; i++)
+	{
+		rawTabs +=
+			"<div title='" + collection.titles[i] + "'>" +
+			"<span value='" + collection.links[i] + "'></span>" +
+			"<div>" +
+			"<div" + ((collection.icons[i] == 0 || collection.icons[i] == null) ? "" : " style='background-image: url(\"" + collection.icons[i] + "\")'") + "></div>" +
+			"<span>" + collection.titles[i] + "</span>" +
+			"<button title='Remove tab from collection'>&#xE106;</button>" +
+			"</div>" +
+			"</div>";
 	}
-}
+
+	list.innerHTML += "<div>" +
+		"<div>" +
+		"<span>Tabs: " + collection.links.length + "</span>" +
+		"<small>" + GetAgo(collection.timestamp) + "</small>" +
+		"<a>Restore tabs</a>" +
+		"<div>" +
+		"<button title='More...'>&#xE10C;</button>" +
+		"<nav>" +
+		"<button>Add tabs to favorites</button>" +
+		"<button>Share tabs</button>" +
+		"</nav>" +
+		"</div>" +
+		"<button title='Remove collection'>&#xE106;</button>" +
+		"</div>" +
+
+		"<div>" + rawTabs + "</div>" +
+		"</div>"
+
+	list.querySelectorAll("a").forEach(i => 
+	{
+		i.onclick = function () { RestoreTabs(i.parentElement.parentElement) };
+	});
+
+	list.querySelectorAll("div > div:last-child > div > span").forEach(i =>
+	{
+		i.onclick = function () { window.open(i.getAttribute("value"), '_blank'); };
+	})
+
+	document.querySelectorAll(".tabsAside.pane > section > div > div:first-child > button").forEach(i => 
+	{
+		i.onclick = function () { RemoveTabs(i.parentElement.parentElement) };
+	});
+
+	document.querySelectorAll(".tabsAside.pane > section > div > div:first-child > div > nav > button:first-child").forEach(i => 
+	{
+		i.onclick = function () { AddToFavorites(i.parentElement.parentElement.parentElement.parentElement) };
+	});
+	document.querySelectorAll(".tabsAside.pane > section > div > div:first-child > div > nav > button:last-child").forEach(i => 
+	{
+		i.onclick = function () { ShareTabs(i.parentElement.parentElement.parentElement.parentElement) };
+	});
+
+	document.querySelectorAll(".tabsAside.pane > section > div > div:last-child > div > div > button").forEach(i => 
+	{
+		i.onclick = function () { RemoveOneTab(i.parentElement.parentElement) };
+	});
+}
+
+function SetTabsAside()
+{
+	chrome.runtime.sendMessage({ command: "saveTabs" });
+}
+
+function RestoreTabs(collectionData)
+{
+	chrome.runtime.sendMessage(
+		{
+			command: "restoreTabs",
+			collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
+		},
+		function ()
+		{
+			if (collectionData.parentElement.children.length < 3)
+			{
+				RemoveElement(collectionData);
+				setTimeout(function ()
+				{
+					document.querySelector(".tabsAside.pane > section > h2").removeAttribute("hidden");
+				}, 250);
+			}
+			else
+				RemoveElement(collectionData);
+		}
+	);
+}
+
+function RemoveTabs(collectionData)
+{
+	chrome.runtime.sendMessage(
+		{
+			command: "deleteTabs",
+			collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
+		},
+		function ()
+		{
+			if (collectionData.parentElement.children.length < 3)
+			{
+				RemoveElement(collectionData);
+				setTimeout(function ()
+				{
+					document.querySelector(".tabsAside.pane > section > h2").removeAttribute("hidden");
+				}, 250);
+			}
+			else
+				RemoveElement(collectionData);
+		}
+	);
+}
+
+function AddToFavorites(collectionData)
+{
+	chrome.runtime.sendMessage(
+		{
+			command: "toFavorites",
+			collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
+		});
+}
+
+function ShareTabs(collectionData)
+{
+	chrome.runtime.sendMessage(
+		{
+			command: "share",
+			collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
+		});
+}
+
+function RemoveOneTab(tabData)
+{
+	chrome.runtime.sendMessage(
+		{
+			command: "removeTab",
+			collectionIndex: Array.prototype.slice.call(tabData.parentElement.parentElement.parentElement.children).indexOf(tabData.parentElement.parentElement) - 1,
+			tabIndex: Array.prototype.slice.call(tabData.parentElement.children).indexOf(tabData)
+		},
+		function ()
+		{
+			tabData.parentElement.previousElementSibling.children[0].textContent = "Tabs: " + tabData.parentElement.children.length - 1;
+			if (tabData.parentElement.children.length < 2)
+			{
+				RemoveElement(tabData.parentElement.parentElement);
+				if (document.querySelector("tabsAside.pane > section").children.length < 2)
+					setTimeout(function ()
+					{
+						document.querySelector(".tabsAside.pane > section > h2").removeAttribute("hidden");
+					}, 250);
+			}
+			else
+				RemoveElement(tabData);
+		});
+}
+
+function GetAgo(timestamp)
+{
+	var minutes = (Date.now() - timestamp) / 60000;
+
+	if (minutes < 1)
+		return "Just now";
+
+	else if (Math.floor(minutes) == 1)
+		return "1 minute ago";
+	else if (minutes < 60)
+		return Math.floor(minutes) + " minutes ago";
+
+	else if (Math.floor(minutes / 60) == 1)
+		return "1 hour ago";
+	else if (minutes < 24 * 60)
+		return Math.floor(minutes / 60) + " hours ago";
+
+	else if (Math.floor(minutes / 24 / 60) == 1)
+		return "1 day ago";
+	else if (minutes < 7 * 24 * 60)
+		return Math.floor(minutes / 24 / 60) + " days ago";
+
+	else if (Math.floor(minutes / 7 / 24 / 60) == 1)
+		return "1 week ago";
+	else if (minutes < 30 * 24 * 60)
+		return Math.floor(minutes / 7 / 24 / 60) + " weeks ago";
+
+	else if (Math.floor(minutes / 30 / 24 / 60) == 1)
+		return "1 month ago";
+	else if (minutes < 365 * 24 * 60)
+		return Math.floor(minutes / 30 / 24 / 60) + " months ago";
+
+	else if (Math.floor(minutes / 24 / 60) == 365)
+		return "1 year ago";
+	else
+		return Math.floor(minutes / 365 / 24 / 60) + "years ago";
+}
+
+function RemoveElement(el)
+{
+	el.style.opacity = 0;
+	setTimeout(function ()
+	{
+		el.remove();
+	}, 200);
+}
+
+// TODO: Add more actions
+// TODO: Make backup system
+// TODO: Override websites' CSS

js/background.js

@@ -1,33 +1,130 @@
+chrome.browserAction.onClicked.addListener(function (tab)
+{
+	if (tab.url.startsWith("http"))
+	{
+		chrome.tabs.executeScript(tab.id,
+			{
+				file: "js/aside-script.js",
+				allFrames: true,
+				runAt: "document_idle"
+			});
+	}
+	else if (tab.url.startsWith("chrome-extension") && tab.url.endsWith("TabsAside.html"))
+		chrome.tabs.remove(tab.id);
+	else
+	{
+		chrome.tabs.create({
+			url: chrome.extension.getURL("TabsAside.html"),
+			active: true
+		});
+	}
+});
+
+chrome.tabs.onActivated.addListener(function (activeInfo)
+{
+	chrome.tabs.query({ url: chrome.extension.getURL("TabsAside.html") }, function (result)
+	{
+		if (result.length)
+			setTimeout(function ()
+			{
+				result.forEach(i => 
+				{
+					if (activeInfo.tabId != i.id)
+						chrome.tabs.remove(i.id);
+				});
+			}, 200);
+	});
+});
+
 function UpdateTheme()
 {
 	if (window.matchMedia("(prefers-color-scheme: dark)").matches)
 	{
-		chrome.browserAction.setIcon(
-		{
-			path: 
-			{
-				"128": "icons/dark/empty/128.png",
-				"48": "icons/dark/empty/48.png",
-				"32": "icons/dark/empty/32.png",
-				"16": "icons/dark/empty/16.png"
-			}
-		});
+		if (collections.length)
+			chrome.browserAction.setIcon(
+				{
+					path:
+					{
+						"128": "icons/dark/full/128.png",
+						"48": "icons/dark/full/48.png",
+						"32": "icons/dark/full/32.png",
+						"16": "icons/dark/full/16.png"
+					}
+				});
+		else
+			chrome.browserAction.setIcon(
+				{
+					path:
+					{
+						"128": "icons/dark/empty/128.png",
+						"48": "icons/dark/empty/48.png",
+						"32": "icons/dark/empty/32.png",
+						"16": "icons/dark/empty/16.png"
+					}
+				});
 	}
 	else
 	{
-		chrome.browserAction.setIcon(
-		{
-			path: 
-			{
-				"128": "icons/light/empty/128.png",
-				"48": "icons/light/empty/48.png",
-				"32": "icons/light/empty/32.png",
-				"16": "icons/light/empty/16.png"
-			}
-		});
+		if (collections.length)
+			chrome.browserAction.setIcon(
+				{
+					path:
+					{
+						"128": "icons/light/full/128.png",
+						"48": "icons/light/full/48.png",
+						"32": "icons/light/full/32.png",
+						"16": "icons/light/full/16.png"
+					}
+				});
+		else
+			chrome.browserAction.setIcon(
+				{
+					path:
+					{
+						"128": "icons/light/empty/128.png",
+						"48": "icons/light/empty/48.png",
+						"32": "icons/light/empty/32.png",
+						"16": "icons/light/empty/16.png"
+					}
+				});
 	}
 }
 
+var collections = JSON.parse(localStorage.getItem("sets"));
+if (collections == null)
+	collections = [];
+
+chrome.runtime.onMessage.addListener(function (message, sender, sendResponse)
+{
+	switch (message.command)
+	{
+		case "loadData":
+			sendResponse(collections);
+			break;
+		case "saveTabs":
+			SaveCollection();
+			break;
+		case "restoreTabs":
+			RestoreCollection(message.collectionIndex);
+			sendResponse();
+			break;
+		case "deleteTabs":
+			DeleteCollection(message.collectionIndex);
+			sendResponse();
+			break;
+		case "removeTab":
+			RemoveTab(message.collectionIndex, message.tabIndex);
+			sendResponse();
+			break;
+		case "toFavorites":
+			AddTabsToFavorites(message.collectionIndex);
+			break;
+		case "share":
+			ShareTabs(message.collectionIndex);
+			break;
+	}
+});
+
 UpdateTheme();
 chrome.windows.onCreated.addListener(UpdateTheme);
 chrome.windows.onRemoved.addListener(UpdateTheme);
@@ -45,6 +142,117 @@ chrome.tabs.onDetached.addListener(UpdateTheme);
 chrome.tabs.onAttached.addListener(UpdateTheme);
 chrome.tabs.onRemoved.addListener(UpdateTheme);
 chrome.tabs.onReplaced.addListener(UpdateTheme);
-chrome.tabs.onZoomChange.addListener(UpdateTheme);
 
-// TODO: Load saved tabs
+function SaveCollection()
+{
+	chrome.tabs.query({ currentWindow: true }, function (tabs)
+	{
+		tabs = tabs.filter(i => !i.url.startsWith("chrome-extension") && !i.url.endsWith("TabsAside.html"));
+		
+		var collection =
+		{
+			timestamp: Date.now(),
+			tabsCount: tabs.length,
+			titles: tabs.map(tab => tab.title ?? ""),
+			links: tabs.map(tab => tab.url ?? ""),
+			icons: tabs.map(tab => tab.favIconUrl ?? "")//,
+			//tumbnails: tabs.map(tab => chrome.tabs.captureVisibleTab)
+		};
+
+		var rawData;
+		if (localStorage.getItem("sets") === null)
+			rawData = [collection];
+		else
+		{
+			rawData = JSON.parse(localStorage.getItem("sets"));
+			rawData.unshift(collection);
+		}
+
+		localStorage.setItem("sets", JSON.stringify(rawData));
+
+		collections = JSON.parse(localStorage.getItem("sets"));
+
+		chrome.tabs.create({});
+		chrome.tabs.remove(tabs.map(tab => tab.id));
+	});
+
+	UpdateTheme();
+}
+
+function DeleteCollection(collectionIndex)
+{
+	collections = collections.filter(i => i != collections[collectionIndex]);
+	localStorage.setItem("sets", JSON.stringify(collections));
+
+	UpdateTheme();
+}
+
+function RestoreCollection(collectionIndex)
+{
+	collections[collectionIndex].links.forEach(i => 
+	{
+		chrome.tabs.create(
+			{
+				url: i,
+				active: false
+			});
+	});
+
+	collections = collections.filter(i => i != collections[collectionIndex]);
+	localStorage.setItem("sets", JSON.stringify(collections));
+
+	UpdateTheme();
+}
+
+function AddTabsToFavorites(collectionIndex)
+{
+	alert("Adding to favorites");
+	/*for (var i = 0; i < collections[collectionIndex].links.length; i++)
+	{
+		chrome.bookmarks.create(
+			{
+				title: collections[collectionIndex].titles[i],
+				url: collections[collectionIndex].links[i],
+			});
+	}*/
+}
+
+function ShareTabs(collectionId)
+{
+	alert("Sharing");
+}
+
+function RemoveTab(collectionIndex, tabIndex)
+{
+	var set = collections[collectionIndex];
+	if (--set.tabsCount < 1)
+	{
+		collections = collections.filter(i => i != set);
+		localStorage.setItem("sets", JSON.stringify(collections));
+
+		UpdateTheme();
+		return;
+	}
+
+	var titles = [];
+	var links = [];
+	var icons = [];
+
+	for (var i = set.links.length - 1; i >= 0; i--)
+	{
+		if (i == tabIndex)
+			continue;
+
+		titles.unshift(set.titles[i]);
+		links.unshift(set.links[i]);
+		icons.unshift(set.icons[i]);
+	}
+
+	set.titles = titles;
+	set.links = links;
+	set.icons = icons;
+
+	localStorage.setItem("sets", JSON.stringify(collections));
+
+	UpdateTheme();
+}