From 9145407f6704c9f155eab222be837ef53e3b1283 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Sat, 31 Dec 2016 18:35:27 +0000 Subject: [PATCH] update rename dialog Former-commit-id: 1f5dcf5a0ede5e1da1dc5949efe74b9adbe81fea --- _embed/public/css/styles.css | 14 +++-- _embed/public/js/common.js | 15 ++++-- _embed/public/js/listing.js | 99 +++++++++++++++++------------------ _embed/templates/listing.tmpl | 8 +-- 4 files changed, 73 insertions(+), 63 deletions(-) diff --git a/_embed/public/css/styles.css b/_embed/public/css/styles.css index eeb3d0da..3d2201a7 100644 --- a/_embed/public/css/styles.css +++ b/_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%; } diff --git a/_embed/public/js/common.js b/_embed/public/js/common.js index 0864bdd5..678264c2 100644 --- a/_embed/public/js/common.js +++ b/_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; diff --git a/_embed/public/js/listing.js b/_embed/public/js/listing.js index 08b14e55..1bca8859 100644 --- a/_embed/public/js/listing.js +++ b/_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(); } }); diff --git a/_embed/templates/listing.tmpl b/_embed/templates/listing.tmpl index 719f1821..4a512da3 100644 --- a/_embed/templates/listing.tmpl +++ b/_embed/templates/listing.tmpl @@ -8,9 +8,9 @@

Name {{- if eq .Sort "name" -}} {{- if eq .Order "asc" -}} - arrow_downward + arrow_downward {{- else -}} - arrow_upward + arrow_upward {{- end -}} {{- else -}} arrow_downward @@ -19,9 +19,9 @@

File Size {{- if eq .Sort "size" -}} {{- if eq .Order "asc" -}} - arrow_downward + arrow_downward {{- else -}} - arrow_upward + arrow_upward {{- end -}} {{- else -}} arrow_downward