mirror of
https://github.com/filebrowser/filebrowser.git
synced 2024-06-07 23:00:43 +00:00
612 lines
16 KiB
JavaScript
612 lines
16 KiB
JavaScript
"use strict";
|
|
|
|
var selectedItems = [];
|
|
|
|
// Array prototype function to remove an element
|
|
Array.prototype.removeElement = function (element) {
|
|
var i = this.indexOf(element);
|
|
if (i != -1) {
|
|
this.splice(i, 1);
|
|
}
|
|
}
|
|
|
|
// 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.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) {
|
|
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 type 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">view_module</i>';
|
|
return false;
|
|
}
|
|
|
|
button.innerHTML = '<i class="material-icons">view_list</i>';
|
|
listing.classList.remove('list');
|
|
return false;
|
|
}
|
|
|
|
// Handles the open file button event
|
|
var openEvent = function (event) {
|
|
if (this.classList.contains('disabled')) {
|
|
return false;
|
|
}
|
|
if (selectedItems.length) {
|
|
window.open(selectedItems[0] + '?raw=true');
|
|
return false;
|
|
}
|
|
|
|
window.open(window.location + '?raw=true');
|
|
return false;
|
|
}
|
|
|
|
// Handles the back button event
|
|
var backEvent = function (event) {
|
|
var items = document.getElementsByClassName('item');
|
|
Array.from(items).forEach(link => {
|
|
link.classList.remove('selected');
|
|
});
|
|
selectedItems = [];
|
|
|
|
var event = new CustomEvent('changed-selected');
|
|
document.dispatchEvent(event);
|
|
return false;
|
|
}
|
|
|
|
// Handles the delete button event
|
|
var deleteEvent = function (event) {
|
|
if (selectedItems.length) {
|
|
Array.from(selectedItems).forEach(link => {
|
|
let html = document.getElementById("delete").changeToLoading();
|
|
let request = new XMLHttpRequest();
|
|
|
|
request.open('DELETE', link);
|
|
request.send();
|
|
request.onreadystatechange = function () {
|
|
if (request.readyState == 4) {
|
|
if (request.status == 200) {
|
|
document.getElementById(link).remove();
|
|
console.log(selectedItems);
|
|
selectedItems.removeElement(link);
|
|
}
|
|
|
|
document.getElementById('delete').changeToDone((request.status != 200), html);
|
|
}
|
|
}
|
|
});
|
|
|
|
return false;
|
|
}
|
|
|
|
let request = new XMLHttpRequest();
|
|
request.open('DELETE', window.location);
|
|
request.send();
|
|
request.onreadystatechange = function () {
|
|
if (request.readyState == 4) {
|
|
if (request.status == 200) {
|
|
window.location.pathname = RemoveLastDirectoryPartOf(window.location.pathname);
|
|
}
|
|
|
|
document.getElementById('delete').changeToDone((request.status != 200), html);
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
// Prevent Default event
|
|
var preventDefault = function (event) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
// Rename file event
|
|
var renameEvent = function (event) {
|
|
if (this.classList.contains('disabled')) {
|
|
return false;
|
|
}
|
|
if (selectedItems.length) {
|
|
Array.from(selectedItems).forEach(link => {
|
|
let item = document.getElementById(link);
|
|
let span = item.getElementsByTagName('span')[0];
|
|
let name = span.innerHTML;
|
|
|
|
item.addEventListener('click', preventDefault);
|
|
item.removeEventListener('click', itemClickEvent);
|
|
span.setAttribute('contenteditable', 'true');
|
|
span.focus();
|
|
|
|
let keyDownEvent = (event) => {
|
|
if (event.keyCode == 13) {
|
|
let newName = span.innerHTML;
|
|
let html = document.getElementById('rename').changeToLoading();
|
|
let request = new XMLHttpRequest();
|
|
request.open('PATCH', link);
|
|
request.setRequestHeader('Rename-To', newName);
|
|
request.send();
|
|
request.onreadystatechange = function () {
|
|
if (request.readyState == 4) {
|
|
if (request.status != 200) {
|
|
span.innerHTML = name;
|
|
} else {
|
|
let newLink = link.replace(name, newName);
|
|
item.id = newLink;
|
|
selectedItems.replaceElement(link, newLink);
|
|
span.innerHTML = newName;
|
|
}
|
|
|
|
document.getElementById('rename').changeToDone((request.status != 200), html);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (event.KeyCode == 27) {
|
|
span.innerHTML = name;
|
|
}
|
|
|
|
if (event.keyCode == 13 || event.keyCode == 27) {
|
|
span.setAttribute('contenteditable', 'false');
|
|
span.removeEventListener('keydown', keyDownEvent);
|
|
item.removeEventListener('click', preventDefault);
|
|
item.addEventListener('click', itemClickEvent);
|
|
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;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
// Download file event
|
|
var downloadEvent = function (event) {
|
|
if (this.classList.contains('disabled')) {
|
|
return false;
|
|
}
|
|
if (selectedItems.length) {
|
|
Array.from(selectedItems).forEach(item => {
|
|
window.open(item + "?download=true");
|
|
});
|
|
return false;
|
|
}
|
|
|
|
window.open(window.location + "?download=true");
|
|
return false;
|
|
}
|
|
|
|
var handleFiles = function (files) {
|
|
let button = document.getElementById("upload");
|
|
let html = button.changeToLoading();
|
|
let data = new FormData();
|
|
|
|
for (let i = 0; i < files.length; i++) {
|
|
data.append(files[i].name, files[i]);
|
|
}
|
|
|
|
let request = new XMLHttpRequest();
|
|
request.open('POST', window.location.pathname);
|
|
request.setRequestHeader("Upload", "true");
|
|
request.send(data);
|
|
request.onreadystatechange = function () {
|
|
if (request.readyState == 4) {
|
|
if (request.status == 200) {
|
|
location.reload();
|
|
}
|
|
|
|
button.changeToDone((request.status != 200), html);
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
var RemoveLastDirectoryPartOf = function (url) {
|
|
var arr = url.split('/');
|
|
arr.pop();
|
|
return (arr.join('/'));
|
|
}
|
|
|
|
document.addEventListener("changed-selected", function (event) {
|
|
var toolbar = document.getElementById("toolbar");
|
|
var selectedNumber = selectedItems.length;
|
|
|
|
document.getElementById("selected-number").innerHTML = selectedNumber;
|
|
|
|
if (selectedNumber) {
|
|
toolbar.classList.add("enabled");
|
|
|
|
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;
|
|
}
|
|
|
|
toolbar.classList.remove("enabled");
|
|
return false;
|
|
});
|
|
|
|
var itemClickEvent = function (event) {
|
|
var url = this.getElementsByTagName('a')[0].getAttribute('href');
|
|
|
|
if (selectedItems.length != 0) event.preventDefault();
|
|
if (selectedItems.indexOf(url) == -1) {
|
|
this.classList.add('selected');
|
|
selectedItems.push(url);
|
|
} else {
|
|
this.classList.remove('selected');
|
|
selectedItems.removeElement(url);
|
|
}
|
|
|
|
var event = new CustomEvent('changed-selected');
|
|
document.dispatchEvent(event);
|
|
return false;
|
|
}
|
|
|
|
var localizeDatetime = function (e, index, ar) {
|
|
if (e.textContent === undefined) {
|
|
return;
|
|
}
|
|
var d = new Date(e.getAttribute('datetime'));
|
|
if (isNaN(d)) {
|
|
d = new Date(e.textContent);
|
|
if (isNaN(d)) {
|
|
return;
|
|
}
|
|
}
|
|
e.textContent = d.toLocaleString();
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function (event) {
|
|
|
|
document.getElementById("logout").addEventListener("click", event => {
|
|
let request = new XMLHttpRequest();
|
|
request.open('GET', window.location.pathname, true, "username", "password");
|
|
request.send();
|
|
request.onreadystatechange = function () {
|
|
if (request.readyState == 4) {
|
|
window.location = "/";
|
|
}
|
|
}
|
|
});
|
|
|
|
var timeList = Array.prototype.slice.call(document.getElementsByTagName("time"));
|
|
timeList.forEach(localizeDatetime);
|
|
|
|
var items = document.getElementsByClassName('item');
|
|
Array.from(items).forEach(link => {
|
|
link.addEventListener('click', itemClickEvent);
|
|
});
|
|
|
|
document.getElementById("open").addEventListener("click", openEvent);
|
|
if (document.getElementById("back")) {
|
|
document.getElementById("back").addEventListener("click", backEvent)
|
|
};
|
|
if (document.getElementById("view")) {
|
|
handleViewType(document.getCookie("view-list"));
|
|
document.getElementById("view").addEventListener("click", viewEvent)
|
|
};
|
|
if (document.getElementById("upload")) {
|
|
document.getElementById("upload").addEventListener("click", (event) => {
|
|
document.getElementById("upload-input").click();
|
|
});
|
|
}
|
|
document.getElementById("delete").addEventListener("click", deleteEvent);
|
|
document.getElementById("download").addEventListener("click", downloadEvent);
|
|
|
|
let rename = document.getElementById("rename");
|
|
if (rename) {
|
|
rename.addEventListener("click", renameEvent);
|
|
}
|
|
|
|
if (document.getElementById("listing")) {
|
|
document.addEventListener("dragover", function (event) {
|
|
event.preventDefault();
|
|
}, false);
|
|
|
|
document.addEventListener("dragover", (event) => {
|
|
Array.from(items).forEach(file => {
|
|
file.style.opacity = 0.5;
|
|
});
|
|
}, false);
|
|
|
|
document.addEventListener("dragleave", (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;
|
|
|
|
handleFiles(files);
|
|
}, false);
|
|
}
|
|
|
|
if (document.getElementById('editor')) {
|
|
handleEditorPage();
|
|
}
|
|
|
|
textareaAutoGrow();
|
|
|
|
return false;
|
|
});
|
|
|
|
var textareaAutoGrow = function() {
|
|
let autogrow = function() {
|
|
this.style.height = '5px';
|
|
this.style.height = this.scrollHeight + 'px';
|
|
}
|
|
|
|
let textareas = document.getElementsByTagName('textarea');
|
|
|
|
let addAutoGrow = () => {
|
|
Array.from(textareas).forEach(textarea => {
|
|
autogrow.bind(textarea)();
|
|
textarea.addEventListener('keyup', autogrow);
|
|
});
|
|
}
|
|
|
|
addAutoGrow();
|
|
window.addEventListener('resize', addAutoGrow)
|
|
}
|
|
|
|
var handleEditorPage = function () {
|
|
let container = document.getElementById('editor');
|
|
let kind = container.dataset.kind;
|
|
|
|
if (kind != 'frontmatter-only') {
|
|
let editor = document.getElementById('editor-source');
|
|
let mode = editor.dataset.mode;
|
|
let textarea = document.querySelector('textarea[name="content"]');
|
|
let aceEditor = ace.edit('editor-source');
|
|
aceEditor.getSession().setMode("ace/mode/" + mode);
|
|
aceEditor.getSession().setValue(textarea.value);
|
|
aceEditor.getSession().on('change', function() {
|
|
textarea.value = aceEditor.getSession().getValue();
|
|
});
|
|
aceEditor.setOptions({
|
|
wrap: true,
|
|
maxLines: Infinity,
|
|
theme: "ace/theme/github",
|
|
showPrintMargin: false,
|
|
fontSize: "1em",
|
|
minLines: 20
|
|
});
|
|
}
|
|
|
|
let deleteFrontMatterItemButtons = document.getElementsByClassName('delete');
|
|
Array.from(deleteFrontMatterItemButtons).forEach(button => {
|
|
button.addEventListener('click', deleteFrontMatterItem);
|
|
});
|
|
|
|
|
|
|
|
return false;
|
|
}
|
|
|
|
var deleteFrontMatterItem = function(event) {
|
|
event.preventDefault();
|
|
document.getElementById(this.dataset.delete).remove();
|
|
}
|
|
|
|
var addFrontMatterItem = function(event) {
|
|
/*
|
|
event.preventDefault();
|
|
defaultID = "lorem-ipsum-sin-dolor-amet";
|
|
|
|
// Remove if there is an incomplete new item
|
|
newItem = $("#" + defaultID);
|
|
if (newItem.length) {
|
|
newItem.remove();
|
|
}
|
|
|
|
block = $(this).parent().parent();
|
|
blockType = block.data("type");
|
|
blockID = block.attr("id");
|
|
|
|
// If the Block Type is an array
|
|
if (blockType == "array") {
|
|
newID = blockID + "[]";
|
|
input = blockID;
|
|
input = input.replace(/\[/, '\\[');
|
|
input = input.replace(/\]/, '\\]');
|
|
block.append('<div id="' + newID + '-' + $('#' + input + ' > div').length + '" data-type="array-item"><input name="' + newID + ':auto" id="' + newID + '"></input><span class="actions"> <button class="delete">−</button></span></div></div>');
|
|
}
|
|
|
|
// Main add button, after all blocks
|
|
if (block.is('div') && block.hasClass("frontmatter")) {
|
|
block = $('.blocks');
|
|
blockType = "object";
|
|
}
|
|
|
|
// If the Block is an object
|
|
if (blockType == "object") {
|
|
block.append('<div class="block" id="' + defaultID + '"></div>');
|
|
|
|
newItem = $("#" + defaultID);
|
|
newItem.html('<input id="name-' + defaultID + '" placeholder="Write the field name and press enter..."></input>');
|
|
field = $("#name-" + defaultID);
|
|
|
|
// Show a notification with some information for newbies
|
|
if (!document.cookie.replace(/(?:(?:^|.*;\s*)placeholdertip\s*\=\s*([^;]*).*$)|^.*$/, "$1")) {
|
|
var date = new Date();
|
|
date.setDate(date.getDate() + 365);
|
|
document.cookie = 'placeholdertip=true; expires=' + date.toUTCString + '; path=/';
|
|
|
|
notification({
|
|
text: 'Write the field name and then press enter. If you want to create an array or an object, end the name with ":array" or ":object".',
|
|
type: 'information'
|
|
});
|
|
}
|
|
|
|
$(field).keypress(function(event) {
|
|
// When you press enter within the new name field:
|
|
if (event.which == 13) {
|
|
event.preventDefault();
|
|
// This var should have a value of the type "name[:array, :object]"
|
|
value = field.val();
|
|
|
|
if (value == "") {
|
|
newItem.remove();
|
|
return false;
|
|
}
|
|
|
|
elements = value.split(":")
|
|
|
|
if (elements.length > 2) {
|
|
notification({
|
|
text: "Invalid syntax. It must be 'name[:type]'.",
|
|
type: 'error'
|
|
});
|
|
return false;
|
|
}
|
|
|
|
if (elements.length == 2 && elements[1] != "array" && elements[1] != "object") {
|
|
notification({
|
|
text: "Only arrays and objects are allowed.",
|
|
type: 'error'
|
|
});
|
|
return false;
|
|
}
|
|
|
|
field.remove();
|
|
|
|
if (typeof blockID === "undefined") {
|
|
blockID = elements[0];
|
|
} else {
|
|
blockID = blockID + '[' + elements[0] + ']';
|
|
}
|
|
|
|
if (elements.length == 1) {
|
|
newItem.attr('id', 'block-' + blockID);
|
|
newItem.append('<input name="' + blockID + ':auto" id="' + blockID + '"></input><br>');
|
|
newItem.prepend('<label for="' + blockID + '">' + value + '</label> <span class="actions"><button class="delete">−</button></span>');
|
|
} else {
|
|
type = "";
|
|
|
|
if (elements[1] == "array") {
|
|
type = "array";
|
|
} else {
|
|
type = "object"
|
|
}
|
|
|
|
template = "<fieldset id=\"${blockID}\" data-type=\"${type}\"> <h3>${elements[0]}</h3> <span class=\"actions\"> <button class=\"add\">+</button> <button class=\"delete\">−</button> </span> </fieldset>"
|
|
template = template.replace("${blockID}", blockID);
|
|
template = template.replace("${elements[0]}", elements[0]);
|
|
template = template.replace("${type}", type);
|
|
newItem.after(template);
|
|
newItem.remove();
|
|
}
|
|
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
|
|
return false;
|
|
*/
|
|
}
|