klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-22 14:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #781 from ae-utbm/ajax-navigation-history

Browse Source 
Fix back function in album pagination
This commit is contained in:
thomas girod 2024-08-11 00:34:21 +02:00 committed by GitHub
commit 121b388d85
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 36 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
core/static/core/js/script.js
View File

@ -69,17 +69,35 @@ function getCSRFToken() {
const initialUrlParams = new URLSearchParams(window.location.search); 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); 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
url.searchParams.delete(key) url.searchParams.delete(key)
} else if (Array.isArray(value)) { } else if (Array.isArray(value)) {
url.searchParams.delete(key) url.searchParams.delete(key)
value.forEach((v) => url.searchParams.append(key, v)) value.forEach((v) => url.searchParams.append(key, v))
} else { } else {
url.searchParams.set(key, value); url.searchParams.set(key, value);
} }
if (action === History.PUSH) {
history.pushState(null, document.title, url.toString()); history.pushState(null, document.title, url.toString());
} else if (action === History.REPLACE) {
history.replaceState(null, document.title, url.toString());
}
} }

16
sas/templates/sas/album.jinja
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: History.PUSH, /* 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 = History.PUSH;
this.fetch_pictures();
});
window.addEventListener("popstate", () => {
this.pushstate = History.REPLACE;
this.page = parseInt(
new URLSearchParams(window.location.search).get("page")
) || 1;
}); });
}, },