Skip to content

Instantly share code, notes, and snippets.

@shelkie
Created August 27, 2014 18:09
Show Gist options
  • Save shelkie/ad171976782d3acf9460 to your computer and use it in GitHub Desktop.
Save shelkie/ad171976782d3acf9460 to your computer and use it in GitHub Desktop.
Ajax Load More with accessible JS parameters
/*
* WordPress Ajax Load More
* http://wordpress.org/plugins/ajax-load-more/
* https://github.com/dcooney/wordpress-ajax-load-more
*
* Copyright 2014 Connekt Media - http://cnkt.ca/ajax-load-more/
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Author: Darren Cooney
* Twitter: @KaptonKaos
*/
(function($) {
"use strict";
$.ajaxloadmore = function(el) {
//Set variables
var alm = this;
alm.AjaxLoadMore = {};
alm.page = 0;
alm.speed = 300;
alm.proceed = false;
alm.$init = true;
alm.$loading = true;
alm.$finished = false;
alm.$window = $(window);
alm.$button_label = '';
alm.$data;
alm.$el = el;
alm.$content = $('.alm-listing', alm.$el);
alm.$scroll = true;
alm.$prefix = 'alm-';
alm.$repeater = alm.$content.data('repeater');
alm.$max_pages = alm.$content.data('max-pages');
alm.$pause = alm.$content.data('pause');
alm.$offset = alm.$content.data('offset');
alm.$transition = alm.$content.data('transition');
alm.$posts_per_page = alm.$content.data('posts-per-page');
$(window).scrollTop(0); //Prevent loading of unnessasry posts - move user to top of page
// Check for pause on init
// Pause could be used to hold the loading of posts for a button click.
if (alm.$pause === undefined) {
alm.$pause = false;
}
// Select the repeater
if (alm.$repeater === undefined) {
alm.$repeater = 'default';
}
// Max number of pages to load while scrolling
if (alm.$max_pages === undefined) {
alm.$max_pages = 5;
}
if (alm.$max_pages === 'none') {
alm.$max_pages = 100000;
}
// select the transition
if (alm.$transition === undefined) {
alm.$transition = 'slide';
} else if (alm.$transition === "fade") {
alm.$transition = 'fade';
} else {
alm.$transition = 'slide';
}
// Define offset
if (alm.$content.data('offset') === undefined) {
alm.$offset = 0;
} else {
alm.$offset = alm.$content.data('offset');
}
// Define button text
if (alm.$content.data('button-label') === undefined) {
alm.$button_label = 'Older Posts';
} else {
alm.$button_label = alm.$content.data('button-label');
}
// Define on Scroll event
if (alm.$content.data('scroll') === undefined) {
alm.$scroll = true;
} else if (alm.$content.data('scroll') === false) {
alm.$scroll = false;
} else {
alm.$scroll = true;
}
// Append load more button tp .ajax-load-more
alm.$el.append('<div class="'+alm.$prefix+'btn-wrap"><button id="load-more" class="'+alm.$prefix+'load-more-btn more">' + alm.$button_label + '</button></div>');
var $button = $('.alm-load-more-btn', alm.$el);
//Parse Post Type for multiple entries
var $post_type = alm.$content.data('post-type');
$post_type = $post_type.split(",");
/* AjaxLoadMore.loadPosts()
*
* The function to get posts via Ajax
* @since 2.0.0
*/
alm.AjaxLoadMore.loadPosts = function() {
$button.addClass('loading');
alm.$loading = true;
$.ajax({
type: "GET",
url: alm_localize.ajaxurl,
data: {
action: 'ajax_load_more_init',
nonce: alm_localize.alm_nonce,
repeater: alm.$repeater,
postType: $post_type,
postFormat: alm.$content.data('post-format'),
category: alm.$content.data('category'),
author: alm.$content.data('author'),
taxonomy: alm.$content.data('taxonomy'),
taxonomy_terms: alm.$content.data('taxonomy-terms'),
taxonomy_operator: alm.$content.data('taxonomy-operator'),
tag: alm.$content.data('tag'),
order: alm.$content.data('order'),
orderby: alm.$content.data('orderby'),
search: alm.$content.data('search'),
exclude: alm.$content.data('exclude'),
numPosts: alm.$content.data('posts-per-page'),
pageNumber: alm.page,
offset: alm.$offset
},
dataType: "html",
// parse the data as html
beforeSend: function() {
if (alm.page != 1) {
$button.addClass('loading');
}
},
success: function(data, status, jqXHR) {
alm.$data = $(data); // Convert data to an object
if (alm.$init) {
$button.text(alm.$button_label);
alm.$init = false;
}
if (alm.$data.length > 0) {
var $el = $('<div class="' + alm.$prefix + 'reveal"/>');
$el.append(alm.$data);
$el.hide();
alm.$content.append($el);
if (alm.$transition === 'fade') { // Fade transition
$el.fadeIn(alm.speed, 'alm_easeInOutQuad', function() {
alm.$loading = false;
$button.delay(alm.speed).removeClass('loading');
if (alm.$data.length < $posts_per_page) {
alm.$finished = true;
$button.addClass('done');
}
});
} else { // Slide transition
$el.slideDown(alm.speed, 'alm_easeInOutQuad', function() {
alm.$loading = false;
$button.delay(alm.speed).removeClass('loading');
if (alm.$data.length < alm.$posts_per_page) {
alm.$finished = true;
$button.addClass('done');
}
});
}
} else {
$button.delay(alm.speed).removeClass('loading').addClass('done');
alm.$loading = false;
alm.$finished = true;
}
},
error: function(jqXHR, textStatus, errorThrown) {
alm.$loading = false;
$button.removeClass('loading');
}
});
};
// Button click event
$button.click(function() {
if(alm.$pause === true){
alm.$pause = false;
alm.AjaxLoadMore.loadPosts();
}
if (!alm.$loading && !alm.$finished && !$(this).hasClass('done')) {
alm.$loading = true;
alm.page++;
alm.AjaxLoadMore.loadPosts();
}
});
/* AjaxLoadMore.isVisible()
*
* Check to see if element is visible before loading posts
* @since 2.1.2
*/
alm.AjaxLoadMore.isVisible = function(){
var visible = false;
if(alm.$el.is(":visible")){
visible = true;
}
return visible;
}
/* AjaxLoadMore.isVisible()
*
* Check to see if element is visible before loading posts
* @since 2.1.2
*/
if (alm.$scroll) {
alm.$window.scroll(function() {
if(alm.AjaxLoadMore.isVisible()){
var content_offset = $button.offset();
if (!alm.$loading && !alm.$finished && alm.$window.scrollTop() >= Math.round(content_offset.top - (alm.$window.height() - 150)) && alm.page < (alm.$max_pages - 1) && alm.proceed) {
alm.$loading = true;
alm.page++;
alm.AjaxLoadMore.loadPosts();
}
}
});
}
//Check for pause variable
if(alm.$pause === true){
$button.text(alm.$button_label);
alm.$loading = false;
}else{
alm.AjaxLoadMore.loadPosts();
}
//flag to prevent unnecessary loading of post on init. Hold for 2 seconds.
setTimeout(function() {
alm.proceed = true;
}, 1000);
//Custom easing function
$.easing.alm_easeInOutQuad = function(x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
};
};
/* ajaxloadmore()
*
* Initiate all instances of Ajax load More
* @since 2.1.2
*/
$.fn.ajaxloadmore = function() {
return this.each(function() {
$(this).data('alm', new $.ajaxloadmore($(this)));
});
}
/*
* Init Ajax load More if div is present on screen
* @since 2.1.2
*/
if($(".ajax-load-more-wrap").length)
$(".ajax-load-more-wrap").ajaxloadmore();
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment