| Index: trunk/extensions/Storyboard/jquery/jquery.ajaxscroll.js |
| — | — | @@ -8,34 +8,35 @@ |
| 9 | 9 | * @version 0.2 |
| 10 | 10 | */ |
| 11 | 11 | (function($) { |
| 12 | | - $.fn.ajaxScroll=function(opt){ |
| 13 | | - opt=jQuery.extend( |
| | 12 | + $.fn.ajaxScroll = function( opt ) { |
| | 13 | + opt = jQuery.extend( |
| 14 | 14 | { |
| 15 | | - batchNum:5, |
| 16 | | - batchSize:30, |
| 17 | | - batchTemplate:null, |
| 18 | | - boxTemplate:null, |
| 19 | | - batchClass:"storyboard-batch", |
| 20 | | - boxClass:"storyboard-box", |
| 21 | | - emptyBatchClass:"storyboard-empty", |
| 22 | | - scrollPaneClass:"scrollpane", |
| 23 | | - lBound:"auto", |
| 24 | | - uBound:"auto", |
| 25 | | - eBound:"auto", |
| 26 | | - maxOffset:1000, |
| 27 | | - scrollDelay:600, |
| 28 | | - endDelay:100, |
| 29 | | - updateBatch:null, |
| 30 | | - updateEnd:null |
| | 15 | + batchNum: 5, |
| | 16 | + batchSize: 30, |
| | 17 | + batchTemplate: null, |
| | 18 | + boxTemplate: null, |
| | 19 | + batchClass: "storyboard-batch", |
| | 20 | + boxClass: "storyboard-box", |
| | 21 | + emptyBatchClass: "storyboard-empty", |
| | 22 | + scrollPaneClass: "scrollpane", |
| | 23 | + lBound: "auto", |
| | 24 | + uBound: "auto", |
| | 25 | + eBound: "auto", |
| | 26 | + maxOffset: 1000, |
| | 27 | + scrollDelay: 600, // The interval for checking if the user scrolled, in ms. |
| | 28 | + endDelay: 100, |
| | 29 | + updateBatch: null, |
| | 30 | + updateEnd: null, |
| | 31 | + busy: false |
| 31 | 32 | }, |
| 32 | 33 | opt |
| 33 | 34 | ); |
| | 35 | + |
| 34 | 36 | return this.each( function() { |
| 35 | 37 | var ele = this; |
| 36 | 38 | var $me = jQuery( this ); |
| 37 | 39 | var $sp; |
| 38 | 40 | var fnEnd; |
| 39 | | - var fnScroll; |
| 40 | 41 | var offset = 0; |
| 41 | 42 | var lsp = -1; |
| 42 | 43 | |
| — | — | @@ -52,12 +53,11 @@ |
| 53 | 54 | _ab(); |
| 54 | 55 | |
| 55 | 56 | fnEnd = vEnd; |
| 56 | | - fnScroll = vScroll; |
| 57 | 57 | |
| 58 | 58 | setTimeout( monEnd, opt.endDelay ); |
| 59 | 59 | |
| 60 | 60 | if( typeof opt.updateBatch == 'function' ){ |
| 61 | | - setTimeout( monScroll, opt.scrollDelay ); |
| | 61 | + setTimeout( handleScrolling, opt.scrollDelay ); |
| 62 | 62 | } |
| 63 | 63 | |
| 64 | 64 | function _css(){ |
| — | — | @@ -105,30 +105,40 @@ |
| 106 | 106 | $b.append( opt.boxTemplate ); |
| 107 | 107 | } |
| 108 | 108 | |
| 109 | | - $s.append($b); |
| | 109 | + $s.append( $b ); |
| 110 | 110 | } |
| 111 | 111 | |
| 112 | 112 | return offset; |
| 113 | 113 | }; |
| 114 | 114 | |
| 115 | 115 | function vScroll() { |
| | 116 | + // If a batcnh is currently being loaded, we can't start another one yet. |
| | 117 | + if ( opt.busy ) { |
| | 118 | + return; |
| | 119 | + } |
| | 120 | + |
| 116 | 121 | var so = $me.scrollTop(); |
| 117 | 122 | |
| 118 | | - if( lsp != so){ |
| | 123 | + if( lsp != so) { |
| 119 | 124 | lsp = so; |
| 120 | 125 | var co = $me.offset().top; |
| 121 | 126 | |
| 122 | 127 | $sp.find( '> .' + opt.emptyBatchClass ).each( function( i, obj ) { |
| 123 | 128 | var $b = jQuery( obj ); |
| 124 | 129 | var p = $b.position().top - co; |
| 125 | | - if ( opt.lBound > p || p > opt.uBound ) { return; } |
| 126 | | - opt.updateBatch( $b.removeClass( opt.emptyBatchClass ) ); |
| | 130 | + |
| | 131 | + if ( opt.lBound > p || p > opt.uBound ) { |
| | 132 | + return; |
| | 133 | + } |
| | 134 | + |
| | 135 | + opt.busy = true; |
| | 136 | + opt.updateBatch( $b.removeClass( opt.emptyBatchClass ), opt ); |
| 127 | 137 | }); |
| 128 | 138 | } |
| 129 | 139 | }; |
| 130 | 140 | |
| 131 | 141 | function vEnd() { |
| 132 | | - if( ele.scrollTop > 0 && ele.scrollHeight-ele.scrollTop < opt.eBound ) { |
| | 142 | + if ( ele.scrollTop > 0 && ele.scrollHeight - ele.scrollTop < opt.eBound ) { |
| 133 | 143 | offset = batch( $sp, offset, opt ); |
| 134 | 144 | return 1; |
| 135 | 145 | } |
| — | — | @@ -136,14 +146,18 @@ |
| 137 | 147 | return opt.endDelay; |
| 138 | 148 | }; |
| 139 | 149 | |
| 140 | | - function monScroll(){ |
| 141 | | - fnScroll(); |
| 142 | | - setTimeout(monScroll,opt.scrollDelay); |
| | 150 | + /** |
| | 151 | + * This function emulates a scroll event handler by firing itself every so many ms, and |
| | 152 | + * then calling a function checking if the user has scrolled, and if any batches should be loaded. |
| | 153 | + */ |
| | 154 | + function handleScrolling() { |
| | 155 | + vScroll(); |
| | 156 | + setTimeout( handleScrolling, opt.scrollDelay ); |
| 143 | 157 | }; |
| 144 | 158 | |
| 145 | | - function monEnd(){ |
| 146 | | - if(offset < opt.maxOffset){ |
| 147 | | - setTimeout(monEnd,fnEnd()); |
| | 159 | + function monEnd() { |
| | 160 | + if ( offset < opt.maxOffset ) { |
| | 161 | + setTimeout( monEnd, fnEnd() ); |
| 148 | 162 | } |
| 149 | 163 | } |
| 150 | 164 | |
| Index: trunk/extensions/Storyboard/tags/Storyboard/storyboard.js |
| — | — | @@ -19,7 +19,7 @@ |
| 20 | 20 | } ); |
| 21 | 21 | } ); |
| 22 | 22 | |
| 23 | | - function updateStoryboard( $storyboard ) { |
| | 23 | + function updateStoryboard( $storyboard, ajaxScrollObj ) { |
| 24 | 24 | $.getJSON( wgScriptPath + '/api.php', |
| 25 | 25 | { |
| 26 | 26 | 'action': 'query', |
| — | — | @@ -31,7 +31,7 @@ |
| 32 | 32 | }, |
| 33 | 33 | function( data ) { |
| 34 | 34 | if ( data.query ) { |
| 35 | | - addStories( $storyboard, data.query ); |
| | 35 | + addStories( $storyboard, data.query, ajaxScrollObj ); |
| 36 | 36 | } else { |
| 37 | 37 | alert( 'An error occured:\n' + data.error.info ); // TODO: i18n |
| 38 | 38 | } |
| — | — | @@ -39,7 +39,7 @@ |
| 40 | 40 | ); |
| 41 | 41 | } |
| 42 | 42 | |
| 43 | | - function addStories( $storyboard, query ) { |
| | 43 | + function addStories( $storyboard, query, ajaxScrollObj ) { |
| 44 | 44 | // Remove the empty boxes. |
| 45 | 45 | $storyboard.html(''); |
| 46 | 46 | |
| — | — | @@ -115,6 +115,8 @@ |
| 116 | 116 | |
| 117 | 117 | $storyboard.append( $storyBody ); |
| 118 | 118 | } |
| | 119 | + |
| | 120 | + ajaxScrollObj.busy = false; |
| 119 | 121 | } |
| 120 | 122 | |
| 121 | 123 | })(jQuery); |
| \ No newline at end of file |