updates and improvements

Former-commit-id: c6bcc3ad64
2024-06-07 23:00:43 +00:00 · 2016-12-29 18:01:28 +00:00 · 2016-12-29 18:01:28 +00:00 · a437cb4dd6
commit a437cb4dd6
parent 623a228e97
4 changed files with 103 additions and 118 deletions
--- 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 */

--- a/_embed/public/js/application.js
+++ b/_embed/public/js/application.js
@ -174,14 +174,10 @@ var reloadListing = function(callback) {
                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  *
@ -1020,3 +1010,35 @@ 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;
+}
--- 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>
--- 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">&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}}