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

update.

pull/144/head
Henrique Dias 2016-06-22 21:03:48 +01:00
parent 68aea511fa
commit 6bc5b881d6
6 changed files with 304 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,341 +3,357 @@
var selectedItems = []; var selectedItems = [];
// Array prototype function to remove an element // 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) {
this.splice(i, 1); this.splice(i, 1);
} }
} }
// Array prototype function to replace an element // Array prototype function to replace an element
Array.prototype.replaceElement = function(oldEl, newEl) { Array.prototype.replaceElement = function (oldEl, newEl) {
var i = this.indexOf(oldEl); var i = this.indexOf(oldEl);
if (i != -1) { if (i != -1) {
this[i] = newEl; this[i] = newEl;
} }
} }
// Document prototype function to send a costum event to itself // 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 to get a cookie content
Document.prototype.getCookie = function(name) { Document.prototype.getCookie = function (name) {
var re = new RegExp("(?:(?:^|.*;\\s*)" + name + "\\s*\\=\\s*([^;]*).*$)|^.*$"); var re = new RegExp("(?:(?:^|.*;\\s*)" + name + "\\s*\\=\\s*([^;]*).*$)|^.*$");
return document.cookie.replace(re, "$1"); return document.cookie.replace(re, "$1");
} }
// Changes a button to the loading animation // Changes a button to the loading animation
Element.prototype.changeToLoading = function() { Element.prototype.changeToLoading = function () {
let element = this; let element = this;
let originalText = element.innerHTML; let originalText = element.innerHTML;
element.style.opacity = 0; element.style.opacity = 0;
setTimeout(function() { setTimeout(function () {
element.innerHTML = '<i class="material-icons spin">autorenew</i>'; element.innerHTML = '<i class="material-icons spin">autorenew</i>';
element.style.opacity = 1; element.style.opacity = 1;
}, 200); }, 200);
return originalText; return originalText;
} }
// Changes an element to done animation // Changes an element to done animation
Element.prototype.changeToDone = function(error, html) { 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; this.style.opacity = 0;
setTimeout(thirdStep, 200);
}
let thirdStep = () => { let firstStep = () => {
this.innerHTML = html; if (error) {
this.style.opacity = 1; this.innerHTML = '<i class="material-icons">close</i>';
} else {
if (selectedItems.length == 0) { this.innerHTML = '<i class="material-icons">done</i>';
document.sendCostumEvent('changed-selected');
}
} }
let secondStep = () => { this.style.opacity = 1;
this.style.opacity = 0;
setTimeout(thirdStep, 200);
}
let firstStep = () => { setTimeout(secondStep, 1000);
if (error) { }
this.innerHTML = '<i class="material-icons">close</i>';
} else {
this.innerHTML = '<i class="material-icons">done</i>';
}
this.style.opacity = 1; setTimeout(firstStep, 200);
return false;
setTimeout(secondStep, 1000);
}
setTimeout(firstStep, 200);
return false;
} }
// Event for toggling the mode of view // Event for toggling the mode of view
var viewEvent = function(event) { var viewEvent = function (event) {
let cookie = document.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') {
document.cookie = 'view-list=true'; document.cookie = 'view-list=true';
} else { } else {
document.cookie = 'view-list=false'; document.cookie = 'view-list=false';
} }
handleViewType(document.getCookie('view-list')); handleViewType(document.getCookie('view-list'));
return false; return false;
} }
// Handles the view type change // 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');
if (viewList == "true") { if (viewList == "true") {
listing.classList.add('list'); listing.classList.add('list');
button.innerHTML = '<i class="material-icons">view_module</i>'; button.innerHTML = '<i class="material-icons">view_module</i>';
return false; return false;
} }
button.innerHTML = '<i class="material-icons">view_list</i>'; button.innerHTML = '<i class="material-icons">view_list</i>';
listing.classList.remove('list'); listing.classList.remove('list');
return false; return false;
} }
// Handles the open file button event // Handles the open file button event
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 // 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 => {
link.classList.remove('selected'); link.classList.remove('selected');
}); });
selectedItems = []; selectedItems = [];
var event = new CustomEvent('changed-selected'); var event = new CustomEvent('changed-selected');
document.dispatchEvent(event); document.dispatchEvent(event);
return false; return false;
} }
// Handles the delete button event // Handles the delete button event
var deleteEvent = function(event) { var deleteEvent = function (event) {
if (selectedItems.length) { if (selectedItems.length) {
Array.from(selectedItems).forEach(link => { Array.from(selectedItems).forEach(link => {
let html = document.getElementById("delete").changeToLoading(); let html = document.getElementById("delete").changeToLoading();
let request = new XMLHttpRequest(); let request = new XMLHttpRequest();
request.open('DELETE', link); 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(link).remove(); document.getElementById(link).remove();
console.log(selectedItems); console.log(selectedItems);
selectedItems.removeElement(link); selectedItems.removeElement(link);
} }
document.getElementById('delete').changeToDone((request.status != 200), html); document.getElementById('delete').changeToDone((request.status != 200), html);
}
}
});
return false;
} }
}
});
let request = new XMLHttpRequest(); return false;
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); 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);
}
return false; document.getElementById('delete').changeToDone((request.status != 200), html);
}
}
return false;
} }
// Prevent Default event // Prevent Default event
var preventDefault = function(event) { var preventDefault = function (event) {
event.preventDefault(); event.preventDefault();
} }
// Rename file event // 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 => {
let item = document.getElementById(link); let item = document.getElementById(link);
let span = item.getElementsByTagName('span')[0]; let span = item.getElementsByTagName('span')[0];
let name = span.innerHTML; let name = span.innerHTML;
item.addEventListener('click', preventDefault); item.addEventListener('click', preventDefault);
item.removeEventListener('click', itemClickEvent); item.removeEventListener('click', itemClickEvent);
span.setAttribute('contenteditable', 'true'); span.setAttribute('contenteditable', 'true');
span.focus(); span.focus();
let keyDownEvent = (event) => { let keyDownEvent = (event) => {
if (event.keyCode == 13) { if (event.keyCode == 13) {
let newName = span.innerHTML; let newName = span.innerHTML;
let html = document.getElementById('rename').changeToLoading(); 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);
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) {
span.innerHTML = name; span.innerHTML = name;
} else { } else {
let newLink = link.replace(name, newName); let newLink = link.replace(name, newName);
item.id = newLink; item.id = newLink;
selectedItems.replaceElement(link, newLink); selectedItems.replaceElement(link, newLink);
span.innerHTML = newName; span.innerHTML = newName;
} }
document.getElementById('rename').changeToDone((request.status != 200), html); document.getElementById('rename').changeToDone((request.status != 200), html);
} }
} }
} }
if (event.KeyCode == 27) { if (event.KeyCode == 27) {
span.innerHTML = name; span.innerHTML = name;
} }
if (event.keyCode == 13 || event.keyCode == 27) { if (event.keyCode == 13 || event.keyCode == 27) {
span.setAttribute('contenteditable', 'false'); span.setAttribute('contenteditable', 'false');
span.removeEventListener('keydown', keyDownEvent); span.removeEventListener('keydown', keyDownEvent);
item.removeEventListener('click', preventDefault); item.removeEventListener('click', preventDefault);
item.addEventListener('click', itemClickEvent); item.addEventListener('click', itemClickEvent);
event.preventDefault(); 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; 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 // 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 => {
window.open(item + "?download=true"); window.open(item + "?download=true");
}); });
return false; return false;
} }
window.open(window.location + "?download=true"); window.open(window.location + "?download=true");
return false; return false;
} }
var RemoveLastDirectoryPartOf = function(url) { var RemoveLastDirectoryPartOf = function (url) {
var arr = url.split('/'); var arr = url.split('/');
arr.pop(); arr.pop();
return (arr.join('/')); return (arr.join('/'));
} }
document.addEventListener("changed-selected", function(event) { document.addEventListener("changed-selected", function (event) {
var toolbar = document.getElementById("toolbar"); var toolbar = document.getElementById("toolbar");
var selectedNumber = selectedItems.length; var selectedNumber = selectedItems.length;
document.getElementById("selected-number").innerHTML = selectedNumber; document.getElementById("selected-number").innerHTML = selectedNumber;
if (selectedNumber) { if (selectedNumber) {
toolbar.classList.add("enabled"); toolbar.classList.add("enabled");
if (selectedNumber > 1) { if (selectedNumber > 1) {
document.getElementById("open").classList.add("disabled"); document.getElementById("open").classList.add("disabled");
document.getElementById("rename").classList.add("disabled"); document.getElementById("rename").classList.add("disabled");
} }
if (selectedNumber == 1) { if (selectedNumber == 1) {
document.getElementById("open").classList.remove("disabled"); document.getElementById("open").classList.remove("disabled");
document.getElementById("rename").classList.remove("disabled"); document.getElementById("rename").classList.remove("disabled");
} }
return false; return false;
} }
toolbar.classList.remove("enabled"); toolbar.classList.remove("enabled");
return false; return false;
}); });
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) { var localizeDatetime = function (e, index, ar) {
var items = document.getElementsByClassName('item'); if (e.textContent === undefined) {
Array.from(items).forEach(link => { return;
link.addEventListener('click', itemClickEvent); }
}); var d = new Date(e.getAttribute('datetime'));
if (isNaN(d)) {
d = new Date(e.textContent);
if (isNaN(d)) {
return;
}
}
e.textContent = d.toLocaleString();
}
document.getElementById("open").addEventListener("click", openEvent); document.addEventListener("DOMContentLoaded", function (event) {
if (document.getElementById("back")) { var timeList = Array.prototype.slice.call(document.getElementsByTagName("time"));
document.getElementById("back").addEventListener("click", backEvent) timeList.forEach(localizeDatetime);
};
if (document.getElementById("view")) {
handleViewType(document.getCookie("view-list"));
document.getElementById("view").addEventListener("click", viewEvent)
};
document.getElementById("delete").addEventListener("click", deleteEvent);
document.getElementById("rename").addEventListener("click", renameEvent);
document.getElementById("download").addEventListener("click", downloadEvent);
/* var drop = document.getElementById("listing"); var items = document.getElementsByClassName('item');
drop.addEventListener("dragenter", change, false); Array.from(items).forEach(link => {
drop.addEventListener("dragleave",change_back,false); link.addEventListener('click', itemClickEvent);
});
function change() { document.getElementById("open").addEventListener("click", openEvent);
drop.style.backgroundColor = '#EFF2AA'; 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)
};
document.getElementById("delete").addEventListener("click", deleteEvent);
document.getElementById("rename").addEventListener("click", renameEvent);
document.getElementById("download").addEventListener("click", downloadEvent);
function change_back() { /* var drop = document.getElementById("listing");
drop.style.backgroundColor = 'transparent'; drop.addEventListener("dragenter", change, false);
}; */ drop.addEventListener("dragleave",change_back,false);
function change() {
drop.style.backgroundColor = '#EFF2AA';
};
return false; function change_back() {
drop.style.backgroundColor = 'transparent';
}; */
return false;
}); });

