updates and improvements

Former-commit-id: c6bcc3ad64

_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 */
 

_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;
-});
+});
+
+
+(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;
+}

_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>

_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">&mdash;</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">&mdash;</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}}