@salla.sa/twilight-components
Version:
Salla Web Component
90 lines (86 loc) • 3.96 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { r as registerInstance, h, H as Host, a as getElement } from './index-Dbv0I4re.js';
import { H as Helper } from './Helper-DFMXF2_h.js';
import './anime.es-CgtvEd63.js';
const sallaInfiniteScrollCss = "";
const SallaInfiniteScroll = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Next Page element
*/
this.nextPage = '';
/**
* Is there is need to autoload next page when scroll `next-page-autoload|next-page.autoload`
*/
this.autoload = false;
/**
* Class selector to know the container if it's not the host `<salla-infinite-scroll>`
*/
this.container = 'salla-infinite-scroll';
/**
* Class selector to know list items
*/
this.item = 'salla-infinite-scroll > *';
this.status = document.createElement('div');
this.status.className = 's-infinite-scroll-wrapper';
this.status.innerHTML = `<div class="s-infinite-scroll-status" style="display:none">
<p class="s-infinite-scroll-last infinite-scroll-last"></p>
<p class="s-infinite-scroll-error infinite-scroll-error"></p>
</div>
<a href="${this.nextPage}" class="s-infinite-scroll-btn s-button-btn s-button-primary">
<span class="s-button-text s-infinite-scroll-btn-text">${this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more')}</span>
<span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
</a>`;
this.btnLoader = this.status.querySelector('.s-button-loader');
salla.lang.onLoaded(() => {
this.status.querySelector('.s-button-text').innerHTML = this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more');
this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
});
}
loading(isLoading = true) {
let btnText = this.status.querySelector('.s-button-text');
Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
}
render() {
return this.nextPage.length > 1 ?
h(Host, { class: "s-infinite-scroll-container" }, h("slot", null)) : '';
}
componentDidLoad() {
if (this.nextPage.length === 0) {
return;
}
this.host.insertAdjacentElement('afterend', this.status);
let that = this;
let infScroll = salla.infiniteScroll.initiate(this.container, {
history: this.autoload ? 'push' : false,
scrollThreshold: this.autoload ? 400 : false,
nextPage: this.nextPage,
checkLastPage: 'salla-infinite-scroll[next-page*=":"],salla-infinite-scroll[next-page*="."]',
status: '.s-infinite-scroll-status',
button: this.status.querySelector('.s-button-btn'),
append: this.item,
path: function () {
return that.nextPage.replace(/page\=(\d)/g, 'page=' + (this.loadCount + 2));
},
})
.on('request', () => this.loading())
.on('load', () => {
this.loading(false);
if (infScroll.pageIndex == 2) {
infScroll.option({ loadOnScroll: false });
}
if (infScroll.pageIndex == 3) {
infScroll.option({ loadOnScroll: true });
}
})
.on('error', () => this.loading(false));
}
get host() { return getElement(this); }
};
SallaInfiniteScroll.style = sallaInfiniteScrollCss;
export { SallaInfiniteScroll as salla_infinite_scroll };