github
/
filebrowser
mirror of https://github.com/filebrowser/filebrowser
1
0
Fork 0
Code Issues Releases Wiki Activity

update rename dialog 

Former-commit-id: 1f5dcf5a0e
pull/726/head
Henrique Dias 2016-12-31 18:35:27 +00:00
parent c47a66814d
commit 9145407f67
4 changed files with 73 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
_embed/public/css/styles.css
View File

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

15
_embed/public/js/common.js
View File

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

99
_embed/public/js/listing.js
View File

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

8
_embed/templates/listing.tmpl
View File

@ -8,9 +8,9 @@
<p class="name{{ if eq .Sort "name" }} active{{ end }}"><span>Name</span> <p class="name{{ if eq .Sort "name" }} active{{ end }}"><span>Name</span>
{{- if eq .Sort "name" -}} {{- if eq .Sort "name" -}}
{{- if eq .Order "asc" -}} {{- 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 -}} {{- 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 -}} {{- end -}}
{{- else -}} {{- else -}}
<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>
@ -19,9 +19,9 @@
<p class="size{{ if eq .Sort "size" }} active{{ end }}"><span>File Size</span> <p class="size{{ if eq .Sort "size" }} active{{ end }}"><span>File Size</span>
{{- if eq .Sort "size" -}} {{- if eq .Sort "size" -}}
{{- if eq .Order "asc" -}} {{- 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 -}} {{- 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 -}} {{- end -}}
{{- else -}} {{- else -}}
<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>