<load-more template-url="http://localhost:2000/handlebarsTemplate" data-url="http://localhost:2000/loadMoreData" div-class="col-md-6" button-text="Ladda fler" has-more-items="false"></load-more>
<load-more template-url="{{handlebarsTemplateUrl}}" data-url="{{handlebarsDataUrl}}" div-class="{{divClass}}" button-text="{{buttonText}}" has-more-items="{{hasMoreItems}}"></load-more>
{
"handlebarsTemplateUrl": "http://localhost:2000/handlebarsTemplate",
"handlebarsDataUrl": "http://localhost:2000/loadMoreData",
"buttonText": "Ladda fler",
"divClass": "col-md-6",
"hasMoreItems": false
}
// Define a new component called button-counter
Vue.component('load-more', {
data: function () {
return {
items: [
],
page: 2,
hasMore: true,
loading: false
}
},
props: ['templateUrl', 'dataUrl', 'divClass', 'buttonText', 'hasMoreItems'],
template: `
<div id="fillMoreContainer" class="row mb-md">
<div class="fillMoreItem" :class="divClass" v-for="item in items" v-html="item.html">
</div>
<div class="col-12 text-center">
<transition name="fade" mode="out-in">
<a key="1" class="button-small" href="javascript:void(0)" v-on:click="LoadMore()" v-if="hasMore && !loading" v-text="buttonText" ></a>
<a key="2" class="button-small button-small-loading disabled" disabled href="javascript:void(0)" v-if="!hasMore && loading">
<span class="material-icons spinning">cached</span>
</a>
</transition>
</div>
</div>
`,
mounted() {
this.Init();
this.hasMore = this.hasMoreItems == "True";
},
methods: {
async Init() {
var templateResponse = await fetch(this.templateUrl, {
method: "get"
});
var templateText = await templateResponse.text();
this.handlebarsTemplate = Handlebars.compile(templateText);
},
async LoadMore() {
try {
this.loading = true;
let res = await fetch(this.dataUrl + "?paging=" + this.page, {
method: "get"
});
var parsedData = await res.json();
for (const item of parsedData.tags){
var markup = this.handlebarsTemplate(item);
this.items.push({html: markup});
this.hasMore = parsedData.hasMore;
}
this.page++;
this.loading = false;
} catch (error) {
console.log(error);
this.loading = false;
}
await Vue.nextTick(function() {
let element = $("#fillMoreContainer > div.fillMoreItem:last");
$([document.documentElement, document.body]).animate({
scrollTop: element.offset().top
}, 1000);
});
return true;
}
}
});
#fillMoreContainer{
margin-top: $md-space;
.button-small-loading{
width: 70px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.spinning{
animation-name: spin;
animation-duration: 3000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.fillMoreItem{
margin-bottom: $md-space;
}
}
There are no notes for this item.