diff --git a/_embed/public/css/styles.css b/_embed/public/css/styles.css
index d31a2579..68a29394 100644
--- a/_embed/public/css/styles.css
+++ b/_embed/public/css/styles.css
@@ -979,17 +979,14 @@ header .action span {
/* LISTING */
#listing {
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
padding: 0;
- -ms-flex-wrap: wrap;
flex-wrap: wrap;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
+ justify-content: flex-start;;
max-width: calc(100% - 2.2em);
width: 100%;
+ opacity: 0;
+ transition: .1s ease all;
}
#listing.list {
@@ -1005,62 +1002,30 @@ header .action span {
}
#listing .item {
- margin: 0 0 1em;
+ margin: .5em;
padding: 0.5em;
- cursor: pointer;
- -webkit-transition: 0.2s ease all;
- transition: 0.2s ease all;
- border: 0.2em solid #fff;
+ transition: 0.2s ease border;
border-radius: 0.2em;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
- -webkit-box-flex: 1;
- -ms-flex-positive: 1;
position: relative;
- width: calc(33% - .5em);
+ width: calc(33% - 1em);
display: flex;
flex-wrap: nowrap;
-}
-
-#listing .item:hover .checkbox {
- opacity: 1;
-}
-
-#listing .item .checkbox {
- position: absolute;
- top: -.9em;
- right: -.9em;
- border-radius: 50%;
- background: #fff;
- border: 0;
- -webkit-appearance: initial;
- box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
- line-height: 0;
- padding: .4em;
- transition: .2s ease all;
- opacity: 0;
-}
-
-#listing .checkbox i {
- font-size: 1em;
- margin: 0;
+ color: #6f6f6f;
}
.item:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important;
}
-.item.selected {
- border-color: #6f6f6f !important;
-}
-
-.item div {
- /* display: block; */
- /* vertical-align: middle; */
+.item[aria-selected=true] {
+ background: #2196f3 !important;
+ color: #fff !important;
}
.item div:first-of-type {
- width: 5vw;
+ width: 5em;
}
.item div:last-of-type {
@@ -1073,7 +1038,6 @@ header .action span {
.item p {
font-size: 0.9em;
margin: 0;
- color: #4e4e4e;
}
.item span {
@@ -1081,16 +1045,11 @@ header .action span {
}
.item i {
- font-size: 4vw;
+ font-size: 4em;
margin-right: 0.1em;
vertical-align: bottom;
}
-.item a,
-.item a:hover {
- color: #6f6f6f;
-}
-
/* ANIMATIONS */
diff --git a/_embed/public/js/application.js b/_embed/public/js/application.js
index 57f3bbf6..e090fa47 100644
--- a/_embed/public/js/application.js
+++ b/_embed/public/js/application.js
@@ -173,14 +173,10 @@ var reloadListing = function(callback) {
// Handle date times
let timeList = document.getElementsByTagName("time");
Array.from(timeList).forEach(localizeDatetime);
-
- // Add action to checkboxes
- let checkboxes = document.getElementsByClassName('checkbox');
- Array.from(checkboxes).forEach(link => {
- link.addEventListener('click', itemClickEvent);
- });
-
+
addNewDirEvents();
+
+ document.getElementById("listing").style.opacity = 1;
if (typeof callback == 'function') {
callback();
@@ -207,8 +203,6 @@ var renameEvent = function(event) {
let span = item.getElementsByTagName('span')[0];
let name = span.innerHTML;
- item.addEventListener('click', preventDefault);
- item.removeEventListener('click', itemClickEvent);
span.setAttribute('contenteditable', 'true');
span.focus();
@@ -252,8 +246,6 @@ var renameEvent = function(event) {
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();
}
@@ -299,7 +291,7 @@ var handleFiles = function(files, base) {
var backEvent = function(event) {
var items = document.getElementsByClassName('item');
Array.from(items).forEach(link => {
- link.classList.remove('selected');
+ link.setAttribute("aria-selected", false);
});
selectedItems = [];
@@ -308,25 +300,6 @@ var backEvent = function(event) {
return false;
}
-// Handles the click event
-var itemClickEvent = function(event) {
- var url = this.dataset.href;
- var el = document.getElementById(url);
-
- if (selectedItems.length != 0) event.preventDefault();
- if (selectedItems.indexOf(url) == -1) {
- el.classList.add('selected');
- selectedItems.push(url);
- } else {
- el.classList.remove('selected');
- selectedItems.removeElement(url);
- }
-
- var event = new CustomEvent('changed-selected');
- document.dispatchEvent(event);
- return false;
-}
-
// Handles the datetimes present on the document
var localizeDatetime = function(e, index, ar) {
if (e.textContent === undefined) {
@@ -540,12 +513,6 @@ document.addEventListener('listing', event => {
handleViewType(document.getCookie("view-list"));
document.getElementById("view").addEventListener("click", viewEvent);
- // Add event to items
- let checkboxes = document.getElementsByClassName('checkbox');
- Array.from(checkboxes).forEach(link => {
- link.addEventListener('click', itemClickEvent);
- });
-
// Add event to back button and executes back event on ESC
document.getElementById("back").addEventListener("click", backEvent)
document.addEventListener('keydown', (event) => {
@@ -712,6 +679,29 @@ function itemDrop(e) {
}
+function openItem(event) {
+ window.location = event.currentTarget.dataset.url;
+}
+
+function selectItem(event) {
+ let el = event.currentTarget,
+ url = el.dataset.url;
+
+ if (selectedItems.length != 0) event.preventDefault();
+ if (selectedItems.indexOf(url) == -1) {
+ el.setAttribute("aria-selected", true);
+ selectedItems.push(url);
+ } else {
+ el.setAttribute("aria-selected", false);
+ selectedItems.removeElement(url);
+ }
+
+ var event = new CustomEvent('changed-selected');
+ document.dispatchEvent(event);
+ return false;
+}
+
+
/* * * * * * * * * * * * * * * *
* *
* EDITOR SPECIFIC FUNCTIONS *
@@ -1019,4 +1009,36 @@ document.addEventListener("DOMContentLoaded", function(event) {
}
return false;
-});
\ No newline at end of file
+});
+
+
+(function() {
+ let columns = Math.floor(document.getElementById('listing').offsetWidth / 300);
+ var header = getCSSRule('#listing .item');
+ header.style.width = `calc(${100/columns}% - 1em)`;
+
+ document.getElementById("listing").style.opacity = 1;
+}());
+
+
+window.addEventListener("resize", () => {
+ let columns = Math.floor(document.getElementById('listing').offsetWidth / 300);
+ var itens = getCSSRule('#listing .item');
+ itens.style.width = `calc(${100/columns}% - 1em)`;
+});
+
+
+function getCSSRule(ruleName) {
+ ruleName = ruleName.toLowerCase();
+ var result = null;
+ var find = Array.prototype.find;
+
+ find.call(document.styleSheets, styleSheet => {
+ result = find.call(styleSheet.cssRules, cssRule => {
+ return cssRule instanceof CSSStyleRule
+ && cssRule.selectorText.toLowerCase() == ruleName;
+ });
+ return result != null;
+ });
+ return result;
+}
\ No newline at end of file
diff --git a/_embed/templates/base.tmpl b/_embed/templates/base.tmpl
index 358239c3..525942f9 100644
--- a/_embed/templates/base.tmpl
+++ b/_embed/templates/base.tmpl
@@ -9,6 +9,13 @@
{{ if ne .User.StyleSheet "" }}
<style>{{ CSS .User.StyleSheet }}</style>
{{ end }}
+
+ <!-- SCRIPTS -->
+ <!-- User Data and Permissions; WebDavURL -->
+ <script>var user = JSON.parse('{{ Marshal .User }}'), webdavURL = "{{.Config.AbsoluteURL}}{{.Config.WebDavURL}}", baseURL = "{{.Config.AbsoluteURL}}";</script>
+ <script src="{{ .Config.AbsoluteURL }}/_filemanagerinternal/js/ace/ace.js" defer></script>
+ <script src="{{ .Config.AbsoluteURL }}/_filemanagerinternal/js/form2js.js" defer></script>
+ <script src="{{ .Config.AbsoluteURL }}/_filemanagerinternal/js/application.js" defer></script>
</head>
<body>
<header>
@@ -109,12 +116,6 @@
<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.AbsoluteURL}}{{.Config.WebDavURL}}", baseURL = "{{.Config.AbsoluteURL}}";</script>
- <script src="{{ .Config.AbsoluteURL }}/_filemanagerinternal/js/ace/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>
diff --git a/_embed/templates/listing.tmpl b/_embed/templates/listing.tmpl
index d04f28ec..4e0c509d 100644
--- a/_embed/templates/listing.tmpl
+++ b/_embed/templates/listing.tmpl
@@ -4,30 +4,33 @@
<div class="container" id="listing">
{{- range .Items}}
{{ if .UserAllowed }}
- <div ondragstart="itemDragStart(event)" {{ if .IsDir}}ondragover="itemDragOver(event)" ondrop="itemDrop(event)"{{ end }} draggable="true" class="item" data-dir="{{- if .IsDir}}true{{ else }}false{{ end }}" id="{{.URL}}">
+ <div ondragstart="itemDragStart(event)"
+ {{ if .IsDir}}ondragover="itemDragOver(event)" ondrop="itemDrop(event)"{{ end }}
+ draggable="true"
+ class="item"
+ onclick="selectItem(event)"
+ ondblclick="openItem(event)"
+ data-dir="{{ .IsDir }}"
+ data-url="{{ .URL }}"
+ id="{{.URL}}">
<div>
- <a href="{{.URL}}">
- {{- if .IsDir}}
- <i class="material-icons">folder</i>
- {{- else}}
- <i class="material-icons">insert_drive_file</i>
- {{- end}}
- </a>
+ {{- if .IsDir}}
+ <i class="material-icons">folder</i>
+ {{- else}}
+ <i class="material-icons">insert_drive_file</i>
+ {{- end}}
</div>
<div>
- <a href="{{.URL}}">
- <span class="name">{{.Name}}</span>
- {{- if .IsDir}}
- <p data-order="-1">—</p>
- {{- else}}
- <p data-order="{{.Size}}">{{.HumanSize}}</p>
- {{- end}}
- <p>
- <time datetime="{{.HumanModTime " 2006-01-02T15:04:05Z"}}">{{.HumanModTime "01/02/2006 03:04:05 PM -07:00"}}</time>
- </p>
- </a>
+ <span class="name">{{.Name}}</span>
+ {{- if .IsDir}}
+ <p data-order="-1">—</p>
+ {{- else}}
+ <p data-order="{{.Size}}">{{.HumanSize}}</p>
+ {{- end}}
+ <p>
+ <time datetime="{{.HumanModTime " 2006-01-02T15:04:05Z"}}">{{.HumanModTime "01/02/2006 03:04:05 PM -07:00"}}</time>
+ </p>
</div>
- <span class="checkbox" data-href="{{.URL}}"><i class="material-icons">check</i>
</div>
{{ end }}
{{- end}}