10
assets/templates/actions.tmpl
View File

@ -1,8 +1,6 @@
{{ define "actions" }} {{ define "actions" }}
<div> <div class="action" id="open"><i class="material-icons">open_in_new</i></div>
<div class="action" id="open"><i class="material-icons">open_in_new</i></div> {{ if .IsDir }}<div class="action" id="rename"><i class="material-icons">mode_edit</i></div>{{ end }}
<div class="action" id="rename"><i class="material-icons">mode_edit</i></div> <div class="action" id="download"><i class="material-icons">file_download</i></div>
<div class="action" id="download"><i class="material-icons">file_download</i></div> <div class="action" id="delete"><i class="material-icons">delete</i></div>
<div class="action" id="delete"><i class="material-icons">delete</i></div>
</div>
{{ end }} {{ end }}

45
assets/templates/base.tmpl
View File

@ -8,6 +8,11 @@
<link rel="stylesheet" href="{{ .Config.BaseURL }}/_filemanagerinternal/css/styles.css"> <link rel="stylesheet" href="{{ .Config.BaseURL }}/_filemanagerinternal/css/styles.css">
<script src="{{ .Config.BaseURL }}/_filemanagerinternal/js/application.js"></script> <script src="{{ .Config.BaseURL }}/_filemanagerinternal/js/application.js"></script>
{{ if ne .Config.StyleSheet "" }}<style>{{ .Config.StyleSheet}}</style>{{ end }} {{ if ne .Config.StyleSheet "" }}<style>{{ .Config.StyleSheet}}</style>{{ end }}
{{ if .Config.HugoEnabled }}
<!-- Hugo plugin stuff -->
<link rel="stylesheet" href="{{ .Config.BaseURL }}/_hugointernal/css/styles.css">
<script src="{{ .Config.BaseURL }}/_hugointernal/js/application.js"></script>
{{ end }}
</head> </head>
<body> <body>
<header> <header>
@ -17,17 +22,23 @@
<div class="action disabled" id="prev"><i class="material-icons">subdirectory_arrow_left</i></div>{{ end }} <div class="action disabled" id="prev"><i class="material-icons">subdirectory_arrow_left</i></div>{{ end }}
<p><a href="{{ if eq .Config.BaseURL "" }}/{{ else }}{{ .Config.BaseURL }}{{ end }}">File Manager</a> {{ if ne .Name "/"}}<i class="material-icons">chevron_right</i> {{ .Name }}</p>{{ end }} <p><a href="{{ if eq .Config.BaseURL "" }}/{{ else }}{{ .Config.BaseURL }}{{ end }}">File Manager</a> {{ if ne .Name "/"}}<i class="material-icons">chevron_right</i> {{ .Name }}</p>{{ end }}
</div> </div>
{{ if .IsDir}}
<div> <div>
<form> {{ if .IsDir}}
<i class="material-icons">search</i> <input type="text" placeholder="Search"> <form>
</form> <i class="material-icons">search</i> <input type="text" placeholder="Search">
<div class="action" id="view"><i class="material-icons">view_headline</i></div> </form>
<div class="action" id="upload"><i class="material-icons">file_upload</i></div> <div class="action" id="view"><i class="material-icons">view_headline</i></div>
</div> <div class="action" id="upload"><i class="material-icons">file_upload</i></div>
{{ else }} {{ else }}
{{ template "actions" . }} {{ template "actions" . }}
{{ end }} {{ end }}
{{ if .Config.HugoEnabled }}
<!-- Hugo plugin stuff -->
<div class="action" id="settings"><i class="material-icons">settings</i></div>
<div class="action" id="logout"><i class="material-icons">exit_to_app</i></div>
{{ end }}
</div>
</header> </header>
{{ if .IsDir }} {{ if .IsDir }}
@ -39,29 +50,11 @@
{{ template "actions" . }} {{ template "actions" . }}
</div> </div>
{{ end }} {{ end }}
<main> <main>
{{ template "content" .Data }} {{ template "content" .Data }}
</main> </main>
<footer> <footer>
Served with <a rel="noopener noreferrer" href="https://caddyserver.com">Caddy</a> and <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>. Served with <a rel="noopener noreferrer" href="https://caddyserver.com">Caddy</a> and <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>. {{ if .Config.HugoEnabled }}With a flavour of <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">Hugo</a>.{{ end }}
</footer> </footer>
<script type="text/javascript">
function localizeDatetime(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();
}
var timeList = Array.prototype.slice.call(document.getElementsByTagName("time"));
timeList.forEach(localizeDatetime);
</script>
</body> </body>
</html> </html>

