mirror of
https://github.com/XFox111/TabsAsideExtension.git
synced 2026-04-22 07:58:01 +03:00
Michael Gordeev
333 lines
8.7 KiB
JavaScript
333 lines
8.7 KiB
JavaScript
if (document.location.protocol == "chrome-extension:")
|
|
InitializeStandalone();
|
|
else
|
|
{
|
|
setTimeout(function ()
|
|
{
|
|
var pane = document.querySelector(".tabsAside.pane");
|
|
|
|
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;
|
|
|
|
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()
|
|
{
|
|
pane = document.querySelector(".tabsAside.pane");
|
|
|
|
if (window.matchMedia("(prefers-color-scheme: dark)").matches)
|
|
{
|
|
pane.parentElement.setAttribute("darkmode", "");
|
|
document.querySelector("#icon").href = "icons/dark/empty/16.png";
|
|
}
|
|
|
|
document.querySelector(".tabsAside .saveTabs").onclick = SetTabsAside;
|
|
|
|
document.querySelectorAll(".tabsAside.pane > header nav button").forEach(i =>
|
|
{
|
|
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'></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...'></button>" +
|
|
"<nav>" +
|
|
"<button>Add tabs to favorites</button>" +
|
|
"<button>Share tabs</button>" +
|
|
"</nav>" +
|
|
"</div>" +
|
|
"<button title='Remove collection'></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 () {
|
|
chrome.runtime.sendMessage(
|
|
{
|
|
command: "openTab",
|
|
url: i.getAttribute("value")
|
|
}
|
|
);
|
|
};
|
|
})
|
|
|
|
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
|