added vue-infinite-loading loading to base search results

build/webpack.config.prod.js

@@ -14,9 +14,9 @@ module.exports = merge(baseConfig, {
         uglifyOptions: {
           // Eliminate comments
           comments: false,
-          compress: {
           // remove warnings
           warnings: false,
+          compress: {
             // Drop console statements
             drop_console: true,
           }

package-lock.json

@@ -9541,6 +9541,11 @@
       "integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==",
       "dev": true
     },
+    "vue-infinite-loading": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/vue-infinite-loading/-/vue-infinite-loading-2.4.4.tgz",
+      "integrity": "sha512-eIFBcyKqkivtsDDq7Ee5ybDJVGLxIzU1NcBJCHG7Zx9Ic66QEGzSPs2OPJlGUdtu0/RS7KpUER35ZP/a7FdSOg=="
+    },
     "vue-jest": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.4.tgz",

package.json

@@ -21,6 +21,7 @@
     "axios": "^0.18.1",
     "vue": "^2.6.10",
     "vue-autofocus-directive": "^1.0.3",
+    "vue-infinite-loading": "^2.4.4",
     "vue-meta": "^1.6.0",
     "vue-router": "^3.0.6",
     "vuex": "^3.1.1"

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1154,3 +1154,50 @@ article.node--type-frontpage .node__content .field--name-computed-articles-refer
   vertical-align: top;
   max-width: 250px; }
 
+.cards-list > ul {
+  margin: 0;
+  padding: 0; }
+  .cards-list > ul > li {
+    list-style: none;
+    margin: 0 1em 1em 0;
+    padding: 0;
+    display: inline-block;
+    vertical-align: top; }
+
+.card {
+  position: relative;
+  width: 210px;
+  height: 295px; }
+  .card header {
+    position: absolute;
+    bottom: 0;
+    z-index: 10;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 100%; }
+    .card header h1, .card header h4 {
+      margin: 0;
+      padding: 0; }
+    .card header h1 {
+      font-size: 1.5em; }
+    .card header h4 {
+      font-size: 1em;
+      font-weight: normal; }
+  .card section.images {
+    position: relative; }
+    .card section.images, .card section.images * {
+      width: 100%;
+      height: 100%; }
+    .card section.images figure {
+      margin: 0;
+      position: absolute;
+      top: 0;
+      left: 0; }
+      .card section.images figure:first-of-type {
+        z-index: 5; }
+      .card section.images figure img.blank {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 20; }
+

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -1,5 +1,17 @@
 import Vue from 'vue'
 
+import InfiniteLoading from 'vue-infinite-loading';
+Vue.use(InfiniteLoading, {
+  props: {
+    spinner: 'spiral',
+    // slots.noMore: ''
+  },
+  // system: {
+  //   throttleLimit: 50,
+  //   /* other settings need to configure */
+  // }
+});
+
 import store from 'vuejs/store'
 import router from 'vuejs/route'
 

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -217,6 +217,15 @@ article.node--type-frontpage{
  // | (__/ _` | '_/ _` (_-<
  //  \___\__,_|_| \__,_/__/
 
+.infinite-loading-container{
+  .infinite-status-prompt{
+    i[class^="loading-"]{
+      width:15px; height:15px;
+    }
+  }
+}
+
+
 .cards-list{
   &>ul{
     margin:0; padding:0;

web/themes/custom/materiotheme/vuejs/components/Content/Base.vue

@@ -13,6 +13,12 @@
           <Card :item="item"/>
         </li>
       </ul>
+      <infinite-loading
+        v-if="count > limit"
+        @infinite="nextPage"
+      >
+        <div slot="no-more">No more results</div>
+      </infinite-loading>
     </div>
   </div>
 </template>
@@ -35,13 +41,20 @@ export default {
   computed: {
     ...mapState({
       items: state => state.Search.items,
-      searchinfos: state =>  state.Search.infos
+      searchinfos: state =>  state.Search.infos,
+      count: state => state.Search.count,
+      limit: state => state.Search.limit
     })
   },
   methods: {
     ...mapActions({
-      newSearch: 'Search/newSearch'
+      newSearch: 'Search/newSearch',
-    })
+      nextPage: 'Search/nextPage'
+    }),
+    // infiniteHandler($state){
+    //   console.log('inifiniteHandler', $state);
+    //   this.nextPage()
+    // }
   },
   created() {
     // at first page load or first route entering launch a search if params exists in url query
@@ -72,4 +85,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 </style>

web/themes/custom/materiotheme/vuejs/components/Content/Card.vue

@@ -70,7 +70,7 @@ export default {
     // lazy load images on mouseover
     this.$el.addEventListener('mouseover', function(event) {
       let imgs = this.querySelectorAll('.images figure img.lazy')
-      console.log('mouseover', this, imgs);
+      // console.log('mouseover', this, imgs);
       imgs.forEach((img) => {
         // console.log('forEach img',img);
         img.setAttribute('src', img.getAttribute('data-src'))

web/themes/custom/materiotheme/vuejs/store/modules/search.js

@@ -14,7 +14,10 @@ export default {
     offset: 0,
     limit: 15,
     infos: null,
-    count: 0
+    count: 0,
+    // infinteState will come from vue-infinite-loading plugin
+    // implemented in vuejs/components/Content/Base.vue
+    infiniteState: null
   },
 
   // getters
@@ -23,13 +26,13 @@ export default {
   // mutations
   mutations : {
     setUuids (state, uuids) {
-      state.uuids = uuids
+      state.uuids = state.uuids.concat(uuids)
     },
     resetUuids (state) {
       state.uuids = []
     },
     setItems (state, items) {
-      state.items = items
+      state.items = state.items.concat(items)
     },
     resetItems (state) {
       state.items = []
@@ -51,6 +54,9 @@ export default {
     },
     incrementOffset(state) {
       state.offset += state.limit
+    },
+    setInfiniteState(state, s){
+      state.infiniteState = s
     }
   },
 
@@ -63,6 +69,12 @@ export default {
       commit('resetOffset')
       dispatch('getResults')
     },
+    nextPage ({ dispatch, commit, state }, $state) {
+      console.log("Search nextPage", $state);
+      commit('incrementOffset')
+      commit('setInfiniteState', $state)
+      dispatch('getResults')
+    },
     getResults ({ dispatch, commit, state }) {
       let params = {
         keys: state.keys,
@@ -98,7 +110,7 @@ export default {
         params[`filter[${uuid}][condition][operator]`] = '='
         params[`filter[${uuid}][condition][memberOf]`] = 'uuids-groupe'
       }
-      console.log('search JSONAPI params', params);
+      // console.log('search JSONAPI params', params);
       let q = qs.stringify(params)
       return JSONAPI.get('node/materiau?'+q)
         .then(({ data }) => {
@@ -119,6 +131,7 @@ export default {
       // for (var i = 0; i < data.length; i++) {
       for (var i = 0; i < uuids.length; i++) {
         let uuid = uuids[i]
+        // https://stackoverflow.com/questions/11258077/how-to-find-index-of-an-object-by-key-and-value-in-an-javascript-array
         let item_index = data.findIndex(p => p.id == uuid)
         let item_src = data[item_index]
         let attrs = item_src.attributes
@@ -137,19 +150,28 @@ export default {
         let img_src = relations.images.data
         item.images = []
         for (var j = 0; j < img_src.length; j++) {
-        //   // https://stackoverflow.com/questions/11258077/how-to-find-index-of-an-object-by-key-and-value-in-an-javascript-array
-        //   let index = included.findIndex(p => p.id == img_src[j].id)
-        //   let img = included[index]
           item.images.push({
             title: img_src[j].meta.title,
+            // meta.imageDerivatives.style.href link is provided by drupal consumers_image_styles module
             url: img_src[j].meta.imageDerivatives.links.card_medium.href
           })
         }
 
         items.push(item)
       }
-      console.log('items', items);
+      console.log('items', items)
-      commit('setItems', items);
+      commit('setItems', items)
+      if(state.infiniteState){
+        if (state.offset + state.limit > state.count) {
+          console.log('Search infinite completed');
+          // tell to vue-infinite-loading plugin that there si no new page
+          state.infiniteState.complete()
+        }else{
+          console.log('Search infinite loaded');
+          // tell to vue-infinite-loading plugin that newpage is loaded
+          state.infiniteState.loaded()
+        }
+      }
     }
   }
 }