Ajax loadmore module for WordPress and Timber

load-more.js

var $ = require('jquery');


var select = require('dom-select');


/**
 * LoadMore
 */
function LoadMore(element) {
	if (!(this instanceof LoadMore)) {
        	return new LoadMore();
	}
	
	this.element= element;

	if (!this.element) {
		return;
	}
	
	this.container = this.element.querySelector('.js-load-more-container');
	this.button = this.element.querySelector('.js-load-more-button');


	this.tag = this.button.dataset.tag;
	this.count = this.button.dataset.count;
	this.posts_per_page = this.button.dataset.postsPerPage ? this.button.dataset.postsPerPage : 3;


	this.update();
	this.setupEvents(); 
}


LoadMore.prototype = {

	/**
	 * LoadMore.setupEvents
	 */
	setupEvents: function() {

		this.button.addEventListener('click', function(e) {

    		this.loadMore();
            
 		}.bind(this));
		
	},



	/**
	 * LoadMore.loadMore
	 */
	loadMore: function() {

		// load more LoadMore with AJAX
    	this.load()
        	// then append result to the container
        	.then(this.append.bind(this))
        	// finally update things
        	.done(this.update.bind(this));
	},



	/**
	 * LoadMore.load
	 */
	load: function() {

		var data = {
        	action: 'ajax_load_posts',
	        offset: this.offset,
	        tag: this.tag
		};

		if (this.posts_per_page) {
	        data.posts_per_page = this.posts_per_page;
	    }


		// lock everything before the request
		this.lock.on.call(this);

		return $.get(window.wp.ajax_url, data);
	},


	/**
	 * LoadMore.append
	 */
	replace: function(html) {
		if (!html) {
        	return;
    	}

    	this.container.innerHTML = html;
	},


	/**
	 * LoadMore.append
	 */
	append: function(html) {
		if (!html) {
        	return;
		}
		$(this.container).append(html);
	},


	/**
	 * LoadMore.update
	 */
	update: function() {

		this.offset = this.container.children.length;
				
		this.button && $(this.button).toggle(this.offset < this.count);
		
		// ensure everything is unlocked
		this.lock.off.call(this);
	},


	/**
	 * LoadMore.lock
	 */
	lock: {

		/**
		 * LoadMore.lock.on
		 */
		on: function() {
			// console.log('LoadMore.lock.on');
			
			// add loading state to ajax container if exists
		    this.container && $(this.container).addClass('loading');
			
		},


		/**
		 * LoadMore.lock.off
		 */
		off: function() {
			// console.log('LoadMore.lock.off');
			
			// remove loading state of ajax container if exists
		    this.container && $(this.container).removeClass('loading');
		},
	}
};


module.exports = LoadMore;

load-more.php

<?php

/**
 * Post
 */
class Post {

    /**
     * The unique identifier of this theme.
     *
     * @since    1.0.0
     * @access   protected
     * @var      string    $plugin_name    The string used to uniquely identify this theme.
     */
    protected $theme_name;


    /**
     * The version of the theme.
     *
     * @since    1.0.0
     * @access   private
     * @var      string    $version    The current version of this theme.
     */
    private $theme_version;


    /**
	 * Construct function
	 *
	 * @access public
	 */
	public function __construct( $theme_name, $theme_version ) {
		$this->theme_name = $theme_name;
        $this->theme_version = $theme_version;

        // Ajax
        add_action( 'wp_ajax_nopriv_ajax_load_posts', array( $this, 'ajax_load_posts' ) );
		add_action( 'wp_ajax_ajax_load_posts', array( $this, 'ajax_load_posts' ) ); 

    }

	/**
	 * Load posts with AJAX request.	 
	 */
	public function ajax_load_posts() {

		$tag = isset( $_GET['tag'] ) ? $_GET['tag'] : 0;
		$offset = isset( $_GET['offset'] ) ? $_GET['offset'] : 0;
		$posts_per_page = isset( $_GET['posts_per_page'] ) ? $_GET['posts_per_page'] : 3;


		$args = array(
			'post_type'         => 'post',
			'posts_per_page'    => (int) $posts_per_page,
			'category' 			=> (int) $tag,
			'offset'            => (int) $offset,
		);


		$context = Timber::get_context();
		$context['posts'] = Timber::get_posts($args);

		Timber::render( 'partials/tease-posts.twig', $context );

		wp_die();

	}
}

load-more.twig

<div class="js-load-more">
	
		<div class="row">
			<div class="col-xs-12 js-load-more-container">

				
				{% 
					include 'tease-post.twig'  
				%}
			

			</div>
			
			
			<div class="col-xs-12">
                    
                <button class="js-load-more-button" data-tag="" data-count="" data-posts-per-page="">
                    Load more
                </button>

			</div>
		</div>
	</div>
</div>

tease-post.twig

<div class="Tease-post">
	<a class="" href="{{ link }}" title="{{ title }}">
		
		{# Title #}
		<h3>{{ title }}</h3>


		{# Subtitle #}
		<p>{{ subtitle }}</p>


		<p>{{ date }}{{ author ? ' by ' ~ author }}</p>
	</a>
</div>