Hi, I have a gallery which is populated by items in code. I fetch an array of dictionaries from a database and iterate over the array to populate an array called items which is then set as the gallery’s items.
I have tried to incorporate a feature to delete the current item that the gallery is showing by using the gallery.currentIndex property and splicing the respective index in the items array which is then used to repopulate the gallery.
This method works fine when deleting any element, but if I delete the last element in the gallery when there are still elements remaining after the deletion, then the gallery crashes. For example, if the gallery has 2 photos and I am currently viewing the last photo and decide to delete it, the first photo will be remaining, but the gallery will crash.
I assume this error occurs because the gallery works by displaying the item at currentIndex in its items array. However, when you delete the last item, the gallery is still displaying the last index and its items array no longer has any element there since we deleted it. I tried circumventing this issue by calling gallery.previous() prior to setting the gallery’s items to the new spliced array, but the currentIndex of the gallery does not update quickly enough to avoid the crash. This error is fixed once the page is refreshed since the currentIndex of the gallery resets to 0, but it is not acceptable for the user to refresh the page each time they delete the last item in the array.
Is there any workaround solution to this? I can provide more background to the problem if necessary. Here is the code below:
/* sets gallery.items = the photos in input array
array is a dictionary with fields: description and photo (photo is source URL of image) /*
function fillGallery(array) {
// items array to set gallery.items equal to
let items = [];
// iterate over array to populate items array with gallery item dictionary
for (let i = 0; i < array.length; i++) {
items.push( {
"type": "image",
"alt": array[i]['description'],
"title": array[i]['description],
"src": array[i]['photo'],
"link": array[i]['photo']
});
}
// show no more photo message
if (items.length === 0) {
$w('#noMore').show();
// deleting last item while items still exist in gallery causes error
} else if ($w(gallery).currentIndex >= items.length) {
$w('#reload').show();
}
$w(gallery).items = items;
}
// Deletes the current item that the gallery is viewing
export function deleteCurrent_click(event) {
// fetches the array of photos of the current logged in user by email
wixUsers.currentUser.getEmail().then( email => {
wixData.query("UserData").eq("title", email).find().then( result => {
let items = result.items[0];
let photos = result.items[0];
// based on the selection, choose the respective array of photos
if ($w('type').value === "design") {
photos = photos['designPhotos'];
} else {
photos = photos['eventPhotos'];
}
// delete the current item from the array
photos.splice($w(gallery).currentIndex, 1);
// update the database
add("UserData", items);
// repopulate gallery
fillGallery(photos);
});
})
}
Please let me know if there are any ideas! Any help is appreciated.