Added selective opening of tabs and added new or current session opening of tabs.

This commit is contained in:
Maxim Stewart 2019-04-05 22:36:25 -05:00
parent 8ea3c95100
commit 869b96a261
13 changed files with 238 additions and 92 deletions

View File

@ -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)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 46 KiB

BIN
src/images/icons/donate.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

View File

@ -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>

View File

@ -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);
}
} }
} }
}); });

View File

@ -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 = [];
@ -236,11 +250,6 @@ const loadSession = (id = null) => {
} }
windowSys.create({ url: urls }); windowSys.create({ url: urls });
} }
}
});
});
});
} catch (e) { console.log(e); }
} }
const getSavedSessionIDs = () => { const getSavedSessionIDs = () => {
@ -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);
} }

View File

@ -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;