Added selective opening of tabs and added new or current session opening of tabs.
|
@ -4,8 +4,9 @@ Easy Session Manager allows you to manage your Firefox session by backing up or
|
||||||
# Download
|
# Download
|
||||||
https://addons.mozilla.org/en-US/firefox/addon/easy-session-manager/
|
https://addons.mozilla.org/en-US/firefox/addon/easy-session-manager/
|
||||||
|
|
||||||
# Version: 0.1.4
|
# Version: 0.1.6
|
||||||
Added on save grab selected item name if applicable. Fixed clearing of selected item.
|
Added selective opening of tabs.
|
||||||
|
Added new or current session opening of tabs.
|
||||||
|
|
||||||
# Images
|
# Images
|
||||||
![1 Default interface with no sessions. ](images/pic1.png)
|
![1 Default interface with no sessions. ](images/pic1.png)
|
||||||
|
|
BIN
images/pic1.png
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 37 KiB |
BIN
images/pic2.png
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 43 KiB |
BIN
images/pic3.png
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 47 KiB |
BIN
images/pic4.png
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 46 KiB |
BIN
images/pic5.png
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 50 KiB |
BIN
images/pic6.png
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 46 KiB |
BIN
images/pic7.png
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 46 KiB |
After Width: | Height: | Size: 180 KiB |
|
@ -7,42 +7,44 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<center>
|
<center>
|
||||||
<button type="button" name="import">
|
<input type="image" name="save" src="../images/icons/save.png" title="Save..." alt="Save" />
|
||||||
Import <img class="icon" src="../images/icons/import.png" alt="Import JSON"/>
|
<input type="image" name="edit" src="../images/icons/edit.png" title="Edit..." alt="Edit" />
|
||||||
<input id="inputId" type="file" />
|
<input type="image" name="delete" src="../images/icons/delete.png" title="Delete..." alt="Delete" />
|
||||||
</button>
|
|
||||||
|
|
||||||
<button type="button" name="save">
|
<br/><br/>
|
||||||
Save <img class="icon" src="../images/icons/save.png" alt="Save Image"/>
|
<input id="replaceTabs" name="replaceTabs" type="checkbox" checked />
|
||||||
</button>
|
<label for="replaceTabs">Replace Current Tabs</label>
|
||||||
<button type="button" name="download">
|
<input id="selectiveOpen" name="selectiveOpen" type="checkbox" />
|
||||||
Download <img class="icon" src="../images/icons/download.png" alt="Download Image"/>
|
<label for="selectiveOpen">Selective Open</label>
|
||||||
</button>
|
|
||||||
|
|
||||||
<div id="savedSessions">
|
<div id="savedSessions">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span id="allertMessage">
|
<input type="image" name="import" src="../images/icons/import.png" title="Import..." alt="Import" />
|
||||||
|
<input type="image" name="donate" src="../images/icons/donate.png" title="Donate..." alt="Donate" />
|
||||||
</span>
|
<input type="image" name="download" id="dl" src="../images/icons/download.png" title="Download..." alt="Download" />
|
||||||
|
|
||||||
<button type="button" name="edit">
|
|
||||||
Edit <img class="icon" src="../images/icons/edit.png" alt="Edit Image"/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button type="button" name="delete">
|
|
||||||
Delete <img class="icon" src="../images/icons/delete.png" alt="Delete Image"/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</center>
|
</center>
|
||||||
|
|
||||||
|
<template id="ulTemplate">
|
||||||
|
<h2 class="ulHeader"></h2>
|
||||||
|
<input type="checkbox" id="selectAll" checked="true" />
|
||||||
|
<label for="selectAll" title="Select All">Select All</label>
|
||||||
|
<ul class="collection">
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template id="liTemplate">
|
||||||
|
<li>
|
||||||
|
<input type="checkbox" id="" name="" checked="true" />
|
||||||
|
<label for="" title=""></label>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<a id="downloadAnchorElem" href="#"></a>
|
<a id="downloadAnchorElem" href="#"></a>
|
||||||
|
|
||||||
|
|
||||||
<script src="../scripts/events.js"></script>
|
<script src="../scripts/events.js"></script>
|
||||||
<script src="../scripts/sweetalert.js"></script>
|
<script src="../scripts/sweetalert.js"></script>
|
||||||
<script src="../scripts/sessionManager.js"></script>
|
<script src="../scripts/sessionManager.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,45 +1,150 @@
|
||||||
let selectedItem = null;
|
let selectedItem = null;
|
||||||
|
|
||||||
|
const toggleSelect = (name) => {
|
||||||
|
let checkboxes = document.getElementsByName(name);
|
||||||
|
for (var i = 0; i < checkboxes.length; i++) {
|
||||||
|
checkboxes[i].checked = !checkboxes[i].checked;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
document.addEventListener("click", (e) => {
|
document.addEventListener("click", (e) => {
|
||||||
if (e.button == 0) { // Left click
|
if (e.button == 0) { // Left click
|
||||||
let name = e.target.name;
|
let name = e.target.name;
|
||||||
if (e.target.tagName == "LI") {
|
|
||||||
|
if (/(download|delete|edit)/.test(name)) {
|
||||||
if (selectedItem) {
|
if (selectedItem) {
|
||||||
if (selectedItem == e.target && selectedItem.className == "selected") {
|
|
||||||
selectedItem.setAttribute("class", "");
|
|
||||||
selectedItem = null;
|
|
||||||
} else {
|
|
||||||
selectedItem.setAttribute("class", "");
|
|
||||||
selectedItem = e.target;
|
|
||||||
selectedItem.setAttribute("class", "selected");
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
selectedItem = e.target;
|
|
||||||
selectedItem.setAttribute("class", "selected");
|
|
||||||
}
|
|
||||||
} else if (name == "save") {
|
|
||||||
saveSession(selectedItem);
|
|
||||||
} else if (name == "import") {
|
|
||||||
importSession();
|
|
||||||
} else if (selectedItem) {
|
|
||||||
if (name == "download")
|
if (name == "download")
|
||||||
downloadSession(selectedItem);
|
downloadSession(selectedItem);
|
||||||
else if (name == "delete")
|
else if (name == "delete")
|
||||||
deleteFromStorage(selectedItem);
|
deleteFromStorage(selectedItem);
|
||||||
else if (name == "edit")
|
else if (name == "edit")
|
||||||
editSession(selectedItem);
|
editSession(selectedItem);
|
||||||
} else if (/(download|delete|edit)/.test(name)) {
|
} else {
|
||||||
swal("Select a session first...", {
|
swal("Select a session first...", {
|
||||||
icon: "warning",
|
icon: "warning",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
} else if (name == "save") {
|
||||||
|
saveSession(selectedItem);
|
||||||
|
} else if (name == "import") {
|
||||||
|
importSession();
|
||||||
|
} else if (name == "donate") {
|
||||||
|
var dlAnchorElem = document.getElementById('downloadAnchorElem');
|
||||||
|
dlAnchorElem.setAttribute("href", "https://www.paypal.me/ITDominator");
|
||||||
|
dlAnchorElem.setAttribute("_blank", "");
|
||||||
|
dlAnchorElem.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.target.tagName == "LI" && e.target.className.includes("sessionLI")) {
|
||||||
|
if (selectedItem) {
|
||||||
|
if (selectedItem == e.target && selectedItem.className == "sessionLI selected") {
|
||||||
|
selectedItem.setAttribute("class", "sessionLI");
|
||||||
|
selectedItem = null;
|
||||||
|
} else {
|
||||||
|
selectedItem.setAttribute("class", "sessionLI");
|
||||||
|
selectedItem = e.target;
|
||||||
|
selectedItem.setAttribute("class", "sessionLI selected");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
selectedItem = e.target;
|
||||||
|
selectedItem.setAttribute("class", "sessionLI selected");
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
document.addEventListener("dblclick", (e) => {
|
document.addEventListener("dblclick", (e) => {
|
||||||
if (e.button == 0) { // Left click
|
if (e.button == 0) { // Left click
|
||||||
if (e.target.tagName == "LI") {
|
if (e.target.tagName == "LI" && e.target.className.includes("sessionLI")) {
|
||||||
loadSession(e.target.innerHTML.trim());
|
selectedItem = e.target;
|
||||||
|
selectedItem.setAttribute("class", "sessionLI selected");
|
||||||
|
try {
|
||||||
|
let id = e.target.innerHTML.trim();
|
||||||
|
storage.get(id).then(storageResults => {
|
||||||
|
let json = JSON.parse(storageResults[id]);
|
||||||
|
let keys = Object.keys(json);
|
||||||
|
let keysLength = Object.keys(json).length;
|
||||||
|
let replaceTabs = document.getElementsByName("replaceTabs")[0];
|
||||||
|
let selectiveOpen = document.getElementsByName("selectiveOpen")[0];
|
||||||
|
|
||||||
|
if (!selectiveOpen.checked) {
|
||||||
|
loadSession(json, replaceTabs.checked);
|
||||||
|
} else {
|
||||||
|
let container = document.createElement("DIV");
|
||||||
|
let ulTemplate = document.querySelector('#ulTemplate');
|
||||||
|
let liTemplate = document.querySelector('#liTemplate');
|
||||||
|
|
||||||
|
for (let i = 0; i < keysLength; i++) {
|
||||||
|
let ulClone = document.importNode(ulTemplate.content, true);
|
||||||
|
let ulTag = ulClone.querySelector('.collection');
|
||||||
|
let h2Txt = document.createTextNode("Window: " + (i + 1));
|
||||||
|
let store = json[keys[i]];
|
||||||
|
let j = 0;
|
||||||
|
|
||||||
|
store.forEach(tab => {
|
||||||
|
let liClone = document.importNode(liTemplate.content, true);
|
||||||
|
let inptTag = liClone.querySelector("input");
|
||||||
|
let lblTag = liClone.querySelector("label");
|
||||||
|
let labelTxt = document.createTextNode(tab.link);
|
||||||
|
inptTag.id = "Win" + i + "Li" + j;
|
||||||
|
lblTag.htmlFor = "Win" + i + "Li" + j;
|
||||||
|
lblTag.title = tab.link;
|
||||||
|
inptTag.setAttribute("name", "Win" + i);
|
||||||
|
lblTag.appendChild(labelTxt);
|
||||||
|
ulTag.appendChild(liClone);
|
||||||
|
j++;
|
||||||
|
});
|
||||||
|
|
||||||
|
container.id = "editSelectionContainer";
|
||||||
|
ulClone.querySelector('#selectAll')
|
||||||
|
.addEventListener("click", function () {
|
||||||
|
toggleSelect("Win" + i);
|
||||||
|
});
|
||||||
|
ulClone.querySelector('.ulHeader').appendChild(h2Txt);
|
||||||
|
container.appendChild(ulClone);
|
||||||
|
}
|
||||||
|
|
||||||
|
swal("Selective Open", {
|
||||||
|
content: container,
|
||||||
|
buttons: true,
|
||||||
|
}).then((willOpen) => {
|
||||||
|
if (willOpen) {
|
||||||
|
let sessionData = {};
|
||||||
|
let ulTags = container.querySelectorAll("ul");
|
||||||
|
|
||||||
|
for (let i = 0; i < keysLength; i++) {
|
||||||
|
let links = [];
|
||||||
|
|
||||||
|
for (var ii = 0; ii < ulTags[i].children.length; ii++) {
|
||||||
|
let li = ulTags[i].children[ii];
|
||||||
|
if (li.children[0].checked) {
|
||||||
|
links.push(
|
||||||
|
{"link" : li.children[1].title.trim()}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (links.length > 0) {
|
||||||
|
sessionData[keys[i]] = links;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
json = sessionData;
|
||||||
|
keysLength = Object.keys(json).length;
|
||||||
|
if (keysLength > 0) {
|
||||||
|
loadSession(json, replaceTabs.checked);
|
||||||
|
} else {
|
||||||
|
swal("Canceled operation; no tabs were selected...", {
|
||||||
|
icon: "warning",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -172,7 +172,8 @@ const downloadSession = (elm = null) => {
|
||||||
swal("Download Session?", {
|
swal("Download Session?", {
|
||||||
content: pTag,
|
content: pTag,
|
||||||
buttons: true,
|
buttons: true,
|
||||||
}).then((willDl) => { if (willDl) {
|
}).then((willDl) => {
|
||||||
|
if (willDl) {
|
||||||
if (chkBoxTag.checked) {
|
if (chkBoxTag.checked) {
|
||||||
fileName = "session:" + id + ":" +
|
fileName = "session:" + id + ":" +
|
||||||
new Date().toLocaleString().split(',')[0].replace(/\//g, "-") + ".json";
|
new Date().toLocaleString().split(',')[0].replace(/\//g, "-") + ".json";
|
||||||
|
@ -183,24 +184,23 @@ const downloadSession = (elm = null) => {
|
||||||
let dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json));
|
let dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json));
|
||||||
dlAnchorElem.setAttribute("href", dataStr);
|
dlAnchorElem.setAttribute("href", dataStr);
|
||||||
dlAnchorElem.setAttribute("download", fileName);
|
dlAnchorElem.setAttribute("download", fileName);
|
||||||
|
dlAnchorElem.setAttribute("target", "");
|
||||||
dlAnchorElem.click();
|
dlAnchorElem.click();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const loadSession = (id = null) => {
|
const loadSession = (json = null, replaceTabs = false) => {
|
||||||
console.log("Loading session...");
|
console.log("Loading session...");
|
||||||
try {
|
|
||||||
storage.get(id).then(storageResults => {
|
|
||||||
let json = JSON.parse(storageResults[id]);
|
|
||||||
let keys = Object.keys(json);
|
let keys = Object.keys(json);
|
||||||
let keysLength = Object.keys(json).length;
|
let keysLength = Object.keys(json).length;
|
||||||
|
try {
|
||||||
browser.windows.getAll().then(windows => {
|
browser.windows.getAll().then(windows => {
|
||||||
windowSys.getCurrent({populate: true}).then(currentWindow => {
|
windowSys.getCurrent({populate: true}).then(currentWindow => {
|
||||||
let wasCurrentTabId = null;
|
let wasCurrentTabId = null;
|
||||||
|
|
||||||
|
if (replaceTabs) { // Clear all windows but main then load...
|
||||||
// Clear all non-current windows and then current window's tabs
|
// Clear all non-current windows and then current window's tabs
|
||||||
for (let i = 0; i < windows.length; i++) {
|
for (let i = 0; i < windows.length; i++) {
|
||||||
if (currentWindow.id != windows[i].id) {
|
if (currentWindow.id != windows[i].id) {
|
||||||
|
@ -223,11 +223,25 @@ const loadSession = (id = null) => {
|
||||||
store.forEach(tab => {
|
store.forEach(tab => {
|
||||||
browser.tabs.create({ url: tab.link });
|
browser.tabs.create({ url: tab.link });
|
||||||
});
|
});
|
||||||
|
browser.tabs.remove(wasCurrentTabId);
|
||||||
|
|
||||||
// If more than one window, load tabs to new windows.
|
// If more than one window, load tabs to new windows.
|
||||||
browser.tabs.remove(wasCurrentTabId);
|
|
||||||
if (keysLength > 1) {
|
if (keysLength > 1) {
|
||||||
for (let i = 1; i < keysLength; i++) {
|
windowMaker(1, keysLength, keys, json)
|
||||||
|
}
|
||||||
|
} else { // Load into new windows...
|
||||||
|
if (keysLength > 0) {
|
||||||
|
windowMaker(0, keysLength, keys, json)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} catch (e) { console.log(e); }
|
||||||
|
}
|
||||||
|
|
||||||
|
const windowMaker = (i, keysLength, keys, json) => {
|
||||||
|
for (; i < keysLength; i++) {
|
||||||
let store = json[keys[i]];
|
let store = json[keys[i]];
|
||||||
let urls = [];
|
let urls = [];
|
||||||
|
|
||||||
|
@ -237,11 +251,6 @@ const loadSession = (id = null) => {
|
||||||
windowSys.create({ url: urls });
|
windowSys.create({ url: urls });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} catch (e) { console.log(e); }
|
|
||||||
}
|
|
||||||
|
|
||||||
const getSavedSessionIDs = () => {
|
const getSavedSessionIDs = () => {
|
||||||
console.log("Getting saved sessions...");
|
console.log("Getting saved sessions...");
|
||||||
|
@ -255,8 +264,9 @@ const getSavedSessionIDs = () => {
|
||||||
|
|
||||||
const appendToSavedSessionsList = (enteryName) => {
|
const appendToSavedSessionsList = (enteryName) => {
|
||||||
let liTag = document.createElement("LI");
|
let liTag = document.createElement("LI");
|
||||||
let text = document.createTextNode(enteryName);
|
let text = document.createTextNode(enteryName.trim());
|
||||||
liTag.setAttribute("name", enteryName);
|
liTag.setAttribute("name", enteryName.trim());
|
||||||
|
liTag.className = "sessionLI";
|
||||||
liTag.append(text);
|
liTag.append(text);
|
||||||
document.getElementById("savedSessions").append(liTag);
|
document.getElementById("savedSessions").append(liTag);
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,36 +6,51 @@ body {
|
||||||
|
|
||||||
ul, li { list-style: none; }
|
ul, li { list-style: none; }
|
||||||
|
|
||||||
li {
|
input[type=image] {
|
||||||
background-color: #0a1827;
|
width: 2.5em;
|
||||||
color: #ffffff;
|
height: 2.5em;
|
||||||
margin: 1em 0em;
|
padding: 0.4em;
|
||||||
padding: 1.5em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
li:hover {
|
|
||||||
background-color: #1e4573;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type=image]:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #a3b83b;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
#savedSessions {
|
#savedSessions {
|
||||||
height: 445px;
|
height: 365px;
|
||||||
min-height: 445px;
|
min-height: 365x;
|
||||||
max-height: 445px;
|
max-height: 365px;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
margin-bottom: 0.6em;
|
||||||
|
margin-top: 0.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editSelectionContainer {
|
||||||
|
height: 350px;
|
||||||
|
min-height: 350x;
|
||||||
|
max-height: 350px;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editSelectionContainer > ul > li {
|
||||||
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
#inputId {
|
#inputId {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#selectAll {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
#lableTag {
|
#lableTag {
|
||||||
top: 48%;
|
top: 48%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
@ -59,6 +74,19 @@ button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sessionLI {
|
||||||
|
background-color: #0a1827;
|
||||||
|
color: #ffffff;
|
||||||
|
margin: 1em 0em;
|
||||||
|
padding: 1.5em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sessionLI:hover {
|
||||||
|
background-color: #1e4573;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
background-color: #a3b83b;
|
background-color: #a3b83b;
|
||||||
box-shadow: 0px 5px 5px 5px #444444;
|
box-shadow: 0px 5px 5px 5px #444444;
|
||||||
|
|