Merge remote-tracking branch 'origin/master' into 3.1

fieg · fieg · commit 916823dd22f8 · 2022-09-08T17:19:30.000+02:00
# By fieg (4) and dependabot[bot] (1)
# Via GitHub (1) and fieg (1)
* origin/master:
  use static images in vuejs example + minor tweaks
  pass along hasNextUrl (fixes page not fully prefilling)
  fixed watch command
  added canonical urls to examples
  Bump rollup from 2.78.1 to 2.79.0

# Conflicts:
#	src/infinite-ajax-scroll.js
diff --git a/examples/articles/index.html b/examples/articles/index.html
@@ -8,6 +8,8 @@
     <meta name="description" content="An example of an infinite scrolling blog where next articles are automatically appended when you scroll down">
 
     <link rel="stylesheet" href="./style.css"/>
+
+    <link rel="canonical" href="https://infiniteajaxscroll.com/examples/articles/">
 </head>
 <body>
 
diff --git a/examples/articles/page2.html b/examples/articles/page2.html
@@ -8,6 +8,8 @@
     <title>Pellentesque habitant morbi senectus - Infinite Ajax Scroll Example</title>
 
     <link rel="stylesheet" href="./style.css"/>
+
+    <link rel="canonical" href="https://infiniteajaxscroll.com/examples/articles/page2.html">
 </head>
 <body>
 
diff --git a/examples/articles/page3.html b/examples/articles/page3.html
@@ -8,6 +8,8 @@
     <title>Diam sollicitudin tempor id eu nisl - Infinite Ajax Scroll Example</title>
 
     <link rel="stylesheet" href="./style.css"/>
+
+    <link rel="canonical" href="https://infiniteajaxscroll.com/examples/articles/page3.html">
 </head>
 <body>
 
diff --git a/examples/blocks/index.html b/examples/blocks/index.html
@@ -8,6 +8,8 @@
     <meta name="description" content="An example of a custom next function which appends generated blocks infinitely">
 
     <link rel="stylesheet" href="./style.css"/>
+
+    <link rel="canonical" href="https://infiniteajaxscroll.com/examples/blocks/">
 </head>
 <body>
 
diff --git a/examples/button/index.html b/examples/button/index.html
@@ -8,6 +8,8 @@
     <meta name="description" content="An example of infinite scroll with a load more button">
 
     <link rel="stylesheet" href="./style.css"/>
+
+    <link rel="canonical" href="https://infiniteajaxscroll.com/examples/button/">
 </head>
 <body>
 
diff --git a/examples/json/index.html b/examples/json/index.html
@@ -9,6 +9,7 @@
 
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <link rel="stylesheet" href="./style.css"/>
+  <link rel="canonical" href="https://infiniteajaxscroll.com/examples/json/">
 </head>
 <body>
 
diff --git a/examples/masonry/index.html b/examples/masonry/index.html
@@ -8,6 +8,7 @@
     <meta name="description" content="An example of a masonry layout with infinite scroll">
 
     <link rel="stylesheet" href="./style.css"/>
+    <link rel="canonical" href="https://infiniteajaxscroll.com/examples/masonry/">
 </head>
 <body>
 
diff --git a/examples/overflow/page1.html b/examples/overflow/page1.html
@@ -9,6 +9,7 @@
 
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <link rel="stylesheet" href="./style.css"/>
+  <link rel="canonical" href="https://infiniteajaxscroll.com/examples/overflow/">
 </head>
 <body>
 
diff --git a/examples/overflow/page2.html b/examples/overflow/page2.html
@@ -9,6 +9,7 @@
 
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <link rel="stylesheet" href="./style.css"/>
+  <link rel="canonical" href="https://infiniteajaxscroll.com/examples/overflow/">
 </head>
 <body>
 
diff --git a/examples/overflow/page3.html b/examples/overflow/page3.html
@@ -9,6 +9,7 @@
 
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <link rel="stylesheet" href="./style.css"/>
+  <link rel="canonical" href="https://infiniteajaxscroll.com/examples/overflow/">
 </head>
 <body>
 
diff --git a/examples/vuejs/App.vue b/examples/vuejs/App.vue
@@ -2,8 +2,8 @@
 <template>
   <div>
     <div class="images">
-        <div class="image" v-for="image in images" :key="image.id">
-            <img :src="image.img" :alt="image.title"/>
+        <div class="image" v-for="image in loadedImages" :key="image.id">
+            <img :src="image.img" :alt="image.title" width="300" height="448"/>
         </div>
     </div>
     <div class="loader" v-if="isLoading"></div>