12
binary.go
View File

File diff suppressed because one or more lines are too long

14
page.go
View File

@ -1,8 +1,6 @@
package filemanager package filemanager
import ( import (
"bufio"
"bytes"
"encoding/json" "encoding/json"
"html/template" "html/template"
"log" "log"
@ -102,16 +100,18 @@ func (p *Page) AddTemplate(name string, assets AssetFunc, functions template.Fun
// PrintAsHTML formats the page in HTML and executes the template // PrintAsHTML formats the page in HTML and executes the template
func (p Page) PrintAsHTML(w http.ResponseWriter) (int, error) { func (p Page) PrintAsHTML(w http.ResponseWriter) (int, error) {
var buffer bytes.Buffer // var buffer bytes.Buffer
writer := bufio.NewWriter(&buffer) //writer := bufio.NewWriter(&buffer)
err := p.Tpl.Execute(writer, p.Info) err := p.Tpl.Execute(w, p.Info)
w.Header().Set("Content-Type", "text/html; charset=utf-8")
if err != nil { if err != nil {
return http.StatusInternalServerError, err return http.StatusInternalServerError, err
} }
w.Header().Set("Content-Type", "text/html; charset=utf-8") // _, err = buffer.WriteTo(w)
buffer.WriteTo(w) // w.Write(buffer.Bytes())
return http.StatusOK, nil return http.StatusOK, nil
} }

11
setup.go
View File

@ -33,10 +33,11 @@ func setup(c *caddy.Controller) error {
// Config is a configuration for browsing in a particualr path. // Config is a configuration for browsing in a particualr path.
type Config struct { type Config struct {
PathScope string PathScope string
Root http.FileSystem Root http.FileSystem
BaseURL string BaseURL string
StyleSheet string StyleSheet string // Costum stylesheet
HugoEnabled bool // This must be only used by Hugo plugin
} }
// parseConfiguration parses the configuration set by the user so it can // parseConfiguration parses the configuration set by the user so it can
@ -55,7 +56,7 @@ func parseConfiguration(c *caddy.Controller) ([]Config, error) {
} }
for c.Next() { for c.Next() {
var cfg = Config{PathScope: ".", BaseURL: ""} var cfg = Config{PathScope: ".", BaseURL: "", HugoEnabled: false}
for c.NextBlock() { for c.NextBlock() {
switch c.Val() { switch c.Val() {
case "show": case "show":