Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Trigger event on dom object when activated #164

Merged
merged 4 commits into from
Apr 4, 2015
+213 −91
Merged

Trigger event on dom object when activated #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
62905e3
Trigger event on dom object when activated
mdeboer Mar 7, 2015
8aca072
Fixed #163 - Remove animationClass after animation has ended
mdeboer Mar 17, 2015
bb2ebbb
Fixed animated class being hardcoded
mdeboer Mar 17, 2015
b0a44f0
Code consistency fixes
mdeboer Mar 24, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
224 changes: 136 additions & 88 deletions dist/wow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
(function() {
var MutationObserver, Util, WeakMap, getComputedStyle, getComputedStyleRX,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
__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; };
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
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; };

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

Util.prototype.createEvent = function(event, bubble, cancel, detail) {
var customEvent;
if (bubble == null) {
bubble = false;
}
if (cancel == null) {
cancel = false;
}
if (detail == null) {
detail = null;
}
if (document.createEvent != null) {
customEvent = document.createEvent('CustomEvent');
customEvent.initCustomEvent(event, bubble, cancel, detail);
} else if (document.createEventObject != null) {
customEvent = document.createEventObject();
customEvent.eventType = event;
} else {
customEvent.eventName = event;
}
return customEvent;
};

Util.prototype.emitEvent = function(elem, event) {
if (elem.dispatchEvent != null) {
return elem.dispatchEvent(event);
} else if (event in (elem != null)) {
return elem[event]();
} else if (("on" + event) in (elem != null)) {
return elem["on" + event]();
}
};

Util.prototype.addEvent = function(elem, event, fn) {
if (elem.addEventListener != null) {
return elem.addEventListener(event, fn, false);
Expand Down Expand Up @@ -60,21 +93,21 @@
}

WeakMap.prototype.get = function(key) {
var i, item, _i, _len, _ref;
_ref = this.keys;
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
item = _ref[i];
var i, item, j, len, ref;
ref = this.keys;
for (i = j = 0, len = ref.length; j < len; i = ++j) {
item = ref[i];
if (item === key) {
return this.values[i];
}
}
};

WeakMap.prototype.set = function(key, value) {
var i, item, _i, _len, _ref;
_ref = this.keys;
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
item = _ref[i];
var i, item, j, len, ref;
ref = this.keys;
for (i = j = 0, len = ref.length; j < len; i = ++j) {
item = ref[i];
if (item === key) {
this.values[i] = value;
return;
Expand Down Expand Up @@ -108,7 +141,7 @@

getComputedStyle = this.getComputedStyle || function(el, pseudo) {
this.getPropertyValue = function(prop) {
var _ref;
var ref;
if (prop === 'float') {
prop = 'styleFloat';
}
Expand All @@ -117,7 +150,7 @@
return _char.toUpperCase();
});
}
return ((_ref = el.currentStyle) != null ? _ref[prop] : void 0) || null;
return ((ref = el.currentStyle) != null ? ref[prop] : void 0) || null;
};
return this;
};
Expand All @@ -138,18 +171,19 @@
if (options == null) {
options = {};
}
this.scrollCallback = __bind(this.scrollCallback, this);
this.scrollHandler = __bind(this.scrollHandler, this);
this.start = __bind(this.start, this);
this.scrollCallback = bind(this.scrollCallback, this);
this.scrollHandler = bind(this.scrollHandler, this);
this.start = bind(this.start, this);
this.scrolled = true;
this.config = this.util().extend(options, this.defaults);
this.animationNameCache = new WeakMap();
this.wowEvent = this.util().createEvent(this.config.boxClass);
}

