mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-22 06:03:20 +00:00
Merge pull request #781 from ae-utbm/ajax-navigation-history
Fix back function in album pagination
This commit is contained in:
commit
121b388d85
@ -69,17 +69,35 @@ function getCSRFToken() {
|
||||
|
||||
const initialUrlParams = new URLSearchParams(window.location.search);
|
||||
|
||||
function update_query_string(key, value) {
|
||||
/**
|
||||
* @readonly
|
||||
* @enum {number}
|
||||
*/
|
||||
const History = {
|
||||
PUSH: 1,
|
||||
REPLACE: 2,
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} key
|
||||
* @param {string | string[] | null} value
|
||||
* @param {History} action
|
||||
*/
|
||||
function update_query_string(key, value, action = History.REPLACE) {
|
||||
const url = new URL(window.location.href);
|
||||
if (!value) {
|
||||
// If the value is null, undefined or empty => delete it
|
||||
url.searchParams.delete(key)
|
||||
} else if (Array.isArray(value)) {
|
||||
|
||||
url.searchParams.delete(key)
|
||||
value.forEach((v) => url.searchParams.append(key, v))
|
||||
} else {
|
||||
url.searchParams.set(key, value);
|
||||
}
|
||||
history.pushState(null, document.title, url.toString());
|
||||
|
||||
if (action === History.PUSH) {
|
||||
history.pushState(null, document.title, url.toString());
|
||||
} else if (action === History.REPLACE) {
|
||||
history.replaceState(null, document.title, url.toString());
|
||||
}
|
||||
}
|
||||
|
@ -129,13 +129,25 @@
|
||||
Alpine.data("pictures", () => ({
|
||||
pictures: {},
|
||||
page: parseInt(initialUrlParams.get("page")) || 1,
|
||||
pushstate: History.PUSH, /* Used to avoid pushing a state on a back action */
|
||||
loading: false,
|
||||
|
||||
async init() {
|
||||
await this.fetch_pictures();
|
||||
this.$watch("page", () => {
|
||||
update_query_string("page", this.page === 1 ? null : this.page);
|
||||
this.fetch_pictures()
|
||||
update_query_string("page",
|
||||
this.page === 1 ? null : this.page,
|
||||
this.pushstate
|
||||
);
|
||||
this.pushstate = History.PUSH;
|
||||
this.fetch_pictures();
|
||||
});
|
||||
|
||||
window.addEventListener("popstate", () => {
|
||||
this.pushstate = History.REPLACE;
|
||||
this.page = parseInt(
|
||||
new URLSearchParams(window.location.search).get("page")
|
||||
) || 1;
|
||||
});
|
||||
},
|
||||
|
||||
@ -146,7 +158,7 @@
|
||||
+`&page=${this.page}`
|
||||
+"&page_size={{ settings.SITH_SAS_IMAGES_PER_PAGE }}";
|
||||
this.pictures = await (await fetch(url)).json();
|
||||
this.loading=false;
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
nb_pages() {
|
||||
|
Loading…
Reference in New Issue
Block a user