klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-10 03:49:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Ajax navigation history in uv guide
This commit is contained in:
thomas girod
2024-08-26 22:29:19 +02:00
committed by GitHub
parent a422e8d39a 759e360a1d
commit 68d0a16d1c
4 changed files with 110 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -74,6 +74,7 @@ const initialUrlParams = new URLSearchParams(window.location.search);
* @enum {number}
*/
const History = {
NONE: 0,
PUSH: 1,
REPLACE: 2,
};
@ -82,9 +83,12 @@ const History = {
* @param {string} key
* @param {string | string[] | null} value
* @param {History} action
* @param {URL | null} url
*/
function update_query_string(key, value, action = History.REPLACE) {
const url = new URL(window.location.href);
function update_query_string(key, value, action = History.REPLACE, url = null) {
if (!url){
url = new URL(window.location.href);
}
if (!value) {
// If the value is null, undefined or empty => delete it
url.searchParams.delete(key)
@ -96,8 +100,10 @@ function update_query_string(key, value, action = History.REPLACE) {
}
if (action === History.PUSH) {
history.pushState(null, document.title, url.toString());
history.pushState(null, "", url.toString());
} else if (action === History.REPLACE) {
history.replaceState(null, document.title, url.toString());
history.replaceState(null, "", url.toString());
}
return url;
}

40
core/templates/core/macros.jinja
View File

@ -116,6 +116,46 @@
{% endif %}
{% endmacro %}
{% macro paginate_alpine(page, nb_pages) %}
{# Add pagination buttons for ajax based content with alpine
Notes:
This can only be used in the scope of your alpine datastore
Notes:
You might need to listen to the "popstate" event in your code
to update the current page you are on when the user goes back in
it's browser history with the back arrow
Parameters:
page (str): name of the alpine page variable in your datastore
nb_page (str): call to a javascript function or variable returning
the maximum number of pages to paginate
#}
<nav class="pagination" x-show="{{ nb_pages }} > 1">
{# Adding the prevent here is important, because otherwise,
clicking on the pagination buttons could submit the picture management form
and reload the page #}
<button
@click.prevent="{{ page }}--"
:disabled="{{ page }} <= 1"
@keyup.right.window="{{ page }} = Math.min({{ nb_pages }}, {{ page }} + 1)"
>
<i class="fa fa-caret-left"></i>
</button>
<template x-for="i in {{ nb_pages }}">
<button x-text="i" @click.prevent="{{ page }} = i" :class="{active: {{ page }} === i}"></button>
</template>
<button
@click.prevent="{{ page }}++"
:disabled="{{ page }} >= {{ nb_pages }}"
@keyup.left.window="{{ page }} = Math.max(1, {{ page }} - 1)"
>
<i class="fa fa-caret-right"></i>
</button>
</nav>
{% endmacro %}
{% macro paginate(page_obj, paginator, js_action) %}
{% set js = js_action|default('') %}
{% if page_obj.has_previous() or page_obj.has_next() %}