itdominator/Easy-Session-Manager
1
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

Removedc SweetAlerts; using Mustard UI

Browse Source
This commit is contained in:
Maxim Stewart
2020-02-29 15:30:44 -06:00
parent c27108e3df
commit 8591ce8905
20 changed files with 748 additions and 3382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -4,8 +4,8 @@ Easy Session Manager allows you to manage your Firefox session by backing up or
# Download
https://addons.mozilla.org/en-US/firefox/addon/easy-session-manager/
# Version: 0.2.2.0
Refactored code and added tab count per session.
# Version: 0.2.1.4
Removed SweetAlerts and am using Mustard UI
# Images
![1 Default interface with no sessions. ](images/pic1.png)

BIN
images/pic1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
images/pic2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
images/pic3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 44 KiB

BIN
images/pic4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
images/pic5.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 30 KiB

BIN
images/pic6.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 43 KiB

BIN
images/pic7.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 32 KiB

2
src/manifest.json
View File

@@ -1,7 +1,7 @@
{
"manifest_version": 2,
"name": " Easy Session Manager",
"version": "0.2.2.2",
"version": "0.2.2.4",
"description": "Easy Session Manager allows you to manage your Firefox session by backing up or loading your saved sessions.",
"applications": {

68
src/pages/import.html
View File

@@ -4,32 +4,74 @@
<meta charset="utf-8">
<title>Easy Session Manager Import</title>
<link rel="shortcut icon" href="../images/icons/import.png">
<!-- Mustard UI CSS -->
<link rel="stylesheet" href="../styles/libs/mustard-ui.min.css"/>
<!-- App CSS -->
<link rel="stylesheet" href="../styles/styles.css"/>
<style media="screen">
body, html {
width: 100%;
height: 100%;
padding: 0em;
margin: 0em;
}
body, html {
width: 100%;
height: 100%;
padding: 0em;
margin: 0em;
}
</style>
</head>
<body>
<div class="container" name="import">
<div class="download-container" name="import">
<h1 id="lableTag">Select File</h1>
<input id="inputId" type="file" enctype='multipart/form-data' multiple accept="application/json"/>
<input id="inputId" type="file" enctype='multipart/form-data' accept="application/json"/>
<!-- FIXME: Broke multiple imports because of event setup. Need a way to popup modals and process through linearly -->
<!-- <input id="inputId" type="file" enctype='multipart/form-data' multiple accept="application/json"/> -->
</div>
<span id="allertMessage">
<!-- Message Gutter -->
<div id="master-gutter" class="row">
<div class="col">
<div id="message-gutter" class="scroller">
</div>
</div>
</div>
<!-- Save Modal -->
<div id="saveModal" class="modal-mask" style="display:none; opacity: 0%;">
<div class="modal">
<div class="modal-head">
<p class="modal-title">Save - Allowed: a-z, A-Z, 0-9, -, _</p>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<p>What is this session's name?</p>
<p name="toSaveImportErrMessage"></p>
<input type="text" name="toSaveNameImport" value="">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div id="modal-gutter" class="scroller">
</div>
</div>
</div>
<div class="modal-footer align-right">
<button class="button-secondary" name="closeImportSave">Close</button>
<button class="button-primary" name="importSave">OK</button>
</div>
</div>
</div>
</span>
<script src="../scripts/libs//sweetalert2.all.js"></script>
<script src="../scripts/background.js"></script>
</body>
</html>

243
src/pages/sessionManager.html
View File

@@ -2,50 +2,229 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Mustard UI CSS -->
<link rel="stylesheet" href="../styles/libs/mustard-ui.min.css"/>
<!-- App CSS -->
<link rel="stylesheet" href="../styles/styles.css"/>
</head>
<body>
<a id="downloadAnchorElem" href="#"></a>
<center>
<input type="image" name="save" src="../images/icons/save.png" title="Save..." alt="Save" />
<input type="image" name="edit" src="../images/icons/edit.png" title="Edit..." alt="Edit" />
<input type="image" name="delete" src="../images/icons/delete.png" title="Delete..." alt="Delete" />
<!-- Main Content -->
<div class="row">
<div class="col col-sm-3">
<ul id="master-left-column" class="menu">
<br/>
<li><button name="saveModalLauncher" class="button-primary" type="button">Save</button></li>
<li><button name="editModalLauncher" class="button-primary" type="button">Edit</button></li>
<li><button name="deleteModalLauncher" class="button-danger" type="button">Delete</button></li>
<br/><br/><br/><br/>
<li><button name="import" class="button-primary" type="button">Import</button></li>
<li><button name="downloadModalLauncher" class="button-primary" type="button">Download</button></li>
<li><button name="donate" class="button-warning" type="button">Donate</button></li>
</ul>
</div>
<br/><br/>
<input id="replaceTabs" name="replaceTabs" type="checkbox" />
<label for="replaceTabs">Replace Current Tabs</label>
<input id="selectiveOpen" name="selectiveOpen" type="checkbox" checked />
<label for="selectiveOpen">Selective Open</label>
<div id="savedSessions">
<div id="master-right-column" class="col col-sm-9">
<div class="row">
<div class="col">
<label for="replaceTabs">Replace Current Tabs
<input id="replaceTabs" name="replaceTabs" type="checkbox" />
</label>
<label for="selectiveOpen">Selective Open
<input id="selectiveOpen" name="selectiveOpen" type="checkbox" checked />
</label>
</div>
</div>
<hr/>
<div class="row">
<div class="col">
<div id="savedSessions" class="scroller">
</div>
</div>
</div>
</div>
</div>
<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" />
<input type="image" name="download" id="dl" src="../images/icons/download.png" title="Download..." alt="Download" />
</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>
<!-- Message Gutter -->
<div id="master-gutter" class="row">
<div class="col">
<div id="message-gutter" class="scroller">
</div>
</div>
</div>
<!-- Modals -->
<!-- Save Modal -->
<div id="saveModal" class="modal-mask" style="display:none; opacity: 0%;">
<div class="modal">
<div class="modal-head">
<p class="modal-title">Save - Allowed: a-z, A-Z, 0-9, -, _</p>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<div id="saveList" class="row scroller">
</div>
<p name="toSaveErrMessage"></p>
<input type="text" name="toSaveName" value="">
</div>
</div>
</div>
<div class="modal-footer align-right">
<button class="button-secondary" name="closeSave">Close</button>
<button class="button-primary" name="save">OK</button>
</div>
</div>
</div>
<!-- Edit Modal -->
<div id="editModal" class="modal-mask" style="display:none; opacity: 0%;">
<div class="modal">
<div class="modal-head">
<p class="modal-title">Edit - Allowed: a-z, A-Z, 0-9, -, _</p>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<div id="editList" class="row scroller">
</div>
<p name="toEditErrMessage"></p>
<label>Create New Session<input type="checkbox" name="toEditNewSession"></label>
<input type="text" name="toEditName" value="">
</div>
</div>
</div>
<div class="modal-footer align-right">
<button class="button-secondary" name="closeEdit">Close</button>
<button class="button-primary" name="edit">OK</button>
</div>
</div>
</div>
<!-- Delete Modal -->
<div id="deleteModal" class="modal-mask" style="display:none; opacity: 0%;">
<div class="modal">
<div class="modal-head">
<p class="modal-title">Are you sure?</p>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<p>
Do you wish to delete session:&nbsp;&nbsp;<label name="toDeleteName"></label>&nbsp;&nbsp;?
</p>
</div>
</div>
</div>
<div class="modal-footer align-right">
<button class="button-primary" name="closeDelete">Cancel</button>
<button class="button-danger" name="delete">Delete</button>
</div>
</div>
</div>
<!-- Download Modal -->
<div id="downloadModal" class="modal-mask" style="display:none; opacity: 0%;">
<div class="modal">
<div class="modal-head">
<p class="modal-title">Download - Allowed: a-z, A-Z, 0-9, -, _</p>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<!-- Field Grouping -->
<div class="form-control-group">
<div class="form-control">
<label>Append Date
<input type="checkbox" name="appendDateDlModal">
</label>
</div>
<div class="form-control grow-2x">
<input type="text" name="toDownloadName" value="">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer align-right">
<button class="button-secondary" name="closeDownload">Cancel</button>
<button class="button-primary" name="download">OK</button>
</div>
</div>
</div>
<!-- Load Modal -->
<div id="loadModal" class="modal-mask" style="display:none; opacity: 0%;">
<div class="modal">
<div class="modal-head">
<p class="modal-title">Selective Open</p>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<div id="loadList" class="row scroller">
</div>
</div>
</div>
</div>
<div class="modal-footer align-right">
<button class="button-secondary" name="closeLoad">Close</button>
<button class="button-primary" name="load">OK</button>
</div>
</div>
</div>
<!-- Confirm Overwrite Modal -->
<div id="confModal" class="modal-mask" style="display:none; opacity: 0%;">
<div class="modal">
<div class="modal-head">
<p class="modal-title">Replace?</p>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<p>Found a session with that name! Do you want to replace it?</p>
</div>
</div>
</div>
<div class="modal-footer align-right">
<button class="button-primary" name="closeConfirm">Cancel</button>
<button class="button-danger" name="confirm">OK</button>
</div>
</div>
</div>
<!-- Templates -->
<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>
<script src="../scripts/libs//sweetalert2.all.js"></script>
<script src="../scripts/utils.js"></script>
<script src="../scripts/actions.js"></script>
<script src="../scripts/session-manager.js"></script>
<script src="../scripts/events.js"></script>
</body>
</html>

47
src/scripts/actions.js
View File

@@ -1,10 +1,3 @@
const messageWindow = (type = "warning", message = "No message passed in...") => {
Swal.fire({
text: message,
icon: type
});
}
const getSavedSessionIDs = () => {
storageApi.get(null).then((results) => {
const sessions = Object.keys(results);
@@ -23,22 +16,10 @@ const saveToStorage = (name, data, action = "undefined", willReplace = false, sv
try {
const json = JSON.parse(results[name]); // If a session is found
if (!willReplace) {
Swal.fire({
title: "Replace?",
text: "Found a session with that name! Do you want to replace it?",
icon: "warning",
showCloseButton: true,
showCancelButton: true,
}).then((willReplace) => {
if (willReplace.value) {
storageApi.set({[name]: data});
sveElm.innerText = size + " | " + name;
sveElm.name = name;
messageWindow("warning", "Overwrote session...");
} else {
messageWindow("warning", "Canceled " + action + "...");
}
});
holderName = name;
holderData = data;
holderSize = size;
showModal("confModal");
} else {
sveElm.innerText = size + " | " + name;
sveElm.name = name;
@@ -59,23 +40,11 @@ const saveToStorage = (name, data, action = "undefined", willReplace = false, sv
}
const deleteFromStorage = (elm = null, name = null) => {
Swal.fire({
title: "Are you sure?",
text: "Do you wish to delete session:\n" + name + "?",
icon: "warning",
showCloseButton: true,
showCancelButton: true,
}).then((willDelete) => {
if (willDelete.value) {
storageApi.remove(name).then(() => {
elm.parentElement.removeChild(elm);
});
selectedItem = null; // reset selectedItem
messageWindow("success", "Deleted session successfully...");
} else {
messageWindow("warning", "Canceled deletion...");
}
storageApi.remove(name).then(() => {
elm.parentElement.removeChild(elm);
});
selectedItem = null; // reset selectedItem
messageWindow("success", "Deleted session successfully...");
}
const windowMaker = (i, keysLength, keys, json) => {

151
src/scripts/background.js
View File

@@ -1,79 +1,132 @@
const message1 = "What is this session's name? Allowed: a-z, A-Z, -, _";
const message2 = "Name too long or none provided; or, unacceptable character used.";
const regexp = /^[a-zA-Z0-9-_]+$/; // Alphanumeric, dash, underscore
const messageWindow = (type = "warning", message = "No message passed in...") => {
Swal.fire({
text: message,
icon: type
});
let data = null;
const prePprocessor = (obj, enteryName = '', message = "") => {
let inputTag = document.getElementsByName("toSaveNameImport")[0];
inputTag.value = enteryName.replace(/ /g, "_");
data = obj.target.result;
document.getElementsByName("toSaveImportErrMessage")[0].innerText = message;
}
const processor = (obj, enteryName = '', message = message1) => {
let data = obj.target.result;
let inputTag = document.createElement("INPUT");
let pTag = document.createElement("P");
let brTag = document.createElement("BR");
let textTag = document.createTextNode(message);
const processor = () => {
let inputTag = document.getElementsByName("toSaveNameImport")[0];
enteryName = inputTag.value.replace(/ /g, "_");
inputTag.value = enteryName;
pTag.append(textTag);
pTag.appendChild(brTag);
pTag.appendChild(inputTag);
if (enteryName.length < 0 || enteryName.length > 54 || enteryName.search(regexp) == -1) {
messageWindow("danger", message2, "modal-gutter");
// prePprocessor(obj, "", message2);
return ;
}
Swal.fire({
title: "Session Name:",
text: message,
html: pTag,
showCloseButton: true,
showCancelButton: true,
customClass: 'swal-modal',
}).then((result) => {
if (result.value) {
enteryName = inputTag.value.replace(/ /g, "_");
if (enteryName.length < 0 || enteryName.length > 54 || enteryName.search(regexp) == -1) {
processor(obj, "", "Allowed: a-z, A-Z, 0-9, -, _ Please try again...\nName too long or none provided; or, unacceptable character used.");
return ;
}
try {
console.log("Importing session...");
JSON.parse(data); // See if parsing fails and throw error
browser.storage.local.set({[enteryName]: data});
messageWindow("success", "Imported file successfully.");
} catch (e) {
messageWindow("error", "Failed to import data. Not a JSON parsable file.");
return ;
}
} else {
messageWindow("warning", "Canceled import.");
}
});
try {
console.log("Importing session...");
JSON.parse(data); // See if parsing fails and throw error
browser.storage.local.set({[enteryName]: data});
messageWindow("success", "Imported file successfully.");
hideModal();
} catch (e) {
hideModal();
messageWindow("error", "Failed to import data. Not a JSON parsable file.");
return ;
}
};
// Get files after being chosen
document.getElementById("inputId").onchange = (e) => {
let size = e.target.files.length;
let fileArry = e.target.files;
// Loop throughg the chosen files...
for (var i = 0; i < size; i++) {
let reader = new FileReader();
let name = fileArry[i].name;
name = name.split(".")[0];
reader.onloadend = (obj) => { processor(obj, name); };
reader.onloadend = (obj) => {
prePprocessor(obj, name);
showModal();
};
if (fileArry[i].type == "application/json")
reader.readAsText(fileArry[i], {encoding: "string"});
}
};
// Bring up file selector...
document.addEventListener("click", (e) => {
if (e.button == 0) { // Left click
if (e.target.className == "container") {
const target = e.target;
const action = target.name;
if (target.className.includes("container")) {
document.getElementById("inputId").click();
} else if (action == "importSave") {
processor();
}
}
});
const showModal = async (modalID = "saveModal") => {
tween(1600, "up", modalID); // in miliseconds
}
const hideModal = (modalID = "saveModal") => {
tween(1600, "down", modalID); // in miliseconds
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const tween = async (miliseconds, direction, modalID) => {
const elm = document.getElementById(modalID);
const timeStep = 1000 / miliseconds;
const steps = timeStep * 100
if (direction == "up") { // Go up
elm.style.display = "";
// elm.style.opacity = "1";
for (var i = 1; i <= steps; i++) {
await sleep(timeStep);
elm.style.opacity = i/steps;
}
} else { // Go down
for (var i = steps; i > 1; i--) {
await sleep(timeStep);
elm.style.opacity = i/steps;
}
// elm.style.opacity = "0";
elm.style.display = "none";
}
}
const messageWindow = (type = "warning", message = "No message passed in...", target = "") => {
let pTag = document.createElement("P");
let text = document.createTextNode(message);
let gutter = document.getElementById("message-gutter");
if (target !== "") {
gutter = document.getElementById(target);
}
pTag.className = "alert alert-" + type;
pTag.appendChild(text);
gutter.prepend(pTag);
setTimeout(function () {
clearChildNodes(gutter);
}, 3200);
}
const clearChildNodes = (parent) => {
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
}

69
src/scripts/events.js
View File

@@ -2,8 +2,8 @@ getSavedSessionIDs();
document.addEventListener("click", (e) => {
if (e.button == 0) { // Left click
const target = e.target;
const action = target.name;
const target = e.target;
const action = target.name;
// Set selection first before doing any actions...
if (target.tagName == "LI" && target.className.includes("sessionLI")) {
@@ -22,21 +22,69 @@ document.addEventListener("click", (e) => {
}
}
// If elm has certain action do it.
const selectedItemName = (selectedItem !== null) ? selectedItem.getAttribute("name") : "";
if (/(download|delete|edit)/.test(action)) {
// Modals
if (/(saveModalLauncher|editModalLauncher|deleteModalLauncher|downloadModalLauncher)/.test(action)) {
if (action == "saveModalLauncher") {
preSaveSession(selectedItem, selectedItemName);
showModal("saveModal");
return ;
}
if (selectedItem) {
if (action == "download")
downloadSession(selectedItemName);
else if (action == "delete")
deleteFromStorage(selectedItem, selectedItemName);
else if (action == "edit")
editSession(selectedItem, selectedItemName);
if (action == "editModalLauncher") {
preEditSession(selectedItem, selectedItemName);
showModal("editModal");
} else if (action == "deleteModalLauncher") {
document.getElementsByName("toDeleteName")[0].innerText = selectedItemName;
showModal("deleteModal");
} else if (action == "downloadModalLauncher") {
preDownloadSession(selectedItemName);
showModal("downloadModal");
}
} else {
messageWindow("warning", "Select a session first...");
}
return ;
}
if (/(closeSave|closeEdit|closeDownload|closeDelete|closeConfirm|closeLoad)/.test(action)) {
if (action.includes("closeSave")) {
hideModal("saveModal");
} else if (action.includes("closeEdit")) {
hideModal("editModal");
} else if (action.includes("closeDownload")) {
hideModal("downloadModal");
} else if (action.includes("closeDelete")) {
hideModal("deleteModal");
} else if (action.includes("closeConfirm")) {
hideModal("confModal");
} else if (action.includes("closeLoad")) {
hideModal("loadModal");
}
}
// Actions
if (/(download|delete|edit|load)/.test(action)) {
if (selectedItem) {
if (action == "download") {
downloadSession(selectedItemName);
} else if (action == "delete") {
deleteFromStorage(selectedItem, selectedItemName);
hideModal("deleteModal");
} else if (action == "edit") {
editSession(selectedItem, selectedItemName);
} else if (action == "load") {
startLoadSession();
}
}
} else if (action == "save") {
saveSession(selectedItem, selectedItemName);
} else if (action == "confirm") {
confirmSessionOverwrite();
} else if (action == "import") {
importSession();
} else if (action == "donate") {
@@ -45,6 +93,7 @@ document.addEventListener("click", (e) => {
}
});
document.addEventListener("dblclick", (e) => {
if (e.button == 0) { // Left click
if (e.target.tagName == "LI" && e.target.className.includes("sessionLI")) {

1
src/scripts/libs/place-holder.txt Normal file
View File

@@ -0,0 +1 @@
...

3056
src/scripts/libs/sweetalert2.all.js
View File

File diff suppressed because one or more lines are too long

346
src/scripts/session-manager.js
View File

@@ -1,14 +1,40 @@
const message1 = "[ Session Name ] Allowed: a-z, A-Z, 0-9, -, _";
const message2 = "Allowed: a-z, A-Z, 0-9, -, _ Please try again...\nName too long or none provided; or, unacceptable character used.";
const message2 = "Name too long or none provided; or, unacceptable character used.";
const storageApi = browser.storage.local;
const tabsApi = browser.tabs;
const windowApi = browser.windows;
const regexp = /^[a-zA-Z0-9-_]+$/; // Alphanumeric, dash, underscore
let willReplace = false;
// Used as holder for vertain actions and 'cross' modal routs
let container = null;
let holderElm = null;
let holderName = null;
let holderData = null;
let holderSize = null;
let keys = null;
let keysLength = null;
const saveSession = (elm = null, name = null, message = message1) => {
let inputTag = document.createElement("INPUT");
let willReplace = false;
const resetArgs = (modal = "") => {
if (modal !== "") {
hideModal(modal);
}
willReplace = false;
container = null;
holderElm = null;
holderName = null;
holderData = null;
holderSize = null;
keys = null;
keysLength = null;
}
const preSaveSession = (elm = null, name = null, message = "") => {
let inputTag = document.getElementsByName("toSaveName")[0];
inputTag.value = new Date().toLocaleString().split(',')[0].replace(/\//g, '-');
if (elm !== null) {
@@ -16,203 +42,150 @@ const saveSession = (elm = null, name = null, message = message1) => {
willReplace = true;
}
document.getElementsByName("toSaveErrMessage")[0].innerText = message;
windowApi.getAll({ populate: true, windowTypes: ["normal"] }).then((windows) => {
let sessionData = getSessionData(windows);
let keys = Object.keys(sessionData);
let keysLength = Object.keys(sessionData).length;
let container = generateSelectionWindow(sessionData, keys, keysLength);
let textTag = document.createTextNode(message);
let brTag = document.createElement("BR");
container.prepend(inputTag);
container.prepend(brTag);
container.prepend(message);
Swal.fire({
html: container,
showCloseButton: true,
showCancelButton: true,
customClass: 'swal-modal',
}).then((result) => {
if (result.value) {
let enteryName = inputTag.value.replace(/ /g, "_");
if (enteryName.length < 0 || enteryName.length > 54 || enteryName.search(regexp) == -1) {
saveSession(elm, name, message2);
return ;
}
console.log("Saving session...");
sessionData = getSelectionData(container, keys, keysLength);
saveToStorage(enteryName, JSON.stringify(sessionData), "save", willReplace, elm);
} else {
messageWindow("warning", "Canceled save...");
}
});
keys = Object.keys(sessionData);
keysLength = Object.keys(sessionData).length;
container = loadContainer(sessionData, keys, keysLength, "saveList");
});
}
const editSession = (elm = null, name = null, message = message1) => {
let id = name;
let inputTag = document.createElement("INPUT");
let newSessionTag = document.createElement("INPUT");
let labelTag = document.createElement("LABEL");
let brTag = document.createElement("BR");
let brTag2 = document.createElement("BR");
const saveSession = (elm = null, name = null) => {
let inputTag = document.getElementsByName("toSaveName")[0];
let enteryName = inputTag.value.replace(/ /g, "_");
inputTag.value = id;
newSessionTag.type = "checkbox";
newSessionTag.id = "newSession";
newSessionTag.checked = false;
labelTag.innerText = "Create New Session";
labelTag.htmlFor = "newSession";
if (enteryName.length < 0 || enteryName.length > 54 || enteryName.search(regexp) == -1) {
preSaveSession(elm, name, message2);
return ;
}
console.log("Saving session...");
sessionData = getSelectionData(container, keys, keysLength);
saveToStorage(enteryName, JSON.stringify(sessionData), "save", willReplace, elm);
resetArgs("saveModal");
}
const preEditSession = (elm = null, name = null, message = "") => {
let inputTag = document.getElementsByName("toEditName")[0];
let id = name;
inputTag.value = name;
document.getElementsByName("toEditErrMessage")[0].innerText = message;
storageApi.get(id).then((results) => {
let json = null;
let keys = null;
let keysLength = null;
try {
json = JSON.parse(results[id]);
keys = Object.keys(json);
keysLength = Object.keys(json).length;
let sessionData = JSON.parse(results[id]);
keys = Object.keys(sessionData);
keysLength = Object.keys(sessionData).length;
container = loadContainer(sessionData, keys, keysLength, "editList");
} catch (e) {
messageWindow("warning", "Canceled edit; couldn't load any data...");
resetArgs();
return ;
}
let container = generateSelectionWindow(json, keys, keysLength);
let textTag = document.createTextNode(message);
container.prepend(labelTag);
container.prepend(newSessionTag);
container.prepend(brTag);
container.prepend(inputTag);
container.prepend(brTag2);
container.prepend(message);
console.log("Editing session...");
Swal.fire({
html: container,
showCloseButton: true,
showCancelButton: true,
customClass: 'swal-modal',
}).then((result) => {
if (result.value) {
let newName = inputTag.value.replace(/ /g, "_");
if (newName.length < 0 || newName.length > 54 || newName.search(regexp) == -1) {
editSession(elm, name, message2);
return ;
}
json = getSelectionData(container, keys, keysLength);
const strData = JSON.stringify(json);
if (newSessionTag.checked) { // If creating new session
newName = checkSessionListForDuplicate(newName);
saveToStorage(newName, strData, "save", false, elm);
} else {
if (newName == name) { // If not creating new session and are the same name
storageApi.get(id).then((results) => {
storageApi.remove(id);
saveToStorage(newName, strData, "edit", true, elm);
}).then(() => {
const size = getStoreSize(strData);
elm.innerText = size + " | " + newName;
elm.setAttribute("name", newName);
});
} else { // If not creating new session and names are not the same rename
storageApi.get(id).then((results) => {
newName = checkSessionListForDuplicate(newName);
storageApi.remove(id);
saveToStorage(newName, strData, "edit", false, elm);
}).then(() => {
const size = getStoreSize(strData);
elm.innerText = size + " | " + newName;
elm.setAttribute("name", newName);
});
}
}
} else {
messageWindow("warning", "Canceled edit...");
}
});
});
}
const editSession = (elm = null, name = null, message = "") => {
let newSessionTag = document.getElementsByName("toEditNewSession")[0];
let inputTag = document.getElementsByName("toEditName")[0];
let newName = inputTag.value.replace(/ /g, "_");
const id = name;
if (newName.length < 0 || newName.length > 54 || newName.search(regexp) == -1) {
preEditSession(elm, name, message2);
return ;
}
let sessionData = getSelectionData(container, keys, keysLength);
const strData = JSON.stringify(sessionData);
if (newSessionTag.checked) { // If creating new session
newName = checkSessionListForDuplicate(newName);
saveToStorage(newName, strData, "save", false, elm);
} else {
if (newName == name) { // If not creating new session and are the same name
storageApi.get(id).then((results) => {
storageApi.remove(id);
saveToStorage(newName, strData, "edit", true, elm);
}).then(() => {
const size = getStoreSize(strData);
elm.innerText = size + " | " + newName;
elm.setAttribute("name", newName);
});
} else { // If not creating new session and names are not the same rename
storageApi.get(id).then((results) => {
newName = checkSessionListForDuplicate(newName);
storageApi.remove(id);
saveToStorage(newName, strData, "edit", false, elm);
}).then(() => {
const size = getStoreSize(strData);
elm.innerText = size + " | " + newName;
elm.setAttribute("name", newName);
});
}
}
resetArgs("editModal");
}
const preDownloadSession = (session = null) => {
let fileName = session;
document.getElementsByName("toDownloadName")[0].value = fileName;
}
const downloadSession = (session = null) => {
let pTag = document.createElement("P");
let inputTag = document.createElement("INPUT");
let chkBoxTag = document.createElement("INPUT");
let lblTag = document.createElement("LABEL");
let brTag = document.createElement("BR");
let aTagElm = document.getElementById('downloadAnchorElem');
let text = document.createTextNode("Append Date?");
let fileName = "session:" + session + ".json";
let id = session;
chkBoxTag.type = "checkbox";
inputTag.value = fileName;
chkBoxTag.id = "chkbx";
lblTag.htmlFor = "chkbx";
lblTag.append(text);
pTag.append(lblTag);
pTag.append(chkBoxTag);
pTag.append(brTag);
pTag.append(inputTag);
let chkBoxTag = document.getElementsByName("appendDateDlModal")[0];
let fileName = document.getElementsByName("toDownloadName")[0].value;
const id = session;
Swal.fire({
text: "Download Session?",
html: pTag,
showCloseButton: true,
showCancelButton: true,
customClass: 'swal-modal',
}).then((willDl) => {
if (willDl.value) {
if (chkBoxTag.checked) {
fileName = "session:" + id + ":" + new Date().toLocaleString()
.split(',')[0]
.replace(/\//g, "-") + ".json";
}
if (chkBoxTag.checked) {
fileName = "session_" + fileName + "_" + new Date().toLocaleString()
.split(',')[0]
.replace(/\//g, "-") + ".json";
} else {
fileName = "session_" + fileName + ".json";
}
storageApi.get(id).then((results) => {
let json = JSON.parse(results[id]);
let dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json));
console.log("Downloading: " + id);
doUrlAction(dataStr, fileName, true);
});
}
storageApi.get(id).then((results) => {
let sessionData = JSON.parse(results[id]);
let dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(sessionData));
console.log("Downloading: " + id);
doUrlAction(dataStr, fileName, true);
});
}
const preLoadSession = (id) => {
storageApi.get(id).then(results => {
try {
let json = JSON.parse(results[id]);
let keys = Object.keys(json);
let keysLength = Object.keys(json).length;
let sessionData = JSON.parse(results[id]);
let keys = Object.keys(sessionData);
let keysLength = Object.keys(sessionData).length;
let replaceTabs = document.getElementsByName("replaceTabs")[0];
let selectiveOpen = document.getElementsByName("selectiveOpen")[0];
if (!selectiveOpen.checked) {
loadSession(json, replaceTabs.checked);
asyn = () => {
loadSession(sessionData, replaceTabs.checked);
}
asyn();
} else {
let container = generateSelectionWindow(json, keys, keysLength);
Swal.fire({
text: "Selective Open",
html: container,
showCloseButton: true,
showCancelButton: true,
}).then((willOpen) => {
if (willOpen.value) {
json = getSelectionData(container, keys, keysLength);
keysLength = Object.keys(json).length;
if (keysLength > 0) {
loadSession(json, replaceTabs.checked);
} else {
messageWindow("warning", "Canceled Operation: No tabs were selected...");
}
}
});
container = loadContainer(sessionData, keys, keysLength, "loadList");
asyn = () => {
setKeyData(keys, keysLength);
}
asyn();
showModal("loadModal");
}
} catch (e) {
messageWindow("error", "Couldn't load session:\n" + e);
@@ -220,6 +193,24 @@ const preLoadSession = (id) => {
});
}
// Supports startLoadSession getting the proper data...
const setKeyData = (_keys, _keysLength) => {
keys = _keys;
keysLength = _keysLength;
}
const startLoadSession = () => {
sessionData = getSelectionData(container, keys, keysLength);
keysLength = Object.keys(sessionData).length;
if (keysLength > 0) {
loadSession(sessionData, replaceTabs.checked);
hideModal("loadModal");
} else {
hideModal("loadModal");
messageWindow("warning", "Canceled Operation: No tabs were selected...");
}
}
const loadSession = (json = null, replaceTabs = false) => {
let keys = Object.keys(json);
let keysLength = Object.keys(json).length;
@@ -274,3 +265,14 @@ const loadSession = (json = null, replaceTabs = false) => {
messageWindow("error", "Couldn't load session:\n" + e);
}
}
const confirmSessionOverwrite = () => {
storageApi.set({[holderName]: holderData});
holderElm = document.getElementsByName(holderName)[0];
holderElm.innerText = holderSize + " | " + holderName;
holderElm.name = holderName;
messageWindow("warning", "Overwrote session...");
resetArgs("confModal");
}

81
src/scripts/utils.js
View File

@@ -1,7 +1,43 @@
let selectedItem = null;
const messageWindow = (type = "warning", message = "No message passed in...", target = "") => {
let pTag = document.createElement("P");
let text = document.createTextNode(message);
let gutter = document.getElementById("message-gutter");
if (target !== "") {
gutter = document.getElementById(target);
}
pTag.className = "alert alert-" + type;
pTag.appendChild(text);
gutter.prepend(pTag);
setTimeout(function () {
clearChildNodes(gutter);
}, 3200);
}
// UI supporters
const loadContainer = (sessionData, keys, keysLength, divID) => {
let container = generateSelectionWindow(sessionData, keys, keysLength);
let divElm = document.getElementById(divID);
container.className = "col";
clearChildNodes(divElm);
divElm.append(container);
return container;
}
/* Selection Process */
const generateSelectionWindow = (json = "", keys = null, keysLength = 0) => {
let container = document.createElement("DIV");
@@ -139,6 +175,45 @@ const doUrlAction = (url = "https://www.paypal.me/ITDominator", fileName = "", i
aTagElm.click();
}
const showModal = async (modalID = "saveModal") => {
tween(1600, "up", modalID); // in miliseconds
}
const hideModal = (modalID = "saveModal") => {
tween(1600, "down", modalID); // in miliseconds
}
const tween = async (miliseconds, direction, modalID) => {
const elm = document.getElementById(modalID);
const timeStep = 1000 / miliseconds;
const steps = timeStep * 100
if (direction == "up") { // Go up
elm.style.display = "";
// elm.style.opacity = "1";
for (var i = 1; i <= steps; i++) {
await sleep(timeStep);
elm.style.opacity = i/steps;
}
} else { // Go down
for (var i = steps; i > 1; i--) {
await sleep(timeStep);
elm.style.opacity = i/steps;
}
// elm.style.opacity = "0";
elm.style.display = "none";
}
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const importSession = () => {
browser.tabs.create({
url: browser.extension.getURL("../pages/import.html"),
@@ -152,3 +227,9 @@ const toggleSelect = (source, name) => {
checkboxes[i].checked = source.checked;
}
}
const clearChildNodes = (parent) => {
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
}

7
src/styles/libs/mustard-ui.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

55
src/styles/styles.css
View File

@@ -20,8 +20,34 @@ input[type=image]:hover {
color: #ffffff;
}
/* IDs */
#master-row {
padding: 2em;
}
#master-left-column {
background-color:grey
}
#master-right-column {
padding: 0em 4em;
}
#master-left-column > li > button {
width: 14em;
}
#master-gutter {
position: absolute;
width: 100%;
bottom: 0.5em;
max-height: 6em;
overflow: auto;
}
#savedSessions {
width: 85%;
width: 100%;
height: 450px;
min-height: 450px;
max-height: 450px;
@@ -30,6 +56,13 @@ input[type=image]:hover {
margin: 0em auto;
}
#editList,
#saveList,
#loadList {
max-height: 250px;
overflow: auto;
}
#editSelectionContainer {
width: 100%;
height: auto;
@@ -61,11 +94,17 @@ input[type=image]:hover {
color: rgba(255, 255, 255, 0.5);
}
/* Overide sweetalert modal size */
.swal-modal{
top: 2em !important;
width: 650px !important;
height: auto !important;
/* Classes */
.modal {
width: 650px;
height: auto;
}
.scroller {
scrollbar-color: #00000084 #ffffff64;
scrollbar-width: thin;
}
.collection {
@@ -73,7 +112,7 @@ input[type=image]:hover {
padding-bottom: 1em;
}
.container {
.download-container {
width: 100%;
height: 100%;
background-image: url('../images/icons/import.png');
@@ -84,7 +123,7 @@ input[type=image]:hover {
transition: 0.6s;
}
.container:hover {
.download-container:hover {
transition: 0.6s;
background-color: rgba(41, 95, 115, 0.65);
cursor: pointer;