added vue-infinite-loading loading to base search results
This commit is contained in:
parent
a771fd9d74
commit
7acac41863
|
|
@ -14,9 +14,9 @@ module.exports = merge(baseConfig, {
|
|||
uglifyOptions: {
|
||||
// Eliminate comments
|
||||
comments: false,
|
||||
// remove warnings
|
||||
warnings: false,
|
||||
compress: {
|
||||
// remove warnings
|
||||
warnings: false,
|
||||
// Drop console statements
|
||||
drop_console: true,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'))
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
commit('setItems', items);
|
||||
console.log('items', 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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue