From bf1926903403a77767efb8bbbcde6b32c8929179 Mon Sep 17 00:00:00 2001 From: tdro Date: Wed, 2 Nov 2022 11:08:22 -0400 Subject: themes/default/layouts/_default/index.json: Paginate Load feed in chunks on the client side. --- assets/js/index.js | 45 ++++++++++++++++++---------- static/js/fixedsearch.ts | 47 ++++++++++++++++++++---------- themes/default/layouts/_default/index.json | 5 +++- 3 files changed, 66 insertions(+), 31 deletions(-) diff --git a/assets/js/index.js b/assets/js/index.js index 5a4fb39..7deaee1 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -392,11 +392,27 @@ container.removeAttribute("data-focus"); } }); - function fetchJson(url, callback) { + let data1 = {}; + function isEmpty(obj) { + return Object.keys(obj).length === 0; + } + function appendItemsTo(local, remote) { + const paginated = Object.keys(remote).includes("next_url"); + if (isEmpty(local)) { + local = remote; + } else { + local.items = local.items.concat(remote.items); + } + if (paginated) { + fetchJson(remote.next_url, local); + } + data1 = local; + } + function fetchJson(url, store) { const httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = function() { if (httpRequest.readyState === 4 && httpRequest.status === 200) { - if (callback) callback(JSON.parse(httpRequest.responseText)); + appendItemsTo(store, JSON.parse(httpRequest.responseText)); } }; httpRequest.open("GET", url); @@ -420,20 +436,19 @@ if (firstRun) { loadScript(window.location.origin + "/js/fuzzysort.js").then(()=>{ firstRun = false; - fetchJson("/index.json", function(data) { - const options = { - key: [ - "title" - ] - }; - query.addEventListener("keyup", function() { - search(query.value, data.items, options); - }); - query.addEventListener("focusin", function() { - search(query.value, data.items, options); - }); - search(query.value, data.items, options); + fetchJson("/index.json", {}); + const options = { + key: [ + "title" + ] + }; + query.addEventListener("keyup", function() { + search(query.value, data1.items, options); + }); + query.addEventListener("focusin", function() { + search(query.value, data1.items, options); }); + search(query.value, data1.items, options); }).catch((error)=>{ console.log("Error failed to load fuzzy sort: " + error); }); diff --git a/static/js/fixedsearch.ts b/static/js/fixedsearch.ts index 4a24144..fafe5ee 100644 --- a/static/js/fixedsearch.ts +++ b/static/js/fixedsearch.ts @@ -33,7 +33,7 @@ } } - // DOWN (40) + // DOWN (40) if (event.keyCode == 40) { event.preventDefault(); if (document.activeElement == query) head.focus(); @@ -44,7 +44,7 @@ } } - // UP (38) + // UP (38) if (event.keyCode == 38) { event.preventDefault(); if (document.activeElement == query) tail.focus(); @@ -92,11 +92,30 @@ } }); - function fetchJson(url, callback) { + let data = {}; + + function isEmpty(obj) { + return Object.keys(obj).length === 0; + } + + function appendItemsTo(local, remote) { + const paginated = Object.keys(remote).includes("next_url"); + if (isEmpty(local)) { + local = remote; + } else { + local.items = local.items.concat(remote.items); + } + if (paginated) { + fetchJson(remote.next_url, local); + } + data = local; + } + + function fetchJson(url, store) { const httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = function () { if (httpRequest.readyState === 4 && httpRequest.status === 200) { - if (callback) callback(JSON.parse(httpRequest.responseText)); + appendItemsTo(store, JSON.parse(httpRequest.responseText)); } }; httpRequest.open("GET", url); @@ -122,28 +141,26 @@ }); } - let firstRun = true; // allow us to delay loading json data unless search activated + let firstRun = true; function initialize() { if (firstRun) { loadScript(window.location.origin + "/js/fuzzysort.js") .then(() => { firstRun = false; - fetchJson("/index.json", function (data) { - const options = { - key: ["title"], - }; + fetchJson("/index.json", {}); - query.addEventListener("keyup", function () { - search(query.value, data.items, options); - }); + const options = { key: ["title"] }; - query.addEventListener("focusin", function () { - search(query.value, data.items, options); - }); + query.addEventListener("keyup", function () { + search(query.value, data.items, options); + }); + query.addEventListener("focusin", function () { search(query.value, data.items, options); }); + + search(query.value, data.items, options); }).catch((error) => { console.log("Error failed to load fuzzy sort: " + error); }); diff --git a/themes/default/layouts/_default/index.json b/themes/default/layouts/_default/index.json index 86be455..0c9c794 100644 --- a/themes/default/layouts/_default/index.json +++ b/themes/default/layouts/_default/index.json @@ -3,8 +3,11 @@ "title": "{{ .Site.Title }}", "home_page_url": "{{ .Site.BaseURL }}", "feed_url": "{{ .Site.BaseURL }}/index.json", + {{- with .Paginator.Next }} + "next_url": "{{ .URL }}", + {{- end }} "items": [ - {{- range $index, $data := .Site.RegularPages -}} + {{- range $index, $data := .Paginator.Pages -}} {{- if and (ne $data.Type "json") (not .ExpiryDate) (not .Params.unlisted) -}} {{- if and $index (gt $index 0) -}},{{- end }} { -- cgit v1.2.3