quovadis/lib/quovadis.min.js

A small library to handle changes in scroll direction.

"use strict";function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Object.defineProperty(Constructor,"prototype",{writable:!1}),Constructor}var Quovadis=function(){function Quovadis(){var opt=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return _classCallCheck(this,Quovadis),this.opt=Object.assign({},this.defaults(),opt),this.context=this.opt.context,this.debug=this.opt.debug,this.prefix=this.opt.prefix,this.horizontal=this.opt.horizontal,this.historyLength=this.opt.historyLength,this.historyMaxAge=this.opt.historyMaxAge,this.thresholdPixels=this.opt.thresholdPixels,this.callback=this.opt.callback,this.event=this.opt.event,this.history=Array(this.historyLength),this.scrollingElement=this.context===document.documentElement?window:this.context,this.isVer=!this.horizontal,this}return _createClass(Quovadis,[{key:"defaults",value:function(){return{prefix:"scrolling",context:document.documentElement,debug:!1,horizontal:!1,historyLength:32,historyMaxAge:512,thresholdPixels:64,callback:function(){for(var classes=document.documentElement.classList,i=classes.length-1;i>=0;i--)classes[i].startsWith(this.opt.prefix)&&classes.remove(classes[i]);classes.add(this.prefix+"-"+this.dir)},event:!0}}},{key:"attach",value:function(){return this.dir=this.isVer?"down":"right",this.pivotTime=0,this.pivot=this.isVer?this.context.scrollTop:this.context.scrollLeft,this.callback(),this.handler=this.handler.bind(this),this.debug&&console.log(this),this.scrollingElement.addEventListener("scroll",this.handler)}},{key:"detach",value:function(){return this.scrollingElement.removeEventListener("scroll",this.handler)}},{key:"reattach",value:function(el){this.context=el,this.history=Array(this.historyLength),this.scrollingElement=this.context===document.documentElement?window:this.context,this.isVer=!this.horizontal,this.attach()}},{key:"tick",value:function(){var y=this.isVer?this.context.scrollTop:this.context.scrollLeft,t=this.e.timeStamp,furthest="down"===this.dir||"right"===this.dir?Math.max:Math.min,yMax=this.isVer?this.context.scrollHeight-this.context.clientHeight:this.context.scrollWidth-this.context.clientWidth;if(y=Math.max(0,y),y=Math.min(yMax,y),this.history.unshift({y:y,t:t}),this.history.pop(),y===furthest(this.pivot,y))return this.pivotTime=t,void(this.pivot=y);var cutoffTime=t-this.historyMaxAge;if(cutoffTime>this.pivotTime){this.pivot=y;for(var i=0;i<this.historyLength&&(this.history[i]&&!(this.history[i].t<cutoffTime));i+=1)this.pivot=furthest(this.pivot,this.history[i].y)}Math.abs(y-this.pivot)>this.thresholdPixels&&(this.pivot=y,this.pivotTime=t,this.isVer?this.dir="down"===this.dir?"up":"down":this.dir="right"===this.dir?"left":"right",this.callback(),!0===this.event&&this.dispatchEvent())}},{key:"handler",value:function(event){this.e=event,window.requestAnimationFrame(this.tick.bind(this))}},{key:"dispatchEvent",value:function(){window.dispatchEvent(new CustomEvent("scrollDirectionChange",{detail:{direction:this.dir}}))}}]),Quovadis}();