@@ -18,10 +18,21 @@ import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';
 export default Vue.extend({
   data() {
     return {
-      ias: null,
       isLast: false,
       isLoading: false,
-      images: []
+      images: [
+        'https://m.media-amazon.com/images/M/MV5BYzFjNzIxMmEtMzY5NS00YTgzLTkwYWEtN2FjMmY0NmNkZWY3XkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg',
+        'https://m.media-amazon.com/images/M/MV5BMTM1MTk2ODQxNV5BMl5BanBnXkFtZTcwOTY5MDg0NA@@._V1_SX300.jpg',
+        'https://m.media-amazon.com/images/M/MV5BMzRiMGE2MmMtM2RhMy00OWNiLTljYTktOThmMmE1YjY1NjYyXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX300.jpg',
+        'https://ia.media-imdb.com/images/M/MV5BOTI0MzcxMTYtZDVkMy00NjY1LTgyMTYtZmUxN2M3NmQ2NWJhXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg',
+        'https://ia.media-imdb.com/images/M/MV5BNWMxZTgzMWEtMTU0Zi00NDc5LWFkZjctMzUxNDIyNzZiMmNjXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg',
+        'https://m.media-amazon.com/images/M/MV5BYTk5NWE2ZjAtZmRmOS00ZGYzLWI5ZmUtMDcwODI0YWY0MTRlL2ltYWdlXkEyXkFqcGdeQXVyNjQzNDI3NzY@._V1_SX300.jpg',
+        'https://m.media-amazon.com/images/M/MV5BYjZlYmJjYWYtZDM0NS00YmZlLWIyMTAtMDY5ZTNjZTgwMDhjXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg',
+        'https://ia.media-imdb.com/images/M/MV5BNzM4Y2FlNzYtZmY5Yy00NzU4LTk1ODItY2NjYWYzYzUyZGM3L2ltYWdlXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg',
+        'https://ia.media-imdb.com/images/M/MV5BNjFlOTI2OGQtMzg0YS00ZGE4LTkwMjEtZDUzYThlOTU5YjQ5XkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg',
+        'https://m.media-amazon.com/images/M/MV5BYTUwMTY1YmMtN2U5NC00YjkzLTg0YWQtZmEwNTEzZjdkNzQ2XkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg',
+      ],
+      loadedImages: [],
     };
   },
   mounted() {
@@ -45,16 +56,17 @@ export default Vue.extend({
       return Promise.all([
         this.loadNewImage(),
         this.loadNewImage(),
-        this.loadNewImage()
+        this.loadNewImage(),
       ]).then(() => hasNextUrl);
     },
     loadNewImage() {
       return new Promise((resolve) => {
         // Simulate loading of new image
         setTimeout(() => {
-          this.images.push({
-            title: `A nice image random image at position ${this.images.length + 1}`,
-            img: `https://picsum.photos/266/400?random=${this.images.length}`
+          this.loadedImages.push({
+            id: this.loadedImages.length + 1,
+            title: `A nice image random image at position ${this.loadedImages.length + 1}`,
+            img: this.images[this.loadedImages.length % this.images.length],
           })
           resolve()
         }, 400)
@@ -68,10 +80,12 @@ export default Vue.extend({
   .images {
     margin: 0 auto;
     padding: 20px;
-    max-width: 400px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: center;
   }
   .image {
-    margin-top: 20px;
     padding: 20px;
     border: 10px solid #666;
 
diff --git a/examples/vuejs/index.html b/examples/vuejs/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>VueJS - Infinite Ajax Scroll Example</title>
     <meta name="description" content="An example of infinite scrolling in VueJS with Infinite Ajax Scroll">
+    <link rel="canonical" href="https://infiniteajaxscroll.com/examples/vuejs/">
 </head>
 <body>
 <div id="app">
diff --git a/examples/vuejs/package.json b/examples/vuejs/package.json
@@ -14,7 +14,7 @@
   },
   "scripts": {
     "build": "parcel build *.html --public-url ./",
-    "watch": "parcel watch * --public-url ./",
+    "watch": "parcel watch *.html --public-url ./",
     "link": "npm link ../../"
   },
   "dependencies": {
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/infinite-ajax-scroll.js b/src/infinite-ajax-scroll.js
@@ -182,8 +182,12 @@ export default class InfiniteAjaxScroll {
         }
 
         this.resume();
-      }).then(() => {
+
+        return hasNextUrl;
+      }).then((hasNextUrl) => {
         this.emitter.emit(Events.NEXTED, {pageIndex: this.pageIndexNext});
+
+        return hasNextUrl;
       });
   }
 
