Fix back function in album pagination

This commit is contained in:
Antoine Bartuccio 2024-08-10 18:38:04 +02:00
parent 8174bce720
commit b35e1a476e
2 changed files with 20 additions and 5 deletions

View File

@ -69,7 +69,7 @@ function getCSRFToken() {
const initialUrlParams = new URLSearchParams(window.location.search); const initialUrlParams = new URLSearchParams(window.location.search);
function update_query_string(key, value) { function update_query_string(key, value, push = true) {
const url = new URL(window.location.href); const url = new URL(window.location.href);
if (!value) { if (!value) {
// If the value is null, undefined or empty => delete it // If the value is null, undefined or empty => delete it
@ -81,5 +81,8 @@ function update_query_string(key, value) {
} else { } else {
url.searchParams.set(key, value); url.searchParams.set(key, value);
} }
if (push){
history.pushState(null, document.title, url.toString()); history.pushState(null, document.title, url.toString());
}
} }

View File

@ -129,13 +129,25 @@
Alpine.data("pictures", () => ({ Alpine.data("pictures", () => ({
pictures: {}, pictures: {},
page: parseInt(initialUrlParams.get("page")) || 1, page: parseInt(initialUrlParams.get("page")) || 1,
pushstate: true, /* Used to avoid pushing a state on a back action */
loading: false, loading: false,
async init() { async init() {
await this.fetch_pictures(); await this.fetch_pictures();
this.$watch("page", () => { this.$watch("page", () => {
update_query_string("page", this.page === 1 ? null : this.page); update_query_string("page",
this.fetch_pictures() this.page === 1 ? null : this.page,
this.pushstate
);
this.pushstate = true;
this.fetch_pictures();
});
window.addEventListener("popstate", () => {
this.pushstate = false;
this.page = parseInt(
new URLSearchParams(window.location.search).get("page")
) || 1;
}); });
}, },
@ -146,7 +158,7 @@
+`&page=${this.page}` +`&page=${this.page}`
+"&page_size={{ settings.SITH_SAS_IMAGES_PER_PAGE }}"; +"&page_size={{ settings.SITH_SAS_IMAGES_PER_PAGE }}";
this.pictures = await (await fetch(url)).json(); this.pictures = await (await fetch(url)).json();
this.loading=false; this.loading = false;
}, },
nb_pages() { nb_pages() {