float-sidebar/dist/float-sidebar.min.js

A lightweight (2kb gzipped), zero-dependency javascript library for making a sidebar float

/*!
 * float-sidebar - A lightweight (2kb gzipped), zero-dependency javascript library for making a sidebar float
 * @version v1.2.4
 * @link https://github.com/vursen/FloatSidebar.js
 * @author Sergey Vinogradov
 * @license MIT
 */
!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.FloatSidebar=n():t.FloatSidebar=n()}(window,(function(){return function(t){var n={};function e(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,e),o.l=!0,o.exports}return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:i})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(e.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var o in t)e.d(i,o,function(n){return t[n]}.bind(null,o));return i},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="",e(e.s=0)}([function(t,n,e){"use strict";e.r(n);var i,o="START";function r(t,n,e){return n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}var u,a=(r(i={},o,(function(t,n){var e=n.$sideInner;e.style.position="absolute",e.style.top="0",e.style.bottom="auto"})),r(i,"TOP_FIXED",(function(t,n){var e=n.$sideInner;e.style.position="fixed",e.style.top=t.topSpacing+"px",e.style.bottom="auto"})),r(i,"UNFIXED",(function(t,n){var e=n.$sideInner;e.style.position="absolute",e.style.top=t.sideInnerTop-t.startPoint+"px",e.style.bottom="auto"})),r(i,"BOTTOM_FIXED",(function(t,n){var e=n.$sideInner;e.style.position="fixed",e.style.top="auto",e.style.bottom=t.bottomSpacing+"px"})),r(i,"FINISH",(function(t,n){var e=n.$sideInner;e.style.position="absolute",e.style.top="auto",e.style.bottom="0"})),i);function s(t,n,e){return n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}var p=(s(u={},o,[{to:"FINISH",when:function(t){return[!0===t.isSideInnerWithinPath,t.viewportTop+t.sideInnerHeight+t.bottomSpacing>t.finishPoint,t.viewportBottom>t.finishPoint]}},{to:"BOTTOM_FIXED",when:function(t){return[!0===t.isSideInnerWithinPath,!1===t.isSideInnerWithinViewport,t.viewportBottom>t.sideInnerBottom+t.bottomSpacing]}},{to:"TOP_FIXED",when:function(t){return[!0===t.isSideInnerWithinPath,!0===t.isSideInnerWithinViewport,t.viewportTop>t.startPoint-t.topSpacing]}}]),s(u,"TOP_FIXED",[{to:o,when:function(t){return[!1===t.isSideInnerWithinPath]}},{to:o,when:function(t){return[t.viewportTop<=t.startPoint-t.topSpacing]}},{to:"FINISH",when:function(t){return[t.sideInnerBottom>t.finishPoint]}},{to:"UNFIXED",when:function(t){return["down"===t.scrollDirection,!1===t.isSideInnerWithinViewport]}}]),s(u,"UNFIXED",[{to:o,when:function(t){return[!1===t.isSideInnerWithinPath]}},{to:o,when:function(t){return[t.viewportTop<=t.startPoint-t.topSpacing]}},{to:"FINISH",when:function(t){return[t.viewportBottom>t.finishPoint]}},{to:"TOP_FIXED",when:function(t){return["up"===t.scrollDirection,t.viewportTop<=t.sideInnerTop-t.topSpacing]}},{to:"TOP_FIXED",when:function(t){return[!0===t.isSideInnerWithinViewport,t.viewportBottom>=t.sideInnerBottom+t.bottomSpacing]}},{to:"BOTTOM_FIXED",when:function(t){return[!1===t.isSideInnerWithinViewport,t.viewportBottom>t.sideInnerBottom+t.bottomSpacing]}}]),s(u,"BOTTOM_FIXED",[{to:o,when:function(t){return[!1===t.isSideInnerWithinPath]}},{to:o,when:function(t){return[!0===t.isSideInnerWithinPath,t.sideInnerTop<=t.startPoint-t.topSpacing]}},{to:"UNFIXED",when:function(t){return["up"===t.scrollDirection]}},{to:"TOP_FIXED",when:function(t){return[!0===t.isSideInnerWithinViewport]}},{to:"FINISH",when:function(t){return[t.sideInnerBottom>t.finishPoint]}}]),s(u,"FINISH",[{to:o,when:function(t){return[!1===t.isSideInnerWithinPath]}},{to:o,when:function(t){return[t.viewportTop<=t.startPoint-t.topSpacing]}},{to:"BOTTOM_FIXED",when:function(t){return[t.sideInnerBottom+t.bottomSpacing<=t.finishPoint,t.viewportBottom<t.finishPoint]}},{to:"TOP_FIXED",when:function(t){return[t.viewportTop<=t.sideInnerTop-t.topSpacing]}}]),u);var c=function(t){var n=t.actions,e=t.transitions,i=t.initialState;return{findTransitionFor:function(){for(var t=arguments.length,n=Array(t),o=0;o<t;o++)n[o]=arguments[o];return e[i].find((function(t){return t.when.apply(void 0,n).every((function(t){return t}))}))},performTransition:function(t){var e=t.to;return function(){i=e,n[e].apply(n,arguments)}}}};var f=function(t,n){var e=t.getBoundingClientRect();return{top:e.top+n,bottom:e.bottom+n,height:e.height}};var d=function(t,n){var e=n.$viewport,i=n.$relative,o=n.$sideInner,r=n.$sideOuter,u=n.topSpacing,a=n.bottomSpacing,s={},p=function(){var t,n=function(t){var n=t.clientHeight||t.innerHeight,e=t.scrollTop||t.pageYOffset;return{top:e,bottom:e+n,height:n}}(e),p=f(o,n.top),c=f(r,n.top),d=f(i,n.top),h=(t=n.top,s.viewportTop<t?"down":s.viewportTop>t?"up":"notChanged"),l=c.top,I=d.bottom,v=I-l,w=p.height+u+a<n.height,m=p.height<v,g=Math.max(p.height,v);return{startPoint:l,finishPoint:I,topSpacing:u,bottomSpacing:a,scrollDirection:h,isSideInnerWithinPath:m,isSideInnerWithinViewport:w,sideOuterHeight:g,viewportTop:n.top,viewportBottom:n.bottom,sideInnerTop:p.top,sideInnerBottom:p.bottom,sideInnerHeight:p.height}},c=function(){var n=p();t(s,n),s=n},d=function(t){var n=void 0;return function(){n||(n=requestAnimationFrame((function(){n=null,t()})))}}(c);return{start:function(){e.addEventListener("scroll",d),e.addEventListener("resize",d),c()},stop:function(){e.removeEventListener("scroll",d),e.removeEventListener("resize",d)},tick:c}};n.default=function(t){var n=t.viewport||window,e=t.sidebar,i=t.sidebarInner||e.firstElementChild,r=t.relative,u=t.topSpacing||0,s=t.bottomSpacing||0,f=t.onStateChange,h=c({actions:a,transitions:p,initialState:o}),l=d((function(t,n){var o=h.findTransitionFor(n);o&&(h.performTransition(o)(n,{$sideInner:i,$sideOuter:e,$relative:r}),f&&f(o.to)),I(t,n)}),{$viewport:n,$sideOuter:e,$sideInner:i,$relative:r,topSpacing:u,bottomSpacing:s}),I=function(t,n){Math.abs((t.sideOuterHeight||0)-n.sideOuterHeight)>=1&&(e.style.height=n.sideOuterHeight+"px")};return requestAnimationFrame((function(){e.style.willChange="height",i.style.width="inherit",i.style.transform="translateZ(0)",i.style.willChange="transform",l.start()})),{forceUpdate:function(){l.tick()},destroy:function(){l.stop()}}}}]).default}));