navigate to next image instead of closing gallery after delete or report
This commit is contained in:
parent
71937f5c4d
commit
40352cffee
1 changed files with 44 additions and 18 deletions
|
|
@ -48,26 +48,55 @@ class lgAdmin {
|
||||||
document.getElementById("lg-delete").style.display = canDelete ? 'block' : 'none';
|
document.getElementById("lg-delete").style.display = canDelete ? 'block' : 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Navigate away from a photo that was just deleted/hidden.
|
||||||
|
// We slide first (while the item still exists), then remove and reindex after the
|
||||||
|
// animation so lightgallery's internal index/counter stays consistent.
|
||||||
|
_navigateAfterRemove(photoId, currentIndex) {
|
||||||
|
const total = this.core.galleryItems.length;
|
||||||
|
if (total <= 1) {
|
||||||
|
const el = document.querySelector(`[data-slide-name='${photoId}']`);
|
||||||
|
if (el) el.remove();
|
||||||
|
this.core.refresh();
|
||||||
|
this.core.closeGallery();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const goingForward = currentIndex < total - 1;
|
||||||
|
const targetIndex = goingForward ? currentIndex + 1 : currentIndex - 1;
|
||||||
|
this.core.LGel.on('lgAfterSlide.adminRemove', () => {
|
||||||
|
this.core.LGel.off('lgAfterSlide.adminRemove');
|
||||||
|
const thumb = document.querySelector(`[data-slide-name='${photoId}']`);
|
||||||
|
if (thumb) thumb.remove();
|
||||||
|
const lgId = this.core.lgId;
|
||||||
|
const deletedItem = document.getElementById(`lg-item-${lgId}-${currentIndex}`);
|
||||||
|
if (deletedItem) deletedItem.remove();
|
||||||
|
document.querySelectorAll(`[id^="lg-item-${lgId}-"]`).forEach(item => {
|
||||||
|
const idx = parseInt(item.id.split('-').pop(), 10);
|
||||||
|
if (idx > currentIndex) item.id = `lg-item-${lgId}-${idx - 1}`;
|
||||||
|
});
|
||||||
|
this.core.refresh();
|
||||||
|
if (goingForward) {
|
||||||
|
this.core.index = currentIndex;
|
||||||
|
this.core.updateCurrentCounter(currentIndex);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.core.slide(targetIndex, false, false, false);
|
||||||
|
}
|
||||||
|
|
||||||
// Event called when user click on delete button
|
// Event called when user click on delete button
|
||||||
onDelete(event) {
|
onDelete(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
if(confirm("Are you sure to delete this photo?")) {
|
if(confirm("Are you sure to delete this photo?")) {
|
||||||
// Build form request
|
// Build form request
|
||||||
|
const photoId = this.photoId;
|
||||||
|
const currentIndex = this.core.index;
|
||||||
let data = new FormData();
|
let data = new FormData();
|
||||||
data.append('csrfmiddlewaretoken', this.csrfToken);
|
data.append('csrfmiddlewaretoken', this.csrfToken);
|
||||||
fetch(`/photo/${this.photoId}/delete/`, {
|
fetch(`/photo/${photoId}/delete/`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
redirect: "manual", // do not load gallery again
|
redirect: "manual", // do not load gallery again
|
||||||
body: data,
|
body: data,
|
||||||
credentials: 'same-origin',
|
credentials: 'same-origin',
|
||||||
}).then(res => {
|
}).then(() => this._navigateAfterRemove(photoId, currentIndex));
|
||||||
console.log("Deletion complete, response:", res);
|
|
||||||
|
|
||||||
// Remove HTML element
|
|
||||||
document.querySelectorAll(`[data-slide-name='${this.photoId}']`)[0].remove()
|
|
||||||
this.core.closeGallery();
|
|
||||||
this.core.refresh();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -76,22 +105,19 @@ class lgAdmin {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
if(confirm("Are you sure to report this photo?")) {
|
if(confirm("Are you sure to report this photo?")) {
|
||||||
// Build form request
|
// Build form request
|
||||||
|
const photoId = this.photoId;
|
||||||
|
const currentIndex = this.core.index;
|
||||||
let data = new FormData();
|
let data = new FormData();
|
||||||
data.append('csrfmiddlewaretoken', this.csrfToken);
|
data.append('csrfmiddlewaretoken', this.csrfToken);
|
||||||
fetch(`/photo/${this.photoId}/report/`, {
|
fetch(`/photo/${photoId}/report/`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
redirect: "manual", // do not load gallery again
|
redirect: "manual", // do not load gallery again
|
||||||
body: data,
|
body: data,
|
||||||
credentials: 'same-origin',
|
credentials: 'same-origin',
|
||||||
}).then(res => {
|
}).then(() => {
|
||||||
console.log("Report complete, response:", res);
|
const thumbnail = document.querySelector(`[data-slide-name='${photoId}']`);
|
||||||
|
|
||||||
// Update HTML element
|
|
||||||
const thumbnail = document.querySelectorAll(`[data-slide-name='${this.photoId}']`)[0];
|
|
||||||
if (!this.isStaff) {
|
if (!this.isStaff) {
|
||||||
thumbnail.remove()
|
this._navigateAfterRemove(photoId, currentIndex);
|
||||||
this.core.closeGallery();
|
|
||||||
this.core.refresh();
|
|
||||||
} else {
|
} else {
|
||||||
location.reload();
|
location.reload();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue