VueStickto.js 4.3 KB

1
  1. !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueStickto=e():t.VueStickto=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var s=e[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,i),s.l=!0,s.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(1);e.default={install:function(t,e){t.directive("stickto",{inserted:function(t){(0,n.stick)(t)}})}}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.unstick=e.stick=void 0;var n,s=i(2),o=(n=s)&&n.__esModule?n:{default:n};var l=[];function r(){if(0!=l.length){for(var t=void 0,e=void 0,i=void 0,n=0;n<l.length;n++){var s=l[n];!t&&s.shouldStick()?(t=s,l[n-1]&&(e=l[n-1])):s.unstick()}t&&e&&e.isInDangerZone(t)&&(i=e),t&&t.stick(),t&&i&&t.smoothSwitch(i)}}document.addEventListener("scroll",r),e.stick=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=e.className,n=e.zIndex;r();var s=new o.default(t,i,n);return l.unshift(s),s},e.unstick=function(t){l=l.filter(function(e){return t instanceof o.default&&e==t?(t.destroy(),!1):e.$el!=t||(e.destroy(),!1)})}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=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}}();var s=-1,o=function(){function t(e,i,n){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),s++,this.cid=s,this.$el=e;var o=window.getComputedStyle(e);this.zIndex="20",n&&(this.zIndex=n),this.className="stickto-auto-generated-sticker",i&&(this.className=i.trim()),this.styleCache={position:o.position,top:o.top,zIndex:o.zIndex},this.$holder=document.createElement("div"),this.$holder.className="stickto-auto-generated-stick-holder stickto-auto-generated-stick-holder-"+this.cid,this.$el.parentNode.insertBefore(this.$holder,this.$el)}return n(t,[{key:"getBoundingClientRect",value:function(){return this.$el.getBoundingClientRect()}},{key:"getHeight",value:function(){return Number(window.getComputedStyle(this.$el).height.split("px")[0])}},{key:"smoothSwitch",value:function(t){this.$el.style.transform="translate3d(0,"+(t.getBoundingClientRect().top-this.getHeight())+"px,0)"}},{key:"copyStyle",value:function(t,e,i){t[i]!==e[i]&&(t[i]=e[i])}},{key:"destroy",value:function(){this.unstick(),this.$holder.parentNode.removeChild(this.$holder),this.$holder=null,this.styleCache=null,this.$el=null,s--}},{key:"isInDangerZone",value:function(t){var e=this.$holder.getBoundingClientRect(),i=Number(window.getComputedStyle(t.$el).height.split("px")[0]);return e.top>0&&e.top<i}},{key:"shouldStick",value:function(){var t=this.$holder.getBoundingClientRect();Number(window.getComputedStyle(this.$el).height.split("px")[0]);return t.top<=0}},{key:"stick",value:function(){var t={position:"fixed",top:"0px",zIndex:this.zIndex};this.copyStyle(this.$holder.style,window.getComputedStyle(this.$el),"height"),this.copyStyle(this.$el.style,t,"position"),this.copyStyle(this.$el.style,t,"top"),this.copyStyle(this.$el.style,t,"zIndex"),this.copyStyle(this.$el.style,{transform:"translate3d(0,0,0)"},"transform"),this.className&&!this.$el.className.match(new RegExp(this.className))&&(this.$el.className+=" "+this.className)}},{key:"unstick",value:function(){var t=new RegExp(" "+this.className,"g");this.copyStyle(this.$el.style,this.styleCache,"position"),this.copyStyle(this.$el.style,this.styleCache,"top"),this.copyStyle(this.$el.style,this.styleCache,"zIndex"),this.copyStyle(this.$holder.style,{height:"0px"},"height"),this.copyStyle(this.$el.style,{transform:"translate3d(0,0,0)"},"transform"),this.className&&this.$el.className.match(t)&&(this.$el.className=this.$el.className.replace(t,""))}}]),t}();e.default=o}])});