@bva/stickie - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

package.json

 {
   "name": "@bva/stickie",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Enables sticky scrolling on navigation elements such as headers and sidebars.",
@@ -5,0 +5,0 @@ "main": "stickie.js",

README.md

@@ -92,2 +92,3 @@ # Stickie
 | reversePlaceholderBehavior | Boolean | false | By default, the placeholder’s height is set to 0 before the element becomes sticky, and then copies the sticky element’s height once it becomes active. Setting this option to true reverts the behavior, so that the placeholder is initially set to match the sticky element’s height, and then resets to 0 once the sticky element is active. |
+| camelCaseEvents | Boolean | false | Converts all of the plugin's DOM event names to camelCase. Default event names are separated by a colon, i.e. `<eventScope>:active`. This option transforms the names so that use the format: `<eventScope>Active`. Useful for better compatibility with certain frameworks, such as React. |
 
@@ -94,0 +95,0 @@ ** = Set as unit-less value, i.e. `25` and not `25px`.

src/index.js

@@ -8,2 +8,13 @@ //Common static properties shared across the plugin.
 };
+const EVENT_NAMES = {
+  init: 'init',
+  active: 'active',
+  inactive: 'inactive',
+  frozen: 'frozen',
+  docked: 'docked',
+  undocked: 'undocked',
+  stuck: 'stuckBottom',
+  unstuck: 'unstuckBottom',
+  directionChange: 'scrollDirectionUpdate',
+};
 const DEFAULTS = {
@@ -27,2 +38,3 @@ enabled: true,
   reversePlaceholderBehavior: false,
+  camelCaseEvents: false,
 };
@@ -46,2 +58,24 @@ const INSTANCES = new Map();
 
+  /**
+   * Returns an array of the allowed option list.
+   * Any option not in this array can be considered unsuported.
+   */
+  static getOptionList() {
+    return Object.keys(DEFAULTS);
+  }
+
+  /**
+   * Returns an array of the supported events names.
+   * Set `transform` to true to format the event names to the preferred output.
+   */
+  static getEventList(transform) {
+    return Object.keys(EVENT_NAMES).map(eventName => {
+      return transform ? Stickie.toCamelCase(EVENT_NAMES[eventName]) : EVENT_NAMES[eventName];
+    });
+  }
+
+  static toCamelCase(name) {
+    return `${name[0].toUpperCase()}${name.substring(1)}`;
+  }
+
   constructor(el, options = {}) {
@@ -148,3 +182,3 @@ this.options = { ...DEFAULTS, ...options };
 
-    this.publishEvent('init');
+    this.publishEvent(EVENT_NAMES.init);
 
@@ -352,3 +386,3 @@ this.stickyEl.addEventListener('sticky:syncWidth', this.syncStickyElWidth.bind(this));
 
-      this.publishEvent('active');
+      this.publishEvent(EVENT_NAMES.active);
     }
@@ -378,3 +412,3 @@ }
 
-    this.publishEvent('inactive');
+    this.publishEvent(EVENT_NAMES.inactive);
   }
@@ -399,3 +433,3 @@
 
-    this.publishEvent('frozen');
+    this.publishEvent(EVENT_NAMES.frozen);
   }
@@ -423,3 +457,3 @@
 
-    this.publishEvent('docked');
+    this.publishEvent(EVENT_NAMES.docked);
   }
@@ -433,3 +467,3 @@
 
-    this.publishEvent('undocked');
+    this.publishEvent(EVENT_NAMES.undocked);
   }
@@ -449,3 +483,3 @@
 
-    this.publishEvent('stuckBottom');
+    this.publishEvent(EVENT_NAMES.stuck);
   }
@@ -458,3 +492,3 @@
 
-    this.publishEvent('unstuckBottom');
+    this.publishEvent(EVENT_NAMES.unstuck);
   }
@@ -587,3 +621,3 @@
   updateScrollDirection(newScrollDirection) {
-    this.publishEvent('scrollDirectionUpdate', {
+    this.publishEvent(EVENT_NAMES.directionChange, {
       previousDirection: this._prevScrollDirection,
@@ -628,3 +662,4 @@ newDirection: newScrollDirection,
     const params = { bubbles: true, cancelable: true, detail: { Stickie: this, ...detail } };
-    const eventString = `${this.options.eventScope}:${eventName}`;
+    const formattedName = this.options.camelCaseEvents ? Stickie.toCamelCase(eventName) : `:${eventName}`;
+    const eventString = `${this.options.eventScope}${formattedName}`;
 
@@ -631,0 +666,0 @@ // IE >= 9, CustomEvent() constructor does not exist

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&&(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 c={up:"up",down:"down"},l={init:"init",active:"active",inactive:"inactive",frozen:"frozen",docked:"docked",undocked:"undocked",stuck:"stuckBottom",unstuck:"unstuckBottom",directionChange:"scrollDirectionUpdate"},n={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,camelCaseEvents:!1},h=new Map,r=function(){function t(s){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(i(this,t),this.options=e(e({},n),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}),h.set(this.stickyEl,this)}var o,r,a;return o=t,r=[{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(l.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),h.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===c.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(l.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(l.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(l.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(l.docked)}},{key:"unsetDocked",value:function(){this.isDocked=!1,this.stickyEl.classList.remove("".concat(this.options.classScope,"--docked")),this.setStickyStyles(),this.publishEvent(l.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(l.stuck)}},{key:"unsetStuckBottom",value:function(){this.isStuckBottom=!1,this.stickyEl.classList.remove("".concat(this.options.classScope,"--stuck-bottom")),this.publishEvent(l.unstuck)}},{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(c.up)),this.stickyEl.classList.remove("".concat(this.options.classScope,"--scroll-").concat(c.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=c.down:this.scrollPosition<this._placeholderElRect.top&&(this.currentScrollDirection=c.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(l.directionChange,{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 i,s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"event",o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},c={bubbles:!0,cancelable:!0,detail:e({Stickie:this},o)},l=this.options.camelCaseEvents?t.toCamelCase(s):":".concat(s),n="".concat(this.options.eventScope).concat(l);"function"!=typeof window.CustomEvent?(i=document.createEvent("CustomEvent")).initCustomEvent(n,c.bubbles,c.cancelable,null):i=new CustomEvent(n,c),this.stickyEl.dispatchEvent(i)}},{key:"debounce",value:function(t,e,i){var s;return function(){for(var o=arguments.length,c=new Array(o),l=0;l<o;l++)c[l]=arguments[l];clearTimeout(s),s=setTimeout((function(){s=null,i||t.apply(void 0,c)}),e),i&&!s&&t.apply(void 0,c)}}}],a=[{key:"get",value:function(t){return h.get(t)}},{key:"getAll",value:function(){return h}},{key:"getOptionList",value:function(){return Object.keys(n)}},{key:"getEventList",value:function(e){return Object.keys(l).map((function(i){return e?t.toCamelCase(l[i]):l[i]}))}},{key:"toCamelCase",value:function(t){return"".concat(t[0].toUpperCase()).concat(t.substring(1))}}],r&&s(o.prototype,r),a&&s(o,a),Object.defineProperty(o,"prototype",{writable:!1}),t}();return r}));

No alert changes

Improved metrics

Total package byte prevSize

47107

increased by4.27%

Lines of code

621

increased by5.79%

Number of lines in readme file

184

increased by0.55%

No dependency changes