mirror of
https://github.com/filebrowser/filebrowser.git
synced 2024-06-07 23:00:43 +00:00
buttons
This commit is contained in:
Henrique Dias
parent
4634f71817
commit
f79d715558
@ -1,12 +1,10 @@
|
||||
'use strict';
|
||||
|
||||
var tempID = "_fm_internal_temporary_id",
|
||||
buttons = {},
|
||||
templates = {},
|
||||
selectedItems = [],
|
||||
overlay,
|
||||
clickOverlay,
|
||||
webdav = {};
|
||||
clickOverlay;
|
||||
|
||||
// Removes an element, if exists, from an array
|
||||
Array.prototype.removeElement = function (element) {
|
||||
@ -33,56 +31,6 @@ Document.prototype.getCookie = function (name) {
|
||||
return document.cookie.replace(re, "$1");
|
||||
}
|
||||
|
||||
// Changes a button to the loading animation
|
||||
Element.prototype.changeToLoading = function () {
|
||||
let element = this,
|
||||
originalText = element.innerHTML;
|
||||
|
||||
element.style.opacity = 0;
|
||||
|
||||
setTimeout(function () {
|
||||
element.classList.add('spin');
|
||||
element.innerHTML = 'autorenew';
|
||||
element.style.opacity = 1;
|
||||
}, 200);
|
||||
|
||||
return originalText;
|
||||
}
|
||||
|
||||
// Changes an element to done animation
|
||||
Element.prototype.changeToDone = function (error, html) {
|
||||
this.style.opacity = 0;
|
||||
|
||||
let thirdStep = () => {
|
||||
this.innerHTML = html;
|
||||
this.style.opacity = null;
|
||||
|
||||
if(selectedItems.length == 0 && document.getElementById('listing'))
|
||||
document.sendCostumEvent('changed-selected');
|
||||
}
|
||||
|
||||
let secondStep = () => {
|
||||
this.style.opacity = 0;
|
||||
setTimeout(thirdStep, 200);
|
||||
}
|
||||
|
||||
let firstStep = () => {
|
||||
this.classList.remove('spin');
|
||||
this.innerHTML = error ?
|
||||
'close' :
|
||||
'done';
|
||||
this.style.opacity = 1;
|
||||
setTimeout(secondStep, 1000);
|
||||
}
|
||||
|
||||
setTimeout(firstStep, 200);
|
||||
return false;
|
||||
}
|
||||
|
||||
function toWebDavURL(url) {
|
||||
return window.location.origin + url.replace(baseURL + "/", webdavURL + "/");
|
||||
}
|
||||
|
||||
// Remove the last directory of an url
|
||||
var removeLastDirectoryPartOf = function (url) {
|
||||
var arr = url.split('/');
|
||||
@ -120,22 +68,80 @@ function getCSSRule(rules) {
|
||||
return result;
|
||||
}
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* *
|
||||
* BUTTONS *
|
||||
* *
|
||||
* * * * * * * * * * * * * * * */
|
||||
var buttons = {
|
||||
previousState: {},
|
||||
};
|
||||
|
||||
buttons.setLoading = function (name) {
|
||||
if(typeof this[name] === 'undefined') return;
|
||||
let i = this[name].querySelector('i');
|
||||
|
||||
this.previousState[name] = i.innerHTML;
|
||||
i.style.opacity = 0;
|
||||
|
||||
setTimeout(function () {
|
||||
i.classList.add('spin');
|
||||
i.innerHTML = 'autorenew';
|
||||
i.style.opacity = 1;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
// Changes an element to done animation
|
||||
buttons.setDone = function (name, success = true) {
|
||||
let i = this[name].querySelector('i');
|
||||
|
||||
i.style.opacity = 0;
|
||||
|
||||
let thirdStep = () => {
|
||||
i.innerHTML = this.previousState[name];
|
||||
i.style.opacity = null;
|
||||
|
||||
if(selectedItems.length == 0 && document.getElementById('listing'))
|
||||
document.sendCostumEvent('changed-selected');
|
||||
}
|
||||
|
||||
let secondStep = () => {
|
||||
i.style.opacity = 0;
|
||||
setTimeout(thirdStep, 200);
|
||||
}
|
||||
|
||||
let firstStep = () => {
|
||||
i.classList.remove('spin');
|
||||
i.innerHTML = success ?
|
||||
'done' :
|
||||
'close';
|
||||
i.style.opacity = 1;
|
||||
setTimeout(secondStep, 1000);
|
||||
}
|
||||
|
||||
setTimeout(firstStep, 200);
|
||||
return false;
|
||||
}
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* *
|
||||
* WEBDAV *
|
||||
* *
|
||||
* * * * * * * * * * * * * * * */
|
||||
// TODO: here, we should create an abstraction layer from the webdav.
|
||||
// We must create functions that do the requests to the webdav backend.
|
||||
var webdav = {};
|
||||
|
||||
webdav.convertURL = function (url) {
|
||||
return window.location.origin + url.replace(baseURL + "/", webdavURL + "/");
|
||||
}
|
||||
|
||||
webdav.move = function (oldLink, newLink) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let request = new XMLHttpRequest();
|
||||
request.open('MOVE', toWebDavURL(oldLink), true);
|
||||
request.setRequestHeader('Destination', toWebDavURL(newLink));
|
||||
request.open('MOVE', webdav.convertURL(oldLink), true);
|
||||
request.setRequestHeader('Destination', webdav.convertURL(newLink));
|
||||
request.onload = () => {
|
||||
if(request.status == 201 || request.status == 204) {
|
||||
resolve(request.response);
|
||||
resolve();
|
||||
} else {
|
||||
reject(request.statusText);
|
||||
}
|
||||
@ -145,13 +151,18 @@ webdav.move = function (oldLink, newLink) {
|
||||
});
|
||||
}
|
||||
|
||||
webdav.put = function (link, body) {
|
||||
webdav.put = function (link, body, headers = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let request = new XMLHttpRequest();
|
||||
request.open('PUT', toWebDavURL(link), true);
|
||||
request.open('PUT', webdav.convertURL(link), true);
|
||||
|
||||
for(let key in headers) {
|
||||
request.setRequestHeader(key, headers[key]);
|
||||
}
|
||||
|
||||
request.onload = () => {
|
||||
if(request.status == 201) {
|
||||
resolve(request.response);
|
||||
resolve();
|
||||
} else {
|
||||
reject(request.statusText);
|
||||
}
|
||||
@ -161,6 +172,40 @@ webdav.put = function (link, body) {
|
||||
});
|
||||
}
|
||||
|
||||
webdav.delete = function (link) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let request = new XMLHttpRequest();
|
||||
request.open('DELETE', webdav.convertURL(link), true);
|
||||
request.onload = () => {
|
||||
if(request.status == 204) {
|
||||
resolve();
|
||||
} else {
|
||||
reject(request.statusText);
|
||||
}
|
||||
}
|
||||
request.onerror = () => reject(request.statusText);
|
||||
request.send();
|
||||
});
|
||||
request.send();
|
||||
}
|
||||
|
||||
webdav.new = function (link) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let request = new XMLHttpRequest();
|
||||
request.open((link.endsWith("/") ? "MKCOL" : "PUT"), webdav.convertURL(link), true);
|
||||
request.onload = () => {
|
||||
if(request.status == 201) {
|
||||
resolve();
|
||||
} else {
|
||||
reject(request.statusText);
|
||||
}
|
||||
}
|
||||
request.onerror = () => reject(request.statusText);
|
||||
request.send();
|
||||
});
|
||||
request.send();
|
||||
}
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* *
|
||||
* EVENTS *
|
||||
@ -284,20 +329,20 @@ function moveSelected(event) {
|
||||
// TODO: this only works for ONE file. What if there are more files selected?
|
||||
// TODO: use webdav.rename
|
||||
|
||||
let request = new XMLHttpRequest(),
|
||||
oldLink = toWebDavURL(window.location.pathname),
|
||||
newLink = toWebDavURL(event.srcElement.querySelector("li[aria-selected=true]").innerHTML + "/");
|
||||
/* let request = new XMLHttpRequest(),
|
||||
oldLink = toWebDavURL(window.location.pathname),
|
||||
newLink = toWebDavURL(event.srcElement.querySelector("li[aria-selected=true]").innerHTML + "/");
|
||||
|
||||
request.open("MOVE", oldLink);
|
||||
request.setRequestHeader("Destination", newLink);
|
||||
request.send();
|
||||
request.onreadystatechange = function () {
|
||||
if(request.readyState == 4) {
|
||||
if(request.status == 200 || request.status == 204) {
|
||||
window.reload();
|
||||
request.open("MOVE", oldLink);
|
||||
request.setRequestHeader("Destination", newLink);
|
||||
request.send();
|
||||
request.onreadystatechange = function () {
|
||||
if(request.readyState == 4) {
|
||||
if(request.status == 200 || request.status == 204) {
|
||||
window.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} */
|
||||
}
|
||||
|
||||
function moveEvent(event) {
|
||||
@ -345,44 +390,41 @@ function moveEvent(event) {
|
||||
}
|
||||
}
|
||||
|
||||
function deleteSelected(single) {
|
||||
return function (event) {
|
||||
event.preventDefault();
|
||||
function deleteOnSingleFile() {
|
||||
closePrompt(event);
|
||||
buttons.setLoading('delete');
|
||||
|
||||
Array.from(selectedItems).forEach(id => {
|
||||
let request = new XMLHttpRequest(),
|
||||
html = buttons.delete.querySelector('i').changeToLoading(),
|
||||
el,
|
||||
url;
|
||||
let promises = [];
|
||||
|
||||
if(single) {
|
||||
url = window.location.pathname;
|
||||
} else {
|
||||
el = document.getElementById(id);
|
||||
url = el.dataset.url;
|
||||
}
|
||||
webdav.delete(window.location.pathname)
|
||||
.then(() => {
|
||||
window.location.pathname = removeLastDirectoryPartOf(window.location.pathname);
|
||||
})
|
||||
.catch(e => {
|
||||
buttons.setDone('delete', false);
|
||||
console.log(e)
|
||||
})
|
||||
}
|
||||
|
||||
request.open('DELETE', toWebDavURL(url));
|
||||
request.onreadystatechange = function () {
|
||||
if(request.readyState == 4) {
|
||||
if(request.status == 204) {
|
||||
if(single) {
|
||||
window.location.pathname = removeLastDirectoryPartOf(window.location.pathname);
|
||||
} else {
|
||||
el.remove();
|
||||
selectedItems.removeElement(id);
|
||||
}
|
||||
}
|
||||
function deleteOnListing() {
|
||||
closePrompt(event);
|
||||
buttons.setLoading('delete');
|
||||
|
||||
buttons.delete.querySelector('i').changeToDone(request.status != 204, html);
|
||||
}
|
||||
}
|
||||
let promises = [];
|
||||
|
||||
request.send();
|
||||
});
|
||||
|
||||
closePrompt(event);
|
||||
for(let id of selectedItems) {
|
||||
promises.push(webdav.delete(document.getElementById(id).dataset.url));
|
||||
}
|
||||
|
||||
Promise.all(promises)
|
||||
.then(() => {
|
||||
listing.reload();
|
||||
buttons.setDone('delete');
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e);
|
||||
buttons.setDone('delete', false);
|
||||
})
|
||||
}
|
||||
|
||||
// Handles the delete button event
|
||||
@ -398,14 +440,15 @@ function deleteEvent(event) {
|
||||
clone.querySelector('h3').innerHTML = 'Delete files';
|
||||
|
||||
if(single) {
|
||||
clone.querySelector('form').addEventListener('submit', deleteOnSingleFile);
|
||||
clone.querySelector('p').innerHTML = `Are you sure you want to delete this file/folder?`;
|
||||
} else {
|
||||
clone.querySelector('form').addEventListener('submit', deleteOnListing);
|
||||
clone.querySelector('p').innerHTML = `Are you sure you want to delete ${selectedItems.length} file(s)?`;
|
||||
}
|
||||
|
||||
clone.querySelector('input').remove();
|
||||
clone.querySelector('.ok').innerHTML = 'Delete';
|
||||
clone.querySelector('form').addEventListener('submit', deleteSelected(single));
|
||||
|
||||
document.body.appendChild(clone);
|
||||
document.querySelector('.overlay').classList.add('active');
|
||||
@ -639,4 +682,4 @@ document.addEventListener("DOMContentLoaded", function (event) {
|
||||
|
||||
setupSearch();
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
@ -217,17 +217,20 @@ document.addEventListener("DOMContentLoaded", (event) => {
|
||||
data.content = data.content.toString();
|
||||
}
|
||||
|
||||
let html = buttons.save.querySelector('i').changeToLoading(),
|
||||
request = new XMLHttpRequest();
|
||||
let request = new XMLHttpRequest();
|
||||
|
||||
request.open("PUT", toWebDavURL(window.location.pathname));
|
||||
request.setRequestHeader('Kind', kind);
|
||||
request.send(JSON.stringify(data));
|
||||
request.onreadystatechange = function () {
|
||||
if(request.readyState == 4) {
|
||||
buttons.save.querySelector('i').changeToDone((request.status != 201), html);
|
||||
}
|
||||
}
|
||||
buttons.setLoading('save')
|
||||
|
||||
webdav.put(window.location.pathname, JSON.stringify(data), {
|
||||
'Kind': kind
|
||||
})
|
||||
.then(() => {
|
||||
buttons.setDone('save')
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e);
|
||||
buttons.setDone('save', false)
|
||||
})
|
||||
}
|
||||
|
||||
document.querySelector('#save').addEventListener('click', event => {
|
||||
|
||||
@ -121,9 +121,10 @@ listing.rename = function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
let newName = event.currentTarget.querySelector('input').value,
|
||||
newLink = removeLastDirectoryPartOf(link) + "/" + newName,
|
||||
html = buttons.rename.querySelector('i').changeToLoading();
|
||||
newLink = removeLastDirectoryPartOf(link) + "/" + newName;
|
||||
|
||||
closePrompt(event);
|
||||
buttons.setLoading('rename');
|
||||
|
||||
webdav.move(link, newLink).then(() => {
|
||||
listing.reload(() => {
|
||||
@ -133,11 +134,10 @@ listing.rename = function (event) {
|
||||
listing.handleSelectionChange();
|
||||
});
|
||||
|
||||
buttons.rename.querySelector('i').changeToDone(false, html);
|
||||
buttons.setDone('rename');
|
||||
}).catch(error => {
|
||||
field.innerHTML = name;
|
||||
buttons.rename.querySelector('i').changeToDone(true, html);
|
||||
|
||||
buttons.setDone('rename', false);
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
@ -158,8 +158,9 @@ listing.rename = function (event) {
|
||||
}
|
||||
|
||||
listing.handleFiles = function (files, base) {
|
||||
let html = buttons.upload.querySelector('i').changeToLoading(),
|
||||
promises = [];
|
||||
buttons.setLoading('upload');
|
||||
|
||||
let promises = [];
|
||||
|
||||
for(let file of files) {
|
||||
promises.push(webdav.put(window.location.pathname + base + file.name, file));
|
||||
@ -168,11 +169,11 @@ listing.handleFiles = function (files, base) {
|
||||
Promise.all(promises)
|
||||
.then(() => {
|
||||
listing.reload();
|
||||
buttons.upload.querySelector('i').changeToDone(false, html);
|
||||
buttons.setDone('upload');
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e);
|
||||
buttons.upload.querySelector('i').changeToDone(true, html);
|
||||
buttons.setDone('upload', false);
|
||||
})
|
||||
|
||||
return false;
|
||||
@ -276,20 +277,19 @@ listing.newFileButton = function (event) {
|
||||
|
||||
listing.newFilePrompt = function (event) {
|
||||
event.preventDefault();
|
||||
buttons.setLoading('new');
|
||||
|
||||
let button = document.getElementById('new'),
|
||||
html = button.querySelector('i').changeToLoading(),
|
||||
request = new XMLHttpRequest(),
|
||||
name = event.currentTarget.querySelector('input').value;
|
||||
let name = event.currentTarget.querySelector('input').value;
|
||||
|
||||
request.open((name.endsWith("/") ? "MKCOL" : "PUT"), toWebDavURL(window.location.pathname + name));
|
||||
request.send();
|
||||
request.onreadystatechange = function () {
|
||||
if(request.readyState == 4) {
|
||||
button.querySelector('i').changeToDone((request.status != 201), html);
|
||||
webdav.new(window.location.pathname + name)
|
||||
.then(() => {
|
||||
buttons.setDone('new');
|
||||
listing.reload();
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e);
|
||||
buttons.setDone('new', false);
|
||||
});
|
||||
|
||||
closePrompt(event);
|
||||
return false;
|
||||
@ -346,7 +346,6 @@ window.addEventListener('keydown', (event) => {
|
||||
}
|
||||
|
||||
if(event.ctrlKey || event.metaKey) {
|
||||
console.log("hey")
|
||||
switch(String.fromCharCode(event.which).toLowerCase()) {
|
||||
case 's':
|
||||
event.preventDefault();
|
||||
@ -416,4 +415,4 @@ document.addEventListener('DOMContentLoaded', event => {
|
||||
document.addEventListener("drop", listing.documentDrop, false);
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user