diff --git a/dist/wow.js b/dist/wow.js old mode 100644 new mode 100755 index 1db78ea..5a26b44 --- a/dist/wow.js +++ b/dist/wow.js @@ -1,152 +1,194 @@ -(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; }; +'use strict'; - Util = (function() { - function Util() {} +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - Util.prototype.extend = function(custom, defaults) { - var key, value; - for (key in defaults) { - value = defaults[key]; - if (custom[key] == null) { - custom[key] = value; - } - } - return custom; - }; +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - Util.prototype.isMobile = function(agent) { - return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent); - }; +(function () { + // Name : wow + // Author : Matthieu Aussaguel, http://mynameismatthieu.com/, @mattaussaguel + // Version : 1.1.2 + // Repo : https://github.com/matthieua/WOW + // Website : http://mynameismatthieu.com/wow - 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; - }; + var MutationObserver, + Util, + WeakMap, + getComputedStyle, + getComputedStyleRX, + indexOf = [].indexOf; - 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 = function () { + function Util() { + _classCallCheck(this, Util); + } - Util.prototype.addEvent = function(elem, event, fn) { - if (elem.addEventListener != null) { - return elem.addEventListener(event, fn, false); - } else if (elem.attachEvent != null) { - return elem.attachEvent("on" + event, fn); - } else { - return elem[event] = fn; + _createClass(Util, [{ + key: 'extend', + value: function extend(custom, defaults) { + var key, value; + for (key in defaults) { + value = defaults[key]; + if (custom[key] == null) { + custom[key] = value; + } + } + return custom; + } + }, { + key: 'isMobile', + value: function isMobile(agent) { + return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent) + ); + } + }, { + key: 'createEvent', + value: function createEvent(event) { + var bubble = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + var cancel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + var detail = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null; + + var customEvent; + 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; // IE DOM < 9 + // W3C DOM + } + return customEvent; + } + }, { + key: 'emitEvent', + value: function emitEvent(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](); // W3C DOM + } } - }; - - Util.prototype.removeEvent = function(elem, event, fn) { - if (elem.removeEventListener != null) { - return elem.removeEventListener(event, fn, false); - } else if (elem.detachEvent != null) { - return elem.detachEvent("on" + event, fn); - } else { - return delete elem[event]; + }, { + key: 'addEvent', + value: function addEvent(elem, event, fn) { + if (elem.addEventListener != null) { + return elem.addEventListener(event, fn, false); + } else if (elem.attachEvent != null) { + return elem.attachEvent('on' + event, fn); // fallback + } else { + return elem[event] = fn; // IE DOM + // W3C DOM + } } - }; - - Util.prototype.innerHeight = function() { - if ('innerHeight' in window) { - return window.innerHeight; - } else { - return document.documentElement.clientHeight; + }, { + key: 'removeEvent', + value: function removeEvent(elem, event, fn) { + if (elem.removeEventListener != null) { + return elem.removeEventListener(event, fn, false); + } else if (elem.detachEvent != null) { + return elem.detachEvent('on' + event, fn); // fallback + } else { + return delete elem[event]; // IE DOM + // W3C DOM + } } - }; + }, { + key: 'innerHeight', + value: function innerHeight() { + if ('innerHeight' in window) { + return window.innerHeight; + } else { + return document.documentElement.clientHeight; + } + } + }]); return Util; + }(); - })(); - - WeakMap = this.WeakMap || this.MozWeakMap || (WeakMap = (function() { + // Minimalistic WeakMap shim, just in case. + WeakMap = this.WeakMap || this.MozWeakMap || (WeakMap = function () { function WeakMap() { + _classCallCheck(this, WeakMap); + this.keys = []; this.values = []; } - WeakMap.prototype.get = function(key) { - 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]; + _createClass(WeakMap, [{ + key: 'get', + value: function get(key) { + 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, 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; + }, { + key: 'set', + value: function set(key, value) { + 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; + } } + this.keys.push(key); + return this.values.push(value); } - this.keys.push(key); - return this.values.push(value); - }; + }]); return WeakMap; + }()); - })()); + // Dummy MutationObserver, to avoid raising exceptions. + MutationObserver = this.MutationObserver || this.WebkitMutationObserver || this.MozMutationObserver || (MutationObserver = function () { + var MutationObserver = function () { + function MutationObserver() { + _classCallCheck(this, MutationObserver); - MutationObserver = this.MutationObserver || this.WebkitMutationObserver || this.MozMutationObserver || (MutationObserver = (function() { - function MutationObserver() { - if (typeof console !== "undefined" && console !== null) { - console.warn('MutationObserver is not supported by your browser.'); - } - if (typeof console !== "undefined" && console !== null) { - console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.'); + if (typeof console !== "undefined" && console !== null) { + console.warn('MutationObserver is not supported by your browser.'); + } + if (typeof console !== "undefined" && console !== null) { + console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.'); + } } - } - MutationObserver.notSupported = true; + _createClass(MutationObserver, [{ + key: 'observe', + value: function observe() {} + }]); - MutationObserver.prototype.observe = function() {}; + return MutationObserver; + }(); - return MutationObserver; + ; - })()); + MutationObserver.notSupported = true; + + return MutationObserver; + }.call(this)); - getComputedStyle = this.getComputedStyle || function(el, pseudo) { - this.getPropertyValue = function(prop) { + // getComputedStyle shim, from http://stackoverflow.com/a/21797294 + getComputedStyle = this.getComputedStyle || function (el, pseudo) { + this.getPropertyValue = function (prop) { var ref; if (prop === 'float') { prop = 'styleFloat'; } if (getComputedStyleRX.test(prop)) { - prop.replace(getComputedStyleRX, function(_, _char) { + prop.replace(getComputedStyleRX, function (_, _char) { return _char.toUpperCase(); }); } @@ -157,357 +199,404 @@ getComputedStyleRX = /(\-([a-z]){1})/g; - this.WOW = (function() { - WOW.prototype.defaults = { - boxClass: 'wow', - animateClass: 'animated', - offset: 0, - mobile: true, - live: true, - callback: null, - scrollContainer: null - }; - - function WOW(options) { - if (options == null) { - options = {}; - } - this.scrollCallback = bind(this.scrollCallback, this); - this.scrollHandler = bind(this.scrollHandler, this); - this.resetAnimation = bind(this.resetAnimation, this); - this.start = bind(this.start, this); - this.scrolled = true; - this.config = this.util().extend(options, this.defaults); - if (options.scrollContainer != null) { - this.config.scrollContainer = document.querySelector(options.scrollContainer); - } - this.animationNameCache = new WeakMap(); - this.wowEvent = this.util().createEvent(this.config.boxClass); - } - - WOW.prototype.init = function() { - var ref; - this.element = window.document.documentElement; - if ((ref = document.readyState) === "interactive" || ref === "complete") { - this.start(); - } else { - this.util().addEvent(document, 'DOMContentLoaded', this.start); - } - return this.finished = []; - }; - - WOW.prototype.start = function() { - var box, j, len, ref; - this.stopped = false; - this.boxes = (function() { - 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; - }).call(this); - this.all = (function() { - 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; - }).call(this); - if (this.boxes.length) { - if (this.disabled()) { - this.resetStyle(); - } else { - ref = this.boxes; - for (j = 0, len = ref.length; j < len; j++) { - box = ref[j]; - this.applyStyle(box, true); + this.WOW = function () { + var WOW = function () { + function WOW() { + var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + + _classCallCheck(this, WOW); + + this.start = this.start.bind(this); + this.resetAnimation = this.resetAnimation.bind(this); + // fast window.scroll callback + this.scrollHandler = this.scrollHandler.bind(this); + this.scrollCallback = this.scrollCallback.bind(this); + this.scrolled = true; + this.config = this.util().extend(options, this.defaults); + if (options.scrollContainer != null) { + this.config.scrollContainer = document.querySelector(options.scrollContainer); + } + // Map of elements to animation names: + this.animationNameCache = new WeakMap(); + this.wowEvent = this.util().createEvent(this.config.boxClass); + } + + _createClass(WOW, [{ + key: 'init', + value: function init() { + var ref; + this.element = window.document.documentElement; + if ((ref = document.readyState) === "interactive" || ref === "complete") { + this.start(); + } else { + this.util().addEvent(document, 'DOMContentLoaded', this.start); } + return this.finished = []; } - } - if (!this.disabled()) { - this.util().addEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler); - this.util().addEvent(window, 'resize', this.scrollHandler); - this.interval = setInterval(this.scrollCallback, 50); - } - if (this.config.live) { - return new MutationObserver((function(_this) { - return function(records) { - var k, len1, node, record, results; + }, { + key: 'start', + value: function start() { + var _this = this; + + var box, j, len, ref; + this.stopped = false; + this.boxes = function () { + var j, len, ref, results; + ref = this.element.querySelectorAll('.' + this.config.boxClass); 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; - }).call(_this)); + for (j = 0, len = ref.length; j < len; j++) { + box = ref[j]; + results.push(box); } return results; - }; - })(this)).observe(document.body, { - childList: true, - subtree: true - }); - } - }; - - WOW.prototype.stop = function() { - this.stopped = true; - this.util().removeEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler); - this.util().removeEvent(window, 'resize', this.scrollHandler); - if (this.interval != null) { - return clearInterval(this.interval); - } - }; - - WOW.prototype.sync = function(element) { - if (MutationObserver.notSupported) { - return this.doSync(this.element); - } - }; - - WOW.prototype.doSync = function(element) { - 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 (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); + }.call(this); + this.all = function () { + 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; + }.call(this); + if (this.boxes.length) { + if (this.disabled()) { + this.resetStyle(); + } else { + ref = this.boxes; + for (j = 0, len = ref.length; j < len; j++) { + box = ref[j]; + this.applyStyle(box, true); + } + } + } + if (!this.disabled()) { + this.util().addEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler); + this.util().addEvent(window, 'resize', this.scrollHandler); + this.interval = setInterval(this.scrollCallback, 50); + } + if (this.config.live) { + return new MutationObserver(function (records) { + 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; + }.call(_this)); + } + return results; + }).observe(document.body, { + childList: true, + subtree: true + }); } - results.push(this.scrolled = true); - } else { - results.push(void 0); } - } - return results; - }; - WOW.prototype.show = function(box) { - this.applyStyle(box); - box.className = box.className + " " + this.config.animateClass; - if (this.config.callback != null) { - 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; - }; + // unbind the scroll event - WOW.prototype.applyStyle = function(box, hidden) { - var delay, duration, iteration; - duration = box.getAttribute('data-wow-duration'); - delay = box.getAttribute('data-wow-delay'); - iteration = box.getAttribute('data-wow-iteration'); - return this.animate((function(_this) { - return function() { - return _this.customStyle(box, hidden, duration, delay, iteration); - }; - })(this)); - }; - - WOW.prototype.animate = (function() { - if ('requestAnimationFrame' in window) { - return function(callback) { - return window.requestAnimationFrame(callback); - }; - } else { - return function(callback) { - return callback(); - }; - } - })(); - - WOW.prototype.resetStyle = function() { - 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(this.config.animateClass, '').trim(); - } - }; - - WOW.prototype.customStyle = function(box, hidden, duration, delay, iteration) { - if (hidden) { - this.cacheAnimationName(box); - } - box.style.visibility = hidden ? 'hidden' : 'visible'; - if (duration) { - this.vendorSet(box.style, { - animationDuration: duration - }); - } - if (delay) { - this.vendorSet(box.style, { - animationDelay: delay - }); - } - if (iteration) { - this.vendorSet(box.style, { - animationIterationCount: iteration - }); - } - this.vendorSet(box.style, { - animationName: hidden ? 'none' : this.cachedAnimationName(box) - }); - return box; - }; - - WOW.prototype.vendors = ["moz", "webkit"]; - - WOW.prototype.vendorSet = function(elem, properties) { - var name, results, value, vendor; - results = []; - for (name in properties) { - value = properties[name]; - elem["" + name] = value; - results.push((function() { - var j, len, ref, results1; - ref = this.vendors; - results1 = []; + }, { + key: 'stop', + value: function stop() { + this.stopped = true; + this.util().removeEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler); + this.util().removeEvent(window, 'resize', this.scrollHandler); + if (this.interval != null) { + return clearInterval(this.interval); + } + } + }, { + key: 'sync', + value: function sync(element) { + if (MutationObserver.notSupported) { + return this.doSync(this.element); + } + } + }, { + key: 'doSync', + value: function doSync(element) { + 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 (j = 0, len = ref.length; j < len; j++) { - vendor = ref[j]; - results1.push(elem["" + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value); + 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); + } else { + results.push(void 0); + } } - return results1; - }).call(this)); - } - return results; - }; - - WOW.prototype.vendorCSS = function(elem, property) { - var j, len, ref, result, style, vendor; - style = getComputedStyle(elem); - result = style.getPropertyCSSValue(property); - ref = this.vendors; - for (j = 0, len = ref.length; j < len; j++) { - vendor = ref[j]; - result = result || style.getPropertyCSSValue("-" + vendor + "-" + property); - } - return result; - }; - - WOW.prototype.animationName = function(box) { - var animationName, error; - try { - animationName = this.vendorCSS(box, 'animation-name').cssText; - } catch (error) { - animationName = getComputedStyle(box).getPropertyValue('animation-name'); - } - if (animationName === 'none') { - return ''; - } else { - return animationName; - } - }; - - WOW.prototype.cacheAnimationName = function(box) { - return this.animationNameCache.set(box, this.animationName(box)); - }; - - WOW.prototype.cachedAnimationName = function(box) { - return this.animationNameCache.get(box); - }; + return results; + } - WOW.prototype.scrollHandler = function() { - return this.scrolled = true; - }; + // show box element - WOW.prototype.scrollCallback = function() { - var box; - if (this.scrolled) { - this.scrolled = false; - this.boxes = (function() { - var j, len, ref, results; + }, { + key: 'show', + value: function show(box) { + this.applyStyle(box); + box.className = box.className + ' ' + this.config.animateClass; + if (this.config.callback != null) { + 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; + } + }, { + key: 'applyStyle', + value: function applyStyle(box, hidden) { + var _this2 = this; + + var delay, duration, iteration; + duration = box.getAttribute('data-wow-duration'); + delay = box.getAttribute('data-wow-delay'); + iteration = box.getAttribute('data-wow-iteration'); + return this.animate(function () { + return _this2.customStyle(box, hidden, duration, delay, iteration); + }); + } + }, { + key: 'resetStyle', + value: function resetStyle() { + var box, 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.style.opacity = 1); } return results; - }).call(this); - if (!(this.boxes.length || this.config.live)) { - return this.stop(); } - } - }; + }, { + key: 'resetAnimation', + value: function resetAnimation(event) { + var target; + if (event.type.toLowerCase().indexOf('animationend') >= 0) { + target = event.target || event.srcElement; + return target.className = target.className.replace(this.config.animateClass, '').trim(); + } + } + }, { + key: 'customStyle', + value: function customStyle(box, hidden, duration, delay, iteration) { + if (hidden) { + this.cacheAnimationName(box); + } + box.style.opacity = 0 ? 0 : 1; + if (duration) { + this.vendorSet(box.style, { + animationDuration: duration + }); + } + if (delay) { + this.vendorSet(box.style, { + animationDelay: delay + }); + } + if (iteration) { + this.vendorSet(box.style, { + animationIterationCount: iteration + }); + } + this.vendorSet(box.style, { + animationName: hidden ? 'none' : this.cachedAnimationName(box) + }); + return box; + } + }, { + key: 'vendorSet', + value: function vendorSet(elem, properties) { + var name, results, value, vendor; + results = []; + for (name in properties) { + value = properties[name]; + elem['' + name] = 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; + }.call(this)); + } + return results; + } + }, { + key: 'vendorCSS', + value: function vendorCSS(elem, property) { + var j, len, ref, result, style, vendor; + style = getComputedStyle(elem); + result = style.getPropertyCSSValue(property); + ref = this.vendors; + for (j = 0, len = ref.length; j < len; j++) { + vendor = ref[j]; + result = result || style.getPropertyCSSValue('-' + vendor + '-' + property); + } + return result; + } + }, { + key: 'animationName', + value: function animationName(box) { + var animationName; + try { + animationName = this.vendorCSS(box, 'animation-name').cssText; // Opera, fall back to plain property value + } catch (error) { + animationName = getComputedStyle(box).getPropertyValue('animation-name'); + } + if (animationName === 'none') { + return ''; // SVG/Firefox, unable to get animation name? + } else { + return animationName; + } + } + }, { + key: 'cacheAnimationName', + value: function cacheAnimationName(box) { + // https://bugzilla.mozilla.org/show_bug.cgi?id=921834 + // box.dataset is not supported for SVG elements in Firefox + return this.animationNameCache.set(box, this.animationName(box)); + } + }, { + key: 'cachedAnimationName', + value: function cachedAnimationName(box) { + return this.animationNameCache.get(box); + } + }, { + key: 'scrollHandler', + value: function scrollHandler() { + return this.scrolled = true; + } + }, { + key: 'scrollCallback', + value: function scrollCallback() { + var box; + if (this.scrolled) { + this.scrolled = false; + this.boxes = function () { + 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); + } + return results; + }.call(this); + if (!(this.boxes.length || this.config.live)) { + return this.stop(); + } + } + } - WOW.prototype.offsetTop = function(element) { - var top; - while (element.offsetTop === void 0) { - element = element.parentNode; - } - top = element.offsetTop; - while (element = element.offsetParent) { - top += element.offsetTop; - } - return top; - }; + // Calculate element offset top + + }, { + key: 'offsetTop', + value: function offsetTop(element) { + var top; + while (element.offsetTop === void 0) { + // SVG elements don't have an offsetTop in Firefox. + // This will use their nearest parent that has an offsetTop. + // Also, using ('offsetTop' of element) causes an exception in Firefox. + element = element.parentNode; + } + top = element.offsetTop; + while (element = element.offsetParent) { + top += element.offsetTop; + } + return top; + } - WOW.prototype.isVisible = function(box) { - var bottom, offset, top, viewBottom, viewTop; - offset = box.getAttribute('data-wow-offset') || this.config.offset; - viewTop = (this.config.scrollContainer && this.config.scrollContainer.scrollTop) || window.pageYOffset; - viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset; - top = this.offsetTop(box); - bottom = top + box.clientHeight; - return top <= viewBottom && bottom >= viewTop; - }; + // check if box is visible + + }, { + key: 'isVisible', + value: function isVisible(box) { + var bottom, offset, top, viewBottom, viewTop; + offset = box.getAttribute('data-wow-offset') || this.config.offset; + viewTop = this.config.scrollContainer && this.config.scrollContainer.scrollTop || window.pageYOffset; + viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset; + top = this.offsetTop(box); + bottom = top + box.clientHeight; + return top <= viewBottom && bottom >= viewTop; + } + }, { + key: 'util', + value: function util() { + return this._util != null ? this._util : this._util = new Util(); + } + }, { + key: 'disabled', + value: function disabled() { + return !this.config.mobile && this.util().isMobile(navigator.userAgent); + } + }]); - WOW.prototype.util = function() { - return this._util != null ? this._util : this._util = new Util(); - }; + return WOW; + }(); + + ; - WOW.prototype.disabled = function() { - return !this.config.mobile && this.util().isMobile(navigator.userAgent); + WOW.prototype.defaults = { + boxClass: 'wow', + animateClass: 'animated', + offset: 0, + mobile: true, + live: true, + callback: null, + scrollContainer: null }; - return WOW; + WOW.prototype.animate = function () { + if ('requestAnimationFrame' in window) { + return function (callback) { + return window.requestAnimationFrame(callback); + }; + } else { + return function (callback) { + return callback(); + }; + } + }(); - })(); + WOW.prototype.vendors = ["moz", "webkit"]; -}).call(this); + return WOW; + }.call(this); +}).call(undefined); diff --git a/dist/wow.min.js b/dist/wow.min.js old mode 100644 new mode 100755 index 0a646f2..b7a8f46 --- a/dist/wow.min.js +++ b/dist/wow.min.js @@ -1,2 +1,40 @@ /*! WOW - v1.1.3 - 2016-05-06 -* Copyright (c) 2016 Matthieu Aussaguel;*/(function(){var a,b,c,d,e,f=function(a,b){return function(){return a.apply(b,arguments)}},g=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};b=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in b)d=b[c],null==a[c]&&(a[c]=d);return a},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a.prototype.createEvent=function(a,b,c,d){var e;return null==b&&(b=!1),null==c&&(c=!1),null==d&&(d=null),null!=document.createEvent?(e=document.createEvent("CustomEvent"),e.initCustomEvent(a,b,c,d)):null!=document.createEventObject?(e=document.createEventObject(),e.eventType=a):e.eventName=a,e},a.prototype.emitEvent=function(a,b){return null!=a.dispatchEvent?a.dispatchEvent(b):b in(null!=a)?a[b]():"on"+b in(null!=a)?a["on"+b]():void 0},a.prototype.addEvent=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent("on"+b,c):a[b]=c},a.prototype.removeEvent=function(a,b,c){return null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent("on"+b,c):delete a[b]},a.prototype.innerHeight=function(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight},a}(),c=this.WeakMap||this.MozWeakMap||(c=function(){function a(){this.keys=[],this.values=[]}return a.prototype.get=function(a){var b,c,d,e,f;for(f=this.keys,b=d=0,e=f.length;e>d;b=++d)if(c=f[b],c===a)return this.values[b]},a.prototype.set=function(a,b){var c,d,e,f,g;for(g=this.keys,c=e=0,f=g.length;f>e;c=++e)if(d=g[c],d===a)return void(this.values[c]=b);return this.keys.push(a),this.values.push(b)},a}()),a=this.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(a=function(){function a(){"undefined"!=typeof console&&null!==console&&console.warn("MutationObserver is not supported by your browser."),"undefined"!=typeof console&&null!==console&&console.warn("WOW.js cannot detect dom mutations, please call .sync() after loading new content.")}return a.notSupported=!0,a.prototype.observe=function(){},a}()),d=this.getComputedStyle||function(a,b){return this.getPropertyValue=function(b){var c;return"float"===b&&(b="styleFloat"),e.test(b)&&b.replace(e,function(a,b){return b.toUpperCase()}),(null!=(c=a.currentStyle)?c[b]:void 0)||null},this},e=/(\-([a-z]){1})/g,this.WOW=function(){function e(a){null==a&&(a={}),this.scrollCallback=f(this.scrollCallback,this),this.scrollHandler=f(this.scrollHandler,this),this.resetAnimation=f(this.resetAnimation,this),this.start=f(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults),null!=a.scrollContainer&&(this.config.scrollContainer=document.querySelector(a.scrollContainer)),this.animationNameCache=new c,this.wowEvent=this.util().createEvent(this.config.boxClass)}return e.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0,live:!0,callback:null,scrollContainer:null},e.prototype.init=function(){var a;return this.element=window.document.documentElement,"interactive"===(a=document.readyState)||"complete"===a?this.start():this.util().addEvent(document,"DOMContentLoaded",this.start),this.finished=[]},e.prototype.start=function(){var b,c,d,e;if(this.stopped=!1,this.boxes=function(){var a,c,d,e;for(d=this.element.querySelectorAll("."+this.config.boxClass),e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.all=function(){var a,c,d,e;for(d=this.boxes,e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else for(e=this.boxes,c=0,d=e.length;d>c;c++)b=e[c],this.applyStyle(b,!0);return this.disabled()||(this.util().addEvent(this.config.scrollContainer||window,"scroll",this.scrollHandler),this.util().addEvent(window,"resize",this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)),this.config.live?new a(function(a){return function(b){var c,d,e,f,g;for(g=[],c=0,d=b.length;d>c;c++)f=b[c],g.push(function(){var a,b,c,d;for(c=f.addedNodes||[],d=[],a=0,b=c.length;b>a;a++)e=c[a],d.push(this.doSync(e));return d}.call(a));return g}}(this)).observe(document.body,{childList:!0,subtree:!0}):void 0},e.prototype.stop=function(){return this.stopped=!0,this.util().removeEvent(this.config.scrollContainer||window,"scroll",this.scrollHandler),this.util().removeEvent(window,"resize",this.scrollHandler),null!=this.interval?clearInterval(this.interval):void 0},e.prototype.sync=function(b){return a.notSupported?this.doSync(this.element):void 0},e.prototype.doSync=function(a){var b,c,d,e,f;if(null==a&&(a=this.element),1===a.nodeType){for(a=a.parentNode||a,e=a.querySelectorAll("."+this.config.boxClass),f=[],c=0,d=e.length;d>c;c++)b=e[c],g.call(this.all,b)<0?(this.boxes.push(b),this.all.push(b),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(b,!0),f.push(this.scrolled=!0)):f.push(void 0);return f}},e.prototype.show=function(a){return this.applyStyle(a),a.className=a.className+" "+this.config.animateClass,null!=this.config.callback&&this.config.callback(a),this.util().emitEvent(a,this.wowEvent),this.util().addEvent(a,"animationend",this.resetAnimation),this.util().addEvent(a,"oanimationend",this.resetAnimation),this.util().addEvent(a,"webkitAnimationEnd",this.resetAnimation),this.util().addEvent(a,"MSAnimationEnd",this.resetAnimation),a},e.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute("data-wow-duration"),c=a.getAttribute("data-wow-delay"),e=a.getAttribute("data-wow-iteration"),this.animate(function(f){return function(){return f.customStyle(a,b,d,c,e)}}(this))},e.prototype.animate=function(){return"requestAnimationFrame"in window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),e.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(a.style.visibility="visible");return e},e.prototype.resetAnimation=function(a){var b;return a.type.toLowerCase().indexOf("animationend")>=0?(b=a.target||a.srcElement,b.className=b.className.replace(this.config.animateClass,"").trim()):void 0},e.prototype.customStyle=function(a,b,c,d,e){return b&&this.cacheAnimationName(a),a.style.visibility=b?"hidden":"visible",c&&this.vendorSet(a.style,{animationDuration:c}),d&&this.vendorSet(a.style,{animationDelay:d}),e&&this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?"none":this.cachedAnimationName(a)}),a},e.prototype.vendors=["moz","webkit"],e.prototype.vendorSet=function(a,b){var c,d,e,f;d=[];for(c in b)e=b[c],a[""+c]=e,d.push(function(){var b,d,g,h;for(g=this.vendors,h=[],b=0,d=g.length;d>b;b++)f=g[b],h.push(a[""+f+c.charAt(0).toUpperCase()+c.substr(1)]=e);return h}.call(this));return d},e.prototype.vendorCSS=function(a,b){var c,e,f,g,h,i;for(h=d(a),g=h.getPropertyCSSValue(b),f=this.vendors,c=0,e=f.length;e>c;c++)i=f[c],g=g||h.getPropertyCSSValue("-"+i+"-"+b);return g},e.prototype.animationName=function(a){var b;try{b=this.vendorCSS(a,"animation-name").cssText}catch(c){b=d(a).getPropertyValue("animation-name")}return"none"===b?"":b},e.prototype.cacheAnimationName=function(a){return this.animationNameCache.set(a,this.animationName(a))},e.prototype.cachedAnimationName=function(a){return this.animationNameCache.get(a)},e.prototype.scrollHandler=function(){return this.scrolled=!0},e.prototype.scrollCallback=function(){var a;return!this.scrolled||(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],a&&(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),this.boxes.length||this.config.live)?void 0:this.stop()},e.prototype.offsetTop=function(a){for(var b;void 0===a.offsetTop;)a=a.parentNode;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},e.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute("data-wow-offset")||this.config.offset,f=this.config.scrollContainer&&this.config.scrollContainer.scrollTop||window.pageYOffset,e=f+Math.min(this.element.clientHeight,this.util().innerHeight())-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},e.prototype.util=function(){return null!=this._util?this._util:this._util=new b},e.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},e}()}).call(this); \ No newline at end of file +* Copyright (c) 2016 Matthieu Aussaguel;*/'use strict';var _createClass=function(){function defineProperties(target,props){for(var i=0;i1&&arguments[1]!==undefined?arguments[1]:false;var cancel=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;var detail=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null;var customEvent;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;}},{key:'emitEvent',value:function emitEvent(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]();}}},{key:'addEvent',value:function addEvent(elem,event,fn){if(elem.addEventListener!=null){return elem.addEventListener(event,fn,false);}else if(elem.attachEvent!=null){return elem.attachEvent('on'+event,fn);}else{return elem[event]=fn;}}},{key:'removeEvent',value:function removeEvent(elem,event,fn){if(elem.removeEventListener!=null){return elem.removeEventListener(event,fn,false);}else if(elem.detachEvent!=null){return elem.detachEvent('on'+event,fn);}else{return delete elem[event];}}},{key:'innerHeight',value:function innerHeight(){if('innerHeight'in window){return window.innerHeight;}else{return document.documentElement.clientHeight;}}}]);return Util;}();WeakMap=this.WeakMap||this.MozWeakMap||(WeakMap=function(){function WeakMap(){_classCallCheck(this,WeakMap);this.keys=[];this.values=[];} +_createClass(WeakMap,[{key:'get',value:function get(key){var i,item,j,len,ref;ref=this.keys;for(i=j=0,len=ref.length;j0&&arguments[0]!==undefined?arguments[0]:{};_classCallCheck(this,WOW);this.start=this.start.bind(this);this.resetAnimation=this.resetAnimation.bind(this);this.scrollHandler=this.scrollHandler.bind(this);this.scrollCallback=this.scrollCallback.bind(this);this.scrolled=true;this.config=this.util().extend(options,this.defaults);if(options.scrollContainer!=null){this.config.scrollContainer=document.querySelector(options.scrollContainer);} +this.animationNameCache=new WeakMap();this.wowEvent=this.util().createEvent(this.config.boxClass);} +_createClass(WOW,[{key:'init',value:function init(){var ref;this.element=window.document.documentElement;if((ref=document.readyState)==="interactive"||ref==="complete"){this.start();}else{this.util().addEvent(document,'DOMContentLoaded',this.start);} +return this.finished=[];}},{key:'start',value:function start(){var _this=this;var box,j,len,ref;this.stopped=false;this.boxes=function(){var j,len,ref,results;ref=this.element.querySelectorAll('.'+this.config.boxClass);results=[];for(j=0,len=ref.length;j=0){target=event.target||event.srcElement;return target.className=target.className.replace(this.config.animateClass,'').trim();}}},{key:'customStyle',value:function customStyle(box,hidden,duration,delay,iteration){if(hidden){this.cacheAnimationName(box);} +box.style.opacity=0?0:1;if(duration){this.vendorSet(box.style,{animationDuration:duration});} +if(delay){this.vendorSet(box.style,{animationDelay:delay});} +if(iteration){this.vendorSet(box.style,{animationIterationCount:iteration});} +this.vendorSet(box.style,{animationName:hidden?'none':this.cachedAnimationName(box)});return box;}},{key:'vendorSet',value:function vendorSet(elem,properties){var name,results,value,vendor;results=[];for(name in properties){value=properties[name];elem[''+name]=value;results.push(function(){var j,len,ref,results1;ref=this.vendors;results1=[];for(j=0,len=ref.length;j=viewTop;}},{key:'util',value:function util(){return this._util!=null?this._util:this._util=new Util();}},{key:'disabled',value:function disabled(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent);}}]);return WOW;}();;WOW.prototype.defaults={boxClass:'wow',animateClass:'animated',offset:0,mobile:true,live:true,callback:null,scrollContainer:null};WOW.prototype.animate=function(){if('requestAnimationFrame'in window){return function(callback){return window.requestAnimationFrame(callback);};}else{return function(callback){return callback();};}}();WOW.prototype.vendors=["moz","webkit"];return WOW;}.call(this);}).call(undefined); \ No newline at end of file diff --git a/src/wow.coffee b/src/wow.coffee old mode 100644 new mode 100755 index 7acea88..ba35354 --- a/src/wow.coffee +++ b/src/wow.coffee @@ -202,7 +202,7 @@ class @WOW )() resetStyle: -> - box.style.visibility = 'visible' for box in @boxes + box.style.opacity = 1 for box in @boxes resetAnimation: (event) => if event.type.toLowerCase().indexOf('animationend') >= 0 @@ -211,7 +211,7 @@ class @WOW customStyle: (box, hidden, duration, delay, iteration) -> @cacheAnimationName(box) if hidden - box.style.visibility = if hidden then 'hidden' else 'visible' + box.style.opacity = if 0 then 0 else 1 @vendorSet box.style, animationDuration: duration if duration @vendorSet box.style, animationDelay: delay if delay