Removedc SweetAlerts; using Mustard UI
This commit is contained in:
parent
c27108e3df
commit
8591ce8905
|
|
@ -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
|
||||
|
||||
|
|
|
|||
BIN
images/pic1.png
BIN
images/pic1.png
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 20 KiB |
BIN
images/pic2.png
BIN
images/pic2.png
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 22 KiB |
BIN
images/pic3.png
BIN
images/pic3.png
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 44 KiB |
BIN
images/pic4.png
BIN
images/pic4.png
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 20 KiB |
BIN
images/pic5.png
BIN
images/pic5.png
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 30 KiB |
BIN
images/pic6.png
BIN
images/pic6.png
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 43 KiB |
BIN
images/pic7.png
BIN
images/pic7.png
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 32 KiB |
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
<style media="screen">
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
||||
<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">
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<template id="ulTemplate">
|
||||
<!-- 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: <label name="toDeleteName"></label> ?
|
||||
</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>
|
||||
|
||||
<template id="liTemplate">
|
||||
<template id="liTemplate">
|
||||
<li>
|
||||
<input type="checkbox" id="" name="" checked="true" />
|
||||
<label for="" title=""></label>
|
||||
</li>
|
||||
</template>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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...");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const windowMaker = (i, keysLength, keys, json) => {
|
||||
|
|
|
|||
|
|
@ -1,40 +1,24 @@
|
|||
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);
|
||||
|
||||
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.");
|
||||
messageWindow("danger", message2, "modal-gutter");
|
||||
// prePprocessor(obj, "", message2);
|
||||
return ;
|
||||
}
|
||||
|
||||
|
|
@ -43,37 +27,106 @@ const processor = (obj, enteryName = '', message = message1) => {
|
|||
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 ;
|
||||
}
|
||||
} else {
|
||||
messageWindow("warning", "Canceled import.");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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")) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
...
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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,98 +42,68 @@ 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");
|
||||
keys = Object.keys(sessionData);
|
||||
keysLength = Object.keys(sessionData).length;
|
||||
container = loadContainer(sessionData, keys, keysLength, "saveList");
|
||||
});
|
||||
}
|
||||
|
||||
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) {
|
||||
const saveSession = (elm = null, name = null) => {
|
||||
let inputTag = document.getElementsByName("toSaveName")[0];
|
||||
let enteryName = inputTag.value.replace(/ /g, "_");
|
||||
|
||||
if (enteryName.length < 0 || enteryName.length > 54 || enteryName.search(regexp) == -1) {
|
||||
saveSession(elm, name, message2);
|
||||
preSaveSession(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...");
|
||||
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) => {
|
||||
try {
|
||||
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 ;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
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");
|
||||
|
||||
inputTag.value = id;
|
||||
newSessionTag.type = "checkbox";
|
||||
newSessionTag.id = "newSession";
|
||||
newSessionTag.checked = false;
|
||||
labelTag.innerText = "Create New Session";
|
||||
labelTag.htmlFor = "newSession";
|
||||
|
||||
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;
|
||||
} catch (e) {
|
||||
messageWindow("warning", "Canceled edit; couldn't load any data...");
|
||||
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) {
|
||||
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) {
|
||||
editSession(elm, name, message2);
|
||||
preEditSession(elm, name, message2);
|
||||
return ;
|
||||
}
|
||||
|
||||
json = getSelectionData(container, keys, keysLength);
|
||||
const strData = JSON.stringify(json);
|
||||
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);
|
||||
|
|
@ -133,86 +129,63 @@ const editSession = (elm = null, name = null, message = message1) => {
|
|||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
messageWindow("warning", "Canceled edit...");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
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()
|
||||
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));
|
||||
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);
|
||||
} 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...");
|
||||
asyn = () => {
|
||||
loadSession(sessionData, replaceTabs.checked);
|
||||
}
|
||||
asyn();
|
||||
} else {
|
||||
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");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue