Skip to content

Commit be2769f

Browse files
tifftiff
committed
* Support for jQuery 2.2+
* Removed visibleParts logic * No support for jQuery < 1.8
1 parent 5133162 commit be2769f

File tree

4 files changed

+61
-127
lines changed

4 files changed

+61
-127
lines changed

‎jquery.inview.js

+46-51
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@
1515
factory(jQuery);
1616
}
1717
}(function ($) {
18-
var inviewObjects = {}, viewportSize, viewportOffset,
19-
d = document, w = window, documentElement = d.documentElement, expando = $.expando, timer;
18+
19+
var inviewObjects = [], viewportSize, viewportOffset,
20+
d = document, w = window, documentElement = d.documentElement, timer;
2021

2122
$.event.special.inview = {
2223
add: function(data) {
23-
inviewObjects[data.guid + "-" + this[expando]] = { data: data, $element: $(this) };
24-
24+
inviewObjects.push({ data: data, $element: $(this), element: this });
2525
// Use setInterval in order to also make sure this captures elements within
2626
// "overflow:scroll" elements or elements that appeared in the dom tree due to
2727
// dom manipulation and reflow
@@ -32,16 +32,22 @@
3232
//
3333
// Don't waste cycles with an interval until we get at least one element that
3434
// has bound to the inview event.
35-
if (!timer && !$.isEmptyObject(inviewObjects)) {
35+
if (!timer && inviewObjects.length) {
3636
timer = setInterval(checkInView, 250);
3737
}
3838
},
3939

4040
remove: function(data) {
41-
try { delete inviewObjects[data.guid + "-" + this[expando]]; } catch(e) {}
41+
for (var i=0; i<inviewObjects.length; i++) {
42+
var inviewObject = inviewObjects[i];
43+
if (inviewObject.element === this && inviewObject.data.guid === data.guid) {
44+
inviewObjects.splice(i, 1);
45+
break;
46+
}
47+
}
4248

4349
// Clear interval when we no longer have any elements listening
44-
if ($.isEmptyObject(inviewObjects)) {
50+
if (!inviewObjects.length) {
4551
clearInterval(timer);
4652
timer = null;
4753
}
@@ -77,59 +83,48 @@
7783
}
7884

7985
function checkInView() {
80-
var $elements = [], elementsLength, i = 0;
86+
if (!inviewObjects.length) {
87+
return;
88+
}
8189

82-
$.each(inviewObjects, function(i, inviewObject) {
90+
var i = 0, $elements = $.map(inviewObjects, function(inviewObject) {
8391
var selector = inviewObject.data.selector,
8492
$element = inviewObject.$element;
85-
$elements.push(selector ? $element.find(selector) : $element);
93+
return selector ? $element.find(selector) : $element;
8694
});
8795

88-
elementsLength = $elements.length;
89-
if (elementsLength) {
90-
viewportSize = viewportSize || getViewportSize();
91-
viewportOffset = viewportOffset || getViewportOffset();
96+
viewportSize = viewportSize || getViewportSize();
97+
viewportOffset = viewportOffset || getViewportOffset();
9298

93-
for (; i<elementsLength; i++) {
94-
// Ignore elements that are not in the DOM tree
95-
if (!$.contains(documentElement, $elements[i][0])) {
96-
continue;
97-
}
99+
for (; i<inviewObjects.length; i++) {
100+
// Ignore elements that are not in the DOM tree
101+
if (!$.contains(documentElement, $elements[i][0])) {
102+
continue;
103+
}
98104

99-
var $element = $($elements[i]),
100-
elementSize = { height: $element.height(), width: $element.width() },
101-
elementOffset = $element.offset(),
102-
inView = $element.data('inview'),
103-
visiblePartX,
104-
visiblePartY,
105-
visiblePartsMerged;
106-
107-
// Don't ask me why because I haven't figured out yet:
108-
// viewportOffset and viewportSize are sometimes suddenly null in Firefox 5.
109-
// Even though it sounds weird:
110-
// It seems that the execution of this function is interferred by the onresize/onscroll event
111-
// where viewportOffset and viewportSize are unset
112-
if (!viewportOffset || !viewportSize) {
113-
return;
114-
}
105+
var $element = $($elements[i]),
106+
elementSize = { height: $element.height(), width: $element.width() },
107+
elementOffset = $element.offset(),
108+
inView = $element.data('inview');
109+
110+
// Don't ask me why because I haven't figured out yet:
111+
// viewportOffset and viewportSize are sometimes suddenly null in Firefox 5.
112+
// Even though it sounds weird:
113+
// It seems that the execution of this function is interferred by the onresize/onscroll event
114+
// where viewportOffset and viewportSize are unset
115+
if (!viewportOffset || !viewportSize) {
116+
return;
117+
}
115118

116-
if (elementOffset.top + elementSize.height > viewportOffset.top &&
117-
elementOffset.top < viewportOffset.top + viewportSize.height &&
118-
elementOffset.left + elementSize.width > viewportOffset.left &&
119-
elementOffset.left < viewportOffset.left + viewportSize.width) {
120-
visiblePartX = (viewportOffset.left > elementOffset.left ?
121-
'right' : (viewportOffset.left + viewportSize.width) < (elementOffset.left + elementSize.width) ?
122-
'left' : 'both');
123-
visiblePartY = (viewportOffset.top > elementOffset.top ?
124-
'bottom' : (viewportOffset.top + viewportSize.height) < (elementOffset.top + elementSize.height) ?
125-
'top' : 'both');
126-
visiblePartsMerged = visiblePartX + "-" + visiblePartY;
127-
if (!inView || inView !== visiblePartsMerged) {
128-
$element.data('inview', visiblePartsMerged).trigger('inview', [true, visiblePartX, visiblePartY]);
129-
}
130-
} else if (inView) {
131-
$element.data('inview', false).trigger('inview', [false]);
119+
if (elementOffset.top + elementSize.height > viewportOffset.top &&
120+
elementOffset.top < viewportOffset.top + viewportSize.height &&
121+
elementOffset.left + elementSize.width > viewportOffset.left &&
122+
elementOffset.left < viewportOffset.left + viewportSize.width) {
123+
if (!inView) {
124+
$element.data('inview', true).trigger('inview', [true]);
132125
}
126+
} else if (inView) {
127+
$element.data('inview', false).trigger('inview', [false]);
133128
}
134129
}
135130
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"test": "test"
99
},
1010
"scripts": {
11-
"test": "echo \"Error: no test specified\" && exit 1"
11+
"test": "open test/index.html"
1212
},
1313
"repository": {
1414
"type": "git",

‎test/index.html

+10-22
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,21 @@
55
<meta charset="utf-8">
66
<title>QUnit Test Suite</title>
77
<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height">
8-
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css">
9-
10-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
11-
<script src="../jquery.inview.js"></script>
12-
<script>window["jQuery 1.4"] = $.noConflict(true);</script>
13-
14-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
15-
<script src="../jquery.inview.js"></script>
16-
<script>window["jQuery 1.5"] = $.noConflict(true);</script>
17-
18-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
19-
<script src="../jquery.inview.js"></script>
20-
<script>window["jQuery 1.6"] = $.noConflict(true);</script>
21-
22-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
23-
<script src="../jquery.inview.js"></script>
24-
<script>window["jQuery 1.7"] = $.noConflict(true);</script>
25-
8+
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.20.0.css">
9+
2610
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
2711
<script src="../jquery.inview.js"></script>
2812
<script>window["jQuery 1.8"] = $.noConflict(true);</script>
2913

30-
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
14+
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
3115
<script src="../jquery.inview.js"></script>
32-
<script>window["jQuery 1.9"] = $.noConflict(true);</script>
33-
34-
<script src="http://code.jquery.com/qunit/git/qunit.js"></script>
16+
<script>window["jQuery 1.12"] = $.noConflict(true);</script>
17+
18+
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
19+
<script src="../jquery.inview.js"></script>
20+
<script>window["jQuery 2.2"] = $.noConflict(true);</script>
21+
22+
<script src="https://code.jquery.com/qunit/qunit-1.20.0.js"></script>
3523
<script src="test.js"></script>
3624
</head>
3725
<body>

‎test/test.js

+4-53
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
QUnit.config.reorder = false;
22

3-
window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7', 'jQuery 1.8'], function(i, version) {
3+
window['jQuery 1.8'].each(['jQuery 1.8', 'jQuery 1.12', 'jQuery 2.2'], function(i, version) {
44
var jQuery = window[version],
55
$ = jQuery;
66

@@ -211,61 +211,12 @@ window['jQuery 1.6'].each(['jQuery 1.4', 'jQuery 1.5', 'jQuery 1.6', 'jQuery 1.7
211211
});
212212

213213

214-
asyncTest('Check visiblePartX & visiblePartY parameters #1', function() {
215-
expect(2);
216-
217-
this.element.css({
218-
top: '-25px',
219-
left: '-25px'
220-
}).appendTo('body');
221-
222-
this.element.bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
223-
equal(visiblePartX, 'right', 'visiblePartX has correct value');
224-
equal(visiblePartY, 'bottom', 'visiblePartY has correct value');
225-
start();
226-
});
227-
});
228-
229-
230-
asyncTest('Check visiblePartX & visiblePartY parameters #2', function() {
231-
expect(2);
232-
233-
this.element.css({
234-
top: '0',
235-
left: '-25px'
236-
}).appendTo('body');
237-
238-
this.element.bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
239-
equal(visiblePartX, 'right', 'visiblePartX has correct value');
240-
equal(visiblePartY, 'both', 'visiblePartY has correct value');
241-
start();
242-
});
243-
});
244-
245-
246-
asyncTest('Check visiblePartX & visiblePartY parameters #3', function() {
247-
expect(2);
248-
249-
this.element.css({
250-
top: '0',
251-
left: '0'
252-
}).appendTo('body');
253-
254-
this.element.bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
255-
equal(visiblePartX, 'both', 'visiblePartX has correct value');
256-
equal(visiblePartY, 'both', 'visiblePartY has correct value');
257-
start();
258-
});
259-
});
260-
261-
262214
asyncTest('Check "live" events', function() {
263215
expect(3);
264216

265-
var that = this,
266-
elems = $("body .test-container > div.test-element");
267-
elems.live("inview", function(event) {
268-
elems.die("inview");
217+
var that = this;
218+
$("body").on("inview", ".test-container > div.test-element", function(event) {
219+
$("body").off("inview");
269220
ok(true, "Live event correctly fired");
270221
equal(event.currentTarget, that.element[0], "event.currentTarget correctly set");
271222
equal(this, that.element[0], "Handler bound to target element");

0 commit comments

Comments
 (0)