Skip to content

Commit 7f033e6

Browse files
dimaxwebdimaxweb
committed
Refactor object from singleton to prototype
Insert _debug wrapper over console.log
1 parent 4c82e56 commit 7f033e6

File tree

2 files changed

+248
-0
lines changed

2 files changed

+248
-0
lines changed

‎jquery-paged-scroll.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "jquery-paged-scroll",
3+
"title": "Simple plugin for scrolling results ajax results",
4+
"description": "Listen and react for scrolling",
5+
"version": "0.1.0",
6+
"homepage": "",
7+
"author": {
8+
"name": "Dmitry Mogilko",
9+
"email": "[email protected]",
10+
"url": "http://www.dimaxweb.com"
11+
},
12+
"repository": {
13+
"type": "git",
14+
"url": "git //github.com/dmitrym/jquery-ajax-scroll"
15+
},
16+
"bugs": {
17+
"url": ""
18+
},
19+
"licenses": [
20+
{
21+
"type": "MIT",
22+
"url": "/blob/master/LICENSE-MIT"
23+
}
24+
],
25+
"dependencies": {
26+
"jquery": "1.8.1"
27+
},
28+
"keywords": []
29+
}

‎src/jquery-paged-scroll.js‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
/*global console:false */
2+
/*
3+
* jQuery paged scroll - different approach for infinite scroll
4+
*
5+
* Copyright (c) 2013 Dmitry Mogilko
6+
* Licensed under the MIT license.
7+
*/
8+
9+
/*
10+
11+
TODO : qunit ,simulate scroll - http://stackoverflow.com/questions/6761659/simulate-scroll-event-using-javascript
12+
TODO : parameters validation - step.
13+
TODO : think about giving option of calculating trigger on last element of the binder.
14+
TODO : make order in package.json
15+
TODO : create page with examples,aka demo page in github.
16+
TODO : check bug with scrolling in elements why not called callback.
17+
18+
*/
19+
20+
(function ($, window, document, undefined) {
21+
'use strict';
22+
23+
/*
24+
Constructor
25+
*/
26+
$.ajax_scroll = function (element,options) {
27+
this.timerInterval = -1;
28+
this.lastDocHeight = 0;
29+
this.lastScrollPosition = 0;
30+
this.settings = $.extend($.ajax_scroll.defaults, options);
31+
var $this = this;
32+
//bind on scroll
33+
$(element).on('scroll', function () {
34+
if ($this.settings.useScrollOptimization) {
35+
if ($this.timerInterval === -1) {
36+
//$this.debug("Setting timeout:",settings.optimizationTimeout);
37+
$this.timerInterval = setTimeout(function () {
38+
//$this.debug("Running after timeout:");
39+
$this._checkScroll(element, $, window, document, $this.settings);
40+
$this.timerInterval = -1;
41+
42+
}, $this.settings.checkScrollChange);
43+
}
44+
else {
45+
$this._debug('Ignore this scroll...And saving all the DOM access and calculations');
46+
}
47+
48+
}
49+
else {
50+
$this._checkScroll(element, $, window, document, $this.settings);
51+
}
52+
53+
54+
});
55+
}
56+
57+
/*
58+
Plugin defaults
59+
*/
60+
$.ajax_scroll.defaults = {
61+
62+
/*
63+
required
64+
your callback which called which will be called with current page number
65+
*/
66+
handleScroll:function (page, container) {
67+
return true;
68+
},
69+
70+
/*
71+
required
72+
amount of pixels or amount of percent of container (calculated to pixel by plugin) from bottom, to start scroll
73+
*/
74+
triggerFromBottom:'10%',
75+
76+
/*
77+
required
78+
element where content will be inserted
79+
*/
80+
targetElement:null,
81+
82+
/*
83+
optional,default is 0
84+
page number to start with
85+
*/
86+
startPage:0,
87+
88+
/*
89+
optional
90+
null means infinite scroll
91+
*/
92+
pagesToScroll:null,
93+
94+
/* optional
95+
before page hook ,if returns false execution stops
96+
*/
97+
beforePageChanged:function (page, container) {
98+
return true;
99+
},
100+
101+
/*
102+
optional
103+
after page scroll calback
104+
*/
105+
afterPageChanged:function (page, container) {
106+
return true;
107+
},
108+
109+
/*
110+
optional
111+
NOT RECOMMENDED to CHANGE!!!
112+
default : true
113+
if scroll optimization used ,plugin will not access DOM each time scroll is triggered and will save a lot of overhead,because of not calling callback logic each time
114+
*/
115+
useScrollOptimization:true,
116+
117+
/*
118+
timeout in milliseconds to use in order to check if scroll change is significant enough to call the "handleScroll" callback
119+
*/
120+
checkScrollChange:500,
121+
122+
/*
123+
if use debug
124+
*/
125+
debug : true
126+
}
127+
128+
/*
129+
Use prototype to optimize multiple instances
130+
*/
131+
$.ajax_scroll.prototype = {
132+
133+
/*
134+
plugin logic which check if we need to call the callback
135+
*/
136+
_checkScroll:function (element, $, window, document, settings) {
137+
var $this = this;
138+
//if element on which content is inserted became not visible don't do exit
139+
if (settings.targetElement && !$(settings.targetElement).is(":visible")) {
140+
$this._debug("Ignoring the call because binder is not visible");
141+
return;
142+
}
143+
144+
var elemHeight = parseFloat($(element).height()) , elemScroll = parseFloat($(element).scrollTop()),
145+
isWindow = (element.self === window) , docHeight = isWindow ? parseFloat($(document).height()) : elemHeight,
146+
step = (settings.triggerFromBottom.toString().indexOf('%') > -1) ? docHeight / parseFloat(settings.triggerFromBottom.replace('%', '')) : parseFloat(settings.triggerFromBottom);
147+
148+
// $this._debug("Elem height", elemHeight);
149+
// $this._debug("Elem scroll", elemScroll);
150+
// $this._debug("Step is :", step);
151+
// $this._debug("DocHeight", docHeight);
152+
// $this._debug("Last element height", $this.lastDocHeight);
153+
154+
/*
155+
calculate window height + scroll + step
156+
*/
157+
var position = isWindow ? elemHeight + elemScroll + step : elemScroll + step;
158+
var isPos = (position > $this.lastScrollPosition) && (docHeight > $this.lastDocHeight);
159+
160+
/*
161+
understand if we have infinite pages number to scroll and if not, understand we are still not scrolled maximum o page requested.
162+
*/
163+
var isPageMax = !settings.pagesToScroll || (settings.pagesToScroll && (settings.startPage < settings.pagesToScroll));
164+
/*
165+
check that we are at the requested scroll position
166+
*/
167+
if (position >= docHeight) {
168+
/*
169+
don't handle scrolling back to top and also check if we got to maximum pages to scroll
170+
*/
171+
if (isPos && isPageMax) {
172+
this.lastScrollPosition = position;
173+
this.lastDocHeight = docHeight;
174+
settings.startPage = settings.startPage + 1;
175+
if (settings.beforePageChanged(settings.startPage, element)) {
176+
$this._debug("Calling 'handleScroll' callback");
177+
if (settings.handleScroll(settings.startPage, element)) {
178+
settings.afterPageChanged(settings.startPage, element);
179+
}
180+
}
181+
182+
}
183+
184+
}
185+
},///check scroll
186+
187+
/*
188+
borrowed from paul irish infinite scroll : hhttps://github.com/paulirish/infinite-scroll - make use of console safe
189+
*/
190+
_debug : function(){
191+
if(!this.settings.debug){return};
192+
if (typeof console !== 'undefined' && typeof console.log === 'function') {
193+
// Modern browsers
194+
// Single argument, which is a string
195+
if ((Array.prototype.slice.call(arguments)).length === 1 && typeof Array.prototype.slice.call(arguments)[0] === 'string') {
196+
console.log( (Array.prototype.slice.call(arguments)).toString() );
197+
} else {
198+
console.log( Array.prototype.slice.call(arguments) );
199+
}
200+
} else if (!Function.prototype.bind && typeof console !== 'undefined' && typeof console.log === 'object') {
201+
// IE8
202+
Function.prototype.call.call(console.log, console, Array.prototype.slice.call(arguments));
203+
}
204+
}
205+
206+
207+
}
208+
209+
/*
210+
create scroll instances
211+
*/
212+
$.fn.ajax_scroll = function (options) {
213+
return this.each(function () {
214+
var instance = new $.ajax_scroll(this,options);
215+
});
216+
};
217+
218+
219+
}(jQuery, window, document));

0 commit comments

Comments
 (0)