learning/scroll_loader.html at master · RaulZhao/learning · GitHub

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
<html>
  <head>
    <style>
      .main {
        max-height: 600px;
        overflow-y: scroll;
        width: 95%;
        margin: auto;
      }
      .header {
        display: flex;
        background-color:aqua;
        justify-content: center;
      }
      .header:hover {
        background-color:turquoise;
      }
      .appended {
        height: 100px;
        border-bottom: solid 1px gray;
      }
      .init-line {
        background-color:dimgray;
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="main">
      <div class="header">
        <h1>Coupa Dynamic Content Loader</h1>
      </div>
    </div>
  </body>
  <script>
    const $main = $('.main');
    const COLORS = ['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080'];
    let ID = 0;
    const locker = {
      LOCKER: false,
      isLocked() {
        return this.LOCKER;
      },
      lock() {
        this.LOCKER = true;
      },
      unlock() {
        this.LOCKER = false;
      }
    };

    function init() {
      for(let i=0; i < 10; i++) {
        $main.append($(`<div class="appended init-line"> Init line - #${i+1} </div>`));
      }

      scrollLoader($main);
    }

    function scrollLoader() {
      $main.scroll((evt) => {
        if (locker.isLocked()) return;
        if ($main.height() + $main.scrollTop() >= $main.prop('scrollHeight') - 40) {
          locker.lock();
          fetchData().then(data => {
            renderPage(data);
          }).finally(() => locker.unlock());
        }
      });
    }
    // Here is trying to simulate real Ajax call
    function fetchData(fixedColor) {
      ID++;
      const res = $(`<div class="appended id_${ID}">The new line with ID ${ID}</div>`);
      res.css('background-color', fixedColor || COLORS[ID%COLORS.length]);

      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(`Ajax call sent for ID #${ID}`);
          resolve(res);
        }, 3000);
      });
    }

    function renderPage(content) {
      $main.append(content);
    }

    init();
  </script>
</html>