1(function (global, factory) { 2 if (typeof define === "function" && define.amd) { 3 define(['module', 'exports'], factory); 4 } else if (typeof exports !== "undefined") { 5 factory(module, exports); 6 } else { 7 var mod = { 8 exports: {} 9 }; 10 factory(mod, mod.exports); 11 global.WOW = mod.exports; 12 } 13})(this, function (module, exports) { 14 'use strict'; 15 16 Object.defineProperty(exports, "__esModule", { 17 value: true 18 }); 19 20 var _class, _temp; 21 22 function _classCallCheck(instance, Constructor) { 23 if (!(instance instanceof Constructor)) { 24 throw new TypeError("Cannot call a class as a function"); 25 } 26 } 27 28 var _createClass = function () { 29 function defineProperties(target, props) { 30 for (var i = 0; i < props.length; i++) { 31 var descriptor = props[i]; 32 descriptor.enumerable = descriptor.enumerable || false; 33 descriptor.configurable = true; 34 if ("value" in descriptor) descriptor.writable = true; 35 Object.defineProperty(target, descriptor.key, descriptor); 36 } 37 } 38 39 return function (Constructor, protoProps, staticProps) { 40 if (protoProps) defineProperties(Constructor.prototype, protoProps); 41 if (staticProps) defineProperties(Constructor, staticProps); 42 return Constructor; 43 }; 44 }(); 45 46 function isIn(needle, haystack) { 47 return haystack.indexOf(needle) >= 0; 48 } 49 50 function extend(custom, defaults) { 51 for (var key in defaults) { 52 if (custom[key] == null) { 53 var value = defaults[key]; 54 custom[key] = value; 55 } 56 } 57 return custom; 58 } 59 60 function isMobile(agent) { 61 return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent) 62 ); 63 } 64 65 function createEvent(event) { 66 var bubble = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1]; 67 var cancel = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2]; 68 var detail = arguments.length <= 3 || arguments[3] === undefined ? null : arguments[3]; 69 70 var customEvent = void 0; 71 if (document.createEvent != null) { 72 // W3C DOM 73 customEvent = document.createEvent('CustomEvent'); 74 customEvent.initCustomEvent(event, bubble, cancel, detail); 75 } else if (document.createEventObject != null) { 76 // IE DOM < 9 77 customEvent = document.createEventObject(); 78 customEvent.eventType = event; 79 } else { 80 customEvent.eventName = event; 81 } 82 83 return customEvent; 84 } 85 86 function emitEvent(elem, event) { 87 if (elem.dispatchEvent != null) { 88 // W3C DOM 89 elem.dispatchEvent(event); 90 } else if (event in (elem != null)) { 91 elem[event](); 92 } else if ('on' + event in (elem != null)) { 93 elem['on' + event](); 94 } 95 } 96 97 function addEvent(elem, event, fn) { 98 if (elem.addEventListener != null) { 99 // W3C DOM 100 elem.addEventListener(event, fn, false); 101 } else if (elem.attachEvent != null) { 102 // IE DOM 103 elem.attachEvent('on' + event, fn); 104 } else { 105 // fallback 106 elem[event] = fn; 107 } 108 } 109 110 function removeEvent(elem, event, fn) { 111 if (elem.removeEventListener != null) { 112 // W3C DOM 113 elem.removeEventListener(event, fn, false); 114 } else if (elem.detachEvent != null) { 115 // IE DOM 116 elem.detachEvent('on' + event, fn); 117 } else { 118 // fallback 119 delete elem[event]; 120 } 121 } 122 123 function getInnerHeight() { 124 if ('innerHeight' in window) { 125 return window.innerHeight; 126 } 127 128 return document.documentElement.clientHeight; 129 } 130 131 // Minimalistic WeakMap shim, just in case. 132 var WeakMap = window.WeakMap || window.MozWeakMap || function () { 133 function WeakMap() { 134 _classCallCheck(this, WeakMap); 135 136 this.keys = []; 137 this.values = []; 138 } 139 140 _createClass(WeakMap, [{ 141 key: 'get', 142 value: function get(key) { 143 for (var i = 0; i < this.keys.length; i++) { 144 var item = this.keys[i]; 145 if (item === key) { 146 return this.values[i]; 147 } 148 } 149 return undefined; 150 } 151 }, { 152 key: 'set', 153 value: function set(key, value) { 154 for (var i = 0; i < this.keys.length; i++) { 155 var item = this.keys[i]; 156 if (item === key) { 157 this.values[i] = value; 158 return this; 159 } 160 } 161 this.keys.push(key); 162 this.values.push(value); 163 return this; 164 } 165 }]); 166 167 return WeakMap; 168 }(); 169 170 // Dummy MutationObserver, to avoid raising exceptions. 171 var MutationObserver = window.MutationObserver || window.WebkitMutationObserver || window.MozMutationObserver || (_temp = _class = function () { 172 function MutationObserver() { 173 _classCallCheck(this, MutationObserver); 174 175 if (typeof console !== 'undefined' && console !== null) { 176 console.warn('MutationObserver is not supported by your browser.'); 177 console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.'); 178 } 179 } 180 181 _createClass(MutationObserver, [{ 182 key: 'observe', 183 value: function observe() { } 184 }]); 185 186 return MutationObserver; 187 }(), _class.notSupported = true, _temp); 188 189 // getComputedStyle shim, from http://stackoverflow.com/a/21797294 190 var getComputedStyle = window.getComputedStyle || function getComputedStyle(el) { 191 var getComputedStyleRX = /(\-([a-z]){1})/g; 192 return { 193 getPropertyValue: function getPropertyValue(prop) { 194 if (prop === 'float') { 195 prop = 'styleFloat'; 196 } 197 if (getComputedStyleRX.test(prop)) { 198 prop.replace(getComputedStyleRX, function (_, _char) { 199 return _char.toUpperCase(); 200 }); 201 } 202 var currentStyle = el.currentStyle; 203 204 return (currentStyle != null ? currentStyle[prop] : void 0) || null; 205 } 206 }; 207 }; 208 209 var WOW = function () { 210 function WOW() { 211 var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; 212 213 _classCallCheck(this, WOW); 214 215 this.defaults = { 216 boxClass: 'wow', 217 animateClass: 'animated', 218 offset: 0, 219 mobile: true, 220 live: true, 221 callback: null, 222 scrollContainer: null, 223 resetAnimation: true 224 }; 225 226 this.animate = function animateFactory() { 227 if ('requestAnimationFrame' in window) { 228 return function (callback) { 229 return window.requestAnimationFrame(callback); 230 }; 231 } 232 return function (callback) { 233 return callback(); 234 }; 235 }(); 236 237 this.vendors = ['moz', 'webkit']; 238 239 this.start = this.start.bind(this); 240 this.resetAnimation = this.resetAnimation.bind(this); 241 this.scrollHandler = this.scrollHandler.bind(this); 242 this.scrollCallback = this.scrollCallback.bind(this); 243 this.scrolled = true; 244 this.config = extend(options, this.defaults); 245 if (options.scrollContainer != null) {
246 this.config.scrollContainer = document.querySelector(options.scrollContainer); 247 } 248 // Map of elements to animation names: 249 this.animationNameCache = new WeakMap(); 250 this.wowEvent = createEvent(this.config.boxClass); 251 } 252 253 _createClass(WOW, [{ 254 key: 'init', 255 value: function init() { 256 this.element = window.document.documentElement; 257 if (isIn(document.readyState, ['interactive', 'complete'])) { 258 this.start(); 259 } else { 260 addEvent(document, 'DOMContentLoaded', this.start); 261 } 262 this.finished = []; 263 } 264 }, { 265 key: 'start', 266 value: function start() { 267 var _this = this; 268 269 this.stopped = false; 270 this.boxes = [].slice.call(this.element.querySelectorAll('.' + this.config.boxClass)); 271 this.all = this.boxes.slice(0); 272 if (this.boxes.length) { 273 if (this.disabled()) { 274 this.resetStyle(); 275 } else { 276 for (var i = 0; i < this.boxes.length; i++) { 277 var box = this.boxes[i]; 278 this.applyStyle(box, true); 279 } 280 } 281 } 282 if (!this.disabled()) { 283 addEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler); 284 addEvent(window, 'resize', this.scrollHandler); 285 this.interval = setInterval(this.scrollCallback, 50); 286 } 287 if (this.config.live) { 288 var mut = new MutationObserver(function (records) { 289 for (var j = 0; j < records.length; j++) { 290 var record = records[j]; 291 for (var k = 0; k < record.addedNodes.length; k++) { 292 var node = record.addedNodes[k]; 293 _this.doSync(node); 294 } 295 } 296 return undefined; 297 }); 298 mut.observe(document.body, { 299 childList: true, 300 subtree: true 301 }); 302 } 303 } 304 }, { 305 key: 'stop', 306 value: function stop() { 307 this.stopped = true; 308 removeEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler); 309 removeEvent(window, 'resize', this.scrollHandler); 310 if (this.interval != null) { 311 clearInterval(this.interval); 312 } 313 } 314 }, { 315 key: 'sync', 316 value: function sync() { 317 if (MutationObserver.notSupported) { 318 this.doSync(this.element); 319 } 320 } 321 }, { 322 key: 'doSync', 323 value: function doSync(element) { 324 if (typeof element === 'undefined' || element === null) { 325 element = this.element; 326 } 327 if (element.nodeType !== 1) { 328 return; 329 } 330 element = element.parentNode || element; 331 var iterable = element.querySelectorAll('.' + this.config.boxClass); 332 for (var i = 0; i < iterable.length; i++) { 333 var box = iterable[i]; 334 if (!isIn(box, this.all)) { 335 this.boxes.push(box); 336 this.all.push(box); 337 if (this.stopped || this.disabled()) { 338 this.resetStyle(); 339 } else { 340 this.applyStyle(box, true); 341 } 342 this.scrolled = true; 343 } 344 } 345 } 346 }, { 347 key: 'show', 348 value: function show(box) { 349 this.applyStyle(box); 350 box.className = box.className + ' ' + this.config.animateClass; 351 if (this.config.callback != null) { 352 this.config.callback(box); 353 } 354 emitEvent(box, this.wowEvent); 355 356 if (this.config.resetAnimation) { 357 addEvent(box, 'animationend', this.resetAnimation); 358 addEvent(box, 'oanimationend', this.resetAnimation); 359 addEvent(box, 'webkitAnimationEnd', this.resetAnimation); 360 addEvent(box, 'MSAnimationEnd', this.resetAnimation); 361 } 362 363 return box; 364 } 365 }, { 366 key: 'applyStyle', 367 value: function applyStyle(box, hidden) { 368 var _this2 = this; 369 370 var duration = box.getAttribute('data-wow-duration'); 371 var delay = box.getAttribute('data-wow-delay'); 372 var iteration = box.getAttribute('data-wow-iteration'); 373 374 return this.animate(function () { 375 return _this2.customStyle(box, hidden, duration, delay, iteration); 376 }); 377 } 378 }, {
379 key: 'resetStyle', 380 value: function resetStyle() { 381 for (var i = 0; i < this.boxes.length; i++) { 382 var box = this.boxes[i]; 383 box.style.visibility = 'visible'; 384 } 385 return undefined; 386 } 387 }, { 388 key: 'resetAnimation', 389 value: function resetAnimation(event) { 390 if (event.type.toLowerCase().indexOf('animationend') >= 0) { 391 var target = event.target || event.srcElement; 392 target.className = target.className.replace(this.config.animateClass, '').trim(); 393 } 394 } 395 }, { 396 key: 'customStyle', 397 value: function customStyle(box, hidden, duration, delay, iteration) { 398 if (hidden) { 399 this.cacheAnimationName(box); 400 } 401 box.style.visibility = hidden ? 'hidden' : 'visible'; 402 403 if (duration) { 404 this.vendorSet(box.style, { animationDuration: duration }); 405 } 406 if (delay) { 407 this.vendorSet(box.style, { animationDelay: delay }); 408 } 409 if (iteration) { 410 this.vendorSet(box.style, { animationIterationCount: iteration }); 411 } 412 this.vendorSet(box.style, { animationName: hidden ? 'none' : this.cachedAnimationName(box) }); 413 414 return box; 415 } 416 }, { 417 key: 'vendorSet', 418 value: function vendorSet(elem, properties) { 419 for (var name in properties) { 420 if (properties.hasOwnProperty(name)) { 421 var value = properties[name]; 422 elem['' + name] = value; 423 for (var i = 0; i < this.vendors.length; i++) { 424 var vendor = this.vendors[i]; 425 elem['' + vendor + name.charAt(0).toUpperCase() + name.substr(1)] = value; 426 } 427 } 428 } 429 } 430 }, { 431 key: 'vendorCSS', 432 value: function vendorCSS(elem, property) { 433 var style = getComputedStyle(elem); 434 var result = style.getPropertyCSSValue(property); 435 for (var i = 0; i < this.vendors.length; i++) { 436 var vendor = this.vendors[i]; 437 result = result || style.getPropertyCSSValue('-' + vendor + '-' + property); 438 } 439 return result; 440 } 441 }, { 442 key: 'animationName', 443 value: function animationName(box) { 444 var aName = void 0; 445 try { 446 aName = this.vendorCSS(box, 'animation-name').cssText; 447 } catch (error) { 448 // Opera, fall back to plain property value 449 aName = getComputedStyle(box).getPropertyValue('animation-name'); 450 } 451 452 if (aName === 'none') { 453 return ''; // SVG/Firefox, unable to get animation name? 454 } 455 456 return aName; 457 } 458 }, { 459 key: 'cacheAnimationName', 460 value: function cacheAnimationName(box) { 461 // https://bugzilla.mozilla.org/show_bug.cgi?id=921834 462 // box.dataset is not supported for SVG elements in Firefox 463 return this.animationNameCache.set(box, this.animationName(box)); 464 } 465 }, { 466 key: 'cachedAnimationName', 467 value: function cachedAnimationName(box) { 468 return this.animationNameCache.get(box); 469 } 470 }, { 471 key: 'scrollHandler', 472 value: function scrollHandler() { 473 this.scrolled = true; 474 } 475 }, { 476 key: 'scrollCallback', 477 value: function scrollCallback() { 478 if (this.scrolled) { 479 this.scrolled = false; 480 var results = []; 481 for (var i = 0; i < this.boxes.length; i++) { 482 var box = this.boxes[i]; 483 if (box) { 484 if (this.isVisible(box)) { 485 this.show(box); 486 continue; 487 } 488 results.push(box); 489 } 490 } 491 this.boxes = results; 492 if (!this.boxes.length && !this.config.live) { 493 this.stop(); 494 } 495 } 496 } 497 }, { 498 key: 'offsetTop', 499 value: function offsetTop(element) { 500 // SVG elements don't have an offsetTop in Firefox. 501 // This will use their nearest parent that has an offsetTop. 502 // Also, using ('offsetTop' of element) causes an exception in Firefox. 503 while (element.offsetTop === undefined) { 504 element = element.parentNode; 505 } 506 var top = element.offsetTop; 507 while (element.offsetParent) { 508 element = element.offsetParent; 509 top += element.offsetTop; 510 } 511 return top; 512 } 513 }, {
514 key: 'isVisible', 515 value: function isVisible(box) { 516 var offset = box.getAttribute('data-wow-offset') || this.config.offset; 517 var viewTop = this.config.scrollContainer && this.config.scrollContainer.scrollTop || window.pageYOffset; 518 var viewBottom = viewTop + Math.min(this.element.clientHeight, getInnerHeight()) - offset; 519 var top = this.offsetTop(box); 520 var bottom = top + box.clientHeight; 521 522 return top <= viewBottom && bottom >= viewTop; 523 } 524 }, { 525 key: 'disabled', 526 value: function disabled() { 527 return !this.config.mobile && isMobile(navigator.userAgent); 528 } 529 }]); 530 531 return WOW; 532 }(); 533 534 exports.default = WOW; 535 module.exports = exports['default']; 536});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.