slideheader/dist/slideheader.min.js

A JavaScript plugin to display or hide headerbar with a sliding motion

(function () {var a,h,d={};Object.defineProperty(d,"__esModule",{value:!0}),function(e){!function(e){e.UP="Up",e.DOWN="Down"}(e.SlideType||(e.SlideType={})),function(e){e.SLIDE_DOWN="slideDown",e.SLIDE_UP="slideUp"}(e.MethodType||(e.MethodType={})),function(e){e.EASE="ease",e.LINEAR="linear",e.EASE_IN="ease-in",e.EASE_OUT="ease-out",e.EASE_IN_OUT="ease-in-out"}(e.SlideTiming||(e.SlideTiming={}))}(h=a||(a={},d.SlideHeaderModel=a));var e={};Object.defineProperty(e,"__esModule",{value:!0});var f=function(){function e(e,i){if(this.methodType=a.MethodType.SLIDE_DOWN,this.slideDirection=a.SlideType.UP,this.config={},!e)throw new Error("element must not be null.");if(this.element=document.querySelector(e),this.element instanceof HTMLElement==!1)throw new Error("querySelector does not find appropriate element.");this.options=i,this.defaults={headerBarHeight:this.element.clientHeight,headerBarWidth:"100%",header2SelectorName:".cb-header2",zIndex:9999,boxShadow:"none",opacity:1,slidePoint:0,slideDownDuration:"500ms",slideUpDuration:"500ms",slideDownTiming:a.SlideTiming.EASE,slideUpTiming:a.SlideTiming.EASE,slideDownCallback:function(){},slideUpCallback:function(){},cloneHeader:!1,fullscreenView:!1,headroom:!1}}return Object.defineProperty(e.prototype,"isHeadroom",{get:function(){return void 0!==this.config.headroom&&null!==this.config.headroom&&this.methodType===a.MethodType.SLIDE_UP&&this.config.headroom},enumerable:!0,configurable:!0}),e.prototype.controlHeaderAnimations=function(e,i){var d=this.config["slide"+e+"Duration"],t=this.config["slide"+e+"Timing"];this.element.style.transition="transform "+d+" "+t,this.element.style.transform="translate3d(0, "+i+", 0)",this.slideDirection=this.slideDirection===a.SlideType.UP?a.SlideType.DOWN:a.SlideType.UP},e.prototype.handleScroll=function(e,i,d){if(void 0===this.config.slidePoint||null===this.config.slidePoint)throw new Error("slidePoint must not to be undefined.");var t=this.methodType===a.MethodType.SLIDE_DOWN?0:"-"+this.config.headerBarHeight+"px",o=this.methodType===a.MethodType.SLIDE_DOWN?"-"+this.config.headerBarHeight+"px":0;e>this.config.slidePoint&&e>i?this.slideDirection===a.SlideType.UP&&this.controlHeaderAnimations(d,t):this.slideDirection===a.SlideType.DOWN&&this.controlHeaderAnimations(d,o)},e.prototype.listenScroll=function(e,i){var d=this,t=0,o=0;window.addEventListener("scroll",function(){var l=0;cancelAnimationFrame(l),l=requestAnimationFrame(function(){o=window.scrollY;var l=d.slideDirection===a.SlideType.UP?e:i;d.handleScroll(o,t,l),d.isHeadroom&&(t=o)})},!1)},e.prototype.handleTransitionend=function(e,i){this.element.style.boxShadow=i,"function"==typeof this.config["slide"+e+"Callback"]&&this.config["slide"+e+"Callback"]()},e.prototype.listenTransitionEnd=function(e,i){var d=this,t=""+this.config.boxShadow,o=this.methodType===a.MethodType.SLIDE_DOWN?t:"none",l=this.methodType===a.MethodType.SLIDE_DOWN?"none":t;window.addEventListener("transitionend",function(){var t=d.slideDirection===a.SlideType.UP?e:i,r=d.slideDirection===a.SlideType.UP?o:l;d.handleTransitionend(t,r)},!1)},e.prototype.excuteSlideHeader=function(){var e=this.methodType===a.MethodType.SLIDE_DOWN?a.SlideType.DOWN:a.SlideType.UP,i=this.methodType===a.MethodType.SLIDE_DOWN?a.SlideType.UP:a.SlideType.DOWN;this.listenScroll(e,i),this.listenTransitionEnd(e,i)},e.prototype.applyDefaultHeaderStyles=function(){var e=this.methodType===a.MethodType.SLIDE_DOWN?"-"+this.config.headerBarHeight+"px":0;this.element.style.transform="translate3d(0, "+e+", 0)",this.element.style.visibility="visible",this.element.style.opacity=""+this.config.opacity,this.element.style.width=""+this.config.headerBarWidth,this.element.style.zIndex=""+this.config.zIndex},e.prototype.cloneHeader=function(){if(!this.element.parentNode)throw new Error("parentNode does not be found.");var e=this.element.cloneNode(!0);this.element.parentNode.insertBefore(e,this.element.nextElementSibling),e.removeAttribute("class"),e.setAttribute("class","cb-header1"),e.style.zIndex="10000"},e.prototype.applyHeader2Styles=function(){if(!this.config.header2SelectorName)throw new Error("header2SelectorName must not be undefined.");var e=document.querySelector(this.config.header2SelectorName);if(e instanceof HTMLElement==!1)throw new Error("querySelector does not find appropriate element.");var i=this.element.clientHeight,d=i+e.clientHeight,t=window.outerHeight;if(t>d){var o=this.config.cloneHeader?(t-d)/2:(t-d+i)/2;e.style.paddingTop=o+"px",e.style.paddingBottom=o+"px",this.config.slidePoint=t}else this.config.slidePoint=this.config.cloneHeader?d:d-i},e.prototype.mergeOptions=function(e,i){return Object.assign({},e,i)},e.prototype.init=function(e){if(!e||e!==a.MethodType.SLIDE_UP&&e!==a.MethodType.SLIDE_DOWN)throw new Error("type does not found and is not type of MethodType.");this.methodType=e,this.config=this.mergeOptions(this.defaults,this.options),this.config.cloneHeader&&this.cloneHeader(),this.applyDefaultHeaderStyles(),this.config.fullscreenView&&this.applyHeader2Styles(),this.excuteSlideHeader()},e}(),c=f;e.default=c;var b={};Object.defineProperty(b,"__esModule",{value:!0});var g=c;b.default=g,window.SlideHeader=c;if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=b}else if(typeof define==="function"&&define.amd){define(function(){return b})}})();