summaryrefslogtreecommitdiff
path: root/static/js/infinite_scroll.js
blob: 15df7aeba34945193d9cef4c7dda374baccdb000 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
// Copyright © 2020 Jakob L. Kreuze <zerodaysfordays@sdf.org>
//
// This file is part of Kona.
//
// Kona is free software; you can redistribute it and/or modify it under
// the terms of the GNU Affero General Public License as published by
// the Free Software Foundation; either version 3 of the License, or (at
// your option) any later version.
//
// Kona is distributed in the hope that it will be useful, but WITHOUT
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
// FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public
// License for more details.
//
// You should have received a copy of the GNU Affero General Public
// License along with Kona. If not, see <http://www.gnu.org/licenses/>.

let searchQuery = /query=[^\&]*/.exec(window.location)[0];
let searchLast = 0;

// Calculate the `last` parameter for the 'posts' endpoint from the images
// currently displayed.
function lastId() {
  let children = document.getElementById("main").children;

  if (children.length === 0) {
    return 0;
  }

  let lastChild = children[children.length - 1];
  return parseInt(/image-([\d]*)/.exec(lastChild.id)[1]);
}

function scrollHandler() {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    // Remove ourselves so we don't get triggered while we're loading.
    window.removeEventListener("scroll", scrollHandler);
    
    let xhr = new XMLHttpRequest();
    xhr.open("GET", searchQuery ?
             `/api/posts?${searchQuery}&last=${searchLast}` :
             `/api/posts?query=&last=${searchLast}`);
    xhr.onload = () => {
      let results = JSON.parse(xhr.response);

      // Add ourselves iff there's more to load.
      if (results.length > 0) {
        window.addEventListener("scroll", scrollHandler);
      }
      
      results.forEach((image) => {
        let div = document.createElement("div");
        div.id = `image-${image.id}`;
        div.classList.add("image-container");

        let a = document.createElement("a");
        a.href = `/posts/${image.id}`;

        let img = document.createElement("img");
        img.src = `/image/${image.thumb_filename}`;

        div.appendChild(a);
        a.appendChild(img);
        document.getElementById("main").appendChild(div);
      });

      // Update the `searchLast` global.
      searchLast = lastId();
    };
    xhr.send();
  }
};

window.addEventListener("scroll", scrollHandler);

window.addEventListener("load", () => {
  // Remove the "next" link.
  let main = document.getElementById("main");
  let lastChild = main.children[main.children.length - 1];
  if (lastChild && lastChild.nodeName === "P") {
    main.removeChild(lastChild);
  }

  // Initialize `searchLast'.
  searchLast = lastId();

  // Simulate a scroll if we have the space to load more images.
  if (window.innerHeight >= document.body.offsetHeight) {
    scrollHandler();
  }
});