Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

'loadingStart' and 'loadingEnd' options

+ Added two options to allow for control over loading message
+ Added Manual / Twitter-style behavior
  • Loading branch information...
commit cd280aa6fe76786d67ca9f3e23a385ac040f0cc8 1 parent 43c77bc
Luke Shumard authored
View
30 behaviors/manual-trigger.js
@@ -0,0 +1,30 @@
+/*
+ --------------------------------
+ Infinite Scroll Behavior
+ Manual / Twitter-style
+ --------------------------------
+ + https://github.com/paulirish/infinitescroll/
+ + version 2.0b2.110617
+ + Copyright 2011 Paul Irish & Luke Shumard
+ + Licensed under the MIT license
+
+ + Documentation: http://infinite-scroll.com/
+
+*/
+
+$.extend($.infinitescroll.prototype,{
+
+ _setup_twitter: function infscr_twiiter_setup () {
+ var opts = this.options,
+ instance = this;
+
+ // Bind loadMore link to retrieve
+ $(opts.loadMore).click(function(e) {
+ if (e.which == 1 && !e.metaKey && !e.shiftKey) {
+ e.preventDefault();
+ instance.retrieve();
+ }
+ });
+ }
+
+});
View
132 jquery.infinitescroll.js
@@ -26,15 +26,15 @@
behavior: undefined,
binder: $(window), // used to cache the selector
nextSelector: "div.navigation a:first",
+ loadMsgSelector: null,
+ loadingMsgRevealSpeed: 'fast', // controls how fast you want the loading message to come in, ex: 'fast', 'slow', 200 (milliseconds)
loadingImg: "http://www.infinite-scroll.com/loading.gif",
loadingText: "<em>Loading the next set of posts...</em>",
- loadingStart: null,
- loadingEnd: null,
+ loadingStart: undefined,
+ loadingEnd: undefined,
donetext: "<em>Congratulations, you've reached the end of the internet.</em>",
navSelector: "div.navigation",
contentSelector: null, // rename to pageFragment
- loadMsgSelector: null,
- loadingMsgRevealSpeed: 'fast', // controls how fast you want the loading message to come in, ex: 'fast', 'slow', 200 (milliseconds)
extraScrollPx: 150,
itemSelector: "div.post",
animate: false,
@@ -126,8 +126,24 @@
// computed as: height of the document + top offset of container - top offset of nav link
opts.pixelsFromNavToBottom = $(document).height() - $(opts.navSelector).offset().top;
+ // determine loadingStart actions
+ opts.loadingStart = opts.loadingStart || function() {
+
+ $(opts.navSelector).hide();
+
+ opts.loadingMsg
+ .appendTo(opts.loadMsgSelector)
+ .show(opts.loadingMsgRevealSpeed, function () {
+ beginAjax(opts);
+ });
+ };
+
+ // determine loadingEnd actions
+ opts.loadingEnd = opts.loadingEnd || function() {
+ opts.loadingMsg.fadeOut('normal');
+ };
+
// callback loading
- // FIX
opts.callback = callback || function () { };
this._setup();
@@ -264,12 +280,9 @@
}
- // fadeout currently makes the <em>'d text ugly in IE6
-
- // this is where the loadingEnd function goes!!!
-
- opts.loadingMsg.fadeOut('normal');
-
+ // loadingEnd function
+ opts.loadingEnd.call($(opts.contentSelector)[0],opts)
+
// smooth scroll to ease in the new content
if (opts.animate) {
@@ -405,71 +418,62 @@
path = opts.path,
box, frag, desturl, method, condition,
pageNum = pageNum || null,
- getPage = (!!pageNum) ? pageNum : opts.currPage;
+ getPage = (!!pageNum) ? pageNum : opts.currPage;
+ beginAjax = function infscr_ajax(opts) {
+
+ // increment the URL bit. e.g. /page/3/
+ opts.currPage++;
- if (opts.isDestroyed) {
- this._debug('Instance already destroyed');
- return false;
- };
-
- // we dont want to fire the ajax multiple times
- opts.isDuringAjax = true;
+ instance._debug('heading into ajax', path);
- // this is where the loadingStart function goes!!!
- //($.isFunction(opts.loadingStart)) ? opts.loadingStart() : /* default*/ '';
+ // if we're dealing with a table we can't use DIVs
+ box = $(opts.contentSelector).is('table') ? $('<tbody/>') : $('<div/>');
- opts.loadingMsg.appendTo(opts.loadMsgSelector).show(opts.loadingMsgRevealSpeed, function () {
+ desturl = ($.isFunction(opts.pathParse)) ? opts.pathParse(path.join('2'), opts.currPage) : path.join(opts.currPage);
- $(opts.navSelector).hide();
+ method = (opts.dataType == 'html' || opts.dataType == 'json') ? opts.dataType : 'html+callback';
+ if (opts.appendCallback && opts.dataType == 'html') method += '+callback'
- // increment the URL bit. e.g. /page/3/
- opts.currPage++;
+ switch (method) {
- instance._debug('heading into ajax', path);
+ case 'html+callback':
- // if we're dealing with a table we can't use DIVs
- box = $(opts.contentSelector).is('table') ? $('<tbody/>') : $('<div/>');
+ instance._debug('Using HTML via .load() method');
+ box.load(desturl + ' ' + opts.itemSelector, null, function infscr_ajax_callback(jqXHR, textStatus) {
+ instance._loadcallback(box, jqXHR.responseText);
+ });
+ break;
- // INSERT DEBUG ERROR FOR invalid desturl
- desturl = ($.isFunction(opts.pathParse)) ? opts.pathParse(path.join('2'), opts.currPage) : path.join(opts.currPage);
- // desturl = path.join(opts.currPage);
+ case 'html':
+ case 'json':
- // create switch parameter for append / callback
- // MAKE SURE CALLBACK EXISTS???
- method = (opts.dataType == 'html' || opts.dataType == 'json') ? opts.dataType : 'html+callback';
- if (opts.appendCallback && opts.dataType == 'html') method += '+callback'
-
- switch (method) {
-
- case 'html+callback':
-
- instance._debug('Using HTML via .load() method');
- box.load(desturl + ' ' + opts.itemSelector, null, function infscr_ajax_callback(jqXHR, textStatus) {
- instance._loadcallback(box, jqXHR.responseText);
- });
-
- break;
-
- case 'html':
- case 'json':
-
- instance._debug('Using ' + (method.toUpperCase()) + ' via $.ajax() method');
- $.ajax({
- // params
- url: desturl,
- dataType: opts.dataType,
- complete: function infscr_ajax_callback(jqXHR, textStatus) {
- condition = (typeof (jqXHR.isResolved) !== 'undefined') ? (jqXHR.isResolved()) : (textStatus === "success" || textStatus === "notmodified");
- (condition) ? instance._loadcallback(box, jqXHR.responseText) : instance._error('end');
- }
- });
-
- break;
+ instance._debug('Using ' + (method.toUpperCase()) + ' via $.ajax() method');
+ $.ajax({
+ // params
+ url: desturl,
+ dataType: opts.dataType,
+ complete: function infscr_ajax_callback(jqXHR, textStatus) {
+ condition = (typeof (jqXHR.isResolved) !== 'undefined') ? (jqXHR.isResolved()) : (textStatus === "success" || textStatus === "notmodified");
+ (condition) ? instance._loadcallback(box, jqXHR.responseText) : instance._error('end');
+ }
+ });
+
+ break;
+ }
+ };
+
+
+ // for manual triggers, if destroyed, get out of here
+ if (opts.isDestroyed) {
+ this._debug('Instance is destroyed');
+ return false;
+ };
- }
+ // we dont want to fire the ajax multiple times
+ opts.isDuringAjax = true;
- });
+ opts.loadingStart.call($(opts.contentSelector)[0],opts);
},
View
23 test/index.html
@@ -58,23 +58,20 @@
<p>Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.</p>
<p>Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
-
- <a id="next" href="index2.html">next page?</a>
-
+
</div>
+
+ <a id="next" href="index2.html">next page?</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='jquery-1.6.1.js'>\x3C/script>")</script>
<script src="debug.js"></script>
<script src="../jquery.infinitescroll.js"></script>
+ <script src="../behaviors/manual-trigger.js"></script>
<script>
- $.extend($.infinitescroll.prototype,{
- _setup_twitter: function() {
- console.log('TWITTER SETUP OMG');
- }
- });
+
$('#content').infinitescroll({
@@ -84,6 +81,16 @@
debug : true,
dataType : 'html',
// behavior : 'twitter',
+ // loadMore : '#next',
+ /*
+ loadingStart : function (opts) {
+ opts.loadingMsg
+ .appendTo(opts.loadMsgSelector)
+ .show(opts.loadingMsgRevealSpeed, function () {
+ beginAjax(opts);
+ });
+ }
+ */
// appendCallback : false, // USE FOR PREPENDING
// pathParse : function( pathStr, nextPage ){ return pathStr.replace('2', nextPage ); }
}, function(newElements){
View
7 test/style.css
@@ -273,7 +273,12 @@ h1, h2, h3, h4, h5, h6 { font-weight: bold; }
margin: 0 0 2em;
}
-
+#next {
+ font-size: 2.2em;
+ display: block;
+ width: 200px;
+ margin: 0 auto 72px;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.