Frontend: Add a first page and previous page buttons for channel navigation (#4123)

assets/js/pagination.js

@@ -0,0 +1,93 @@
+'use strict';
+
+const CURRENT_CONTINUATION = (new URL(document.location)).searchParams.get("continuation");
+const CONT_CACHE_KEY = `continuation_cache_${encodeURIComponent(window.location.pathname)}`;
+
+function get_data(){
+    return JSON.parse(sessionStorage.getItem(CONT_CACHE_KEY)) || [];
+}
+
+function save_data(){
+    const prev_data = get_data();
+    prev_data.push(CURRENT_CONTINUATION);
+
+    sessionStorage.setItem(CONT_CACHE_KEY, JSON.stringify(prev_data));
+}
+
+function button_press(){
+    let prev_data = get_data();
+    if (!prev_data.length) return null;
+
+    // Sanity check. Nowhere should the current continuation token exist in the cache 
+    // but it can happen when using the browser's back feature. As such we'd need to travel
+    // back to the point where the current continuation token first appears in order to 
+    // account for the rewind.
+    const conflict_at = prev_data.indexOf(CURRENT_CONTINUATION);
+    if (conflict_at != -1) {
+        prev_data.length = conflict_at;
+    }
+
+    const prev_ctoken = prev_data.pop();
+
+    // On the first page, the stored continuation token is null.
+    if (prev_ctoken === null) {
+        sessionStorage.removeItem(CONT_CACHE_KEY);
+        let url = set_continuation();
+        window.location.href = url;
+
+        return;
+    }
+
+    sessionStorage.setItem(CONT_CACHE_KEY, JSON.stringify(prev_data));
+    let url = set_continuation(prev_ctoken);
+
+    window.location.href = url;
+};
+
+// Method to set the current page's continuation token
+// Removes the continuation parameter when a continuation token is not given
+function set_continuation(prev_ctoken = null){
+    let url = window.location.href.split('?')[0];
+    let params = window.location.href.split('?')[1];
+    let url_params = new URLSearchParams(params);
+
+    if (prev_ctoken) {
+        url_params.set("continuation", prev_ctoken);
+    } else {
+        url_params.delete('continuation');
+    };
+
+    if(Array.from(url_params).length > 0){
+        return `${url}?${url_params.toString()}`;
+    } else {
+        return url;
+    }
+}
+
+addEventListener('DOMContentLoaded', function(){
+    const pagination_data = JSON.parse(document.getElementById('pagination-data').textContent);
+    const next_page_containers = document.getElementsByClassName("page-next-container");
+
+    for (let container of next_page_containers){
+        const next_page_button = container.getElementsByClassName("pure-button")
+
+        // exists?
+        if (next_page_button.length > 0){
+            next_page_button[0].addEventListener("click", save_data);
+        }
+    }
+
+    // Only add previous page buttons when not on the first page
+    if (CURRENT_CONTINUATION) {
+        const prev_page_containers = document.getElementsByClassName("page-prev-container")
+
+        for (let container of prev_page_containers) {
+            if (pagination_data.is_rtl) {
+                container.innerHTML = `<button class="pure-button pure-button-secondary">${pagination_data.prev_page}&nbsp;&nbsp;<i class="icon ion-ios-arrow-forward"></i></button>`
+            } else {
+                container.innerHTML = `<button class="pure-button pure-button-secondary"><i class="icon ion-ios-arrow-back"></i>&nbsp;&nbsp;${pagination_data.prev_page}</button>`
+            }
+            container.getElementsByClassName("pure-button")[0].addEventListener("click", button_press);
+        }
+    }
+});