☰

jScroll

A jQuery Plugin for Infinite Scrolling / Auto-Paging

Skrip ini tidak untuk dipasang secara langsung. Ini adalah pustaka skrip lain untuk disertakan dengan direktif meta // @require https://update.greatest.deepsurf.us/scripts/11636/67302/jScroll.js 

  1. /*!
  2.  * jScroll - jQuery Plugin for Infinite Scrolling / Auto-Paging
  3.  * http://jscroll.com/
  4.  *
  5.  * Copyright 2011-2013, Philip Klauzinski
  6.  * http://klauzinski.com/
  7.  * Dual licensed under the MIT and GPL Version 2 licenses.
  8.  * http://jscroll.com/#license
  9.  * http://www.opensource.org/licenses/mit-license.php
  10.  * http://www.gnu.org/licenses/gpl-2.0.html
  11.  *
  12.  * @author Philip Klauzinski
  13.  * @version 2.3.4
  14.  * @requires jQuery v1.4.3+
  15.  * @preserve
  16.  */
  17. (function($) {
  18.  
  19.     'use strict';
  20.  
  21.     // Define the jscroll namespace and default settings
  22.     $.jscroll = {
  23.         defaults: {
  24.             debug: false,
  25.             autoTrigger: true,
  26.             autoTriggerUntil: false,
  27.             loadingHtml: '<small>Loading...</small>',
  28.             padding: 0,
  29.             nextSelector: 'a:last',
  30.             contentSelector: '',
  31.             pagingSelector: '',
  32.             callback: false
  33.         }
  34.     };
  35.  
  36.     // Constructor
  37.     var jScroll = function($e, options) {
  38.  
  39.         // Private vars and methods
  40.         var _data = $e.data('jscroll'),
  41.             _userOptions = (typeof options === 'function') ? { callback: options } : options,
  42.             _options = $.extend({}, $.jscroll.defaults, _userOptions, _data || {}),
  43.             _isWindow = ($e.css('overflow-y') === 'visible'),
  44.             _$next = $e.find(_options.nextSelector).first(),
  45.             _$window = $(window),
  46.             _$body = $('body'),
  47.             _$scroll = _isWindow ? _$window : $e,
  48.             _nextHref = $.trim(_$next.attr('href') + ' ' + _options.contentSelector),
  49.  
  50.             // Check if a loading image is defined and preload
  51.             _preloadImage = function() {
  52.                 var src = $(_options.loadingHtml).filter('img').attr('src');
  53.                 if (src) {
  54.                     var image = new Image();
  55.                     image.src = src;
  56.                 }
  57.             },
  58.  
  59.             // Wrap inner content, if it isn't already
  60.             _wrapInnerContent = function() {
  61.                 if (!$e.find('.jscroll-inner').length) {
  62.                     $e.contents().wrapAll('<div class="jscroll-inner" />');
  63.                 }
  64.             },
  65.  
  66.             // Find the next link's parent, or add one, and hide it
  67.             _nextWrap = function($next) {
  68.                 var $parent;
  69.                 if (_options.pagingSelector) {
  70.                     $next.closest(_options.pagingSelector).hide();
  71.                 } else {
  72.                     $parent = $next.parent().not('.jscroll-inner,.jscroll-added').addClass('jscroll-next-parent').hide();
  73.                     if (!$parent.length) {
  74.                         $next.wrap('<div class="jscroll-next-parent" />').parent().hide();
  75.                     }
  76.                 }
  77.             },
  78.  
  79.             // Remove the jscroll behavior and data from an element
  80.             _destroy = function() {
  81.                 return _$scroll.unbind('.jscroll')
  82.                     .removeData('jscroll')
  83.                     .find('.jscroll-inner').children().unwrap()
  84.                     .filter('.jscroll-added').children().unwrap();
  85.             },
  86.  
  87.             // Observe the scroll event for when to trigger the next load
  88.             _observe = function() {
  89.                 _wrapInnerContent();
  90.                 var $inner = $e.find('div.jscroll-inner').first(),
  91.                     data = $e.data('jscroll'),
  92.                     borderTopWidth = parseInt($e.css('borderTopWidth'), 10),
  93.                     borderTopWidthInt = isNaN(borderTopWidth) ? 0 : borderTopWidth,
  94.                     iContainerTop = parseInt($e.css('paddingTop'), 10) + borderTopWidthInt,
  95.                     iTopHeight = _isWindow ? _$scroll.scrollTop() : $e.offset().top,
  96.                     innerTop = $inner.length ? $inner.offset().top : 0,
  97.                     iTotalHeight = Math.ceil(iTopHeight - innerTop + _$scroll.height() + iContainerTop);
  98.  
  99.                 if (!data.waiting && iTotalHeight + _options.padding >= $inner.outerHeight()) {
  100.                     //data.nextHref = $.trim(data.nextHref + ' ' + _options.contentSelector);
  101.                     _debug('info', 'jScroll:', $inner.outerHeight() - iTotalHeight, 'from bottom. Loading next request...');
  102.                     return _load();
  103.                 }
  104.             },
  105.  
  106.             // Check if the href for the next set of content has been set
  107.             _checkNextHref = function(data) {
  108.                 data = data || $e.data('jscroll');
  109.                 if (!data || !data.nextHref) {
  110.                     _debug('warn', 'jScroll: nextSelector not found - destroying');
  111.                     _destroy();
  112.                     return false;
  113.                 } else {
  114.                     _setBindings();
  115.                     return true;
  116.                 }
  117.             },
  118.  
  119.             _setBindings = function() {
  120.                 var $next = $e.find(_options.nextSelector).first();
  121.                 if (!$next.length) {
  122.                     return;
  123.                 }
  124.                 if (_options.autoTrigger && (_options.autoTriggerUntil === false || _options.autoTriggerUntil > 0)) {
  125.                     _nextWrap($next);
  126.                     if (_$body.height() <= _$window.height()) {
  127.                         _observe();
  128.                     }
  129.                     _$scroll.unbind('.jscroll').bind('scroll.jscroll', function() {
  130.                         return _observe();
  131.                     });
  132.                     if (_options.autoTriggerUntil > 0) {
  133.                         _options.autoTriggerUntil--;
  134.                     }
  135.                 } else {
  136.                     _$scroll.unbind('.jscroll');
  137.                     $next.bind('click.jscroll', function() {
  138.                         _nextWrap($next);
  139.                         _load();
  140.                         return false;
  141.                     });
  142.                 }
  143.             },
  144.  
  145.             // Load the next set of content, if available
  146.             _load = function() {
  147.                 var $inner = $e.find('div.jscroll-inner').first(),
  148.                     data = $e.data('jscroll');
  149.  
  150.                 data.waiting = true;
  151.                 $inner.append('<div class="jscroll-added" />')
  152.                     .children('.jscroll-added').last()
  153.                     .html('<div class="jscroll-loading">' + _options.loadingHtml + '</div>');
  154.  
  155.                 return $e.animate({scrollTop: $inner.outerHeight()}, 0, function() {
  156.                     $inner.find('div.jscroll-added').last().load(data.nextHref, function(r, status) {
  157.                         if (status === 'error') {
  158.                             return _destroy();
  159.                         }
  160.                         var $next = $(this).find(_options.nextSelector).first();
  161.                         data.waiting = false;
  162.                         data.nextHref = $next.attr('href') ? $.trim($next.attr('href') + ' ' + _options.contentSelector) : false;
  163.                         $('.jscroll-next-parent', $e).remove(); // Remove the previous next link now that we have a new one
  164.                         _checkNextHref();
  165.                         if (_options.callback) {
  166.                             _options.callback.call(this);
  167.                         }
  168.                         _debug('dir', data);
  169.                     });
  170.                 });
  171.             },
  172.  
  173.             // Safe console debug - http://klauzinski.com/javascript/safe-firebug-console-in-javascript
  174.             _debug = function(m) {
  175.                 if (_options.debug && typeof console === 'object' && (typeof m === 'object' || typeof console[m] === 'function')) {
  176.                     if (typeof m === 'object') {
  177.                         var args = [];
  178.                         for (var sMethod in m) {
  179.                             if (typeof console[sMethod] === 'function') {
  180.                                 args = (m[sMethod].length) ? m[sMethod] : [m[sMethod]];
  181.                                 console[sMethod].apply(console, args);
  182.                             } else {
  183.                                 console.log.apply(console, args);
  184.                             }
  185.                         }
  186.                     } else {
  187.                         console[m].apply(console, Array.prototype.slice.call(arguments, 1));
  188.                     }
  189.                 }
  190.             };
  191.  
  192.         // Initialization
  193.         $e.data('jscroll', $.extend({}, _data, {initialized: true, waiting: false, nextHref: _nextHref}));
  194.         _wrapInnerContent();
  195.         _preloadImage();
  196.         _setBindings();
  197.  
  198.         // Expose API methods via the jQuery.jscroll namespace, e.g. $('sel').jscroll.method()
  199.         $.extend($e.jscroll, {
  200.             destroy: _destroy
  201.         });
  202.         return $e;
  203.     };
  204.  
  205.     // Define the jscroll plugin method and loop
  206.     $.fn.jscroll = function(m) {
  207.         return this.each(function() {
  208.             var $this = $(this),
  209.                 data = $this.data('jscroll'), jscroll;
  210.  
  211.             // Instantiate jScroll on this element if it hasn't been already
  212.             if (data && data.initialized) {
  213.                 return;
  214.             }
  215.             jscroll = new jScroll($this, m);
  216.         });
  217.     };
  218.  
  219. })(jQuery);