wowjs-shadow
Version:
This Fork it's for using HTMLElements instead of string selectors in ScrollContainer property, which that means that you can pass Elements that are not reachable by selectors such as Elements inside Shadow Dom.
1 lines • 7.56 kB
JavaScript
var MutationObserver,Util,WeakMap,getComputedStyle,getComputedStyleRX,indexOf=[].indexOf;Util=class{extend(t,e){var i,n;for(i in e)n=e[i],null==t[i]&&(t[i]=n);return t}isMobile(t){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(t)}createEvent(t,e=!1,i=!1,n=null){var s;return null!=document.createEvent?(s=document.createEvent("CustomEvent")).initCustomEvent(t,e,i,n):null!=document.createEventObject?(s=document.createEventObject()).eventType=t:s.eventName=t,s}emitEvent(t,e){return null!=t.dispatchEvent?t.dispatchEvent(e):e in(null!=t)?t[e]():`on${e}`in(null!=t)?t[`on${e}`]():void 0}addEvent(t,e,i){return null!=t.addEventListener?t.addEventListener(e,i,!1):null!=t.attachEvent?t.attachEvent(`on${e}`,i):t[e]=i}removeEvent(t,e,i){return null!=t.removeEventListener?t.removeEventListener(e,i,!1):null!=t.detachEvent?t.detachEvent(`on${e}`,i):delete t[e]}innerHeight(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight}},WeakMap=this.WeakMap||this.MozWeakMap||(WeakMap=class{constructor(){this.keys=[],this.values=[]}get(t){var e,i,n,s;for(e=i=0,n=(s=this.keys).length;i<n;e=++i)if(s[e]===t)return this.values[e]}set(t,e){var i,n,s,r;for(i=n=0,s=(r=this.keys).length;n<s;i=++n)if(r[i]===t)return void(this.values[i]=e);return this.keys.push(t),this.values.push(e)}}),MutationObserver=this.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(MutationObserver=function(){class t{constructor(){"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.")}observe(){}}return t.notSupported=!0,t}.call(this)),getComputedStyle=this.getComputedStyle||function(t,e){return this.getPropertyValue=function(e){var i;return"float"===e&&(e="styleFloat"),getComputedStyleRX.test(e)&&e.replace(getComputedStyleRX,(function(t,e){return e.toUpperCase()})),(null!=(i=t.currentStyle)?i[e]:void 0)||null},this},getComputedStyleRX=/(\-([a-z]){1})/g,this.WOW=function(){class t{constructor(t={}){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=!0,this.config=this.util().extend(t,this.defaults),null!=t.scrollContainer&&(this.config.scrollContainer=t.scrollContainer),this.animationNameCache=new WeakMap,this.wowEvent=this.util().createEvent(this.config.boxClass)}init(){var t;return this.element=window.document.documentElement,"interactive"===(t=document.readyState)||"complete"===t?this.start():this.util().addEvent(document,"DOMContentLoaded",this.start),this.finished=[]}start(){var t,e,i,n;if(this.stopped=!1,this.boxes=function(){var e,i,n,s;for(s=[],e=0,i=(n=this.element.querySelectorAll(`.${this.config.boxClass}`)).length;e<i;e++)t=n[e],s.push(t);return s}.call(this),this.all=function(){var e,i,n,s;for(s=[],e=0,i=(n=this.boxes).length;e<i;e++)t=n[e],s.push(t);return s}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else for(e=0,i=(n=this.boxes).length;e<i;e++)t=n[e],this.applyStyle(t,!0);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)),this.config.live)return new MutationObserver(t=>{var e,i,n,s,r;for(r=[],e=0,i=t.length;e<i;e++)s=t[e],r.push(function(){var t,e,i,r;for(r=[],t=0,e=(i=s.addedNodes||[]).length;t<e;t++)n=i[t],r.push(this.doSync(n));return r}.call(this));return r}).observe(document.body,{childList:!0,subtree:!0})}stop(){if(this.stopped=!0,this.util().removeEvent(this.config.scrollContainer||window,"scroll",this.scrollHandler),this.util().removeEvent(window,"resize",this.scrollHandler),null!=this.interval)return clearInterval(this.interval)}sync(t){if(MutationObserver.notSupported)return this.doSync(this.element)}doSync(t){var e,i,n,s,r;if(null==t&&(t=this.element),1===t.nodeType){for(r=[],i=0,n=(s=(t=t.parentNode||t).querySelectorAll(`.${this.config.boxClass}`)).length;i<n;i++)e=s[i],indexOf.call(this.all,e)<0?(this.boxes.push(e),this.all.push(e),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(e,!0),r.push(this.scrolled=!0)):r.push(void 0);return r}}show(t){return this.applyStyle(t),t.className=`${t.className} ${this.config.animateClass}`,null!=this.config.callback&&this.config.callback(t),this.util().emitEvent(t,this.wowEvent),this.util().addEvent(t,"animationend",this.resetAnimation),this.util().addEvent(t,"oanimationend",this.resetAnimation),this.util().addEvent(t,"webkitAnimationEnd",this.resetAnimation),this.util().addEvent(t,"MSAnimationEnd",this.resetAnimation),t}applyStyle(t,e){var i,n,s;return n=t.getAttribute("data-wow-duration"),i=t.getAttribute("data-wow-delay"),s=t.getAttribute("data-wow-iteration"),this.animate(()=>this.customStyle(t,e,n,i,s))}resetStyle(){var t,e,i,n,s;for(s=[],e=0,i=(n=this.boxes).length;e<i;e++)t=n[e],s.push(t.style.visibility="visible");return s}resetAnimation(t){var e;if(t.type.toLowerCase().indexOf("animationend")>=0)return(e=t.target||t.srcElement).className=e.className.replace(this.config.animateClass,"").trim()}customStyle(t,e,i,n,s){return e&&this.cacheAnimationName(t),t.style.visibility=e?"hidden":"visible",i&&this.vendorSet(t.style,{animationDuration:i}),n&&this.vendorSet(t.style,{animationDelay:n}),s&&this.vendorSet(t.style,{animationIterationCount:s}),this.vendorSet(t.style,{animationName:e?"none":this.cachedAnimationName(t)}),t}vendorSet(t,e){var i,n,s,r;for(i in n=[],e)s=e[i],t[`${i}`]=s,n.push(function(){var e,n,o,l;for(l=[],e=0,n=(o=this.vendors).length;e<n;e++)r=o[e],l.push(t[`${r}${i.charAt(0).toUpperCase()}${i.substr(1)}`]=s);return l}.call(this));return n}vendorCSS(t,e){var i,n,s,r,o,l;for(r=(o=getComputedStyle(t)).getPropertyCSSValue(e),i=0,n=(s=this.vendors).length;i<n;i++)l=s[i],r=r||o.getPropertyCSSValue(`-${l}-${e}`);return r}animationName(t){var e;try{e=this.vendorCSS(t,"animation-name").cssText}catch(i){e=getComputedStyle(t).getPropertyValue("animation-name")}return"none"===e?"":e}cacheAnimationName(t){return this.animationNameCache.set(t,this.animationName(t))}cachedAnimationName(t){return this.animationNameCache.get(t)}scrollHandler(){return this.scrolled=!0}scrollCallback(){var t;if(this.scrolled&&(this.scrolled=!1,this.boxes=function(){var e,i,n,s;for(s=[],e=0,i=(n=this.boxes).length;e<i;e++)(t=n[e])&&(this.isVisible(t)?this.show(t):s.push(t));return s}.call(this),!this.boxes.length&&!this.config.live))return this.stop()}offsetTop(t){for(var e;void 0===t.offsetTop;)t=t.parentNode;for(e=t.offsetTop;t=t.offsetParent;)e+=t.offsetTop;return e}isVisible(t){var e,i,n,s,r;return i=t.getAttribute("data-wow-offset")||this.config.offset,s=(r=this.config.scrollContainer&&this.config.scrollContainer.scrollTop||window.pageYOffset)+Math.min(this.element.clientHeight,this.util().innerHeight())-i,e=(n=this.offsetTop(t))+t.clientHeight,n<=s&&e>=r}util(){return null!=this._util?this._util:this._util=new Util}disabled(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)}}return t.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0,live:!0,callback:null,scrollContainer:null},t.prototype.animate="requestAnimationFrame"in window?function(t){return window.requestAnimationFrame(t)}:function(t){return t()},t.prototype.vendors=["moz","webkit"],t}.call(this);