From 35df6484c5d1dd2b45032dac5e7454c8cec3e325 Mon Sep 17 00:00:00 2001
From: ve3 <kawewong@gmail.com>
Date: Wed, 24 Feb 2021 00:28:44 +0700
Subject: [PATCH] v0.0.2

* Add `startOffset` option.
* Add `changeURLScrollTopOffset` option.
* Add more example in **tests/via-http** folder.
---
 package.json                                  |  2 +-
 src/RundizScrollPagination.js                 | 26 ++++--
 .../{test01.html => test01-basic.html}        |  3 +-
 tests/via-http/test02-preloaded-items.html    | 80 +++++++++++++++++++
 tests/via-http/test03-more-customized.html    | 59 ++++++++++++++
 5 files changed, 162 insertions(+), 8 deletions(-)
 rename tests/via-http/{test01.html => test01-basic.html} (95%)
 create mode 100644 tests/via-http/test02-preloaded-items.html
 create mode 100644 tests/via-http/test03-more-customized.html

diff --git a/package.json b/package.json
index 204d73e..6bfb909 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rundiz-scroll-pagination",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Scroll down the page and automatically call to get next page contents.",
   "main": "index.js",
   "directories": {
diff --git a/src/RundizScrollPagination.js b/src/RundizScrollPagination.js
index f91936b..5cff44e 100644
--- a/src/RundizScrollPagination.js
+++ b/src/RundizScrollPagination.js
@@ -3,7 +3,7 @@
  * 
  * @author Vee W.
  * @license MIT.
- * @version 0.0.1
+ * @version 0.0.2
  */
 
 
@@ -37,16 +37,30 @@ class RundizScrollPagination {
 
         if (isNaN(option.offsetHideShow) || isNaN(parseFloat(option.offsetHideShow))) {
             // the offset that children item will be hide or show when outside visible area.
+            // for the top it is (0 - nn), for the bottom it is (window height - nn) where nn is this value.
             option.offsetHideShow = 40;
         }
         this.offsetHideShow = option.offsetHideShow;
 
+        if (isNaN(option.startOffset) || isNaN(parseFloat(option.startOffset))) {
+            // start offset can be use in case that you already have pre-loaded child items 
+            // and you just want to start scroll to next page.
+            option.startOffset = 0;
+        }
+        this.startOffset = option.startOffset;
+
         // change url options ----------------------------
         if (option.changeURL !== true && option.changeURL !== false) {
             option.changeURL = true;
         }
         this.changeURL = option.changeURL;
 
+        if (isNaN(option.changeURLScrollTopOffset) || isNaN(parseFloat(option.changeURLScrollTopOffset))) {
+            // the offset from top of display area where the pagination data was scrolled before change the URL to its start offset.
+            option.changeURLScrollTopOffset = 40;
+        }
+        this.changeURLScrollTopOffset = option.changeURLScrollTopOffset;
+
         if (!option.changeURLParamStartOffset) {
             // querystring for start offset to push to the URL.
             // example ?rdspStartOffset=10 when scroll to next page from first while displaying 10 items per page.
@@ -232,8 +246,8 @@ class RundizScrollPagination {
         if (paginationDataElements) {
             paginationDataElements.forEach((item, index) => {
                 let rect = item.getBoundingClientRect();
-                if (rect.top >= 0 && rect.top < 30) {
-                    // if scrolled and top of this pagination data element is on top within range (30 - for example).
+                if (rect.top >= 0 && rect.top < thisClass.changeURLScrollTopOffset) {
+                    // if scrolled and top of this pagination data element is on top within range (40 - for example).
                     // retrieve this start offset from `data-startoffset="n"`.
                     let thisStartOffset = item.dataset.startoffset;
 
@@ -393,9 +407,9 @@ class RundizScrollPagination {
         const params = new URLSearchParams(window.location.search);
         let currentStartOffsetQuerystring = params.get(this.changeURLParamStartOffset);
 
-        if (
-            currentStartOffsetQuerystring === null ||
-            currentStartOffsetQuerystring === '' || 
+        if (currentStartOffsetQuerystring === null || currentStartOffsetQuerystring === '') {
+            currentStartOffsetQuerystring = this.startOffset;
+        } else if (
             isNaN(currentStartOffsetQuerystring) ||
             isNaN(parseFloat(currentStartOffsetQuerystring)) ||
             currentStartOffsetQuerystring < 0
diff --git a/tests/via-http/test01.html b/tests/via-http/test01-basic.html
similarity index 95%
rename from tests/via-http/test01.html
rename to tests/via-http/test01-basic.html
index c345b21..b995d60 100644
--- a/tests/via-http/test01.html
+++ b/tests/via-http/test01-basic.html
@@ -7,6 +7,8 @@
         <link rel="stylesheet" href="assets/css/styles.css">
     </head>
     <body>
+        <h1>Basic demonstration</h1>
+        <p>This page use few options of <code>RundizScrollPagination</code> class.</p>
         <div id="posts-container" class="posts-container"></div>
 
         <script src="../../src/RundizScrollPagination.js" type="application/javascript"></script>
@@ -46,7 +48,6 @@
                 let scrollPaginationClass = new RundizScrollPagination({
                     'containerSelector': '#posts-container',
                     'childrenItemSelector': '.each-post-item',
-                    'changeURL': true,
                     'ajaxUrl': 'pagination-dummydata.php?start=%startoffset%'
                 });
                 // invoke/run the class.
diff --git a/tests/via-http/test02-preloaded-items.html b/tests/via-http/test02-preloaded-items.html
new file mode 100644
index 0000000..e0adad5
--- /dev/null
+++ b/tests/via-http/test02-preloaded-items.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>JS scroll pagination</title>
+
+        <link rel="stylesheet" href="assets/css/styles.css">
+    </head>
+    <body>
+        <h1>Pre-loaded items</h1>
+        <p>There are some items that were already loaded. 
+            They will be removed if this page was scrolled to the other pages and hit reload.</p>
+        <div id="posts-container" class="posts-container">
+            <div class="rd-scroll-pagination" data-startoffset="0" style="visibility: hidden;"></div>
+            <div class="each-post-item"><p>Pre loaded item 1.</p></div>
+            <div class="each-post-item"><p>Pre loaded item 2.</p></div>
+            <div class="each-post-item"><p>Pre loaded item 3.</p></div>
+            <div class="each-post-item"><p>Pre loaded item 4.</p></div>
+            <div class="each-post-item"><p>Pre loaded item 5.</p></div>
+            <div class="each-post-item"><p>Pre loaded item 6.</p></div>
+            <div class="each-post-item"><p>Pre loaded item 7.</p></div>
+            <div class="each-post-item"><p>Pre loaded item 8.</p></div>
+            <div class="each-post-item"><p>Pre loaded item 9.</p></div>
+            <div class="each-post-item"><p>Pre loaded item 10.</p></div>
+        </div>
+
+        <script src="../../src/RundizScrollPagination.js" type="application/javascript"></script>
+        <script type="application/javascript">
+            const params = new URLSearchParams(window.location.search);
+            let rdspStartOffset = params.get('rdspStartOffset');// assume that start offset querystring is using default value.
+            if (rdspStartOffset !== null && rdspStartOffset !== '' && rdspStartOffset >= 10) {
+                // if the current querystring of "start offset" exists, means this was scrolled to the other pages.
+                // remove everything and let ajax work from querystring.
+                document.querySelector('#posts-container').innerHTML = '';
+            }
+
+            // on window dom loaded.
+            window.addEventListener('DOMContentLoaded', (event) => {
+                // listen on ajax failed, done to render items.
+                document.addEventListener('rdScrollPagination.start', (ajaxEvent) => {
+                    const loadingHtml = '<p class="item-loading">Loading &hellip;</p>';
+                    document.querySelector('#posts-container').insertAdjacentHTML('beforeend', loadingHtml);
+                });
+                document.addEventListener('rdScrollPagination.fail', (ajaxEvent) => {
+                    let loadingElement = document.querySelector('.item-loading');
+                    if (loadingElement) {
+                        loadingElement.remove();
+                    }
+                });
+                document.addEventListener('rdScrollPagination.done', (ajaxEvent) => {
+                    let loadingElement = document.querySelector('.item-loading');
+                    if (loadingElement) {
+                        loadingElement.remove();
+                    }
+
+                    let response = (ajaxEvent.detail ? ajaxEvent.detail.response : {});
+
+                    let listHtml = '';
+                    if (response.items) {
+                        response.items.forEach((item, index) => {
+                            listHtml += '<div class="each-post-item"><p>' + item + '</p></div>';
+                        });
+                    }
+
+                    document.querySelector('#posts-container').insertAdjacentHTML('beforeend', listHtml);
+                });
+
+                // initialize new scroll pagination class.
+                let scrollPaginationClass = new RundizScrollPagination({
+                    'containerSelector': '#posts-container',
+                    'childrenItemSelector': '.each-post-item',
+                    'startOffset': 10,
+                    'ajaxUrl': 'pagination-dummydata.php?start=%startoffset%'
+                });
+                // invoke/run the class.
+                scrollPaginationClass.invoke();
+            });
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/tests/via-http/test03-more-customized.html b/tests/via-http/test03-more-customized.html
new file mode 100644
index 0000000..f614c54
--- /dev/null
+++ b/tests/via-http/test03-more-customized.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>JS scroll pagination</title>
+
+        <link rel="stylesheet" href="assets/css/styles.css">
+    </head>
+    <body>
+        <h1>More customized</h1>
+        <p>This page set many options of <code>RundizScrollPagination</code> class.</p>
+        <div id="posts-container" class="posts-container"></div>
+
+        <script src="../../src/RundizScrollPagination.js" type="application/javascript"></script>
+        <script type="application/javascript">
+            // on window dom loaded.
+            window.addEventListener('DOMContentLoaded', (event) => {
+                // listen on ajax failed, done to render items.
+                document.addEventListener('rdScrollPagination.start', (ajaxEvent) => {
+                    const loadingHtml = '<p class="item-loading">Loading &hellip;</p>';
+                    document.querySelector('#posts-container').insertAdjacentHTML('beforeend', loadingHtml);
+                });
+                document.addEventListener('rdScrollPagination.fail', (ajaxEvent) => {
+                    let loadingElement = document.querySelector('.item-loading');
+                    if (loadingElement) {
+                        loadingElement.remove();
+                    }
+                });
+                document.addEventListener('rdScrollPagination.done', (ajaxEvent) => {
+                    let loadingElement = document.querySelector('.item-loading');
+                    if (loadingElement) {
+                        loadingElement.remove();
+                    }
+
+                    let response = (ajaxEvent.detail ? ajaxEvent.detail.response : {});
+
+                    let listHtml = '';
+                    if (response.items) {
+                        response.items.forEach((item, index) => {
+                            listHtml += '<div class="each-post-item"><p>' + item + '</p></div>';
+                        });
+                    }
+
+                    document.querySelector('#posts-container').insertAdjacentHTML('beforeend', listHtml);
+                });
+
+                // initialize new scroll pagination class.
+                let scrollPaginationClass = new RundizScrollPagination({
+                    'containerSelector': '#posts-container',
+                    'childrenItemSelector': '.each-post-item',
+                    'changeURLParamStartOffset': 'start',
+                    'ajaxUrl': 'pagination-dummydata.php?start=%startoffset%&demo=true'
+                });
+                // invoke/run the class.
+                scrollPaginationClass.invoke();
+            });
+        </script>
+    </body>
+</html>
\ No newline at end of file