sticky-sidebar-min.js 11.7 KB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.StickySidebar={})}(this,(function(t){"use strict";function e(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}function i(t,e){return t(e={exports:{}},e.exports),e.exports}var n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},o=i((function(t,e){!function(t,i){i(e)}(n,(function(t){function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),n=function(){var t=".stickySidebar",n={topSpacing:0,bottomSpacing:0,containerSelector:!1,innerWrapperSelector:".inner-wrapper-sticky",stickyClass:"is-affixed",resizeSensor:!0,minWidth:!1},o=function(){function o(t,i){var s=this,r=arguments.length>1&&void 0!==i?i:{};if(e(this,o),this.options=o.extend(n,r),this.sidebar="string"==typeof t?document.querySelector(t):t,void 0===this.sidebar)throw new Error("There is no specific sidebar element.");this.sidebarInner=!1,this.container=this.sidebar.parentElement,this.affixedType="STATIC",this.direction="down",this.support={transform:!1,transform3d:!1},this._initialized=!1,this._reStyle=!1,this._breakpoint=!1,this.dimensions={translateY:0,maxTranslateY:0,topSpacing:0,lastTopSpacing:0,bottomSpacing:0,lastBottomSpacing:0,sidebarHeight:0,sidebarWidth:0,containerTop:0,containerHeight:0,viewportHeight:0,viewportTop:0,lastViewportTop:0},["handleEvent"].forEach((function(t){s[t]=s[t].bind(s)})),this.initialize()}return i(o,[{key:"initialize",value:function t(){var e=this;if(this._setSupportFeatures(),this.options.innerWrapperSelector&&(this.sidebarInner=this.sidebar.querySelector(this.options.innerWrapperSelector),null===this.sidebarInner&&(this.sidebarInner=!1)),!this.sidebarInner){var i=document.createElement("div");for(i.setAttribute("class","inner-wrapper-sticky"),this.sidebar.appendChild(i);this.sidebar.firstChild!=i;)i.appendChild(this.sidebar.firstChild);this.sidebarInner=this.sidebar.querySelector(".inner-wrapper-sticky")}if(this.options.containerSelector){var n=document.querySelectorAll(this.options.containerSelector);if((n=Array.prototype.slice.call(n)).forEach((function(t,i){t.contains(e.sidebar)&&(e.container=t)})),!n.length)throw new Error("The container does not contains on the sidebar.")}"function"!=typeof this.options.topSpacing&&(this.options.topSpacing=parseInt(this.options.topSpacing)||0),"function"!=typeof this.options.bottomSpacing&&(this.options.bottomSpacing=parseInt(this.options.bottomSpacing)||0),this._widthBreakpoint(),this.calcDimensions(),this.stickyPosition(),this.bindEvents(),this._initialized=!0}},{key:"bindEvents",value:function e(){window.addEventListener("resize",this,{passive:!0,capture:!1}),window.addEventListener("scroll",this,{passive:!0,capture:!1}),this.sidebar.addEventListener("update"+t,this),this.options.resizeSensor&&"undefined"!=typeof ResizeSensor&&(new ResizeSensor(this.sidebarInner,this.handleEvent),new ResizeSensor(this.container,this.handleEvent))}},{key:"handleEvent",value:function t(e){this.updateSticky(e)}},{key:"calcDimensions",value:function t(){if(!this._breakpoint){var e=this.dimensions;e.containerTop=o.offsetRelative(this.container).top,e.containerHeight=this.container.clientHeight,e.containerBottom=e.containerTop+e.containerHeight,e.sidebarHeight=this.sidebarInner.offsetHeight,e.sidebarWidth=this.sidebarInner.offsetWidth,e.viewportHeight=window.innerHeight,e.maxTranslateY=e.containerHeight-e.sidebarHeight,this._calcDimensionsWithScroll()}}},{key:"_calcDimensionsWithScroll",value:function t(){var e=this.dimensions;e.sidebarLeft=o.offsetRelative(this.sidebar).left,e.viewportTop=document.documentElement.scrollTop||document.body.scrollTop,e.viewportBottom=e.viewportTop+e.viewportHeight,e.viewportLeft=document.documentElement.scrollLeft||document.body.scrollLeft,e.topSpacing=this.options.topSpacing,e.bottomSpacing=this.options.bottomSpacing,"function"==typeof e.topSpacing&&(e.topSpacing=parseInt(e.topSpacing(this.sidebar))||0),"function"==typeof e.bottomSpacing&&(e.bottomSpacing=parseInt(e.bottomSpacing(this.sidebar))||0),"VIEWPORT-TOP"===this.affixedType?e.topSpacing<e.lastTopSpacing&&(e.translateY+=e.lastTopSpacing-e.topSpacing,this._reStyle=!0):"VIEWPORT-BOTTOM"===this.affixedType&&e.bottomSpacing<e.lastBottomSpacing&&(e.translateY+=e.lastBottomSpacing-e.bottomSpacing,this._reStyle=!0),e.lastTopSpacing=e.topSpacing,e.lastBottomSpacing=e.bottomSpacing}},{key:"isSidebarFitsViewport",value:function t(){var e=this.dimensions,i="down"===this.scrollDirection?e.lastBottomSpacing:e.lastTopSpacing;return this.dimensions.sidebarHeight+i<this.dimensions.viewportHeight}},{key:"observeScrollDir",value:function t(){var e=this.dimensions;if(e.lastViewportTop!==e.viewportTop){var i="down"===this.direction?Math.min:Math.max;e.viewportTop===i(e.viewportTop,e.lastViewportTop)&&(this.direction="down"===this.direction?"up":"down")}}},{key:"getAffixType",value:function t(){this._calcDimensionsWithScroll();var e=this.dimensions,i=e.viewportTop+e.topSpacing,n=this.affixedType;return i<=e.containerTop||e.containerHeight<=e.sidebarHeight?(e.translateY=0,n="STATIC"):n="up"===this.direction?this._getAffixTypeScrollingUp():this._getAffixTypeScrollingDown(),e.translateY=Math.max(0,e.translateY),e.translateY=Math.min(e.containerHeight,e.translateY),e.translateY=Math.round(e.translateY),e.lastViewportTop=e.viewportTop,n}},{key:"_getAffixTypeScrollingDown",value:function t(){var e=this.dimensions,i=e.sidebarHeight+e.containerTop,n=e.viewportTop+e.topSpacing,o=e.viewportBottom-e.bottomSpacing,s=this.affixedType;return this.isSidebarFitsViewport()?e.sidebarHeight+n>=e.containerBottom?(e.translateY=e.containerBottom-i,s="CONTAINER-BOTTOM"):n>=e.containerTop&&(e.translateY=n-e.containerTop,s="VIEWPORT-TOP"):e.containerBottom<=o?(e.translateY=e.containerBottom-i,s="CONTAINER-BOTTOM"):i+e.translateY<=o?(e.translateY=o-i,s="VIEWPORT-BOTTOM"):e.containerTop+e.translateY<=n&&0!==e.translateY&&e.maxTranslateY!==e.translateY&&(s="VIEWPORT-UNBOTTOM"),s}},{key:"_getAffixTypeScrollingUp",value:function t(){var e=this.dimensions,i=e.sidebarHeight+e.containerTop,n=e.viewportTop+e.topSpacing,o=e.viewportBottom-e.bottomSpacing,s=this.affixedType;return n<=e.translateY+e.containerTop?(e.translateY=n-e.containerTop,s="VIEWPORT-TOP"):e.containerBottom<=o?(e.translateY=e.containerBottom-i,s="CONTAINER-BOTTOM"):this.isSidebarFitsViewport()||e.containerTop<=n&&0!==e.translateY&&e.maxTranslateY!==e.translateY&&(s="VIEWPORT-UNBOTTOM"),s}},{key:"_getStyle",value:function t(e){if(void 0!==e){var i={inner:{},outer:{}},n=this.dimensions;switch(e){case"VIEWPORT-TOP":i.inner={position:"fixed",top:n.topSpacing,left:n.sidebarLeft-n.viewportLeft,width:n.sidebarWidth};break;case"VIEWPORT-BOTTOM":i.inner={position:"fixed",top:"auto",left:n.sidebarLeft,bottom:n.bottomSpacing,width:n.sidebarWidth};break;case"CONTAINER-BOTTOM":case"VIEWPORT-UNBOTTOM":var s=this._getTranslate(0,n.translateY+"px");i.inner=s?{transform:s}:{position:"absolute",top:n.translateY,width:n.sidebarWidth};break}switch(e){case"VIEWPORT-TOP":case"VIEWPORT-BOTTOM":case"VIEWPORT-UNBOTTOM":case"CONTAINER-BOTTOM":i.outer={height:n.sidebarHeight,position:"relative"};break}return i.outer=o.extend({height:"",position:""},i.outer),i.inner=o.extend({position:"relative",top:"",left:"",bottom:"",width:"",transform:""},i.inner),i}}},{key:"stickyPosition",value:function e(i){if(!this._breakpoint){i=this._reStyle||i||!1;var n=this.options.topSpacing,s=this.options.bottomSpacing,r=this.getAffixType(),a=this._getStyle(r);if((this.affixedType!=r||i)&&r){var p="affix."+r.toLowerCase().replace("viewport-","")+t;for(var c in o.eventTrigger(this.sidebar,p),"STATIC"===r?o.removeClass(this.sidebar,this.options.stickyClass):o.addClass(this.sidebar,this.options.stickyClass),a.outer){var l="number"==typeof a.outer[c]?"px":"";this.sidebar.style[c]=a.outer[c]+l}for(var h in a.inner){var d="number"==typeof a.inner[h]?"px":"";this.sidebarInner.style[h]=a.inner[h]+d}var f="affixed."+r.toLowerCase().replace("viewport-","")+t;o.eventTrigger(this.sidebar,f)}else this._initialized&&(this.sidebarInner.style.left=a.inner.left);this.affixedType=r}}},{key:"_widthBreakpoint",value:function t(){window.innerWidth<=this.options.minWidth?(this._breakpoint=!0,this.affixedType="STATIC",this.sidebar.removeAttribute("style"),o.removeClass(this.sidebar,this.options.stickyClass),this.sidebarInner.removeAttribute("style")):this._breakpoint=!1}},{key:"updateSticky",value:function t(e){var i=this,n=arguments.length>0&&void 0!==e?e:{},o;this._running||(this._running=!0,o=n.type,requestAnimationFrame((function(){switch(o){case"scroll":i._calcDimensionsWithScroll(),i.observeScrollDir(),i.stickyPosition();break;case"resize":default:i._widthBreakpoint(),i.calcDimensions(),i.stickyPosition(!0);break}i._running=!1})))}},{key:"_setSupportFeatures",value:function t(){var e=this.support;e.transform=o.supportTransform(),e.transform3d=o.supportTransform(!0)}},{key:"_getTranslate",value:function t(e,i,n){var o=arguments.length>0&&void 0!==e?e:0,s=arguments.length>1&&void 0!==i?i:0,r=arguments.length>2&&void 0!==n?n:0;return this.support.transform3d?"translate3d("+o+", "+s+", "+r+")":!!this.support.translate&&"translate("+o+", "+s+")"}},{key:"destroy",value:function e(){window.removeEventListener("resize",this,{capture:!1}),window.removeEventListener("scroll",this,{capture:!1}),this.sidebar.classList.remove(this.options.stickyClass),this.sidebar.style.minHeight="",this.sidebar.removeEventListener("update"+t,this);var i={inner:{},outer:{}};for(var n in i.inner={position:"",top:"",left:"",bottom:"",width:"",transform:""},i.outer={height:"",position:""},i.outer)this.sidebar.style[n]=i.outer[n];for(var o in i.inner)this.sidebarInner.style[o]=i.inner[o];this.options.resizeSensor&&"undefined"!=typeof ResizeSensor&&(ResizeSensor.detach(this.sidebarInner,this.handleEvent),ResizeSensor.detach(this.container,this.handleEvent))}}],[{key:"supportTransform",value:function t(e){var i=!1,n=e?"perspective":"transform",o=n.charAt(0).toUpperCase()+n.slice(1),s=["Webkit","Moz","O","ms"],r,a=document.createElement("support").style;return(n+" "+s.join(o+" ")+o).split(" ").forEach((function(t,e){if(void 0!==a[t])return i=t,!1})),i}},{key:"eventTrigger",value:function t(e,i,n){try{var o=new CustomEvent(i,{detail:n})}catch(t){var o;(o=document.createEvent("CustomEvent")).initCustomEvent(i,!0,!0,n)}e.dispatchEvent(o)}},{key:"extend",value:function t(e,i){var n={};for(var o in e)void 0!==i[o]?n[o]=i[o]:n[o]=e[o];return n}},{key:"offsetRelative",value:function t(e){var i={left:0,top:0};do{var n=e.offsetTop,o=e.offsetLeft;isNaN(n)||(i.top+=n),isNaN(o)||(i.left+=o),e="BODY"===e.tagName?e.parentElement:e.offsetParent}while(e);return i}},{key:"addClass",value:function t(e,i){o.hasClass(e,i)||(e.classList?e.classList.add(i):e.className+=" "+i)}},{key:"removeClass",value:function t(e,i){o.hasClass(e,i)&&(e.classList?e.classList.remove(i):e.className=e.className.replace(new RegExp("(^|\\b)"+i.split(" ").join("|")+"(\\b|$)","gi")," "))}},{key:"hasClass",value:function t(e,i){return e.classList?e.classList.contains(i):new RegExp("(^| )"+i+"( |$)","gi").test(e.className)}},{key:"defaults",get:function(){return n}}]),o}();return o}();
/**
					 * Sticky Sidebar JavaScript Plugin.
					 *
					 * @version 3.3.4
					 * @author Ahmed Bouhuolia <a.bouhuolia@gmail.com>
					 * @license The MIT License (MIT)
					 */t.default=n,window.StickySidebar=n}))})),s=e(o);t.default=s,t.__moduleExports=o,Object.defineProperty(t,"__esModule",{value:!0})}));