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

Ajax navigation history in uv guide

core/templates/core/macros.jinja

@@ -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() %}