123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542 |
- /*
- * WOW wow.js - v1.3.0 - 2016-10-04
- * https://wowjs.uk
- * Copyright (c) 2016 Thomas Grainger; Licensed MIT
- */
- (function (global, factory) {
- if (typeof define === "function" && define.amd) {
- define(['module', 'exports'], factory);
- } else if (typeof exports !== "undefined") {
- factory(module, exports);
- } else {
- var mod = {
- exports: {}
- };
- factory(mod, mod.exports);
- global.WOW = mod.exports;
- }
- })(this, function (module, exports) {
- 'use strict';
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- var _class, _temp;
- function _classCallCheck(instance, Constructor) {
- if (!(instance instanceof Constructor)) {
- throw new TypeError("Cannot call a class as a function");
- }
- }
- 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;
- };
- }();
- function isIn(needle, haystack) {
- return haystack.indexOf(needle) >= 0;
- }
- function extend(custom, defaults) {
- for (var key in defaults) {
- if (custom[key] == null) {
- var value = defaults[key];
- custom[key] = value;
- }
- }
- return custom;
- }
- function isMobile(agent) {
- return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent)
- );
- }
- function createEvent(event) {
- var bubble = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];
- var cancel = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
- var detail = arguments.length <= 3 || arguments[3] === undefined ? null : arguments[3];
- var customEvent = void 0;
- if (document.createEvent != null) {
- // W3C DOM
- customEvent = document.createEvent('CustomEvent');
- customEvent.initCustomEvent(event, bubble, cancel, detail);
- } else if (document.createEventObject != null) {
- // IE DOM < 9
- customEvent = document.createEventObject();
- customEvent.eventType = event;
- } else {
- customEvent.eventName = event;
- }
- return customEvent;
- }
- function emitEvent(elem, event) {
- if (elem.dispatchEvent != null) {
- // W3C DOM
- elem.dispatchEvent(event);
- } else if (event in (elem != null)) {
- elem[event]();
- } else if ('on' + event in (elem != null)) {
- elem['on' + event]();
- }
- }
- function addEvent(elem, event, fn) {
- if (elem.addEventListener != null) {
- // W3C DOM
- elem.addEventListener(event, fn, false);
- } else if (elem.attachEvent != null) {
- // IE DOM
- elem.attachEvent('on' + event, fn);
- } else {
- // fallback
- elem[event] = fn;
- }
- }
- function removeEvent(elem, event, fn) {
- if (elem.removeEventListener != null) {
- // W3C DOM
- elem.removeEventListener(event, fn, false);
- } else if (elem.detachEvent != null) {
- // IE DOM
- elem.detachEvent('on' + event, fn);
- } else {
- // fallback
- delete elem[event];
- }
- }
- function getInnerHeight() {
- if ('innerHeight' in window) {
- return window.innerHeight;
- }
- return document.documentElement.clientHeight;
- }
- // Minimalistic WeakMap shim, just in case.
- var WeakMap = window.WeakMap || window.MozWeakMap || function () {
- function WeakMap() {
- _classCallCheck(this, WeakMap);
- this.keys = [];
- this.values = [];
- }
- _createClass(WeakMap, [{
- key: 'get',
- value: function get(key) {
- for (var i = 0; i < this.keys.length; i++) {
- var item = this.keys[i];
- if (item === key) {
- return this.values[i];
- }
- }
- return undefined;
- }
- }, {
- key: 'set',
- value: function set(key, value) {
- for (var i = 0; i < this.keys.length; i++) {
- var item = this.keys[i];
- if (item === key) {
- this.values[i] = value;
- return this;
- }
- }
- this.keys.push(key);
- this.values.push(value);
- return this;
- }
- }]);
- return WeakMap;
- }();
- // Dummy MutationObserver, to avoid raising exceptions.
- var MutationObserver = window.MutationObserver || window.WebkitMutationObserver || window.MozMutationObserver || (_temp = _class = function () {
- function MutationObserver() {
- _classCallCheck(this, MutationObserver);
- if (typeof console !== 'undefined' && console !== null) {
- console.warn('MutationObserver is not supported by your browser.');
- console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.');
- }
- }
- _createClass(MutationObserver, [{
- key: 'observe',
- value: function observe() {}
- }]);
- return MutationObserver;
- }(), _class.notSupported = true, _temp);
- // getComputedStyle shim, from http://stackoverflow.com/a/21797294
- var getComputedStyle = window.getComputedStyle || function getComputedStyle(el) {
- var getComputedStyleRX = /(\-([a-z]){1})/g;
- return {
- getPropertyValue: function getPropertyValue(prop) {
- if (prop === 'float') {
- prop = 'styleFloat';
- }
- if (getComputedStyleRX.test(prop)) {
- prop.replace(getComputedStyleRX, function (_, _char) {
- return _char.toUpperCase();
- });
- }
- var currentStyle = el.currentStyle;
- return (currentStyle != null ? currentStyle[prop] : void 0) || null;
- }
- };
- };
- var WOW = function () {
- function WOW() {
- var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
- _classCallCheck(this, WOW);
- this.defaults = {
- boxClass: 'wow',
- animateClass: 'animated',
- offset: 0,
- mobile: true,
- live: true,
- callback: null,
- scrollContainer: null,
- resetAnimation: true
- };
- this.animate = function animateFactory() {
- if ('requestAnimationFrame' in window) {
- return function (callback) {
- return window.requestAnimationFrame(callback);
- };
- }
- return function (callback) {
- return callback();
- };
- }();
- this.vendors = ['moz', 'webkit'];
- 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 = 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 = createEvent(this.config.boxClass);
- }
- _createClass(WOW, [{
- key: 'init',
- value: function init() {
- this.element = window.document.documentElement;
- if (isIn(document.readyState, ['interactive', 'complete'])) {
- this.start();
- } else {
- addEvent(document, 'DOMContentLoaded', this.start);
- }
- this.finished = [];
- }
- }, {
- key: 'start',
- value: function start() {
- var _this = this;
- this.stopped = false;
- this.boxes = [].slice.call(this.element.querySelectorAll('.' + this.config.boxClass));
- this.all = this.boxes.slice(0);
- if (this.boxes.length) {
- if (this.disabled()) {
- this.resetStyle();
- } else {
- for (var i = 0; i < this.boxes.length; i++) {
- var box = this.boxes[i];
- this.applyStyle(box, true);
- }
- }
- }
- if (!this.disabled()) {
- addEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
- addEvent(window, 'resize', this.scrollHandler);
- this.interval = setInterval(this.scrollCallback, 50);
- }
- if (this.config.live) {
- var mut = new MutationObserver(function (records) {
- for (var j = 0; j < records.length; j++) {
- var record = records[j];
- for (var k = 0; k < record.addedNodes.length; k++) {
- var node = record.addedNodes[k];
- _this.doSync(node);
- }
- }
- return undefined;
- });
- mut.observe(document.body, {
- childList: true,
- subtree: true
- });
- }
- }
- }, {
- key: 'stop',
- value: function stop() {
- this.stopped = true;
- removeEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
- removeEvent(window, 'resize', this.scrollHandler);
- if (this.interval != null) {
- clearInterval(this.interval);
- }
- }
- }, {
- key: 'sync',
- value: function sync() {
- if (MutationObserver.notSupported) {
- this.doSync(this.element);
- }
- }
- }, {
- key: 'doSync',
- value: function doSync(element) {
- if (typeof element === 'undefined' || element === null) {
- element = this.element;
- }
- if (element.nodeType !== 1) {
- return;
- }
- element = element.parentNode || element;
- var iterable = element.querySelectorAll('.' + this.config.boxClass);
- for (var i = 0; i < iterable.length; i++) {
- var box = iterable[i];
- if (!isIn(box, this.all)) {
- this.boxes.push(box);
- this.all.push(box);
- if (this.stopped || this.disabled()) {
- this.resetStyle();
- } else {
- this.applyStyle(box, true);
- }
- this.scrolled = true;
- }
- }
- }
- }, {
- 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);
- }
- emitEvent(box, this.wowEvent);
- if (this.config.resetAnimation) {
- addEvent(box, 'animationend', this.resetAnimation);
- addEvent(box, 'oanimationend', this.resetAnimation);
- addEvent(box, 'webkitAnimationEnd', this.resetAnimation);
- addEvent(box, 'MSAnimationEnd', this.resetAnimation);
- }
- return box;
- }
- }, {
- key: 'applyStyle',
- value: function applyStyle(box, hidden) {
- var _this2 = this;
- var duration = box.getAttribute('data-wow-duration');
- var delay = box.getAttribute('data-wow-delay');
- var iteration = box.getAttribute('data-wow-iteration');
- return this.animate(function () {
- return _this2.customStyle(box, hidden, duration, delay, iteration);
- });
- }
- }, {
- key: 'resetStyle',
- value: function resetStyle() {
- for (var i = 0; i < this.boxes.length; i++) {
- var box = this.boxes[i];
- box.style.visibility = 'visible';
- }
- return undefined;
- }
- }, {
- key: 'resetAnimation',
- value: function resetAnimation(event) {
- if (event.type.toLowerCase().indexOf('animationend') >= 0) {
- var target = event.target || event.srcElement;
- 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.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;
- }
- }, {
- key: 'vendorSet',
- value: function vendorSet(elem, properties) {
- for (var name in properties) {
- if (properties.hasOwnProperty(name)) {
- var value = properties[name];
- elem['' + name] = value;
- for (var i = 0; i < this.vendors.length; i++) {
- var vendor = this.vendors[i];
- elem['' + vendor + name.charAt(0).toUpperCase() + name.substr(1)] = value;
- }
- }
- }
- }
- }, {
- key: 'vendorCSS',
- value: function vendorCSS(elem, property) {
- var style = getComputedStyle(elem);
- var result = style.getPropertyCSSValue(property);
- for (var i = 0; i < this.vendors.length; i++) {
- var vendor = this.vendors[i];
- result = result || style.getPropertyCSSValue('-' + vendor + '-' + property);
- }
- return result;
- }
- }, {
- key: 'animationName',
- value: function animationName(box) {
- var aName = void 0;
- try {
- aName = this.vendorCSS(box, 'animation-name').cssText;
- } catch (error) {
- // Opera, fall back to plain property value
- aName = getComputedStyle(box).getPropertyValue('animation-name');
- }
- if (aName === 'none') {
- return ''; // SVG/Firefox, unable to get animation name?
- }
- return aName;
- }
- }, {
- 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() {
- this.scrolled = true;
- }
- }, {
- key: 'scrollCallback',
- value: function scrollCallback() {
- if (this.scrolled) {
- this.scrolled = false;
- var results = [];
- for (var i = 0; i < this.boxes.length; i++) {
- var box = this.boxes[i];
- if (box) {
- if (this.isVisible(box)) {
- this.show(box);
- continue;
- }
- results.push(box);
- }
- }
- this.boxes = results;
- if (!this.boxes.length && !this.config.live) {
- this.stop();
- }
- }
- }
- }, {
- key: 'offsetTop',
- value: function offsetTop(element) {
- // 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.
- while (element.offsetTop === undefined) {
- element = element.parentNode;
- }
- var top = element.offsetTop;
- while (element.offsetParent) {
- element = element.offsetParent;
- top += element.offsetTop;
- }
- return top;
- }
- }, {
- key: 'isVisible',
- value: function isVisible(box) {
- var offset = box.getAttribute('data-wow-offset') || this.config.offset;
- var viewTop = this.config.scrollContainer && this.config.scrollContainer.scrollTop || window.pageYOffset;
- var viewBottom = viewTop + Math.min(this.element.clientHeight, getInnerHeight()) - offset;
- var top = this.offsetTop(box);
- var bottom = top + box.clientHeight;
- return top <= viewBottom && bottom >= viewTop;
- }
- }, {
- key: 'disabled',
- value: function disabled() {
- return !this.config.mobile && isMobile(navigator.userAgent);
- }
- }]);
- return WOW;
- }();
- exports.default = WOW;
- module.exports = exports['default'];
- });
|