Mirror/filebrowser
1
0
Fork 0
mirror of https://github.com/filebrowser/filebrowser.git synced 2024-06-07 23:00:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

buttons

Browse Source
This commit is contained in:
Henrique Dias 2017-01-03 18:13:08 +00:00
parent 4634f71817
commit f79d715558
3 changed files with 184 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

255
_embed/public/js/common.js
View File

@ -1,12 +1,10 @@
'use strict'; 'use strict';
var tempID = "_fm_internal_temporary_id", var tempID = "_fm_internal_temporary_id",
buttons = {},
templates = {}, templates = {},
selectedItems = [], selectedItems = [],
overlay, overlay,
clickOverlay, clickOverlay;
webdav = {};
// Removes an element, if exists, from an array // Removes an element, if exists, from an array
Array.prototype.removeElement = function (element) { Array.prototype.removeElement = function (element) {
@ -33,56 +31,6 @@ Document.prototype.getCookie = function (name) {
return document.cookie.replace(re, "$1"); 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 // Remove the last directory of an url
var removeLastDirectoryPartOf = function (url) { var removeLastDirectoryPartOf = function (url) {
var arr = url.split('/'); var arr = url.split('/');
@ -120,22 +68,80 @@ function getCSSRule(rules) {
return result; 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 * * WEBDAV *
* * * *
* * * * * * * * * * * * * * * */ * * * * * * * * * * * * * * * */
// TODO: here, we should create an abstraction layer from the webdav. var webdav = {};
// We must create functions that do the requests to the webdav backend.
webdav.convertURL = function (url) {
return window.location.origin + url.replace(baseURL + "/", webdavURL + "/");
}
webdav.move = function (oldLink, newLink) { webdav.move = function (oldLink, newLink) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let request = new XMLHttpRequest(); let request = new XMLHttpRequest();
request.open('MOVE', toWebDavURL(oldLink), true); request.open('MOVE', webdav.convertURL(oldLink), true);
request.setRequestHeader('Destination', toWebDavURL(newLink)); request.setRequestHeader('Destination', webdav.convertURL(newLink));
request.onload = () => { request.onload = () => {
if(request.status == 201 || request.status == 204) { if(request.status == 201 || request.status == 204) {
resolve(request.response); resolve();
} else { } else {
reject(request.statusText); 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) => { return new Promise((resolve, reject) => {
let request = new XMLHttpRequest(); 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 = () => { request.onload = () => {
if(request.status == 201) { if(request.status == 201) {
resolve(request.response); resolve();
} else { } else {
reject(request.statusText); 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 * * EVENTS *
@ -284,20 +329,20 @@ function moveSelected(event) {
// TODO: this only works for ONE file. What if there are more files selected? // TODO: this only works for ONE file. What if there are more files selected?
// TODO: use webdav.rename // TODO: use webdav.rename
let request = new XMLHttpRequest(), /* let request = new XMLHttpRequest(),
oldLink = toWebDavURL(window.location.pathname), oldLink = toWebDavURL(window.location.pathname),
newLink = toWebDavURL(event.srcElement.querySelector("li[aria-selected=true]").innerHTML + "/"); newLink = toWebDavURL(event.srcElement.querySelector("li[aria-selected=true]").innerHTML + "/");
request.open("MOVE", oldLink); request.open("MOVE", oldLink);
request.setRequestHeader("Destination", newLink); request.setRequestHeader("Destination", newLink);
request.send(); request.send();
request.onreadystatechange = function () { request.onreadystatechange = function () {
if(request.readyState == 4) { if(request.readyState == 4) {
if(request.status == 200 || request.status == 204) { if(request.status == 200 || request.status == 204) {
window.reload(); window.reload();
}
} }
} } */
}
} }
function moveEvent(event) { function moveEvent(event) {
@ -345,44 +390,41 @@ function moveEvent(event) {
} }
} }
function deleteSelected(single) { function deleteOnSingleFile() {
return function (event) { closePrompt(event);
event.preventDefault(); buttons.setLoading('delete');
Array.from(selectedItems).forEach(id => { let promises = [];
let request = new XMLHttpRequest(),
html = buttons.delete.querySelector('i').changeToLoading(),
el,
url;
if(single) { webdav.delete(window.location.pathname)
url = window.location.pathname; .then(() => {
} else { window.location.pathname = removeLastDirectoryPartOf(window.location.pathname);
el = document.getElementById(id); })
url = el.dataset.url; .catch(e => {
} buttons.setDone('delete', false);
console.log(e)
})
}
request.open('DELETE', toWebDavURL(url)); function deleteOnListing() {
request.onreadystatechange = function () { closePrompt(event);
if(request.readyState == 4) { buttons.setLoading('delete');
if(request.status == 204) {
if(single) {
window.location.pathname = removeLastDirectoryPartOf(window.location.pathname);
} else {
el.remove();
selectedItems.removeElement(id);
}
}
buttons.delete.querySelector('i').changeToDone(request.status != 204, html); let promises = [];
}
}
request.send(); for(let id of selectedItems) {
}); promises.push(webdav.delete(document.getElementById(id).dataset.url));
closePrompt(event);
} }
Promise.all(promises)
.then(() => {
listing.reload();
buttons.setDone('delete');
})
.catch(e => {
console.log(e);
buttons.setDone('delete', false);
})
} }
// Handles the delete button event // Handles the delete button event
@ -398,14 +440,15 @@ function deleteEvent(event) {
clone.querySelector('h3').innerHTML = 'Delete files'; clone.querySelector('h3').innerHTML = 'Delete files';
if(single) { if(single) {
clone.querySelector('form').addEventListener('submit', deleteOnSingleFile);
clone.querySelector('p').innerHTML = `Are you sure you want to delete this file/folder?`; clone.querySelector('p').innerHTML = `Are you sure you want to delete this file/folder?`;
} else { } else {
clone.querySelector('form').addEventListener('submit', deleteOnListing);
clone.querySelector('p').innerHTML = `Are you sure you want to delete ${selectedItems.length} file(s)?`; clone.querySelector('p').innerHTML = `Are you sure you want to delete ${selectedItems.length} file(s)?`;
} }
clone.querySelector('input').remove(); clone.querySelector('input').remove();
clone.querySelector('.ok').innerHTML = 'Delete'; clone.querySelector('.ok').innerHTML = 'Delete';
clone.querySelector('form').addEventListener('submit', deleteSelected(single));
document.body.appendChild(clone); document.body.appendChild(clone);
document.querySelector('.overlay').classList.add('active'); document.querySelector('.overlay').classList.add('active');

23
_embed/public/js/editor.js
View File

@ -217,17 +217,20 @@ document.addEventListener("DOMContentLoaded", (event) => {
data.content = data.content.toString(); data.content = data.content.toString();
} }
let html = buttons.save.querySelector('i').changeToLoading(), let request = new XMLHttpRequest();
request = new XMLHttpRequest();
request.open("PUT", toWebDavURL(window.location.pathname)); buttons.setLoading('save')
request.setRequestHeader('Kind', kind);
request.send(JSON.stringify(data)); webdav.put(window.location.pathname, JSON.stringify(data), {
request.onreadystatechange = function () { 'Kind': kind
if(request.readyState == 4) { })
buttons.save.querySelector('i').changeToDone((request.status != 201), html); .then(() => {
} buttons.setDone('save')
} })
.catch(e => {
console.log(e);
buttons.setDone('save', false)
})
} }
document.querySelector('#save').addEventListener('click', event => { document.querySelector('#save').addEventListener('click', event => {

41
_embed/public/js/listing.js
View File

@ -121,9 +121,10 @@ listing.rename = function (event) {
event.preventDefault(); event.preventDefault();
let newName = event.currentTarget.querySelector('input').value, let newName = event.currentTarget.querySelector('input').value,
newLink = removeLastDirectoryPartOf(link) + "/" + newName, newLink = removeLastDirectoryPartOf(link) + "/" + newName;
html = buttons.rename.querySelector('i').changeToLoading();
closePrompt(event); closePrompt(event);
buttons.setLoading('rename');
webdav.move(link, newLink).then(() => { webdav.move(link, newLink).then(() => {
listing.reload(() => { listing.reload(() => {
@ -133,11 +134,10 @@ listing.rename = function (event) {
listing.handleSelectionChange(); listing.handleSelectionChange();
}); });
buttons.rename.querySelector('i').changeToDone(false, html); buttons.setDone('rename');
}).catch(error => { }).catch(error => {
field.innerHTML = name; field.innerHTML = name;
buttons.rename.querySelector('i').changeToDone(true, html); buttons.setDone('rename', false);
console.log(error); console.log(error);
}); });
@ -158,8 +158,9 @@ listing.rename = function (event) {
} }
listing.handleFiles = function (files, base) { listing.handleFiles = function (files, base) {
let html = buttons.upload.querySelector('i').changeToLoading(), buttons.setLoading('upload');
promises = [];
let promises = [];
for(let file of files) { for(let file of files) {
promises.push(webdav.put(window.location.pathname + base + file.name, file)); promises.push(webdav.put(window.location.pathname + base + file.name, file));
@ -168,11 +169,11 @@ listing.handleFiles = function (files, base) {
Promise.all(promises) Promise.all(promises)
.then(() => { .then(() => {
listing.reload(); listing.reload();
buttons.upload.querySelector('i').changeToDone(false, html); buttons.setDone('upload');
}) })
.catch(e => { .catch(e => {
console.log(e); console.log(e);
buttons.upload.querySelector('i').changeToDone(true, html); buttons.setDone('upload', false);
}) })
return false; return false;
@ -276,20 +277,19 @@ listing.newFileButton = function (event) {
listing.newFilePrompt = function (event) { listing.newFilePrompt = function (event) {
event.preventDefault(); event.preventDefault();
buttons.setLoading('new');
let button = document.getElementById('new'), let name = event.currentTarget.querySelector('input').value;
html = button.querySelector('i').changeToLoading(),
request = new XMLHttpRequest(),
name = event.currentTarget.querySelector('input').value;
request.open((name.endsWith("/") ? "MKCOL" : "PUT"), toWebDavURL(window.location.pathname + name)); webdav.new(window.location.pathname + name)
request.send(); .then(() => {
request.onreadystatechange = function () { buttons.setDone('new');
if(request.readyState == 4) {
button.querySelector('i').changeToDone((request.status != 201), html);
listing.reload(); listing.reload();
} })
} .catch(e => {
console.log(e);
buttons.setDone('new', false);
});
closePrompt(event); closePrompt(event);
return false; return false;
@ -346,7 +346,6 @@ window.addEventListener('keydown', (event) => {
} }
if(event.ctrlKey || event.metaKey) { if(event.ctrlKey || event.metaKey) {
console.log("hey")
switch(String.fromCharCode(event.which).toLowerCase()) { switch(String.fromCharCode(event.which).toLowerCase()) {
case 's': case 's':
event.preventDefault(); event.preventDefault();