update rename dialog

_embed/public/css/styles.css

@@ -858,13 +858,15 @@ header .actions {
  *            PROMPT           *
  * * * * * * * * * * * * * * * */
 
-.overlay, .prompt {
+.overlay,
+.prompt {
     opacity: 0;
     z-index: -1;
-    transition: .1s ease all;
+    transition: .1s ease opacity, z-index;
 }
 
-.overlay.active, .prompt.active {
+.overlay.active,
+.prompt.active {
     z-index: 9999999;
     opacity: 1;
 }
@@ -874,8 +876,12 @@ header .actions {
     position: fixed;
     top: 0;
     left: 0;
+    height: 0;
+    width: 0;
+}
+
+.overlay.active {
     height: 100%;
-    z-index: -1;
     width: 100%;
 }
 

_embed/public/js/common.js

@@ -360,6 +360,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
     buttons.logout = document.getElementById("logout");
     buttons.open = document.getElementById("open");
     buttons.delete = document.getElementById("delete");
+    buttons.breadcrumbs = document.getElementById("breadcrumbs-button");
 
     // Attach event listeners
     buttons.logout.addEventListener("click", logoutEvent);
@@ -372,10 +373,16 @@ document.addEventListener("DOMContentLoaded", function(event) {
         buttons.delete.addEventListener("click", deleteEvent);
     }
 
-    document.getElementById("breadcrumbs-button").addEventListener("click", event => {
-        event.currentTarget.classList.toggle("active");
-        document.getElementById("breadcrumbs").classList.toggle("active");
-    });
+    if (buttons.breadcrumbs) {
+        buttons.breadcrumbs.addEventListener("click", event => {
+            event.currentTarget.classList.toggle("active");
+            document.getElementById("breadcrumbs").classList.toggle("active");
+        });
+    }
+
+    document.querySelector('.overlay').addEventListener('click', event => {
+        closePrompt(event);
+    })
 
     setupSearch();
     return false;

_embed/public/js/listing.js

@@ -4,6 +4,7 @@ var listing = {};
 
 listing.reload = function(callback) {
     let request = new XMLHttpRequest();
+
     request.open('GET', window.location);
     request.setRequestHeader('Minimal', 'true');
     request.send();
@@ -107,73 +108,61 @@ listing.documentDrop = function(event) {
 }
 
 listing.rename = function(event) {
-    if (event.currentTarget.classList.contains('disabled') || !selectedItems.length) {
+    if (!selectedItems.length || selectedItems.length > 1) {
         return false;
     }
 
-    // This mustn't happen
-    if (selectedItems.length > 1) {
-        alert("Something went wrong. Please refresh the page.");
-        location.refresh();
+    let item = document.getElementById(selectedItems[0]);
+
+    if (item.classList.contains('disabled')) {
+        return false;
     }
 
-    let item = document.getElementById(selectedItems[0]),
-        link = item.dataset.url,
-        span = item.querySelector('.name'),
-        name = span.innerHTML;
+    let link = item.dataset.url,
+        name = item.querySelector('.name').innerHTML;
 
-    span.setAttribute('contenteditable', 'true');
-    span.focus();
+    let submit = (event) => {
+        event.preventDefault();
 
-    let keyDownEvent = (event) => {
-        if (event.keyCode == 13) {
-            let newName = span.innerHTML,
-                newLink = removeLastDirectoryPartOf(toWebDavURL(link)) + "/" + newName,
-                html = document.getElementById('rename').changeToLoading(),
-                request = new XMLHttpRequest();
+        let newName = event.currentTarget.querySelector('input').value,
+            newLink = removeLastDirectoryPartOf(toWebDavURL(link)) + "/" + newName,
+            html = buttons.rename.changeToLoading(),
+            request = new XMLHttpRequest();
 
-            request.open('MOVE', toWebDavURL(link));
-            request.setRequestHeader('Destination', newLink);
-            request.send();
-            request.onreadystatechange = function() {
-                if (request.readyState == 4) {
-                    if (request.status != 201 && request.status != 204) {
-                        span.innerHTML = name;
-                    } else {
-                        let newLink = encodeURI(link.replace(name, newName));
-                        listing.reload(() => {
-                            newName = btoa(newName);
-                            selectedItems = [newName];
-                            document.getElementById(newName).setAttribute("aria-selected", true);
-                            listing.handleSelectionChange();
-                        });
-                    }
+        request.open('MOVE', toWebDavURL(link));
+        request.setRequestHeader('Destination', newLink);
+        request.send();
+        request.onreadystatechange = function() {
+            if (request.readyState == 4) {
+                if (request.status != 201 && request.status != 204) {
+                    span.innerHTML = name;
+                } else {
+                    closePrompt(event);
 
-                    buttons.rename.changeToDone((request.status != 201 && request.status != 204), html);
+                    listing.reload(() => {
+                        newName = btoa(newName);
+                        selectedItems = [newName];
+                        document.getElementById(newName).setAttribute("aria-selected", true);
+                        listing.handleSelectionChange();
+                    });
                 }
+
+                buttons.rename.changeToDone((request.status != 201 && request.status != 204), html);
             }
         }
 
-        if (event.KeyCode == 27) {
-            span.innerHTML = name;
-        }
-
-        if (event.keyCode == 13 || event.keyCode == 27) {
-            span.setAttribute('contenteditable', 'false');
-            span.removeEventListener('keydown', keyDownEvent);
-            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);
-    });
+    let clone = document.importNode(templates.question.content, true);
+    clone.querySelector('h3').innerHTML = 'Rename';
+    clone.querySelector('input').value = name;
+    clone.querySelector('.ok').innerHTML = 'Rename';
+    clone.querySelector('form').addEventListener('submit', submit);
+
+    document.querySelector('body').appendChild(clone)
+    document.querySelector('.overlay').classList.add('active');
+    document.querySelector('.prompt').classList.add('active');
 
     return false;
 }
@@ -324,6 +313,14 @@ listing.updateColumns = function(event) {
 document.addEventListener('keydown', (event) => {
     if (event.keyCode == 27) {
         listing.unselectAll();
+
+        if (document.querySelectorAll('.prompt').length) {
+            closePrompt(event);
+        }
+    }
+
+    if (event.keyCode == 113) {
+        listing.rename();
     }
 });
 

_embed/templates/listing.tmpl

@@ -8,9 +8,9 @@
                 <p class="name{{ if eq .Sort "name" }} active{{ end }}"><span>Name</span>
                     {{- if eq .Sort "name" -}}
                     {{- if eq .Order "asc" -}}
-                        <a href="?sort=name&order=desc"><i class="material-icons">arrow_downward</i></a>
+                    <a href="?sort=name&order=desc"><i class="material-icons">arrow_downward</i></a>
                     {{- else -}}
-                        <a href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
+                    <a href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
                     {{- end -}}
                     {{- else -}}
                     <a href="?sort=name&order=desc"><i class="material-icons">arrow_downward</i></a>
@@ -19,9 +19,9 @@
                 <p class="size{{ if eq .Sort "size" }} active{{ end }}"><span>File Size</span>
                     {{- if eq .Sort "size" -}}
                     {{- if eq .Order "asc" -}}
-                        <a href="?sort=size&order=desc"><i class="material-icons">arrow_downward</i></a>
+                    <a href="?sort=size&order=desc"><i class="material-icons">arrow_downward</i></a>
                     {{- else -}}
-                        <a href="?sort=size&order=asc"><i class="material-icons">arrow_upward</i></a>
+                    <a href="?sort=size&order=asc"><i class="material-icons">arrow_upward</i></a>
                     {{- end -}}
                     {{- else -}}
                     <a href="?sort=size&order=desc"><i class="material-icons">arrow_downward</i></a>