Skip to content

Commit 62905e3

Browse files
mdeboermdeboer
committedMar 7, 2015
Trigger event on dom object when activated
·
1.1.21.1.0
1 parent 859ac32 commit 62905e3

File tree

5 files changed

+189
-92
lines changed

5 files changed

+189
-92
lines changed
 

‎dist/wow.js

+124-89
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
(function() {
22
var MutationObserver, Util, WeakMap, getComputedStyle, getComputedStyleRX,
3-
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
4-
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
3+
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
4+
indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
55

66
Util = (function() {
77
function Util() {}
@@ -21,6 +21,39 @@
2121
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent);
2222
};
2323

24+
Util.prototype.createEvent = function(event, bubble, cancel, detail) {
25+
var customEvent;
26+
if (bubble == null) {
27+
bubble = false;
28+
}
29+
if (cancel == null) {
30+
cancel = false;
31+
}
32+
if (detail == null) {
33+
detail = null;
34+
}
35+
if (document.createEvent != null) {
36+
customEvent = document.createEvent('CustomEvent');
37+
customEvent.initCustomEvent(event, bubble, cancel, detail);
38+
} else if (document.createEventObject != null) {
39+
customEvent = document.createEventObject();
40+
customEvent.eventType = event;
41+
} else {
42+
customEvent.eventName = event;
43+
}
44+
return customEvent;
45+
};
46+
47+
Util.prototype.emitEvent = function(elem, event) {
48+
if (elem.dispatchEvent != null) {
49+
return elem.dispatchEvent(event);
50+
} else if (elem[event] != null) {
51+
return elem[event]();
52+
} else if (elem['on' + event] != null) {
53+
return elem['on' + event]();
54+
}
55+
};
56+
2457
Util.prototype.addEvent = function(elem, event, fn) {
2558
if (elem.addEventListener != null) {
2659
return elem.addEventListener(event, fn, false);
@@ -60,21 +93,21 @@
6093
}
6194

6295
WeakMap.prototype.get = function(key) {
63-
var i, item, _i, _len, _ref;
64-
_ref = this.keys;
65-
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
66-
item = _ref[i];
96+
var i, item, j, len, ref;
97+
ref = this.keys;
98+
for (i = j = 0, len = ref.length; j < len; i = ++j) {
99+
item = ref[i];
67100
if (item === key) {
68101
return this.values[i];
69102
}
70103
}
71104
};
72105

73106
WeakMap.prototype.set = function(key, value) {
74-
var i, item, _i, _len, _ref;
75-
_ref = this.keys;
76-
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
77-
item = _ref[i];
107+
var i, item, j, len, ref;
108+
ref = this.keys;
109+
for (i = j = 0, len = ref.length; j < len; i = ++j) {
110+
item = ref[i];
78111
if (item === key) {
79112
this.values[i] = value;
80113
return;
@@ -108,7 +141,7 @@
108141

109142
getComputedStyle = this.getComputedStyle || function(el, pseudo) {
110143
this.getPropertyValue = function(prop) {
111-
var _ref;
144+
var ref;
112145
if (prop === 'float') {
113146
prop = 'styleFloat';
114147
}
@@ -117,7 +150,7 @@
117150
return _char.toUpperCase();
118151
});
119152
}
120-
return ((_ref = el.currentStyle) != null ? _ref[prop] : void 0) || null;
153+
return ((ref = el.currentStyle) != null ? ref[prop] : void 0) || null;
121154
};
122155
return this;
123156
};
@@ -138,18 +171,19 @@
138171
if (options == null) {
139172
options = {};
140173
}
141-
this.scrollCallback = __bind(this.scrollCallback, this);
142-
this.scrollHandler = __bind(this.scrollHandler, this);
143-
this.start = __bind(this.start, this);
174+
this.scrollCallback = bind(this.scrollCallback, this);
175+
this.scrollHandler = bind(this.scrollHandler, this);
176+
this.start = bind(this.start, this);
144177
this.scrolled = true;
145178
this.config = this.util().extend(options, this.defaults);
146179
this.animationNameCache = new WeakMap();
180+
this.wowEvent = this.util().createEvent(this.config.boxClass);
147181
}
148182

149183
WOW.prototype.init = function() {
150-
var _ref;
184+
var ref;
151185
this.element = window.document.documentElement;
152-
if ((_ref = document.readyState) === "interactive" || _ref === "complete") {
186+
if ((ref = document.readyState) === "interactive" || ref === "complete") {
153187
this.start();
154188
} else {
155189
this.util().addEvent(document, 'DOMContentLoaded', this.start);
@@ -158,35 +192,35 @@
158192
};
159193

160194
WOW.prototype.start = function() {
161-
var box, _i, _len, _ref;
195+
var box, j, len, ref;
162196
this.stopped = false;
163197
this.boxes = (function() {
164-
var _i, _len, _ref, _results;
165-
_ref = this.element.querySelectorAll("." + this.config.boxClass);
166-
_results = [];
167-
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
168-
box = _ref[_i];
169-
_results.push(box);
198+
var j, len, ref, results;
199+
ref = this.element.querySelectorAll("." + this.config.boxClass);
200+
results = [];
201+
for (j = 0, len = ref.length; j < len; j++) {
202+
box = ref[j];
203+
results.push(box);
170204
}
171-
return _results;
205+
return results;
172206
}).call(this);
173207
this.all = (function() {
174-
var _i, _len, _ref, _results;
175-
_ref = this.boxes;
176-
_results = [];
177-
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
178-
box = _ref[_i];
179-
_results.push(box);
208+
var j, len, ref, results;
209+
ref = this.boxes;
210+
results = [];
211+
for (j = 0, len = ref.length; j < len; j++) {
212+
box = ref[j];
213+
results.push(box);
180214
}
181-
return _results;
215+
return results;
182216
}).call(this);
183217
if (this.boxes.length) {
184218
if (this.disabled()) {
185219
this.resetStyle();
186220
} else {
187-
_ref = this.boxes;
188-
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
189-
box = _ref[_i];
221+
ref = this.boxes;
222+
for (j = 0, len = ref.length; j < len; j++) {
223+
box = ref[j];
190224
this.applyStyle(box, true);
191225
}
192226
}
@@ -199,22 +233,22 @@
199233
if (this.config.live) {
200234
return new MutationObserver((function(_this) {
201235
return function(records) {
202-
var node, record, _j, _len1, _results;
203-
_results = [];
204-
for (_j = 0, _len1 = records.length; _j < _len1; _j++) {
205-
record = records[_j];
206-
_results.push((function() {
207-
var _k, _len2, _ref1, _results1;
208-
_ref1 = record.addedNodes || [];
209-
_results1 = [];
210-
for (_k = 0, _len2 = _ref1.length; _k < _len2; _k++) {
211-
node = _ref1[_k];
212-
_results1.push(this.doSync(node));
236+
var k, len1, node, record, results;
237+
results = [];
238+
for (k = 0, len1 = records.length; k < len1; k++) {
239+
record = records[k];
240+
results.push((function() {
241+
var l, len2, ref1, results1;
242+
ref1 = record.addedNodes || [];
243+
results1 = [];
244+
for (l = 0, len2 = ref1.length; l < len2; l++) {
245+
node = ref1[l];
246+
results1.push(this.doSync(node));
213247
}
214-
return _results1;
248+
return results1;
215249
}).call(_this));
216250
}
217-
return _results;
251+
return results;
218252
};
219253
})(this)).observe(document.body, {
220254
childList: true,
@@ -239,40 +273,41 @@
239273
};
240274

241275
WOW.prototype.doSync = function(element) {
242-
var box, _i, _len, _ref, _results;
276+
var box, j, len, ref, results;
243277
if (element == null) {
244278
element = this.element;
245279
}
246280
if (element.nodeType !== 1) {
247281
return;
248282
}
249283
element = element.parentNode || element;
250-
_ref = element.querySelectorAll("." + this.config.boxClass);
251-
_results = [];
252-
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
253-
box = _ref[_i];
254-
if (__indexOf.call(this.all, box) < 0) {
284+
ref = element.querySelectorAll("." + this.config.boxClass);
285+
results = [];
286+
for (j = 0, len = ref.length; j < len; j++) {
287+
box = ref[j];
288+
if (indexOf.call(this.all, box) < 0) {
255289
this.boxes.push(box);
256290
this.all.push(box);
257291
if (this.stopped || this.disabled()) {
258292
this.resetStyle();
259293
} else {
260294
this.applyStyle(box, true);
261295
}
262-
_results.push(this.scrolled = true);
296+
results.push(this.scrolled = true);
263297
} else {
264-
_results.push(void 0);
298+
results.push(void 0);
265299
}
266300
}
267-
return _results;
301+
return results;
268302
};
269303

270304
WOW.prototype.show = function(box) {
271305
this.applyStyle(box);
272-
box.className = "" + box.className + " " + this.config.animateClass;
306+
box.className = box.className + " " + this.config.animateClass;
273307
if (this.config.callback != null) {
274-
return this.config.callback(box);
308+
this.config.callback(box);
275309
}
310+
return this.util().emitEvent(box, this.wowEvent);
276311
};
277312

278313
WOW.prototype.applyStyle = function(box, hidden) {
@@ -300,14 +335,14 @@
300335
})();
301336

302337
WOW.prototype.resetStyle = function() {
303-
var box, _i, _len, _ref, _results;
304-
_ref = this.boxes;
305-
_results = [];
306-
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
307-
box = _ref[_i];
308-
_results.push(box.style.visibility = 'visible');
309-
}
310-
return _results;
338+
var box, j, len, ref, results;
339+
ref = this.boxes;
340+
results = [];
341+
for (j = 0, len = ref.length; j < len; j++) {
342+
box = ref[j];
343+
results.push(box.style.visibility = 'visible');
344+
}
345+
return results;
311346
};
312347

313348
WOW.prototype.customStyle = function(box, hidden, duration, delay, iteration) {
@@ -339,32 +374,32 @@
339374
WOW.prototype.vendors = ["moz", "webkit"];
340375

341376
WOW.prototype.vendorSet = function(elem, properties) {
342-
var name, value, vendor, _results;
343-
_results = [];
377+
var name, results, value, vendor;
378+
results = [];
344379
for (name in properties) {
345380
value = properties[name];
346381
elem["" + name] = value;
347-
_results.push((function() {
348-
var _i, _len, _ref, _results1;
349-
_ref = this.vendors;
350-
_results1 = [];
351-
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
352-
vendor = _ref[_i];
353-
_results1.push(elem["" + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value);
382+
results.push((function() {
383+
var j, len, ref, results1;
384+
ref = this.vendors;
385+
results1 = [];
386+
for (j = 0, len = ref.length; j < len; j++) {
387+
vendor = ref[j];
388+
results1.push(elem["" + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value);
354389
}
355-
return _results1;
390+
return results1;
356391
}).call(this));
357392
}
358-
return _results;
393+
return results;
359394
};
360395

361396
WOW.prototype.vendorCSS = function(elem, property) {
362-
var result, style, vendor, _i, _len, _ref;
397+
var j, len, ref, result, style, vendor;
363398
style = getComputedStyle(elem);
364399
result = style.getPropertyCSSValue(property);
365-
_ref = this.vendors;
366-
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
367-
vendor = _ref[_i];
400+
ref = this.vendors;
401+
for (j = 0, len = ref.length; j < len; j++) {
402+
vendor = ref[j];
368403
result = result || style.getPropertyCSSValue("-" + vendor + "-" + property);
369404
}
370405
return result;
@@ -401,21 +436,21 @@
401436
if (this.scrolled) {
402437
this.scrolled = false;
403438
this.boxes = (function() {
404-
var _i, _len, _ref, _results;
405-
_ref = this.boxes;
406-
_results = [];
407-
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
408-
box = _ref[_i];
439+
var j, len, ref, results;
440+
ref = this.boxes;
441+
results = [];
442+
for (j = 0, len = ref.length; j < len; j++) {
443+
box = ref[j];
409444
if (!(box)) {
410445
continue;
411446
}
412447
if (this.isVisible(box)) {
413448
this.show(box);
414449
continue;
415450
}
416-
_results.push(box);
451+
results.push(box);
417452
}
418-
return _results;
453+
return results;
419454
}).call(this);
420455
if (!(this.boxes.length || this.config.live)) {
421456
return this.stop();

‎dist/wow.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎spec/coffeescripts/wow-spec.coffee

+24
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,11 @@ describe 'WOW', ->
217217
callback: ->
218218
called = true
219219
.init()
220+
221+
# Trigger custom event on dom object, event name is boxClass value
222+
$('.block').on 'block', ->
223+
$(this).addClass('triggered')
224+
220225
setTimeout ->
221226
done()
222227
, timeout
@@ -308,3 +313,22 @@ describe 'WOW', ->
308313
.toBe true
309314
done()
310315
, timeout
316+
317+
it 'fires the callback on the visible element', (done) ->
318+
# Scroll down so that 150px of #custom-3 becomes visible.
319+
window.scrollTo 0, $('#custom-3').offset().top - winHeight + 150
320+
setTimeout ->
321+
expect $ '#custom-3'
322+
.toHaveClass 'triggered'
323+
expect $ '#custom-4'
324+
.not.toHaveClass 'triggered'
325+
# Scroll down so that 150px of #custom-4 becomes visible.
326+
window.scrollTo 0, $('#custom-4').offset().top - winHeight + 150
327+
setTimeout ->
328+
expect $ '#custom-3'
329+
.toHaveClass 'triggered'
330+
expect $ '#custom-4'
331+
.toHaveClass 'triggered'
332+
done()
333+
, timeout
334+
, timeout

‎spec/javascripts/wow-spec.js

+17-1
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,9 @@
153153
return called = true;
154154
}
155155
}).init();
156+
$('.block').on('block', function() {
157+
return $(this).addClass('triggered');
158+
});
156159
return setTimeout(function() {
157160
return done();
158161
}, timeout);
@@ -214,14 +217,27 @@
214217
}, timeout);
215218
}, timeout);
216219
});
217-
return it("fires the callback", function(done) {
220+
it("fires the callback", function(done) {
218221
called = false;
219222
window.scrollTo(0, $('#custom-3').offset().top - winHeight + 150);
220223
return setTimeout(function() {
221224
expect(called).toBe(true);
222225
return done();
223226
}, timeout);
224227
});
228+
return it('fires the callback on the visible element', function(done) {
229+
window.scrollTo(0, $('#custom-3').offset().top - winHeight + 150);
230+
return setTimeout(function() {
231+
expect($('#custom-3')).toHaveClass('triggered');
232+
expect($('#custom-4')).not.toHaveClass('triggered');
233+
window.scrollTo(0, $('#custom-4').offset().top - winHeight + 150);
234+
return setTimeout(function() {
235+
expect($('#custom-3')).toHaveClass('triggered');
236+
expect($('#custom-4')).toHaveClass('triggered');
237+
return done();
238+
}, timeout);
239+
}, timeout);
240+
});
225241
});
226242
});
227243

‎src/wow.coffee

+22
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,26 @@ class Util
1515
isMobile: (agent) ->
1616
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent)
1717

18+
createEvent: (event, bubble = false, cancel = false, detail = null) ->
19+
if document.createEvent? # W3C DOM
20+
customEvent = document.createEvent('CustomEvent')
21+
customEvent.initCustomEvent(event, bubble, cancel, detail)
22+
else if document.createEventObject? # IE DOM < 9
23+
customEvent = document.createEventObject()
24+
customEvent.eventType = event
25+
else
26+
customEvent.eventName = event
27+
28+
customEvent
29+
30+
emitEvent: (elem, event) ->
31+
if elem.dispatchEvent? # W3C DOM
32+
elem.dispatchEvent(event)
33+
else if elem[event]?
34+
elem[event]();
35+
else if elem['on'+event]?
36+
elem['on'+event]();
37+
1838
addEvent: (elem, event, fn) ->
1939
if elem.addEventListener? # W3C DOM
2040
elem.addEventListener event, fn, false
@@ -93,6 +113,7 @@ class @WOW
93113
@config = @util().extend(options, @defaults)
94114
# Map of elements to animation names:
95115
@animationNameCache = new WeakMap()
116+
@wowEvent = @util().createEvent(@config.boxClass)
96117

97118
init: ->
98119
@element = window.document.documentElement
@@ -152,6 +173,7 @@ class @WOW
152173
@applyStyle(box)
153174
box.className = "#{box.className} #{@config.animateClass}"
154175
@config.callback(box) if @config.callback?
176+
@util().emitEvent(box, @wowEvent)
155177

156178
applyStyle: (box, hidden) ->
157179
duration = box.getAttribute('data-wow-duration')

0 commit comments

Comments
 (0)
Please sign in to comment.