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 
Former-commit-id: f79d715558
This commit is contained in:
Henrique Dias 2017-01-03 18:13:08 +00:00
parent c08a1bc748
commit 49753c9537
3 changed files with 184 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,7 +329,7 @@ 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(),
/* let request = new XMLHttpRequest(),
oldLink = toWebDavURL(window.location.pathname),
newLink = toWebDavURL(event.srcElement.querySelector("li[aria-selected=true]").innerHTML + "/");
@ -297,7 +342,7 @@ function moveSelected(event) {
window.reload();
}
}
}
} */
}
function moveEvent(event) {
@ -345,44 +390,41 @@ function moveEvent(event) {
}
}
function deleteSelected(single) {
return function (event) {
event.preventDefault();
Array.from(selectedItems).forEach(id => {
let request = new XMLHttpRequest(),
html = buttons.delete.querySelector('i').changeToLoading(),
el,
url;
if(single) {
url = window.location.pathname;
} else {
el = document.getElementById(id);
url = el.dataset.url;
}
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);
}
}
buttons.delete.querySelector('i').changeToDone(request.status != 204, html);
}
}
request.send();
});
function deleteOnSingleFile() {
closePrompt(event);
buttons.setLoading('delete');
let promises = [];
webdav.delete(window.location.pathname)
.then(() => {
window.location.pathname = removeLastDirectoryPartOf(window.location.pathname);
})
.catch(e => {
buttons.setDone('delete', false);
console.log(e)
})
}
function deleteOnListing() {
closePrompt(event);
buttons.setLoading('delete');
let promises = [];
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');

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

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

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

@ -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();