github
/
filebrowser
mirror of https://github.com/filebrowser/filebrowser
1
0
Fork 0
Code Issues Releases Wiki Activity

comments and improvements

pull/144/head
Henrique Dias 2016-06-21 14:46:59 +01:00
parent 71b68a6f8e
commit 929f0b3454
1 changed files with 106 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
assets/public/js/application.js
View File

@ -2,6 +2,7 @@
var selectedItems = []; var selectedItems = [];
// Array prototype function to remove an element
Array.prototype.removeElement = function(element) { Array.prototype.removeElement = function(element) {
var i = this.indexOf(element); var i = this.indexOf(element);
if (i != -1) { if (i != -1) {
@ -9,12 +10,77 @@ Array.prototype.removeElement = function(element) {
} }
} }
// Array prototype function to replace an element
Array.prototype.replaceElement = function(oldEl, newEl) {
var i = this.indexOf(oldEl);
if (i != -1) {
this[i] = newEl;
}
}
// Document prototype function to send a costum event to itself
Document.prototype.sendCostumEvent = function(text) { Document.prototype.sendCostumEvent = function(text) {
document.dispatchEvent(new CustomEvent(text)); document.dispatchEvent(new CustomEvent(text));
} }
// Document prototype to get a cookie content
Document.prototype.getCookie = function(name) {
var re = new RegExp("(?:(?:^|.*;\\s*)" + name + "\\s*\\=\\s*([^;]*).*$)|^.*$");
return document.cookie.replace(re, "$1");
}
// Changes a button to the loading animation
Element.prototype.changeToLoading = function() {
let element = this;
let originalText = element.innerHTML;
element.style.opacity = 0;
setTimeout(function() {
element.innerHTML = '<i class="material-icons spin">autorenew</i>';
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 = 1;
if (selectedItems.length == 0) {
document.sendCostumEvent('changed-selected');
}
}
let secondStep = () => {
this.style.opacity = 0;
setTimeout(thirdStep, 200);
}
let firstStep = () => {
if (error) {
this.innerHTML = '<i class="material-icons">close</i>';
} else {
this.innerHTML = '<i class="material-icons">done</i>';
}
this.style.opacity = 1;
setTimeout(secondStep, 1000);
}
setTimeout(firstStep, 200);
return false;
}
// Event for toggling the mode of view
var viewEvent = function(event) { var viewEvent = function(event) {
let cookie = getCookie('view-list'); let cookie = document.getCookie('view-list');
let listing = document.getElementById('listing'); let listing = document.getElementById('listing');
if (cookie != 'true') { if (cookie != 'true') {
@ -23,10 +89,11 @@ var viewEvent = function(event) {
document.cookie = 'view-list=false'; document.cookie = 'view-list=false';
} }
handleViewType(getCookie('view-list')); handleViewType(document.getCookie('view-list'));
return false; return false;
} }
// Handles the view type change
var handleViewType = function(viewList) { var handleViewType = function(viewList) {
let listing = document.getElementById('listing'); let listing = document.getElementById('listing');
let button = document.getElementById('view'); let button = document.getElementById('view');
@ -42,65 +109,18 @@ var handleViewType = function(viewList) {
return false; return false;
} }
var getCookie = function(name) { // Handles the open file button event
var re = new RegExp("(?:(?:^|.*;\\s*)" + name + "\\s*\\=\\s*([^;]*).*$)|^.*$");
return document.cookie.replace(re, "$1");
}
var changeToLoading = function(element) {
var originalText = element.innerHTML;
element.style.opacity = 0;
setTimeout(function() {
element.innerHTML = '<i class="material-icons spin">autorenew</i>';
element.style.opacity = 1;
}, 200);
return originalText;
}
var changeToDone = function(element, error, html) {
element.style.opacity = 0;
let thirdStep = () => {
element.innerHTML = html;
element.style.opacity = 1;
if (selectedItems.length == 0) {
document.sendCostumEvent('changed-selected');
}
}
let secondStep = () => {
element.style.opacity = 0;
setTimeout(thirdStep, 200);
}
let firstStep = () => {
if (error) {
element.innerHTML = '<i class="material-icons">close</i>';
} else {
element.innerHTML = '<i class="material-icons">done</i>';
}
element.style.opacity = 1;
setTimeout(secondStep, 1000);
}
setTimeout(firstStep, 200);
return false;
}
var openEvent = function(event) { var openEvent = function(event) {
if (selectedItems.length) { if (selectedItems.length) {
window.open(selectedItems[0] + "?raw=true"); window.open(selectedItems[0] + '?raw=true');
return false; return false;
} }
window.open(window.location + "?raw=true"); window.open(window.location + '?raw=true');
return false; return false;
} }
// Handles the back button event
var backEvent = function(event) { var backEvent = function(event) {
var items = document.getElementsByClassName('item'); var items = document.getElementsByClassName('item');
Array.from(items).forEach(link => { Array.from(items).forEach(link => {
@ -113,22 +133,24 @@ var backEvent = function(event) {
return false; return false;
} }
// Handles the delete button event
var deleteEvent = function(event) { var deleteEvent = function(event) {
if (selectedItems.length) { if (selectedItems.length) {
Array.from(selectedItems).forEach(item => { Array.from(selectedItems).forEach(link => {
let html = changeToLoading(document.getElementById("delete")); let html = document.getElementById("delete").changeToLoading();
let request = new XMLHttpRequest(); let request = new XMLHttpRequest();
request.open("DELETE", item);
request.open('DELETE', link);
request.send(); request.send();
request.onreadystatechange = function() { request.onreadystatechange = function() {
if (request.readyState == 4) { if (request.readyState == 4) {
if (request.status == 200) { if (request.status == 200) {
document.getElementById(item).remove(); document.getElementById(link).remove();
console.log(selectedItems); console.log(selectedItems);
selectedItems.removeElement(item); selectedItems.removeElement(link);
} }
changeToDone(document.getElementById("delete"), (request.status != 200), html); document.getElementById('delete').changeToDone((request.status != 200), html);
} }
} }
}); });
@ -137,7 +159,7 @@ var deleteEvent = function(event) {
} }
let request = new XMLHttpRequest(); let request = new XMLHttpRequest();
request.open("DELETE", window.location); request.open('DELETE', window.location);
request.send(); request.send();
request.onreadystatechange = function() { request.onreadystatechange = function() {
if (request.readyState == 4) { if (request.readyState == 4) {
@ -145,17 +167,19 @@ var deleteEvent = function(event) {
window.location.pathname = RemoveLastDirectoryPartOf(window.location.pathname); window.location.pathname = RemoveLastDirectoryPartOf(window.location.pathname);
} }
changeToDone(document.getElementById("delete"), (request.status != 200), html); document.getElementById('delete').changeToDone((request.status != 200), html);
} }
} }
return false; return false;
} }
// Prevent Default event
var preventDefault = function(event) { var preventDefault = function(event) {
event.preventDefault(); event.preventDefault();
} }
// Rename file event
var renameEvent = function(event) { var renameEvent = function(event) {
if (selectedItems.length) { if (selectedItems.length) {
Array.from(selectedItems).forEach(link => { Array.from(selectedItems).forEach(link => {
@ -171,7 +195,7 @@ var renameEvent = function(event) {
let keyDownEvent = (event) => { let keyDownEvent = (event) => {
if (event.keyCode == 13) { if (event.keyCode == 13) {
let newName = span.innerHTML; let newName = span.innerHTML;
let html = changeToLoading(document.getElementById('rename')); let html = document.getElementById('rename').changeToLoading();
let request = new XMLHttpRequest(); let request = new XMLHttpRequest();
request.open('PATCH', link); request.open('PATCH', link);
request.setRequestHeader('Rename-To', newName); request.setRequestHeader('Rename-To', newName);
@ -181,10 +205,13 @@ var renameEvent = function(event) {
if (request.status != 200) { if (request.status != 200) {
span.innerHTML = name; span.innerHTML = name;
} else { } else {
let newLink = link.replace(name, newName);
item.id = newLink;
selectedItems.replaceElement(link, newLink);
span.innerHTML = newName; span.innerHTML = newName;
} }
changeToDone(document.getElementById('rename'), (request.status != 200), html); document.getElementById('rename').changeToDone((request.status != 200), html);
} }
} }
} }
@ -200,6 +227,8 @@ var renameEvent = function(event) {
item.addEventListener('click', itemClickEvent); item.addEventListener('click', itemClickEvent);
event.preventDefault(); event.preventDefault();
} }
return false;
} }
span.addEventListener('keydown', keyDownEvent); span.addEventListener('keydown', keyDownEvent);
@ -217,6 +246,7 @@ var renameEvent = function(event) {
return false; return false;
} }
// Download file event
var downloadEvent = function(event) { var downloadEvent = function(event) {
if (selectedItems.length) { if (selectedItems.length) {
Array.from(selectedItems).forEach(item => { Array.from(selectedItems).forEach(item => {
@ -262,20 +292,20 @@ document.addEventListener("changed-selected", function(event) {
}); });
var itemClickEvent = function(event) { var itemClickEvent = function(event) {
var url = this.getElementsByTagName('a')[0].getAttribute('href'); var url = this.getElementsByTagName('a')[0].getAttribute('href');
if (selectedItems.length != 0) event.preventDefault(); if (selectedItems.length != 0) event.preventDefault();
if (selectedItems.indexOf(url) == -1) { if (selectedItems.indexOf(url) == -1) {
this.classList.add('selected'); this.classList.add('selected');
selectedItems.push(url); selectedItems.push(url);
} else { } else {
this.classList.remove('selected'); this.classList.remove('selected');
selectedItems.removeElement(url); selectedItems.removeElement(url);
} }
var event = new CustomEvent('changed-selected'); var event = new CustomEvent('changed-selected');
document.dispatchEvent(event); document.dispatchEvent(event);
return false; return false;
} }
document.addEventListener("DOMContentLoaded", function(event) { document.addEventListener("DOMContentLoaded", function(event) {
@ -289,7 +319,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("back").addEventListener("click", backEvent) document.getElementById("back").addEventListener("click", backEvent)
}; };
if (document.getElementById("view")) { if (document.getElementById("view")) {
handleViewType(getCookie("view-list")); handleViewType(document.getCookie("view-list"));
document.getElementById("view").addEventListener("click", viewEvent) document.getElementById("view").addEventListener("click", viewEvent)
}; };
document.getElementById("delete").addEventListener("click", deleteEvent); document.getElementById("delete").addEventListener("click", deleteEvent);