🔥

Addresses #54, includes minor syntax changes, package updates and cleanups

dist/ajaxinate.js

@@ -1,145 +1,191 @@
 'use strict';
 
-/* ===================================================================================== @preserve =
- ___  _   _    _
-/   || | | |  | |
-\__  | | | |  | |  __
-/    |/  |/_) |/  /  \_/\/
-\___/|__/| \_/|__/\__/  /\_/
-              |\
-              |/
-Ajaxinate
-version v2.0.11
-https://github.com/Elkfox/Ajaxinate
-Copyright (c) 2017 Elkfox Co Pty Ltd
-https://elkfox.com
-MIT License
-================================================================================================= */
-
-var Ajaxinate = function ajaxinateConstructor(config) {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Ajaxinate = Ajaxinate;
+/* @preserve
+ * https://github.com/Elkfox/Ajaxinate
+ * Copyright (c) 2017 Elkfox Co Pty Ltd (elkfox.com)
+ * MIT License (do not remove above copyright!)
+ */
+
+/* Configurable options;
+ *
+ * method: scroll or click
+ * container: selector of repeating content
+ * pagination: selector of pagination container
+ * offset: number of pixels before the bottom to start loading more on scroll
+ * loadingText: 'Loading', The text shown during when appending new content
+ * callback: null, callback function after new content is appended
+ *
+ * Usage;
+ *
+ * import {Ajaxinate} from 'ajaxinate';
+ *
+ * new Ajaxinate({
+ *   offset: 5000,
+ *   loadingText: 'Loading more...',
+ * });
+ */
+
+/* eslint-env browser */
+function Ajaxinate(config) {
   var settings = config || {};
-  /*
-    pagination: Selector of pagination container
-    method: [options are 'scroll', 'click']
-    container: Selector of repeating content
-    offset: 0, offset the number of pixels before the bottom to start loading more on scroll
-    loadingText: 'Loading', The text changed during loading
-    callback: null, function to callback after a new page is loaded
-  */
-  var defaultSettings = {
-    pagination: '#AjaxinatePagination',
+
+  var defaults = {
     method: 'scroll',
-    container: '#AjaxinateLoop',
+    container: '#AjaxinateContainer',
+    pagination: '#AjaxinatePagination',
     offset: 0,
     loadingText: 'Loading',
     callback: null
   };
-  // Merge configs
-  this.settings = Object.assign(defaultSettings, settings);
 
-  // Bind 'this' to applicable prototype functions
+  // Merge custom configs with defaults
+  this.settings = Object.assign(defaults, settings);
+
+  // Functions
   this.addScrollListeners = this.addScrollListeners.bind(this);
   this.addClickListener = this.addClickListener.bind(this);
   this.checkIfPaginationInView = this.checkIfPaginationInView.bind(this);
-  this.stopMultipleClicks = this.stopMultipleClicks.bind(this);
+  this.preventMultipleClicks = this.preventMultipleClicks.bind(this);
+  this.removeClickListener = this.removeClickListener.bind(this);
+  this.removeScrollListener = this.removeScrollListener.bind(this);
+  this.removePaginationElement = this.removePaginationElement.bind(this);
   this.destroy = this.destroy.bind(this);
 
-  // Set up our element selectors
+  // Selectors
   this.containerElement = document.querySelector(this.settings.container);
   this.paginationElement = document.querySelector(this.settings.pagination);
-
   this.initialize();
-};
+}
 
-Ajaxinate.prototype.initialize = function initializeTheCorrectFunctionsBasedOnTheMethod() {
-  // Find and initialise the correct function based on the method set in the config
-  if (this.containerElement) {
-    var initializers = {
-      click: this.addClickListener,
-      scroll: this.addScrollListeners
-    };
-    initializers[this.settings.method]();
+Ajaxinate.prototype.initialize = function initialize() {
+  if (!this.containerElement) {
+    return;
   }
+
+  var initializers = {
+    click: this.addClickListener,
+    scroll: this.addScrollListeners
+  };
+
+  initializers[this.settings.method]();
 };
 
-Ajaxinate.prototype.addScrollListeners = function addEventListenersForScrolling() {
-  if (this.paginationElement) {
-    document.addEventListener('scroll', this.checkIfPaginationInView);
-    window.addEventListener('resize', this.checkIfPaginationInView);
-    window.addEventListener('orientationchange', this.checkIfPaginationInView);
+Ajaxinate.prototype.addScrollListeners = function addScrollListeners() {
+  if (!this.paginationElement) {
+    return;
   }
+
+  document.addEventListener('scroll', this.checkIfPaginationInView);
+  window.addEventListener('resize', this.checkIfPaginationInView);
+  window.addEventListener('orientationchange', this.checkIfPaginationInView);
 };
 
-Ajaxinate.prototype.addClickListener = function addEventListenerForClicking() {
-  if (this.paginationElement) {
-    this.nextPageLinkElement = this.paginationElement.querySelector('a');
-    this.clickActive = true;
-    if (this.nextPageLinkElement !== null) {
-      this.nextPageLinkElement.addEventListener('click', this.stopMultipleClicks);
-    }
+Ajaxinate.prototype.addClickListener = function addClickListener() {
+  if (!this.paginationElement) {
+    return;
+  }
+
+  this.nextPageLinkElement = this.paginationElement.querySelector('a');
+  this.clickActive = true;
+
+  if (typeof this.nextPageLinkElement !== 'undefined' && this.nextPageLinkElement !== null) {
+    this.nextPageLinkElement.addEventListener('click', this.preventMultipleClicks);
   }
 };
 
-Ajaxinate.prototype.stopMultipleClicks = function handleClickEvent(event) {
+Ajaxinate.prototype.preventMultipleClicks = function preventMultipleClicks(event) {
   event.preventDefault();
-  if (this.clickActive) {
-    this.nextPageLinkElement.innerHTML = this.settings.loadingText;
-    this.nextPageUrl = this.nextPageLinkElement.href;
-    this.clickActive = false;
-    this.loadMore();
+
+  if (!this.clickActive) {
+    return;
   }
+
+  this.nextPageLinkElement.innerText = this.settings.loadingText;
+  this.nextPageUrl = this.nextPageLinkElement.href;
+  this.clickActive = false;
+
+  this.loadMore();
 };
 
-Ajaxinate.prototype.checkIfPaginationInView = function handleScrollEvent() {
+Ajaxinate.prototype.checkIfPaginationInView = function checkIfPaginationInView() {
   var top = this.paginationElement.getBoundingClientRect().top - this.settings.offset;
   var bottom = this.paginationElement.getBoundingClientRect().bottom + this.settings.offset;
+
   if (top <= window.innerHeight && bottom >= 0) {
     this.nextPageLinkElement = this.paginationElement.querySelector('a');
     this.removeScrollListener();
+
     if (this.nextPageLinkElement) {
-      this.nextPageLinkElement.innerHTML = this.settings.loadingText;
+      this.nextPageLinkElement.innerText = this.settings.loadingText;
       this.nextPageUrl = this.nextPageLinkElement.href;
+
       this.loadMore();
     }
   }
 };
 
-Ajaxinate.prototype.loadMore = function getTheHtmlOfTheNextPageWithAnAjaxRequest() {
+Ajaxinate.prototype.loadMore = function loadMore() {
   this.request = new XMLHttpRequest();
+
   this.request.onreadystatechange = function success() {
-    if (this.request.readyState === 4 && this.request.status === 200) {
-      var newContainer = this.request.responseXML.querySelectorAll(this.settings.container)[0];
-      var newPagination = this.request.responseXML.querySelectorAll(this.settings.pagination)[0];
-      this.containerElement.insertAdjacentHTML('beforeend', newContainer.innerHTML);
+    if (!this.request.responseXML) {
+      return;
+    }
+    if (!this.request.readyState === 4 || !this.request.status === 200) {
+      return;
+    }
+
+    var newContainer = this.request.responseXML.querySelectorAll(this.settings.container)[0];
+    var newPagination = this.request.responseXML.querySelectorAll(this.settings.pagination)[0];
+
+    this.containerElement.insertAdjacentHTML('beforeend', newContainer.innerHTML);
+
+    if (typeof newPagination === 'undefined') {
+      this.removePaginationElement();
+    } else {
       this.paginationElement.innerHTML = newPagination.innerHTML;
+
       if (this.settings.callback && typeof this.settings.callback === 'function') {
         this.settings.callback(this.request.responseXML);
       }
+
       this.initialize();
     }
   }.bind(this);
+
   this.request.open('GET', this.nextPageUrl);
   this.request.responseType = 'document';
   this.request.send();
 };
 
-Ajaxinate.prototype.removeClickListener = function removeClickEventListener() {
-  this.nextPageLinkElement.addEventListener('click', this.stopMultipleClicks);
+Ajaxinate.prototype.removeClickListener = function removeClickListener() {
+  this.nextPageLinkElement.removeEventListener('click', this.preventMultipleClicks);
+};
+
+Ajaxinate.prototype.removePaginationElement = function removePaginationElement() {
+  this.paginationElement.innerHTML = '';
+  this.destroy();
 };
 
-Ajaxinate.prototype.removeScrollListener = function removeScrollEventListener() {
+Ajaxinate.prototype.removeScrollListener = function removeScrollListener() {
   document.removeEventListener('scroll', this.checkIfPaginationInView);
   window.removeEventListener('resize', this.checkIfPaginationInView);
   window.removeEventListener('orientationchange', this.checkIfPaginationInView);
 };
 
-Ajaxinate.prototype.destroy = function removeEventListenersAndReturnThis() {
-  // This method is used to unbind event listeners from the DOM
-  // This function is called manually to destroy "this" Ajaxinate instance
+Ajaxinate.prototype.destroy = function destroy() {
   var destroyers = {
     click: this.removeClickListener,
     scroll: this.removeScrollListener
   };
+
   destroyers[this.settings.method]();
+
   return this;
-};
+};
+
+exports.default = Ajaxinate;