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 => {
+    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,29 +108,25 @@ 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,
+        let newName = event.currentTarget.querySelector('input').value,
             newLink = removeLastDirectoryPartOf(toWebDavURL(link)) + "/" + newName,
-                html = document.getElementById('rename').changeToLoading(),
+            html = buttons.rename.changeToLoading(),
             request = new XMLHttpRequest();
 
         request.open('MOVE', toWebDavURL(link));
@@ -140,7 +137,8 @@ listing.rename = function(event) {
                 if (request.status != 201 && request.status != 204) {
                     span.innerHTML = name;
                 } else {
-                        let newLink = encodeURI(link.replace(name, newName));
+                    closePrompt(event);
+
                     listing.reload(() => {
                         newName = btoa(newName);
                         selectedItems = [newName];
@@ -152,28 +150,19 @@ listing.rename = function(event) {
                 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();
     }
 });