@bva/stickie - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
   "name": "@bva/stickie",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Enables sticky scrolling on navigation elements such as headers and sidebars.",
@@ -9,3 +9,3 @@ "main": "stickie.js",
     "build": "rollup -c",
-    "prepublish": "yarn build"
+    "prepublishOnly": "yarn build"
   },
@@ -12,0 +12,0 @@ "repository": {

src/index.js

@@ -158,17 +158,20 @@ //Common static properties shared across the plugin.
   destroy() {
-    this.initialized = false;
-    this.isEnabled = false;
+    if (this.initialized) {
+      this.initialized = false;
+      this.isEnabled = false;
 
-    this.setInactive();
-    this.removePlaceholder();
+      this.setInactive();
+      this.removePlaceholder();
 
-    if (this.containerEl) {
-      this.containerEl.style.position = '';
-    }
+      if (this.containerEl) {
+        this.containerEl.style.position = '';
+      }
 
-    window.removeEventListener('scroll', this._boundUpdateSticky, { passive: true });
+      window.removeEventListener('scroll', this._boundUpdateSticky, { passive: true });
 
-    this._stickyElResizeObserver ? this._stickyElResizeObserver.unobserve(this.stickyEl) : '';
-    this._placeholderElResizeObserver ? this._placeholderElResizeObserver.unobserve(this.placeholderEl) : '';
+      this._stickyElResizeObserver ? this._stickyElResizeObserver.unobserve(this.stickyEl) : '';
+      this._placeholderElResizeObserver ? this._placeholderElResizeObserver.unobserve(this.placeholderEl) : '';
+    }
 
+    //This event is attached even if the plugin is not initialized, since there might be per-viewport checks.
     if (this.mediaQueryListener) {
@@ -178,2 +181,3 @@ this.mediaQueryListener.removeEventListener('change', this._boundEnableSticky);
 
+    //Instances are pushed before initialization so that the plugin can be always accessible, if needed.
     INSTANCES.delete(this.stickyEl);
@@ -180,0 +184,0 @@ }

stickie.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Stickie=e()}(this,(function(){"use strict";function t(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,s)}return i}function e(e){for(var i=1;i<arguments.length;i++){var s=null!=arguments[i]?arguments[i]:{};i%2?t(Object(s),!0).forEach((function(t){o(e,t,s[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):t(Object(s)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(s,t))}))}return e}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}function o(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}var l={up:"up",down:"down"},c={enabled:!0,classScope:"stickie",eventScope:"stickie",contained:!1,autoWidth:!0,offset:0,offsetEl:null,applyOffset:!0,waitUntilScrolled:!0,heightThereshold:25,enableDirectionUpdates:!1,scrollDirectionResetWait:20,scrollPositionThereshold:80,fromViewportBottom:!1,reversePlaceholderBehavior:!1},n=new Map,h=function(){function t(s){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(i(this,t),this.options=e(e({},c),o),this.stickyEl=this.getEl(s)||null,!this.stickyEl)return console.warn("No element or seletor provided for Stickie. One must be provided as the first argument."),!1;this._boundUpdateSticky=this.updateSticky.bind(this,!1),this._boundEnableSticky=this.enableSticky.bind(this),"string"==typeof this.options.enabled?(this.mediaQueryListener=window.matchMedia(this.options.enabled),this.mediaQueryListener.addEventListener("change",this._boundEnableSticky),this.enableSticky(this.mediaQueryListener)):this.enableSticky({matches:!!this.options.enabled}),n.set(this.stickyEl,this)}var o,h,r;return o=t,h=[{key:"enableSticky",value:function(t){!this.isEnabled&&t.matches?(this.isEnabled=!0,this.initialized||this.initialize(),this.setOffsetValue(),window.addEventListener("scroll",this._boundUpdateSticky,{passive:!0}),this._stickyElResizeObserver&&this._stickyElResizeObserver.observe(this.stickyEl),this._placeholderElResizeObserver&&this._placeholderElResizeObserver.observe(this.placeholderEl),this.updateSticky()):this.isEnabled&&!t.matches&&(this.isEnabled=!1,this.setInactive(),window.removeEventListener("scroll",this._boundUpdateSticky,{passive:!0}),this._stickyElResizeObserver&&this._stickyElResizeObserver.unobserve(this.stickyEl),this._placeholderElResizeObserver&&this._placeholderElResizeObserver.unobserve(this.placeholderEl))}},{key:"initialize",value:function(){var t=this;this.initialized=!0,this.renderPlaceholder(),this.options.offsetEl&&(this.offsetElements=this.getOffsetElements()),this.containerEl=this.options.contained?this.getEl(this.options.contained)||this.stickyEl.parentNode:null,this.autoWidthEl=this.options.autoWidth?this.getEl(this.options.autoWidth)||this.placeholderEl:null,this.containerEl&&(this.containerEl.style.position="relative"),"function"==typeof window.ResizeObserver&&(this._stickyElResizeObserver=new ResizeObserver(this.debounce((function(e){t.updateSticky(),(t.isActive||t.isFrozen)&&t.setPlaceholderProps(!t.options.reversePlaceholderBehavior)}),25)),this.autoWidthEl&&(this._placeholderElResizeObserver=new ResizeObserver(this.debounce(this.syncStickyElWidth.bind(this),25)))),this.scrollPosition=0,this.options.enableDirectionUpdates&&(this._debouncedDirectionReset=this.debounce((function(){t._prevScrollPosition=t._placeholderElRect.top}),this.options.scrollDirectionResetWait)),this.publishEvent("init"),this.stickyEl.addEventListener("sticky:syncWidth",this.syncStickyElWidth.bind(this)),this.stickyEl.addEventListener("sticky:updateScrollDirection",function(t){this.updateScrollDirection(t.detail.scrollDirection)}.bind(this))}},{key:"destroy",value:function(){this.initialized=!1,this.isEnabled=!1,this.setInactive(),this.removePlaceholder(),this.containerEl&&(this.containerEl.style.position=""),window.removeEventListener("scroll",this._boundUpdateSticky,{passive:!0}),this._stickyElResizeObserver&&this._stickyElResizeObserver.unobserve(this.stickyEl),this._placeholderElResizeObserver&&this._placeholderElResizeObserver.unobserve(this.placeholderEl),this.mediaQueryListener&&this.mediaQueryListener.removeEventListener("change",this._boundEnableSticky),n.delete(this.stickyEl)}},{key:"getEl",value:function(t){return"string"==typeof t?document.querySelector(t):t instanceof HTMLElement?t:null}},{key:"setOffsetValue",value:function(){var t=0;return this.offsetElements instanceof NodeList&&[].forEach.call(this.offsetElements,(function(e){t+=Math.round(e.getBoundingClientRect().height)})),t+=this.options.offset,this.offset=t}},{key:"getOffsetElements",value:function(){return"string"==typeof this.options.offsetEl?document.querySelectorAll(this.options.offsetEl):this.options.offsetEl}},{key:"updateSticky",value:function(){this.setRectangles(),this._scrollListeningStart=this.options.fromViewportBottom?this._placeholderElRect.top+this._stickyElRect.height-Math.max(window.innerHeight,document.documentElement.clientHeight):this._placeholderElRect.top,(!this.containerEl||this._stickyElRect.height<this._containerElRect.height)&&this._scrollListeningStart<this.offset?(this.getScrollDirection(),this.toggletFullyScrolled(this._placeholderElRect.top+this._stickyElRect.height<this.offset),this.options.enableDirectionUpdates&&this.requestScrollDirectionUpdate(this.currentScrollDirection),this.checkIfTallerThanViewport()&&this.options.waitUntilScrolled?(this.setIsTall(),this.currentScrollDirection===l.down?Math.round(this._stickyElRect.bottom)<=Math.max(window.innerHeight,document.documentElement.clientHeight)?this.setActive(!0):!this.isActive||this.isDocked||this.shouldDock()||this.setFrozen():Math.round(this._stickyElRect.top)>=this.offset?this.setActive():!this.isActive||this.isDocked||this.shouldDock()||this.setFrozen()):(this.unsetIsTall(),this.setActive()),this.constrainScroll()):this.isActive&&this.setInactive()}},{key:"setRectangles",value:function(){this._stickyElRect=this.stickyEl.getBoundingClientRect(),this._placeholderElRect=this.placeholderEl.getBoundingClientRect(),this._containerElRect=this.containerEl?this.containerEl.getBoundingClientRect():{}}},{key:"constrainScroll",value:function(){this.containerEl&&this.isActive&&(this.setRectangles(),this.shouldDock()?this.setDocked():this.isDocked&&this._stickyElRect.top>=this.offset&&this.unsetDocked())}},{key:"shouldDock",value:function(){return this._containerElRect.bottom<=document.documentElement.clientHeight&&this._stickyElRect.bottom>=this._containerElRect.bottom&&(this.isStuckBottom||this._stickyElRect.top<=this.offset)}},{key:"applyOffset",value:function(){this.options.applyOffset&&(this.stickyEl.style.top="".concat(this.offset,"px"))}},{key:"syncStickyElWidth",value:function(){if(this.isActive||this.isFrozen){var t=window.getComputedStyle(this.autoWidthEl),e=this.autoWidthEl.getBoundingClientRect().width-parseFloat(t["padding-left"])-parseFloat(t["padding-right"]);this.stickyEl.style.width="".concat(e,"px")}}},{key:"setActive",value:function(t){this.isActive||(this.isActive=!0,this.unsetFrozen(),this.setPlaceholderProps(!this.options.reversePlaceholderBehavior),this.stickyEl.classList.add("".concat(this.options.classScope,"--active")),this.setStickyStyles(),t&&this.setStuckBottom(),this.autoWidthEl?this.syncStickyElWidth():this.stickyEl.style.width="100%",this.publishEvent("active"))}},{key:"setInactive",value:function(){this.isActive=!1,this.unsetStuckBottom(),this.unsetIsTall(),this.setPlaceholderProps(this.options.reversePlaceholderBehavior&&this.isEnabled),this.stickyEl.classList.remove("".concat(this.options.classScope,"--active")),this.stickyEl.classList.remove("".concat(this.options.classScope,"--docked")),this.stickyEl.classList.remove("".concat(this.options.classScope,"--frozen")),this.stickyEl.classList.remove("".concat(this.options.classScope,"--scrolled")),this.removeDirectionUpdates(),this.scrollPosition=0,this.removeStickyElStyles(),this.publishEvent("inactive")}},{key:"setFrozen",value:function(){this.isActive=!1,this.isFrozen=!0,this.stickyEl.classList.remove("".concat(this.options.classScope,"--active")),this.stickyEl.classList.add("".concat(this.options.classScope,"--frozen")),this.unsetStuckBottom(),this.stickyEl.style.position="absolute",this.stickyEl.style.top="".concat(Math.abs(this._containerElRect.top-this._stickyElRect.top),"px"),this.stickyEl.style.bottom="",this.publishEvent("frozen")}},{key:"unsetFrozen",value:function(){this.isFrozen=!1,this.stickyEl.classList.remove("".concat(this.options.classScope,"--frozen"))}},{key:"setDocked",value:function(){this.isDocked=!0,this.stickyEl.classList.add("".concat(this.options.classScope,"--docked")),this.unsetStuckBottom(),this.stickyEl.style.position="absolute",this.stickyEl.style.top="",this.stickyEl.style.bottom=0,this.publishEvent("docked")}},{key:"unsetDocked",value:function(){this.isDocked=!1,this.stickyEl.classList.remove("".concat(this.options.classScope,"--docked")),this.setStickyStyles(),this.publishEvent("undocked")}},{key:"setStuckBottom",value:function(){this.isStuckBottom=!0,this.stickyEl.style.top="",this.stickyEl.style.bottom=0,this.stickyEl.classList.add("".concat(this.options.classScope,"--stuck-bottom")),this.publishEvent("stuckBottom")}},{key:"unsetStuckBottom",value:function(){this.isStuckBottom=!1,this.stickyEl.classList.remove("".concat(this.options.classScope,"--stuck-bottom")),this.publishEvent("unstuckBottom")}},{key:"setIsTall",value:function(){this.isTall=!0,this.stickyEl.classList.add("".concat(this.options.classScope,"--is-tall"))}},{key:"unsetIsTall",value:function(){this.isTall=!1,this.stickyEl.classList.remove("".concat(this.options.classScope,"--is-tall"))}},{key:"setStickyStyles",value:function(){this.stickyEl.style.position="fixed",this.stickyEl.style.top=0,this.stickyEl.style.bottom="",this.applyOffset()}},{key:"removeStickyElStyles",value:function(){this.stickyEl.style.position="",this.stickyEl.style.top="",this.stickyEl.style.bottom="",this.stickyEl.style.width=""}},{key:"removeDirectionUpdates",value:function(){this.options.enableDirectionUpdates&&(this.stickyEl.classList.remove("".concat(this.options.classScope,"--scroll-").concat(l.up)),this.stickyEl.classList.remove("".concat(this.options.classScope,"--scroll-").concat(l.down)),this.stickyEl.classList.remove("".concat(this.options.classScope,"--scroll-direction-change")),delete this._prevScrollDirection)}},{key:"renderPlaceholder",value:function(){this.placeholderEl=document.createElement("div"),this.placeholderEl.className="".concat(this.options.classScope,"-placeholder"),this.stickyEl.parentNode.insertBefore(this.placeholderEl,this.stickyEl)}},{key:"removePlaceholder",value:function(){this.placeholderEl.parentNode.removeChild(this.placeholderEl)}},{key:"setPlaceholderProps",value:function(t){this.placeholderEl&&(t?(this.placeholderEl.style.height="".concat(this._stickyElRect.height,"px"),this.placeholderEl.style.margin=window.getComputedStyle(this.stickyEl).margin):(this.placeholderEl.style.height="",this.placeholderEl.style.margin=""))}},{key:"checkIfTallerThanViewport",value:function(){return this._stickyElRect.height+this.offset>document.documentElement.clientHeight+this.options.heightThereshold}},{key:"getScrollDirection",value:function(){return this.scrollPosition>this._placeholderElRect.top?this.currentScrollDirection=l.down:this.scrollPosition<this._placeholderElRect.top&&(this.currentScrollDirection=l.up),this.scrollPosition=this._placeholderElRect.top,this.currentScrollDirection}},{key:"requestScrollDirectionUpdate",value:function(t){this._updateScrollDirectionOnThreshold(t),this._debouncedDirectionReset()}},{key:"_updateScrollDirectionOnThreshold",value:function(t){this._diffScrollPosition=Math.abs(this._placeholderElRect.top-(this._prevScrollPosition||0)),this._diffScrollPosition>this.options.scrollPositionThereshold&&this.updateScrollDirection(t)}},{key:"updateScrollDirection",value:function(t){this.publishEvent("scrollDirectionUpdate",{previousDirection:this._prevScrollDirection,newDirection:t}),this._prevScrollDirection!==t&&(this.stickyEl.classList.add("".concat(this.options.classScope,"--scroll-").concat(t)),this.stickyEl.classList.remove("".concat(this.options.classScope,"--scroll-").concat(this._prevScrollDirection)),this._prevScrollDirection&&this.stickyEl.classList.add("".concat(this.options.classScope,"--scroll-direction-change")),this._prevScrollDirection=t,this._prevScrollPosition=this._placeholderElRect.top)}},{key:"toggletFullyScrolled",value:function(t){t?this.stickyEl.classList.add("".concat(this.options.classScope,"--scrolled")):this.stickyEl.classList.remove("".concat(this.options.classScope,"--scrolled"))}},{key:"publishEvent",value:function(){var t,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"event",s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o={bubbles:!0,cancelable:!0,detail:e({Stickie:this},s)},l="".concat(this.options.eventScope,":").concat(i);"function"!=typeof window.CustomEvent?(t=document.createEvent("CustomEvent")).initCustomEvent(l,o.bubbles,o.cancelable,null):t=new CustomEvent(l,o),this.stickyEl.dispatchEvent(t)}},{key:"debounce",value:function(t,e,i){var s;return function(){for(var o=arguments.length,l=new Array(o),c=0;c<o;c++)l[c]=arguments[c];clearTimeout(s),s=setTimeout((function(){s=null,i||t.apply(void 0,l)}),e),i&&!s&&t.apply(void 0,l)}}}],r=[{key:"get",value:function(t){return n.get(t)}},{key:"getAll",value:function(){return n}}],h&&s(o.prototype,h),r&&s(o,r),Object.defineProperty(o,"prototype",{writable:!1}),t}();return h}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Stickie=e()}(this,(function(){"use strict";function t(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,s)}return i}function e(e){for(var i=1;i<arguments.length;i++){var s=null!=arguments[i]?arguments[i]:{};i%2?t(Object(s),!0).forEach((function(t){o(e,t,s[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(s)):t(Object(s)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(s,t))}))}return e}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}function o(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}var l={up:"up",down:"down"},c={enabled:!0,classScope:"stickie",eventScope:"stickie",contained:!1,autoWidth:!0,offset:0,offsetEl:null,applyOffset:!0,waitUntilScrolled:!0,heightThereshold:25,enableDirectionUpdates:!1,scrollDirectionResetWait:20,scrollPositionThereshold:80,fromViewportBottom:!1,reversePlaceholderBehavior:!1},n=new Map,h=function(){function t(s){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(i(this,t),this.options=e(e({},c),o),this.stickyEl=this.getEl(s)||null,!this.stickyEl)return console.warn("No element or seletor provided for Stickie. One must be provided as the first argument."),!1;this._boundUpdateSticky=this.updateSticky.bind(this,!1),this._boundEnableSticky=this.enableSticky.bind(this),"string"==typeof this.options.enabled?(this.mediaQueryListener=window.matchMedia(this.options.enabled),this.mediaQueryListener.addEventListener("change",this._boundEnableSticky),this.enableSticky(this.mediaQueryListener)):this.enableSticky({matches:!!this.options.enabled}),n.set(this.stickyEl,this)}var o,h,r;return o=t,h=[{key:"enableSticky",value:function(t){!this.isEnabled&&t.matches?(this.isEnabled=!0,this.initialized||this.initialize(),this.setOffsetValue(),window.addEventListener("scroll",this._boundUpdateSticky,{passive:!0}),this._stickyElResizeObserver&&this._stickyElResizeObserver.observe(this.stickyEl),this._placeholderElResizeObserver&&this._placeholderElResizeObserver.observe(this.placeholderEl),this.updateSticky()):this.isEnabled&&!t.matches&&(this.isEnabled=!1,this.setInactive(),window.removeEventListener("scroll",this._boundUpdateSticky,{passive:!0}),this._stickyElResizeObserver&&this._stickyElResizeObserver.unobserve(this.stickyEl),this._placeholderElResizeObserver&&this._placeholderElResizeObserver.unobserve(this.placeholderEl))}},{key:"initialize",value:function(){var t=this;this.initialized=!0,this.renderPlaceholder(),this.options.offsetEl&&(this.offsetElements=this.getOffsetElements()),this.containerEl=this.options.contained?this.getEl(this.options.contained)||this.stickyEl.parentNode:null,this.autoWidthEl=this.options.autoWidth?this.getEl(this.options.autoWidth)||this.placeholderEl:null,this.containerEl&&(this.containerEl.style.position="relative"),"function"==typeof window.ResizeObserver&&(this._stickyElResizeObserver=new ResizeObserver(this.debounce((function(e){t.updateSticky(),(t.isActive||t.isFrozen)&&t.setPlaceholderProps(!t.options.reversePlaceholderBehavior)}),25)),this.autoWidthEl&&(this._placeholderElResizeObserver=new ResizeObserver(this.debounce(this.syncStickyElWidth.bind(this),25)))),this.scrollPosition=0,this.options.enableDirectionUpdates&&(this._debouncedDirectionReset=this.debounce((function(){t._prevScrollPosition=t._placeholderElRect.top}),this.options.scrollDirectionResetWait)),this.publishEvent("init"),this.stickyEl.addEventListener("sticky:syncWidth",this.syncStickyElWidth.bind(this)),this.stickyEl.addEventListener("sticky:updateScrollDirection",function(t){this.updateScrollDirection(t.detail.scrollDirection)}.bind(this))}},{key:"destroy",value:function(){this.initialized&&(this.initialized=!1,this.isEnabled=!1,this.setInactive(),this.removePlaceholder(),this.containerEl&&(this.containerEl.style.position=""),window.removeEventListener("scroll",this._boundUpdateSticky,{passive:!0}),this._stickyElResizeObserver&&this._stickyElResizeObserver.unobserve(this.stickyEl),this._placeholderElResizeObserver&&this._placeholderElResizeObserver.unobserve(this.placeholderEl)),this.mediaQueryListener&&this.mediaQueryListener.removeEventListener("change",this._boundEnableSticky),n.delete(this.stickyEl)}},{key:"getEl",value:function(t){return"string"==typeof t?document.querySelector(t):t instanceof HTMLElement?t:null}},{key:"setOffsetValue",value:function(){var t=0;return this.offsetElements instanceof NodeList&&[].forEach.call(this.offsetElements,(function(e){t+=Math.round(e.getBoundingClientRect().height)})),t+=this.options.offset,this.offset=t}},{key:"getOffsetElements",value:function(){return"string"==typeof this.options.offsetEl?document.querySelectorAll(this.options.offsetEl):this.options.offsetEl}},{key:"updateSticky",value:function(){this.setRectangles(),this._scrollListeningStart=this.options.fromViewportBottom?this._placeholderElRect.top+this._stickyElRect.height-Math.max(window.innerHeight,document.documentElement.clientHeight):this._placeholderElRect.top,(!this.containerEl||this._stickyElRect.height<this._containerElRect.height)&&this._scrollListeningStart<this.offset?(this.getScrollDirection(),this.toggletFullyScrolled(this._placeholderElRect.top+this._stickyElRect.height<this.offset),this.options.enableDirectionUpdates&&this.requestScrollDirectionUpdate(this.currentScrollDirection),this.checkIfTallerThanViewport()&&this.options.waitUntilScrolled?(this.setIsTall(),this.currentScrollDirection===l.down?Math.round(this._stickyElRect.bottom)<=Math.max(window.innerHeight,document.documentElement.clientHeight)?this.setActive(!0):!this.isActive||this.isDocked||this.shouldDock()||this.setFrozen():Math.round(this._stickyElRect.top)>=this.offset?this.setActive():!this.isActive||this.isDocked||this.shouldDock()||this.setFrozen()):(this.unsetIsTall(),this.setActive()),this.constrainScroll()):this.isActive&&this.setInactive()}},{key:"setRectangles",value:function(){this._stickyElRect=this.stickyEl.getBoundingClientRect(),this._placeholderElRect=this.placeholderEl.getBoundingClientRect(),this._containerElRect=this.containerEl?this.containerEl.getBoundingClientRect():{}}},{key:"constrainScroll",value:function(){this.containerEl&&this.isActive&&(this.setRectangles(),this.shouldDock()?this.setDocked():this.isDocked&&this._stickyElRect.top>=this.offset&&this.unsetDocked())}},{key:"shouldDock",value:function(){return this._containerElRect.bottom<=document.documentElement.clientHeight&&this._stickyElRect.bottom>=this._containerElRect.bottom&&(this.isStuckBottom||this._stickyElRect.top<=this.offset)}},{key:"applyOffset",value:function(){this.options.applyOffset&&(this.stickyEl.style.top="".concat(this.offset,"px"))}},{key:"syncStickyElWidth",value:function(){if(this.isActive||this.isFrozen){var t=window.getComputedStyle(this.autoWidthEl),e=this.autoWidthEl.getBoundingClientRect().width-parseFloat(t["padding-left"])-parseFloat(t["padding-right"]);this.stickyEl.style.width="".concat(e,"px")}}},{key:"setActive",value:function(t){this.isActive||(this.isActive=!0,this.unsetFrozen(),this.setPlaceholderProps(!this.options.reversePlaceholderBehavior),this.stickyEl.classList.add("".concat(this.options.classScope,"--active")),this.setStickyStyles(),t&&this.setStuckBottom(),this.autoWidthEl?this.syncStickyElWidth():this.stickyEl.style.width="100%",this.publishEvent("active"))}},{key:"setInactive",value:function(){this.isActive=!1,this.unsetStuckBottom(),this.unsetIsTall(),this.setPlaceholderProps(this.options.reversePlaceholderBehavior&&this.isEnabled),this.stickyEl.classList.remove("".concat(this.options.classScope,"--active")),this.stickyEl.classList.remove("".concat(this.options.classScope,"--docked")),this.stickyEl.classList.remove("".concat(this.options.classScope,"--frozen")),this.stickyEl.classList.remove("".concat(this.options.classScope,"--scrolled")),this.removeDirectionUpdates(),this.scrollPosition=0,this.removeStickyElStyles(),this.publishEvent("inactive")}},{key:"setFrozen",value:function(){this.isActive=!1,this.isFrozen=!0,this.stickyEl.classList.remove("".concat(this.options.classScope,"--active")),this.stickyEl.classList.add("".concat(this.options.classScope,"--frozen")),this.unsetStuckBottom(),this.stickyEl.style.position="absolute",this.stickyEl.style.top="".concat(Math.abs(this._containerElRect.top-this._stickyElRect.top),"px"),this.stickyEl.style.bottom="",this.publishEvent("frozen")}},{key:"unsetFrozen",value:function(){this.isFrozen=!1,this.stickyEl.classList.remove("".concat(this.options.classScope,"--frozen"))}},{key:"setDocked",value:function(){this.isDocked=!0,this.stickyEl.classList.add("".concat(this.options.classScope,"--docked")),this.unsetStuckBottom(),this.stickyEl.style.position="absolute",this.stickyEl.style.top="",this.stickyEl.style.bottom=0,this.publishEvent("docked")}},{key:"unsetDocked",value:function(){this.isDocked=!1,this.stickyEl.classList.remove("".concat(this.options.classScope,"--docked")),this.setStickyStyles(),this.publishEvent("undocked")}},{key:"setStuckBottom",value:function(){this.isStuckBottom=!0,this.stickyEl.style.top="",this.stickyEl.style.bottom=0,this.stickyEl.classList.add("".concat(this.options.classScope,"--stuck-bottom")),this.publishEvent("stuckBottom")}},{key:"unsetStuckBottom",value:function(){this.isStuckBottom=!1,this.stickyEl.classList.remove("".concat(this.options.classScope,"--stuck-bottom")),this.publishEvent("unstuckBottom")}},{key:"setIsTall",value:function(){this.isTall=!0,this.stickyEl.classList.add("".concat(this.options.classScope,"--is-tall"))}},{key:"unsetIsTall",value:function(){this.isTall=!1,this.stickyEl.classList.remove("".concat(this.options.classScope,"--is-tall"))}},{key:"setStickyStyles",value:function(){this.stickyEl.style.position="fixed",this.stickyEl.style.top=0,this.stickyEl.style.bottom="",this.applyOffset()}},{key:"removeStickyElStyles",value:function(){this.stickyEl.style.position="",this.stickyEl.style.top="",this.stickyEl.style.bottom="",this.stickyEl.style.width=""}},{key:"removeDirectionUpdates",value:function(){this.options.enableDirectionUpdates&&(this.stickyEl.classList.remove("".concat(this.options.classScope,"--scroll-").concat(l.up)),this.stickyEl.classList.remove("".concat(this.options.classScope,"--scroll-").concat(l.down)),this.stickyEl.classList.remove("".concat(this.options.classScope,"--scroll-direction-change")),delete this._prevScrollDirection)}},{key:"renderPlaceholder",value:function(){this.placeholderEl=document.createElement("div"),this.placeholderEl.className="".concat(this.options.classScope,"-placeholder"),this.stickyEl.parentNode.insertBefore(this.placeholderEl,this.stickyEl)}},{key:"removePlaceholder",value:function(){this.placeholderEl.parentNode.removeChild(this.placeholderEl)}},{key:"setPlaceholderProps",value:function(t){this.placeholderEl&&(t?(this.placeholderEl.style.height="".concat(this._stickyElRect.height,"px"),this.placeholderEl.style.margin=window.getComputedStyle(this.stickyEl).margin):(this.placeholderEl.style.height="",this.placeholderEl.style.margin=""))}},{key:"checkIfTallerThanViewport",value:function(){return this._stickyElRect.height+this.offset>document.documentElement.clientHeight+this.options.heightThereshold}},{key:"getScrollDirection",value:function(){return this.scrollPosition>this._placeholderElRect.top?this.currentScrollDirection=l.down:this.scrollPosition<this._placeholderElRect.top&&(this.currentScrollDirection=l.up),this.scrollPosition=this._placeholderElRect.top,this.currentScrollDirection}},{key:"requestScrollDirectionUpdate",value:function(t){this._updateScrollDirectionOnThreshold(t),this._debouncedDirectionReset()}},{key:"_updateScrollDirectionOnThreshold",value:function(t){this._diffScrollPosition=Math.abs(this._placeholderElRect.top-(this._prevScrollPosition||0)),this._diffScrollPosition>this.options.scrollPositionThereshold&&this.updateScrollDirection(t)}},{key:"updateScrollDirection",value:function(t){this.publishEvent("scrollDirectionUpdate",{previousDirection:this._prevScrollDirection,newDirection:t}),this._prevScrollDirection!==t&&(this.stickyEl.classList.add("".concat(this.options.classScope,"--scroll-").concat(t)),this.stickyEl.classList.remove("".concat(this.options.classScope,"--scroll-").concat(this._prevScrollDirection)),this._prevScrollDirection&&this.stickyEl.classList.add("".concat(this.options.classScope,"--scroll-direction-change")),this._prevScrollDirection=t,this._prevScrollPosition=this._placeholderElRect.top)}},{key:"toggletFullyScrolled",value:function(t){t?this.stickyEl.classList.add("".concat(this.options.classScope,"--scrolled")):this.stickyEl.classList.remove("".concat(this.options.classScope,"--scrolled"))}},{key:"publishEvent",value:function(){var t,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"event",s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o={bubbles:!0,cancelable:!0,detail:e({Stickie:this},s)},l="".concat(this.options.eventScope,":").concat(i);"function"!=typeof window.CustomEvent?(t=document.createEvent("CustomEvent")).initCustomEvent(l,o.bubbles,o.cancelable,null):t=new CustomEvent(l,o),this.stickyEl.dispatchEvent(t)}},{key:"debounce",value:function(t,e,i){var s;return function(){for(var o=arguments.length,l=new Array(o),c=0;c<o;c++)l[c]=arguments[c];clearTimeout(s),s=setTimeout((function(){s=null,i||t.apply(void 0,l)}),e),i&&!s&&t.apply(void 0,l)}}}],r=[{key:"get",value:function(t){return n.get(t)}},{key:"getAll",value:function(){return n}}],h&&s(o.prototype,h),r&&s(o,r),Object.defineProperty(o,"prototype",{writable:!1}),t}();return h}));

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45179

increased by0.65%

Lines of code

587

increased by0.69%

No dependency changes