mirror of
https://github.com/filebrowser/filebrowser.git
synced 2024-06-07 23:00:43 +00:00
update rename dialog
This commit is contained in:
Henrique Dias
parent
72b07d1cd2
commit
1f5dcf5a0e
@ -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%;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user