158 lines
4.2 KiB
JavaScript
158 lines
4.2 KiB
JavaScript
(function( $ ) {
|
|
'use strict';
|
|
|
|
/**
|
|
* Pagination
|
|
*/
|
|
class AIOVGPaginationElement extends HTMLElement {
|
|
|
|
/**
|
|
* Element created.
|
|
*/
|
|
constructor() {
|
|
super();
|
|
|
|
// Set references to the DOM elements used by the component
|
|
this.$el = null;
|
|
this.$container = null;
|
|
|
|
// Set references to the private properties used by the component
|
|
const aiovg = window.aiovg_pagination || window.aiovg_public;
|
|
|
|
this._isRendered = false;
|
|
this._isAjaxEnabled = false;
|
|
this._params = {};
|
|
this._ajaxUrl = aiovg.ajax_url;
|
|
this._ajaxNonce = aiovg.ajax_nonce;
|
|
this._pageTopOffset = parseInt( aiovg.scroll_to_top_offset );
|
|
|
|
// Bind the event handlers to ensure the reference remains stable
|
|
this._onNextOrPreviousPageButtonClicked = this._onNextOrPreviousPageButtonClicked.bind( this );
|
|
this._onMoreButtonClicked = this._onMoreButtonClicked.bind( this );
|
|
}
|
|
|
|
/**
|
|
* Browser calls this method when the element is added to the document.
|
|
* (can be called many times if an element is repeatedly added/removed)
|
|
*/
|
|
connectedCallback() {
|
|
if ( this._isRendered ) return false;
|
|
this._isRendered = true;
|
|
|
|
this.$el = $( this );
|
|
|
|
if ( this.$el.hasClass( 'aiovg-pagination-ajax' ) || this.$el.hasClass( 'aiovg-more-ajax' ) ) {
|
|
this._isAjaxEnabled = true;
|
|
}
|
|
|
|
if ( ! this._isAjaxEnabled ) return false;
|
|
|
|
this._params = this.$el.data( 'params' );
|
|
this._params.action = 'aiovg_load_' + this._params.source;
|
|
this._params.security = this._ajaxNonce;
|
|
|
|
this.$container = $( '#aiovg-' + this._params.uid );
|
|
|
|
this.$el.on( 'click', 'a.page-numbers', this._onNextOrPreviousPageButtonClicked );
|
|
this.$el.on( 'click', 'button', this._onMoreButtonClicked );
|
|
}
|
|
|
|
/**
|
|
* Browser calls this method when the element is removed from the document.
|
|
* (can be called many times if an element is repeatedly added/removed)
|
|
*/
|
|
disconnectedCallback() {
|
|
if ( ! this._isAjaxEnabled ) return false;
|
|
|
|
this.$el.off( 'click', 'a.page-numbers', this._onNextOrPreviousPageButtonClicked );
|
|
this.$el.off( 'click', 'button', this._onMoreButtonClicked );
|
|
}
|
|
|
|
/**
|
|
* Define private methods.
|
|
*/
|
|
|
|
_onNextOrPreviousPageButtonClicked( event ) {
|
|
event.preventDefault();
|
|
|
|
const $this = $( event.target );
|
|
|
|
this.$el.addClass( 'aiovg-spinner' );
|
|
|
|
let current = parseInt( this.$el.data( 'current' ) );
|
|
|
|
let paged = parseInt( $this.html() );
|
|
this._params.paged = paged;
|
|
|
|
if ( $this.hasClass( 'prev' ) ) {
|
|
this._params.paged = current - 1;
|
|
}
|
|
|
|
if ( $this.hasClass( 'next' ) ) {
|
|
this._params.paged = current + 1;
|
|
}
|
|
|
|
this._fetch( this._params, ( response ) => {
|
|
if ( response.success ) {
|
|
const html = $( response.data.html ).html();
|
|
this.$container.html( html );
|
|
|
|
this.$el.trigger( 'AIOVG.onGalleryUpdated' );
|
|
|
|
$( 'html, body' ).animate({
|
|
scrollTop: this.$container.offset().top - this._pageTopOffset
|
|
}, 500);
|
|
} else {
|
|
this.$el.removeClass( 'aiovg-spinner' );
|
|
}
|
|
});
|
|
}
|
|
|
|
_onMoreButtonClicked( event ) {
|
|
event.preventDefault();
|
|
|
|
const $this = $( event.target );
|
|
|
|
this.$el.addClass( 'aiovg-spinner' );
|
|
|
|
const numpages = parseInt( $this.data( 'numpages' ) );
|
|
|
|
let paged = parseInt( $this.data( 'paged' ) );
|
|
this._params.paged = ++paged;
|
|
|
|
this._fetch( this._params, ( response ) => {
|
|
this.$el.removeClass( 'aiovg-spinner' );
|
|
|
|
if ( response.success ) {
|
|
const html = $( response.data.html ).find( '.aiovg-grid' ).html();
|
|
this.$container.find( '.aiovg-grid' ).append( html );
|
|
|
|
if ( paged < numpages ) {
|
|
$this.data( 'paged', this._params.paged );
|
|
} else {
|
|
$this.hide();
|
|
}
|
|
|
|
this.$el.trigger( 'AIOVG.onGalleryUpdated' );
|
|
}
|
|
});
|
|
}
|
|
|
|
_fetch( data, callback ) {
|
|
$.post( this._ajaxUrl, data, callback );
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Called when the page has loaded.
|
|
*/
|
|
$(function() {
|
|
// Register custom element
|
|
if ( ! customElements.get( 'aiovg-pagination' ) ) {
|
|
customElements.define( 'aiovg-pagination', AIOVGPaginationElement );
|
|
}
|
|
});
|
|
|
|
})( jQuery );
|