WOW.prototype.init = function() {
var _ref;
var ref;
this.element = window.document.documentElement;
if ((_ref = document.readyState) === "interactive" || _ref === "complete") {
if ((ref = document.readyState) === "interactive" || ref === "complete") {
this.start();
} else {
this.util().addEvent(document, 'DOMContentLoaded', this.start);
Expand All @@ -158,35 +192,35 @@
};

WOW.prototype.start = function() {
var box, _i, _len, _ref;
var box, j, len, ref;
this.stopped = false;
this.boxes = (function() {
var _i, _len, _ref, _results;
_ref = this.element.querySelectorAll("." + this.config.boxClass);
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
_results.push(box);
var j, len, ref, results;
ref = this.element.querySelectorAll("." + this.config.boxClass);
results = [];
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
results.push(box);
}
return _results;
return results;
}).call(this);
this.all = (function() {
var _i, _len, _ref, _results;
_ref = this.boxes;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
_results.push(box);
var j, len, ref, results;
ref = this.boxes;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
results.push(box);
}
return _results;
return results;
}).call(this);
if (this.boxes.length) {
if (this.disabled()) {
this.resetStyle();
} else {
_ref = this.boxes;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
ref = this.boxes;
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
this.applyStyle(box, true);
}
}
Expand All @@ -199,22 +233,22 @@
if (this.config.live) {
return new MutationObserver((function(_this) {
return function(records) {
var node, record, _j, _len1, _results;
_results = [];
for (_j = 0, _len1 = records.length; _j < _len1; _j++) {
record = records[_j];
_results.push((function() {
var _k, _len2, _ref1, _results1;
_ref1 = record.addedNodes || [];
_results1 = [];
for (_k = 0, _len2 = _ref1.length; _k < _len2; _k++) {
node = _ref1[_k];
_results1.push(this.doSync(node));
var k, len1, node, record, results;
results = [];
for (k = 0, len1 = records.length; k < len1; k++) {
record = records[k];
results.push((function() {
var l, len2, ref1, results1;
ref1 = record.addedNodes || [];
results1 = [];
for (l = 0, len2 = ref1.length; l < len2; l++) {
node = ref1[l];
results1.push(this.doSync(node));
}
return _results1;
return results1;
}).call(_this));
}
return _results;
return results;
};
})(this)).observe(document.body, {
childList: true,
Expand All @@ -239,40 +273,46 @@
};

WOW.prototype.doSync = function(element) {
var box, _i, _len, _ref, _results;
var box, j, len, ref, results;
if (element == null) {
element = this.element;
}
if (element.nodeType !== 1) {
return;
}
element = element.parentNode || element;
_ref = element.querySelectorAll("." + this.config.boxClass);
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
if (__indexOf.call(this.all, box) < 0) {
ref = element.querySelectorAll("." + this.config.boxClass);
results = [];
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
if (indexOf.call(this.all, box) < 0) {
this.boxes.push(box);
this.all.push(box);
if (this.stopped || this.disabled()) {
this.resetStyle();
} else {
this.applyStyle(box, true);
}
_results.push(this.scrolled = true);
results.push(this.scrolled = true);
} else {
_results.push(void 0);
results.push(void 0);
}
}
return _results;
return results;
};

WOW.prototype.show = function(box) {
this.applyStyle(box);
box.className = "" + box.className + " " + this.config.animateClass;
box.className = box.className + " " + this.config.animateClass;
if (this.config.callback != null) {
return this.config.callback(box);
this.config.callback(box);
}
this.util().emitEvent(box, this.wowEvent);
this.util().addEvent(box, 'animationend', this.resetAnimation);
this.util().addEvent(box, 'oanimationend', this.resetAnimation);
this.util().addEvent(box, 'webkitAnimationEnd', this.resetAnimation);
this.util().addEvent(box, 'MSAnimationEnd', this.resetAnimation);
return box;
};

WOW.prototype.applyStyle = function(box, hidden) {
Expand Down Expand Up @@ -300,14 +340,22 @@
})();

WOW.prototype.resetStyle = function() {
var box, _i, _len, _ref, _results;
_ref = this.boxes;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
_results.push(box.style.visibility = 'visible');
var box, j, len, ref, results;
ref = this.boxes;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
results.push(box.style.visibility = 'visible');
}
return results;
};

WOW.prototype.resetAnimation = function(event) {
var target;
if (event.type.toLowerCase().indexOf('animationend') >= 0) {
target = event.target || event.srcElement;
return target.className = target.className.replace(config.animateClass, '').trim();
}
return _results;
};

WOW.prototype.customStyle = function(box, hidden, duration, delay, iteration) {
Expand Down Expand Up @@ -339,32 +387,32 @@
WOW.prototype.vendors = ["moz", "webkit"];

WOW.prototype.vendorSet = function(elem, properties) {
var name, value, vendor, _results;
_results = [];
var name, results, value, vendor;
results = [];
for (name in properties) {
value = properties[name];
elem["" + name] = value;
_results.push((function() {
var _i, _len, _ref, _results1;
_ref = this.vendors;
_results1 = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
vendor = _ref[_i];
_results1.push(elem["" + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value);
results.push((function() {
var j, len, ref, results1;
ref = this.vendors;
results1 = [];
for (j = 0, len = ref.length; j < len; j++) {
vendor = ref[j];
results1.push(elem["" + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value);
}
return _results1;
return results1;
}).call(this));
}
return _results;
return results;
};

WOW.prototype.vendorCSS = function(elem, property) {
var result, style, vendor, _i, _len, _ref;
var j, len, ref, result, style, vendor;
style = getComputedStyle(elem);
result = style.getPropertyCSSValue(property);
_ref = this.vendors;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
vendor = _ref[_i];
ref = this.vendors;
for (j = 0, len = ref.length; j < len; j++) {
vendor = ref[j];
result = result || style.getPropertyCSSValue("-" + vendor + "-" + property);
}
return result;
Expand Down Expand Up @@ -401,21 +449,21 @@
if (this.scrolled) {
this.scrolled = false;
this.boxes = (function() {
var _i, _len, _ref, _results;
_ref = this.boxes;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
var j, len, ref, results;
ref = this.boxes;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
if (!(box)) {
continue;
}
if (this.isVisible(box)) {
this.show(box);
continue;
}
_results.push(box);
results.push(box);
}
return _results;
return results;
}).call(this);
if (!(this.boxes.length || this.config.live)) {
return this.stop();
Expand Down
Loading