diff --git a/_embed/public/css/styles.css b/_embed/public/css/styles.css
index 0db84589..3368741b 100644
--- a/_embed/public/css/styles.css
+++ b/_embed/public/css/styles.css
@@ -264,7 +264,7 @@ textarea {
body {
font-family: 'Roboto', sans-serif;
padding-top: 5em;
- background-color: #fcfcfc;
+ background-color: #ffffff;
text-rendering: optimizespeed;
}
@@ -473,6 +473,8 @@ header {
z-index: 999;
padding: 1.7em 0;
background-color: #2196f3;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
header h1 {
@@ -481,7 +483,9 @@ header h1 {
}
header a,
-header a:hover {
+header a:hover,
+#toolbar a,
+#toolbar a:hover {
color: inherit;
}
@@ -680,8 +684,7 @@ header .only-side {
display: none;
}
-header #prev:hover+.prev-links,
-header .prev-links:hover {
+.action:hover ul {
display: flex;
}
@@ -689,9 +692,9 @@ header .prev-links:hover {
border-radius: 0;
}
-header .prev-links {
+.action ul {
position: absolute;
- top: 4em;
+ top: 3.1em;
left: 0;
color: #7d7d7d;
list-style: none;
@@ -703,37 +706,39 @@ header .prev-links {
flex-direction: column-reverse;
display: none;
transition: .2s ease all;
- min-width: 12em;
+ min-width: 3em;
+ z-index: 99999;
}
-header .prev-links:before {
+.action ul:before {
top: -16px;
left: 1em;
right: auto;
border: 8px solid transparent;
- border-bottom-color: #68efad;
+ border-bottom-color: #ffffff;
content: '';
position: absolute;
}
-header .prev-links a {
- padding: .5em;
+.action ul a {
+ padding: .3em .5em;
border-bottom: 1px solid #f5f5f5;
transition: .2s ease all;
+ text-align: left;
}
-header .prev-links a:first-child {
+.action ul a:first-child {
border: 0;
border-bottom-right-radius: .2em;
border-bottom-left-radius: .2em;
}
-header .prev-links a:last-child {
+.action ul a:last-child {
border-top-right-radius: .2em;
border-top-left-radius: .2em;
}
-header .prev-links a:hover {
+.action ul a:hover {
background-color: #f5f5f5;
}
@@ -1181,4 +1186,4 @@ i.spin {
column-count: 1;
column-gap: 0;
}
-}
+}
\ No newline at end of file
diff --git a/_embed/public/js/application.js b/_embed/public/js/application.js
index 12c73c70..4ba2ed56 100644
--- a/_embed/public/js/application.js
+++ b/_embed/public/js/application.js
@@ -151,22 +151,6 @@ var preventDefault = function(event) {
event.preventDefault();
}
-// 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;
-}
-
// Remove the last directory of an url
var RemoveLastDirectoryPartOf = function(url) {
var arr = url.split('/');
@@ -466,6 +450,8 @@ document.addEventListener("changed-selected", function(event) {
document.getElementById("rename").classList.remove("disabled");
}
+ redefineDownloadURLs();
+
return false;
}
@@ -473,6 +459,22 @@ document.addEventListener("changed-selected", function(event) {
return false;
});
+var redefineDownloadURLs = function() {
+ let files = "";
+
+ for (let i = 0; i < selectedItems.length; i++) {
+ files += selectedItems[i].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;
+ });
+}
+
var searchEvent = function(event) {
let value = this.value;
let box = document.querySelector('#search div');
@@ -891,7 +893,6 @@ document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("delete").addEventListener("click", deleteEvent);
}
- document.getElementById("download").addEventListener("click", downloadEvent);
document.getElementById("open-nav").addEventListener("click", event => {
document.querySelector("header > div:nth-child(2)").classList.toggle("active");
});
@@ -908,4 +909,4 @@ document.addEventListener("DOMContentLoaded", function(event) {
}
return false;
-});
\ No newline at end of file
+});
diff --git a/_embed/templates/actions.tmpl b/_embed/templates/actions.tmpl
index 069598f2..a42d11d1 100644
--- a/_embed/templates/actions.tmpl
+++ b/_embed/templates/actions.tmpl
@@ -1,18 +1,28 @@
{{ define "actions" }}
- <div class="action" id="open">
- <i class="material-icons" title="See raw">open_in_new</i> <span>See raw</span>
- </div>
- {{ if and .IsDir .User.AllowEdit }}
- <div class="action" id="rename">
- <i class="material-icons" title="Edit">mode_edit</i>
- </div>
- {{ end }}
- <div class="action" id="download">
- <i class="material-icons" title="Download">file_download</i> <span>Download</span>
- </div>
- {{ if .User.AllowEdit }}
- <div class="action" id="delete">
- <i class="material-icons" title="Delete">delete</i> <span>Delete</span>
- </div>
- {{ end }}
+<div class="action" id="open">
+ <i class="material-icons" title="See raw">open_in_new</i> <span>See raw</span>
+</div>
+{{ if and .IsDir .User.AllowEdit }}
+<div class="action" id="rename">
+ <i class="material-icons" title="Edit">mode_edit</i>
+</div>
+{{ end }}
+<div class="action" id="download">
+ <a href="?download=true">
+ <i class="material-icons" title="Download">file_download</i> <span>Download</span>
+ </a>
+ {{ if .IsDir }}
+ <ul class="prev-links">
+ <a data-format="tarbz2" href="?download=tarbz2"><li>tar.bz2</li></a>
+ <a data-format="targz" href="?download=targz"><li>tar.gz</li></a>
+ <a data-format="tar" href="?download=tar"><li>tar</li></a>
+ <a data-format="zip" href="?download=zip"><li>zip</li></a>
+ </ul>
+ {{ end }}
+</div>
+{{ if .User.AllowEdit }}
+<div class="action" id="delete">
+ <i class="material-icons" title="Delete">delete</i> <span>Delete</span>
+</div>
+{{ end }}
{{ end }}
diff --git a/_embed/templates/base.tmpl b/_embed/templates/base.tmpl
index 86f4e844..679795e7 100644
--- a/_embed/templates/base.tmpl
+++ b/_embed/templates/base.tmpl
@@ -1,139 +1,126 @@
-{{ $absURL := .Config.AbsoluteURL }}
-
<!DOCTYPE html>
<html>
- <head>
- <title>{{.Name}}</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- <link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
- <link rel="stylesheet" href="{{ .Config.AbsoluteURL }}/_filemanagerinternal/css/styles.css">
-
- {{ if ne .User.StyleSheet "" }}
- <style>
- {{ CSS .User.StyleSheet }}
- </style>
- {{ end }}
- </head>
- <body>
- <header>
- <div>
- {{ $lnk := .PreviousLink }}
-
- <div class="action{{ if eq $lnk ""}} disabled{{ end }}" id="prev">
- {{ if ne $lnk ""}}
- <a href="{{ $lnk }}">
- {{ end }}
- <i class="material-icons" title="Previous">subdirectory_arrow_left</i>
- {{ if ne $lnk ""}}
- </a>
- {{ end }}
-
- </div>
-
- {{ if ne $lnk ""}}
- <ul class="prev-links">
- {{ range $link, $name := .BreadcrumbMap }}
- <a href="{{ $absURL }}{{ $link }}"><li>{{ $name }}</li></a>
- {{ end }}
- </ul>
- {{ end }}
-
- <div class="action" id="open-nav">
- <i class="material-icons" title="Menu">menu</i>
- </div>
-
- <p>
- {{ if ne .Name "/"}}
- {{ .Name }}
- </p>
+{{ $absURL := .Config.AbsoluteURL }}
+<head>
+ <title>{{.Name}}</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
+ <link rel="stylesheet" href="{{ .Config.AbsoluteURL }}/_filemanagerinternal/css/styles.css">
+ {{ if ne .User.StyleSheet "" }}
+ <style>{{ CSS .User.StyleSheet }}</style>
{{ end }}
- </div>
-
- <div>
- <div class="only-side">
- {{ $lnk := .PreviousLink }}
- {{ if ne $lnk ""}}
- <a href="{{ $lnk }}">
- {{ end }}
+</head>
+<body>
+ <header>
+ <div>
+ {{ $lnk := .PreviousLink }}
<div class="action{{ if eq $lnk ""}} disabled{{ end }}" id="prev">
- <i class="material-icons" title="Previous">subdirectory_arrow_left</i>
+ {{ if ne $lnk ""}}<a href="{{ $lnk }}">{{ end }}
+ <i class="material-icons" title="Previous">subdirectory_arrow_left</i>
+ {{ if ne $lnk ""}}</a>{{ end }}
+
+ {{ if ne $lnk ""}}
+ <ul class="prev-links">
+ {{ range $link, $name := .BreadcrumbMap }}<a href="{{ $absURL }}{{ $link }}"><li>{{ $name }}</li></a>{{ end }}
+ </ul>
+ {{ end }}
</div>
- {{ if ne $lnk ""}}
- </a>
- {{ end }}
+ <div class="action" id="open-nav">
+ <i class="material-icons" title="Menu">menu</i>
+ </div>
- <p>
- <a href="{{ if eq .Config.AbsoluteURL "" }}/{{ else }}{{ .Config.AbsoluteURL }}{{ end }}">
- File Manager
- </a>
- </p>
- </div>
-
- {{ if .IsDir}}
-
- {{ if .User.AllowCommands }}
- <div id="search">
- <i class="material-icons" title="Storage">storage</i>
- <input type="text" placeholder="Execute a command...">
- <div>Write your git, mercurial or svn command and press enter.</div>
- </div>
- {{ end }}
-
- <div class="action" id="view">
- <i class="material-icons" title="Switch view">view_headline</i> <span>Switch view</span>
+ {{ if ne .Name "/"}}<p>{{ .Name }}</p>{{ end }}
</div>
- {{ if .User.AllowNew }}
- <div class="action" id="upload">
- <i class="material-icons" title="Upload">file_upload</i> <span>Upload</span>
+
+ <div>
+ <div class="only-side">
+ {{ $lnk := .PreviousLink }}
+ {{ if ne $lnk ""}}<a href="{{ $lnk }}">{{ end }}
+ <div class="action{{ if eq $lnk ""}} disabled{{ end }}" id="prev">
+ <i class="material-icons" title="Previous">subdirectory_arrow_left</i>
+ </div>
+ {{ if ne $lnk ""}}</a>{{ end }}
+
+ <p><a href="{{ if eq .Config.AbsoluteURL "" }}/{{ else }}{{ .Config.AbsoluteURL }}{{ end }}">File Manager</a></p>
+ </div>
+
+ {{ if .IsDir}}
+ {{ if .User.AllowCommands }}
+ <div id="search">
+ <i class="material-icons" title="Storage">storage</i>
+ <input type="text" placeholder="Execute a command...">
+ <div>Write your git, mercurial or svn command and press enter.</div>
+ </div>
+ {{ end }}
+
+ <div class="action" id="view">
+ <i class="material-icons" title="Switch view">view_headline</i> <span>Switch view</span>
+ </div>
+
+ {{ if .User.AllowNew }}
+ <div class="action" id="upload">
+ <i class="material-icons" title="Upload">file_upload</i> <span>Upload</span>
+ </div>
+ {{ end }}
+
+ <div class="action">
+ <a href="?download=true">
+ <i class="material-icons" title="Download">file_download</i> <span>Download</span>
+ </a>
+ <ul class="prev-links">
+ <a href="?download=tarbz2"><li>tar.bz2</li></a>
+ <a href="?download=targz"><li>tar.gz</li></a>
+ <a href="?download=tar"><li>tar</li></a>
+ <a href="?download=zip"><li>zip</li></a>
+ </ul>
+ </div>
+ {{ else }}
+ {{ template "actions" . }}
+ {{ end }}
+
+ <div class="action" id="logout">
+ <i class="material-icons" title="Logout">exit_to_app</i> <span>Logout</span>
+ </div>
</div>
- {{ end }}
- {{ else }}
- {{ template "actions" . }}
- {{ end }}
+ <div id="overlay"></div>
+ </header>
- <div class="action" id="logout">
- <i class="material-icons" title="Logout">exit_to_app</i> <span>Logout</span>
- </div>
- </div>
- <div id="overlay"></div>
- </header>
-
- {{ if .IsDir }}
- <div id="toolbar">
+ {{ if .IsDir }}
+ <div id="toolbar">
<div>
- <div class="action" id="back">
- <i class="material-icons" title="Back">arrow_back</i>
- </div>
- <p>
- <span id="selected-number">0</span>
- selected.</p>
+ <div class="action" id="back">
+ <i class="material-icons" title="Back">arrow_back</i>
+ </div>
+ <p>
+ <span id="selected-number">0</span>
+ selected.</p>
</div>
<div>
- {{ template "actions" . }}
+ {{ template "actions" . }}
</div>
- </div>
- {{ end }}
+ </div>
+ {{ end }}
- <main>
- {{ template "content" . }}
- <span id="token">{{ .Config.Token }}</span>
- </main>
+ <main>
+ {{ template "content" . }}
+ <span id="token">{{ .Config.Token }}</span>
+ </main>
- <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>.
- </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>.
+ </footer>
- <!-- SCRIPTS -->
- <!-- User Data and Permissions; WebDavURL -->
- <script>var user = JSON.parse('{{ Marshal .User }}'), webdavURL = "{{.Config.WebDavURL}}", baseURL = "{{.Config.BaseURL}}";</script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script>
- <script src="{{ .Config.AbsoluteURL }}/_filemanagerinternal/js/form2js.js"></script>
- <script src="{{ .Config.AbsoluteURL }}/_filemanagerinternal/js/application.js"></script>
- {{ if .Config.HugoEnabled }}<script src="{{ .Config.AbsoluteURL }}/_hugointernal/js/application.js"></script>{{ end }}
- </body>
+ <!-- SCRIPTS -->
+ <!-- User Data and Permissions; WebDavURL -->
+ <script>var user = JSON.parse('{{ Marshal .User }}'), webdavURL = "{{.Config.WebDavURL}}", baseURL = "{{.Config.BaseURL}}";</script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script>
+ <script src="{{ .Config.AbsoluteURL }}/_filemanagerinternal/js/form2js.js"></script>
+ <script src="{{ .Config.AbsoluteURL }}/_filemanagerinternal/js/application.js"></script>
+ {{ if .Config.HugoEnabled }}<script src="{{ .Config.AbsoluteURL }}/_hugointernal/js/application.js"></script>{{ end }}
+</body>
</html>