push
Former-commit-id: f94f18227d86f20787dc94f838c9914689a3cc96
This commit is contained in:
Henrique Dias
465
_embed/public/js/listing.js
Normal file
465
_embed/public/js/listing.js
Normal file
@@ -0,0 +1,465 @@
|
||||
'use strict';
|
||||
|
||||
var selectedItems = [];
|
||||
|
||||
var reloadListing = function(callback) {
|
||||
let request = new XMLHttpRequest();
|
||||
request.open('GET', window.location);
|
||||
request.setRequestHeader('Minimal', 'true');
|
||||
request.send();
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState == 4) {
|
||||
if (request.status == 200) {
|
||||
document.querySelector('body main').innerHTML = request.responseText;
|
||||
addNewDirEvents();
|
||||
|
||||
if (typeof callback == 'function') {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Rename file event
|
||||
var renameEvent = function(event) {
|
||||
if (this.classList.contains('disabled') || !selectedItems.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// This mustn't happen
|
||||
if (selectedItems.length > 1) {
|
||||
alert("Something went wrong. Please refresh the page.");
|
||||
location.refresh();
|
||||
}
|
||||
|
||||
let item = document.getElementById(selectedItems[0]),
|
||||
link = item.dataset.url,
|
||||
span = item.getElementsByTagName('span')[0],
|
||||
name = span.innerHTML;
|
||||
|
||||
span.setAttribute('contenteditable', 'true');
|
||||
span.focus();
|
||||
|
||||
let keyDownEvent = (event) => {
|
||||
if (event.keyCode == 13) {
|
||||
let newName = span.innerHTML,
|
||||
newLink = removeLastDirectoryPartOf(toWebDavURL(link)) + newName,
|
||||
html = document.getElementById('rename').changeToLoading(),
|
||||
request = new XMLHttpRequest();
|
||||
|
||||
request.open('MOVE', toWebDavURL(link));
|
||||
request.setRequestHeader('Destination', newLink);
|
||||
request.setRequestHeader('Content-type', 'text/plain; charset=utf-8');
|
||||
request.send();
|
||||
request.onreadystatechange = function() {
|
||||
// TODO: redirect if it's moved to another folder
|
||||
|
||||
if (request.readyState == 4) {
|
||||
if (request.status != 201 && request.status != 204) {
|
||||
span.innerHTML = name;
|
||||
} else {
|
||||
let newLink = encodeURI(link.replace(name, newName));
|
||||
console.log(request.body)
|
||||
reloadListing(() => {
|
||||
newName = btoa(newName);
|
||||
selectedItems = [newName];
|
||||
document.getElementById(newName).setAttribute("aria-selected", true);
|
||||
document.sendCostumEvent('changed-selected');
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('rename').changeToDone((request.status != 201 && request.status != 204), html);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.KeyCode == 27) {
|
||||
span.innerHTML = name;
|
||||
}
|
||||
|
||||
if (event.keyCode == 13 || event.keyCode == 27) {
|
||||
span.setAttribute('contenteditable', 'false');
|
||||
span.removeEventListener('keydown', keyDownEvent);
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
span.addEventListener('keydown', keyDownEvent);
|
||||
span.addEventListener('blur', (event) => {
|
||||
span.innerHTML = name;
|
||||
span.setAttribute('contenteditable', 'false');
|
||||
span.removeEventListener('keydown', keyDownEvent);
|
||||
item.removeEventListener('click', preventDefault);
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Upload files
|
||||
var handleFiles = function(files, base) {
|
||||
let button = document.getElementById("upload");
|
||||
let html = button.changeToLoading();
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
let request = new XMLHttpRequest();
|
||||
request.open('PUT', toWebDavURL(window.location.pathname + base + files[i].name));
|
||||
|
||||
request.send(files[i]);
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState == 4) {
|
||||
if (request.status == 201) {
|
||||
reloadListing();
|
||||
}
|
||||
|
||||
button.changeToDone((request.status != 201), html);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Handles the back button event
|
||||
var backEvent = function(event) {
|
||||
var items = document.getElementsByClassName('item');
|
||||
Array.from(items).forEach(link => {
|
||||
link.setAttribute("aria-selected", false);
|
||||
});
|
||||
selectedItems = [];
|
||||
|
||||
var event = new CustomEvent('changed-selected');
|
||||
document.dispatchEvent(event);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Toggles the view mode
|
||||
var viewEvent = function(event) {
|
||||
let cookie = document.getCookie('view-list');
|
||||
let listing = document.getElementById('listing');
|
||||
|
||||
if (cookie != 'true') {
|
||||
document.cookie = 'view-list=true';
|
||||
} else {
|
||||
document.cookie = 'view-list=false';
|
||||
}
|
||||
|
||||
handleViewType(document.getCookie('view-list'));
|
||||
return false;
|
||||
}
|
||||
|
||||
// Handles the view mode change
|
||||
var handleViewType = function(viewList) {
|
||||
let listing = document.getElementById('listing');
|
||||
let button = document.getElementById('view');
|
||||
|
||||
if (viewList == "true") {
|
||||
listing.classList.add('list');
|
||||
button.innerHTML = '<i class="material-icons" title="Switch View">view_module</i> <span>Switch view</span>';
|
||||
return false;
|
||||
}
|
||||
|
||||
button.innerHTML = '<i class="material-icons" title="Switch View">view_list</i> <span>Switch view</span>';
|
||||
listing.classList.remove('list');
|
||||
return false;
|
||||
}
|
||||
|
||||
var addNewDirEvents = function() {
|
||||
document.getElementById('new').addEventListener('click', event => {
|
||||
let newdir = document.getElementById('newdir');
|
||||
newdir.classList.add('enabled');
|
||||
newdir.focus();
|
||||
});
|
||||
|
||||
document.getElementById('newdir').addEventListener('blur', event => {
|
||||
document.getElementById('newdir').classList.remove('enabled');
|
||||
});
|
||||
|
||||
document.getElementById('newdir').addEventListener('keydown', newDirEvent);
|
||||
}
|
||||
|
||||
// Handles the new directory event
|
||||
var newDirEvent = function(event) {
|
||||
// TODO: create new dir button and new file button
|
||||
if (event.keyCode == 27) {
|
||||
document.getElementById('newdir').classList.toggle('enabled');
|
||||
setTimeout(() => {
|
||||
document.getElementById('newdir').value = '';
|
||||
}, 200);
|
||||
}
|
||||
|
||||
if (event.keyCode == 13) {
|
||||
event.preventDefault();
|
||||
|
||||
let button = document.getElementById('new');
|
||||
let html = button.changeToLoading();
|
||||
let request = new XMLHttpRequest();
|
||||
let name = document.getElementById('newdir').value;
|
||||
|
||||
request.open((name.endsWith("/") ? "MKCOL" : "PUT"), toWebDavURL(window.location.pathname + name));
|
||||
|
||||
request.send();
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState == 4) {
|
||||
button.changeToDone((request.status != 201), html);
|
||||
reloadListing(() => {
|
||||
addNewDirEvents();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Handles the event when there is change on selected elements
|
||||
document.addEventListener("changed-selected", function(event) {
|
||||
redefineDownloadURLs();
|
||||
|
||||
let selectedNumber = selectedItems.length,
|
||||
fileAction = document.getElementById("file-only");
|
||||
|
||||
if (selectedNumber) {
|
||||
fileAction.classList.remove("disabled");
|
||||
|
||||
if (selectedNumber > 1) {
|
||||
document.getElementById("open").classList.add("disabled");
|
||||
document.getElementById("rename").classList.add("disabled");
|
||||
}
|
||||
|
||||
if (selectedNumber == 1) {
|
||||
document.getElementById("open").classList.remove("disabled");
|
||||
document.getElementById("rename").classList.remove("disabled");
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
fileAction.classList.add("disabled");
|
||||
return false;
|
||||
});
|
||||
|
||||
var redefineDownloadURLs = function() {
|
||||
let files = "";
|
||||
|
||||
for (let i = 0; i < selectedItems.length; i++) {
|
||||
let url = document.getElementById(selectedItems[i]).dataset.url;
|
||||
files += url.replace(window.location.pathname, "") + ",";
|
||||
}
|
||||
|
||||
files = files.substring(0, files.length - 1);
|
||||
files = encodeURIComponent(files);
|
||||
|
||||
let links = document.querySelectorAll("#download ul a");
|
||||
Array.from(links).forEach(link => {
|
||||
link.href = "?download=" + link.dataset.format + "&files=" + files;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('listing', event => {
|
||||
// Handles the current view mode and adds the event to the button
|
||||
handleViewType(document.getCookie("view-list"));
|
||||
document.getElementById("view").addEventListener("click", viewEvent);
|
||||
|
||||
let updateColumns = () => {
|
||||
let columns = Math.floor(document.getElementById('listing').offsetWidth / 300),
|
||||
itens = getCSSRule('#listing .item');
|
||||
|
||||
itens.style.width = `calc(${100/columns}% - 1em)`;
|
||||
}
|
||||
|
||||
updateColumns();
|
||||
window.addEventListener("resize", () => {
|
||||
updateColumns();
|
||||
});
|
||||
|
||||
// Add event to back button and executes back event on ESC
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.keyCode == 27) {
|
||||
backEvent(event);
|
||||
}
|
||||
});
|
||||
|
||||
if (user.AllowCommands) {
|
||||
let search = document.getElementById("search"),
|
||||
searchInput = search.querySelector("input"),
|
||||
searchDiv = search.querySelector("div"),
|
||||
hover = false,
|
||||
focus = false;
|
||||
|
||||
searchInput.addEventListener('focus', event => {
|
||||
focus = true;
|
||||
search.classList.add('active');
|
||||
});
|
||||
|
||||
searchDiv.addEventListener('mouseover', event => {
|
||||
hover = true;
|
||||
search.classList.add('active');
|
||||
});
|
||||
|
||||
searchInput.addEventListener('blur', event => {
|
||||
focus = false;
|
||||
if (hover) return;
|
||||
search.classList.remove('active');
|
||||
});
|
||||
|
||||
search.addEventListener('mouseleave', event => {
|
||||
hover = false;
|
||||
if (focus) return;
|
||||
search.classList.remove('active');
|
||||
});
|
||||
|
||||
search.addEventListener("click", event => {
|
||||
search.classList.add("active");
|
||||
search.querySelector("input").focus();
|
||||
});
|
||||
|
||||
document.querySelector('#search > div div').innerHTML = "Search or use one of your supported commands: " + user.Commands.join(", ") + ".";
|
||||
document.querySelector('#search input').addEventListener('keyup', searchEvent);
|
||||
}
|
||||
|
||||
if (user.AllowEdit) {
|
||||
// Enables rename button
|
||||
document.getElementById("rename").addEventListener("click", renameEvent);
|
||||
}
|
||||
|
||||
if (user.AllowNew) {
|
||||
// Enables upload button
|
||||
document.getElementById("upload").addEventListener("click", (event) => {
|
||||
document.getElementById("upload-input").click();
|
||||
});
|
||||
|
||||
addNewDirEvents();
|
||||
|
||||
// Drag and Drop
|
||||
let items = document.getElementsByClassName('item');
|
||||
document.addEventListener("dragover", function(event) {
|
||||
event.preventDefault();
|
||||
}, false);
|
||||
|
||||
document.addEventListener("dragenter", (event) => {
|
||||
Array.from(items).forEach(file => {
|
||||
file.style.opacity = 0.5;
|
||||
});
|
||||
}, false);
|
||||
|
||||
document.addEventListener("dragend", (event) => {
|
||||
Array.from(items).forEach(file => {
|
||||
file.style.opacity = 1;
|
||||
});
|
||||
}, false);
|
||||
|
||||
document.addEventListener("drop", function(event) {
|
||||
event.preventDefault();
|
||||
var dt = event.dataTransfer;
|
||||
var files = dt.files;
|
||||
|
||||
let el = event.target;
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
if (el != null && !el.classList.contains('item')) {
|
||||
el = el.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
if (files.length > 0) {
|
||||
if (el != null && el.classList.contains('item') && el.dataset.dir == "true") {
|
||||
handleFiles(files, el.querySelector('.name').innerHTML + "/");
|
||||
return;
|
||||
}
|
||||
|
||||
handleFiles(files, "");
|
||||
} else {
|
||||
Array.from(items).forEach(file => {
|
||||
file.style.opacity = 1;
|
||||
});
|
||||
}
|
||||
|
||||
}, false);
|
||||
}
|
||||
});
|
||||
|
||||
function itemDragStart(event) {
|
||||
let el = event.target;
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
if (!el.classList.contains('item')) {
|
||||
el = el.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
event.dataTransfer.setData("id", el.id);
|
||||
event.dataTransfer.setData("name", el.querySelector('.name').innerHTML);
|
||||
}
|
||||
|
||||
function itemDragOver(event) {
|
||||
event.preventDefault();
|
||||
let el = event.target;
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
if (!el.classList.contains('item')) {
|
||||
el = el.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
el.style.opacity = 1;
|
||||
}
|
||||
|
||||
function itemDrop(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let el = e.target,
|
||||
id = e.dataTransfer.getData("id"),
|
||||
name = e.dataTransfer.getData("name");
|
||||
|
||||
if (id == "" || name == "") return;
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
if (!el.classList.contains('item')) {
|
||||
el = el.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
if (el.id === id) return;
|
||||
|
||||
let oldLink = toWebDavURL(document.getElementById(id).dataset.url),
|
||||
newLink = toWebDavURL(el.dataset.url + name),
|
||||
request = new XMLHttpRequest();
|
||||
|
||||
request.open('MOVE', oldLink);
|
||||
request.setRequestHeader('Destination', newLink);
|
||||
request.send();
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState == 4) {
|
||||
if (request.status == 201 || request.status == 204) {
|
||||
reloadListing();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function openItem(event) {
|
||||
window.location = event.currentTarget.dataset.url;
|
||||
}
|
||||
|
||||
function selectItem(event) {
|
||||
let el = event.currentTarget;
|
||||
|
||||
if (selectedItems.length != 0) event.preventDefault();
|
||||
if (selectedItems.indexOf(el.id) == -1) {
|
||||
if (!event.ctrlKey) backEvent(event);
|
||||
|
||||
el.setAttribute("aria-selected", true);
|
||||
selectedItems.push(el.id);
|
||||
} else {
|
||||
el.setAttribute("aria-selected", false);
|
||||
selectedItems.removeElement(el.id);
|
||||
}
|
||||
|
||||
document.sendCostumEvent("changed-selected");
|
||||
return false;
|
||||
}
|
||||
Reference in New Issue
Block a user