Removedc SweetAlerts; using Mustard UI

This commit is contained in:
2020-02-29 15:30:44 -06:00
parent c27108e3df
commit 8591ce8905
20 changed files with 748 additions and 3382 deletions

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) => {

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

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")) {

View File

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

File diff suppressed because one or more lines are too long

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

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