mirror of
https://github.com/filebrowser/filebrowser.git
synced 2024-06-07 23:00:43 +00:00
ab37e6556d
Former-commit-id: 25d9b397bdf2a8d7aa1acea6205c6edf9f2cc520 [formerly d7ca15dc452a36022aca29c72d0526318a3f40ee] [formerly f1358b8ce40ffecf5d81bf7a71ad4e2afa0063cd [formerly 092eac0575]]
Former-commit-id: ee48d4374d4735692eb3a1555a23ab3aa7b21572 [formerly aa890e47043adae2419942219c42dd6ba23fbd02]
Former-commit-id: e0016c5a98b941755f4e4442c16584523bea2408
667 lines
17 KiB
JavaScript
667 lines
17 KiB
JavaScript
'use strict'
|
|
|
|
var tempID = '_fm_internal_temporary_id'
|
|
var ssl = (window.location.protocol === 'https:')
|
|
var templates = {}
|
|
var selectedItems = []
|
|
var overlay
|
|
var clickOverlay
|
|
|
|
// Removes an element, if exists, from an array
|
|
Array.prototype.removeElement = function (element) {
|
|
var i = this.indexOf(element)
|
|
if (i !== -1) {
|
|
this.splice(i, 1)
|
|
}
|
|
}
|
|
|
|
// Replaces an element inside an array by another
|
|
Array.prototype.replaceElement = function (oldElement, newElement) {
|
|
var i = this.indexOf(oldElement)
|
|
if (i !== -1) {
|
|
this[i] = newElement
|
|
}
|
|
}
|
|
|
|
// Sends a costum event to itself
|
|
Document.prototype.sendCostumEvent = function (text) {
|
|
this.dispatchEvent(new window.CustomEvent(text))
|
|
}
|
|
|
|
// Gets the content of a cookie
|
|
Document.prototype.getCookie = function (name) {
|
|
var re = new RegExp('(?:(?:^|.*;\\s*)' + name + '\\s*\\=\\s*([^;]*).*$)|^.*$')
|
|
return document.cookie.replace(re, '$1')
|
|
}
|
|
|
|
// Remove the last directory of an url
|
|
var removeLastDirectoryPartOf = function (url) {
|
|
var arr = url.split('/')
|
|
if (arr.pop() === '') {
|
|
arr.pop()
|
|
}
|
|
return (arr.join('/'))
|
|
}
|
|
|
|
function getCSSRule (rules) {
|
|
for (let i = 0; i < rules.length; i++) {
|
|
rules[i] = rules[i].toLowerCase()
|
|
}
|
|
|
|
let result = null
|
|
let find = Array.prototype.find
|
|
|
|
find.call(document.styleSheets, styleSheet => {
|
|
result = find.call(styleSheet.cssRules, cssRule => {
|
|
let found = false
|
|
|
|
if (cssRule instanceof CSSStyleRule) {
|
|
for (let i = 0; i < rules.length; i++) {
|
|
if (cssRule.selectorText.toLowerCase() === rules[i]) {
|
|
found = true
|
|
}
|
|
}
|
|
}
|
|
|
|
return found
|
|
})
|
|
|
|
return result != null
|
|
})
|
|
|
|
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 *
|
|
* *
|
|
* * * * * * * * * * * * * * * */
|
|
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 window.XMLHttpRequest()
|
|
let destination = newLink.replace(baseURL + '/', webdavURL + '/')
|
|
|
|
destination = window.location.origin + destination.substring(prefixURL.length)
|
|
|
|
request.open('MOVE', webdav.convertURL(oldLink), true)
|
|
request.setRequestHeader('Destination', destination)
|
|
request.onload = () => {
|
|
if (request.status === 201 || request.status === 204) {
|
|
resolve()
|
|
} else {
|
|
reject(request.statusText)
|
|
}
|
|
}
|
|
request.onerror = () => reject(request.statusText)
|
|
request.send()
|
|
})
|
|
}
|
|
|
|
webdav.put = function (link, body, headers = {}) {
|
|
return new Promise((resolve, reject) => {
|
|
let request = new window.XMLHttpRequest()
|
|
request.open('PUT', webdav.convertURL(link), true)
|
|
|
|
for (let key in headers) {
|
|
request.setRequestHeader(key, headers[key])
|
|
}
|
|
|
|
request.onload = () => {
|
|
if (request.status == 201) {
|
|
resolve()
|
|
} else {
|
|
reject(request.statusText)
|
|
}
|
|
}
|
|
request.onerror = () => reject(request.statusText)
|
|
request.send(body)
|
|
})
|
|
}
|
|
|
|
webdav.propfind = function (link, body, headers = {}) {
|
|
return new Promise((resolve, reject) => {
|
|
let request = new window.XMLHttpRequest()
|
|
request.open('PROPFIND', webdav.convertURL(link), true)
|
|
|
|
for (let key in headers) {
|
|
request.setRequestHeader(key, headers[key])
|
|
}
|
|
|
|
request.onload = () => {
|
|
if (request.status < 300) {
|
|
resolve(request.responseText)
|
|
} else {
|
|
reject(request.statusText)
|
|
}
|
|
}
|
|
request.onerror = () => reject(request.statusText)
|
|
request.send(body)
|
|
})
|
|
}
|
|
|
|
webdav.delete = function (link) {
|
|
return new Promise((resolve, reject) => {
|
|
let request = new window.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()
|
|
})
|
|
}
|
|
|
|
webdav.new = function (link) {
|
|
return new Promise((resolve, reject) => {
|
|
let request = new window.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()
|
|
})
|
|
}
|
|
|
|
/* * * * * * * * * * * * * * * *
|
|
* *
|
|
* EVENTS *
|
|
* *
|
|
* * * * * * * * * * * * * * * */
|
|
function closePrompt (event) {
|
|
let prompt = document.querySelector('.prompt')
|
|
|
|
if (!prompt) return
|
|
|
|
if (typeof event !== 'undefined') {
|
|
event.preventDefault()
|
|
}
|
|
|
|
document.querySelector('.overlay').classList.remove('active')
|
|
prompt.classList.remove('active')
|
|
|
|
setTimeout(() => {
|
|
prompt.remove()
|
|
}, 100)
|
|
}
|
|
|
|
function notImplemented (event) {
|
|
event.preventDefault()
|
|
clickOverlay.click()
|
|
|
|
let clone = document.importNode(templates.message.content, true)
|
|
clone.querySelector('h3').innerHTML = 'Not implemented'
|
|
clone.querySelector('p').innerHTML = "Sorry, but this feature wasn't implemented yet."
|
|
|
|
document.querySelector('body').appendChild(clone)
|
|
document.querySelector('.overlay').classList.add('active')
|
|
document.querySelector('.prompt').classList.add('active')
|
|
}
|
|
|
|
// Prevent Default event
|
|
var preventDefault = function (event) {
|
|
event.preventDefault()
|
|
}
|
|
|
|
function logoutEvent (event) {
|
|
let request = new window.XMLHttpRequest()
|
|
request.open('GET', window.location.pathname, true, 'username', 'password')
|
|
request.send()
|
|
request.onreadystatechange = function () {
|
|
if (request.readyState === 4) {
|
|
window.location = '/'
|
|
}
|
|
}
|
|
}
|
|
|
|
function getHash (event, hash) {
|
|
event.preventDefault()
|
|
|
|
let request = new window.XMLHttpRequest()
|
|
let link
|
|
|
|
if (selectedItems.length) {
|
|
link = document.getElementById(selectedItems[0]).dataset.url
|
|
} else {
|
|
link = window.location.pathname
|
|
}
|
|
|
|
request.open('GET', `${link}?checksum=${hash}`, true)
|
|
|
|
request.onload = () => {
|
|
if (request.status >= 300) {
|
|
console.log(request.statusText)
|
|
return
|
|
}
|
|
event.target.parentElement.innerHTML = request.responseText
|
|
}
|
|
request.onerror = (e) => console.log(e)
|
|
request.send()
|
|
}
|
|
|
|
function infoEvent (event) {
|
|
event.preventDefault()
|
|
if (event.currentTarget.classList.contains('disabled')) {
|
|
return
|
|
}
|
|
|
|
let dir = false
|
|
let link
|
|
|
|
if (selectedItems.length) {
|
|
link = document.getElementById(selectedItems[0]).dataset.url
|
|
dir = document.getElementById(selectedItems[0]).dataset.dir
|
|
} else {
|
|
if (document.getElementById('listing') !== null) {
|
|
dir = true
|
|
}
|
|
|
|
link = window.location.pathname
|
|
}
|
|
|
|
buttons.setLoading('info', false)
|
|
|
|
webdav.propfind(link)
|
|
.then((text) => {
|
|
let parser = new window.DOMParser()
|
|
let xml = parser.parseFromString(text, 'text/xml')
|
|
let clone = document.importNode(templates.info.content, true)
|
|
|
|
let value = xml.getElementsByTagName('displayname')
|
|
if (value.length > 0) {
|
|
clone.getElementById('display_name').innerHTML = value[0].innerHTML
|
|
} else {
|
|
clone.getElementById('display_name').innerHTML = xml.getElementsByTagName('D:displayname')[0].innerHTML
|
|
}
|
|
|
|
value = xml.getElementsByTagName('getcontentlength')
|
|
if (value.length > 0) {
|
|
clone.getElementById('content_length').innerHTML = value[0].innerHTML
|
|
} else {
|
|
clone.getElementById('content_length').innerHTML = xml.getElementsByTagName('D:getcontentlength')[0].innerHTML
|
|
}
|
|
|
|
value = xml.getElementsByTagName('getlastmodified')
|
|
if (value.length > 0) {
|
|
clone.getElementById('last_modified').innerHTML = value[0].innerHTML
|
|
} else {
|
|
clone.getElementById('last_modified').innerHTML = xml.getElementsByTagName('D:getlastmodified')[0].innerHTML
|
|
}
|
|
|
|
if (dir === true || dir === 'true') {
|
|
clone.querySelector('.file-only').style.display = 'none'
|
|
}
|
|
|
|
document.querySelector('body').appendChild(clone)
|
|
document.querySelector('.overlay').classList.add('active')
|
|
document.querySelector('.prompt').classList.add('active')
|
|
buttons.setDone('info', true)
|
|
})
|
|
.catch(e => {
|
|
buttons.setDone('info', false)
|
|
console.log(e)
|
|
})
|
|
}
|
|
|
|
function deleteOnSingleFile () {
|
|
closePrompt()
|
|
buttons.setLoading('delete')
|
|
|
|
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()
|
|
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
|
|
function deleteEvent (event) {
|
|
let single = false
|
|
|
|
if (!selectedItems.length) {
|
|
selectedItems = ['placeholder']
|
|
single = true
|
|
}
|
|
|
|
let clone = document.importNode(templates.question.content, true)
|
|
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'
|
|
|
|
document.body.appendChild(clone)
|
|
document.querySelector('.overlay').classList.add('active')
|
|
document.querySelector('.prompt').classList.add('active')
|
|
|
|
return false
|
|
}
|
|
|
|
function resetSearchText () {
|
|
let box = document.querySelector('#search > div div')
|
|
|
|
if (user.AllowCommands) {
|
|
box.innerHTML = `Search or use one of your supported commands: ${user.Commands.join(", ")}.`
|
|
} else {
|
|
box.innerHTML = 'Type and press enter to search.'
|
|
}
|
|
}
|
|
|
|
function searchEvent (event) {
|
|
if (this.value.length === 0) {
|
|
resetSearchText()
|
|
return
|
|
}
|
|
|
|
let value = this.value,
|
|
search = document.getElementById('search'),
|
|
scrollable = document.querySelector('#search > div'),
|
|
box = document.querySelector('#search > div div'),
|
|
pieces = value.split(' '),
|
|
supported = false
|
|
|
|
user.Commands.forEach(function (cmd) {
|
|
if (cmd == pieces[0]) {
|
|
supported = true
|
|
}
|
|
})
|
|
|
|
if (!supported || !user.AllowCommands) {
|
|
box.innerHTML = 'Press enter to search.'
|
|
} else {
|
|
box.innerHTML = 'Press enter to execute.'
|
|
}
|
|
|
|
if (event.keyCode === 13) {
|
|
box.innerHTML = ''
|
|
search.classList.add('ongoing')
|
|
|
|
let url = window.location.host + window.location.pathname
|
|
|
|
if (document.getElementById('editor')) {
|
|
url = removeLastDirectoryPartOf(url)
|
|
}
|
|
|
|
let protocol = ssl ? 'wss:' : 'ws:'
|
|
|
|
if (supported && user.AllowCommands) {
|
|
let conn = new window.WebSocket(`${protocol}//${url}?command=true`)
|
|
|
|
conn.onopen = function () {
|
|
conn.send(value)
|
|
}
|
|
|
|
conn.onmessage = function (event) {
|
|
box.innerHTML = event.data
|
|
scrollable.scrollTop = scrollable.scrollHeight
|
|
}
|
|
|
|
conn.onclose = function (event) {
|
|
search.classList.remove('ongoing')
|
|
listing.reload()
|
|
}
|
|
|
|
return
|
|
}
|
|
|
|
box.innerHTML = '<ul></ul>'
|
|
|
|
let ul = box.querySelector('ul')
|
|
let conn = new window.WebSocket(`${protocol}//${url}?search=true`)
|
|
|
|
conn.onopen = function () {
|
|
conn.send(value)
|
|
}
|
|
|
|
conn.onmessage = function (event) {
|
|
ul.innerHTML += '<li><a href="' + event.data + '">' + event.data + '</a></li>'
|
|
scrollable.scrollTop = scrollable.scrollHeight
|
|
}
|
|
|
|
conn.onclose = function (event) {
|
|
search.classList.remove('ongoing')
|
|
}
|
|
}
|
|
}
|
|
|
|
function setupSearch () {
|
|
let search = document.getElementById('search')
|
|
let searchInput = search.querySelector('input')
|
|
let searchDiv = search.querySelector('div')
|
|
let hover = false
|
|
let focus = false
|
|
|
|
resetSearchText()
|
|
|
|
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()
|
|
})
|
|
|
|
searchInput.addEventListener('keyup', searchEvent)
|
|
}
|
|
|
|
function closeHelp (event) {
|
|
event.preventDefault()
|
|
|
|
document.querySelector('.help').classList.remove('active')
|
|
document.querySelector('.overlay').classList.remove('active')
|
|
}
|
|
|
|
function openHelp (event) {
|
|
closePrompt(event)
|
|
|
|
document.querySelector('.help').classList.add('active')
|
|
document.querySelector('.overlay').classList.add('active')
|
|
}
|
|
|
|
window.addEventListener('keydown', (event) => {
|
|
if (event.keyCode === 27) {
|
|
if (document.querySelector('.help.active')) {
|
|
closeHelp(event)
|
|
}
|
|
}
|
|
|
|
if (event.keyCode === 46) {
|
|
deleteEvent(event)
|
|
}
|
|
|
|
if (event.keyCode === 112) {
|
|
event.preventDefault()
|
|
openHelp(event)
|
|
}
|
|
})
|
|
|
|
/* * * * * * * * * * * * * * * *
|
|
* *
|
|
* BOOTSTRAP *
|
|
* *
|
|
* * * * * * * * * * * * * * * */
|
|
|
|
document.addEventListener('DOMContentLoaded', function (event) {
|
|
overlay = document.querySelector('.overlay')
|
|
clickOverlay = document.querySelector('#click-overlay')
|
|
|
|
buttons.logout = document.getElementById('logout')
|
|
buttons.delete = document.getElementById('delete')
|
|
buttons.previous = document.getElementById('previous')
|
|
buttons.info = document.getElementById('info')
|
|
|
|
// Attach event listeners
|
|
buttons.logout.addEventListener('click', logoutEvent)
|
|
buttons.info.addEventListener('click', infoEvent)
|
|
|
|
templates.question = document.querySelector('#question-template')
|
|
templates.info = document.querySelector('#info-template')
|
|
templates.message = document.querySelector('#message-template')
|
|
templates.move = document.querySelector('#move-template')
|
|
|
|
if (user.AllowEdit) {
|
|
buttons.delete.addEventListener('click', deleteEvent)
|
|
}
|
|
|
|
let dropdownButtons = document.querySelectorAll('.action[data-dropdown]')
|
|
Array.from(dropdownButtons).forEach(button => {
|
|
button.addEventListener('click', event => {
|
|
button.querySelector('ul').classList.toggle('active')
|
|
clickOverlay.classList.add('active')
|
|
|
|
clickOverlay.addEventListener('click', event => {
|
|
button.querySelector('ul').classList.remove('active')
|
|
clickOverlay.classList.remove('active')
|
|
})
|
|
})
|
|
})
|
|
|
|
overlay.addEventListener('click', event => {
|
|
if (document.querySelector('.help.active')) {
|
|
closeHelp(event)
|
|
return
|
|
}
|
|
|
|
closePrompt(event)
|
|
})
|
|
|
|
let mainActions = document.getElementById('main-actions')
|
|
|
|
document.getElementById('more').addEventListener('click', event => {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
|
|
clickOverlay.classList.add('active')
|
|
mainActions.classList.add('active')
|
|
|
|
clickOverlay.addEventListener('click', event => {
|
|
mainActions.classList.remove('active')
|
|
clickOverlay.classList.remove('active')
|
|
})
|
|
})
|
|
|
|
setupSearch()
|
|
return false
|
|
})
|