Updated setting pane; added contect menu
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.3 MiB |
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 2.7 MiB |
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 454 KiB |
After Width: | Height: | Size: 344 KiB |
@ -0,0 +1,50 @@
|
||||
.menu {
|
||||
width: 165px;
|
||||
z-index: 999;
|
||||
box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
|
||||
background-color: rgba(0, 0, 0, 0.64);
|
||||
position: fixed;
|
||||
display: none;
|
||||
transition: 0.2s display ease-in;
|
||||
}
|
||||
.menu .menu-options {
|
||||
list-style: none;
|
||||
padding: 10px 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.menu .menu-options .menu-option {
|
||||
font-weight: 500;
|
||||
z-index: 1;
|
||||
padding: 10px 40px 10px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu .menu-options .menu-option:hover {
|
||||
background: rgba(255, 255, 255, 0.64);
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
button {
|
||||
background: grey;
|
||||
border: none;
|
||||
}
|
||||
button .next {
|
||||
color: green;
|
||||
}
|
||||
button[disabled="false"]:hover .next {
|
||||
color: red;
|
||||
animation: move 0.5s;
|
||||
animation-iteration-count: 2;
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
from {
|
||||
transform: translate(0%);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-40%);
|
||||
}
|
||||
to {
|
||||
transform: transform(0%);
|
||||
}
|
||||
}
|
@ -0,0 +1,41 @@
|
||||
const menu = document.querySelector(".menu");
|
||||
let menuVisible = false;
|
||||
let active_card = null;
|
||||
|
||||
const toggleMenu = command => {
|
||||
menu.style.display = command === "show" ? "block" : "none";
|
||||
menu.style.zIndex = "9999";
|
||||
menuVisible = !menuVisible;
|
||||
};
|
||||
|
||||
const setPosition = ({ top, left }) => {
|
||||
menu.style.left = `${left}px`;
|
||||
menu.style.top = `${top}px`;
|
||||
toggleMenu("show");
|
||||
};
|
||||
|
||||
window.addEventListener("click", e => {
|
||||
if(menuVisible) toggleMenu("hide");
|
||||
});
|
||||
|
||||
window.addEventListener("contextmenu", e => {
|
||||
e.preventDefault();
|
||||
|
||||
let target = e.target;
|
||||
let elm = target;
|
||||
while (elm.nodeName != "BODY") {
|
||||
if (!elm.classList.contains("card")) {
|
||||
elm = elm.parentElement;
|
||||
} else {
|
||||
active_card = elm;
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const origin = {
|
||||
left: e.pageX,
|
||||
top: e.pageY
|
||||
};
|
||||
setPosition(origin);
|
||||
return false;
|
||||
});
|
@ -0,0 +1,30 @@
|
||||
const createItem = (type) => {
|
||||
if (type == null || type == '') {
|
||||
displayMessage("Create type isn't set...", "danger", 3, "settings-alert-zone-new-items");
|
||||
return ;
|
||||
}
|
||||
|
||||
let newItem = document.getElementById("newItem");
|
||||
let fname = newItem.value;
|
||||
|
||||
const regex = /^[a-z0-9A-Z-_\[\]\(\)\| ]{4,20}$/;
|
||||
if (fname.search(regex) == -1) {
|
||||
displayMessage("A new item name can only contain alphanumeric, -, _, |, [], (), or spaces and must be minimum of 4 and max of 20 characters...", "danger", 3, "settings-alert-zone-new-items");
|
||||
return ;
|
||||
}
|
||||
|
||||
newItem.value = "";
|
||||
createItemAjax(type, fname);
|
||||
}
|
||||
|
||||
|
||||
$( "#toUpload" ).bind( "change", function(eve) {
|
||||
const files = eve.target.files;
|
||||
setUploadListTitles(files);
|
||||
|
||||
});
|
||||
|
||||
$( "#uploadFiles" ).bind( "click", function(eve) {
|
||||
const files = document.getElementById('toUpload').files;
|
||||
uploadFiles(files);
|
||||
});
|
@ -0,0 +1,89 @@
|
||||
|
||||
// Uploader Logic
|
||||
const setUploadListTitles = (files = null) => {
|
||||
if (files == null) {
|
||||
return ;
|
||||
}
|
||||
|
||||
let list = document.getElementById('uploadListTitles');
|
||||
clearChildNodes(list);
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
let liTag = document.createElement('LI');
|
||||
let name = document.createTextNode(files[i].name);
|
||||
|
||||
liTag.className = "list-group-item disabled progress-bar";
|
||||
let bs64 = btoa(unescape(encodeURIComponent(files[i].name))).split("==")[0];
|
||||
liTag.setAttribute("id", bs64);
|
||||
liTag.append(name);
|
||||
list.append(liTag);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const uploadFiles = (files = null) => {
|
||||
const size = files.length;
|
||||
|
||||
if (files == null || size < 1) {
|
||||
displayMessage("Nothing to upload...", "warning", "page-alert-zone-2");
|
||||
return ;
|
||||
}
|
||||
|
||||
// Multi-upload...
|
||||
if (size > 1) {
|
||||
for (var i = 0; i < size; i++) {
|
||||
file = files[i];
|
||||
name = file.name;
|
||||
data = createFormDataFiles([file]);
|
||||
doAjaxUpload('upload', data, name, "upload-file");
|
||||
}
|
||||
} else { // Single upload...
|
||||
data = createFormDataFiles(files);
|
||||
name = files[0].name;
|
||||
doAjaxUpload('upload', data, name, "upload-file");
|
||||
}
|
||||
}
|
||||
|
||||
const createFormDataFiles = (files) => {
|
||||
let form = new FormData();
|
||||
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
form.append(files[i].name, files[i]);
|
||||
}
|
||||
return form;
|
||||
}
|
||||
|
||||
// Progressbar handler
|
||||
const updateProgressBar = (progressbar = null, text = "Nothing uploading...",
|
||||
percent = 0, type = "error") => {
|
||||
if (progressbar == null) {
|
||||
return ;
|
||||
}
|
||||
|
||||
|
||||
if (type == "info") {
|
||||
progressbar.setAttribute("aria-valuenow", percent);
|
||||
progressbar.style.width = percent + "%";
|
||||
// progressbar.innerText = text;
|
||||
progressbar.classList.remove('bg-success');
|
||||
progressbar.classList.add('progress-bar-animated');
|
||||
progressbar.classList.add('bg-info');
|
||||
return ;
|
||||
}
|
||||
|
||||
if (type == "success") {
|
||||
progressbar.setAttribute("aria-valuenow", 100);
|
||||
progressbar.style.width = "100%";
|
||||
// progressbar.innerText = text;
|
||||
progressbar.classList.remove('progress-bar-animated');
|
||||
progressbar.classList.remove('bg-info');
|
||||
progressbar.classList.add('bg-success');
|
||||
return ;
|
||||
}
|
||||
|
||||
progressbar.style.width = "100%";
|
||||
progressbar.innerText = "An Error Occured";
|
||||
progressbar.classList.remove('progress-bar-animated');
|
||||
progressbar.classList.remove('bg-info');
|
||||
progressbar.classList.remove('bg-success');
|
||||
progressbar.classList.add('bg-danger');
|
||||
}
|