npm - stick-n-roll - Versions diffs - 1.0.1 - Mend

stick-n-roll 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2025 devashtar
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.MD ADDED Viewed

@@ -0,0 +1,94 @@
+**`stick-n-roll`** is a lightweight and user-friendly npm package that enables HTML elements to have functionality similar to position: sticky, with the added ability to scroll the block.
+**Key Features**:
+- **Easy Integration**: Simply install the package and add a few lines of code to activate the functionality.
+- **Block Scrolling**: Unlike standard position: sticky, sticky-scroll allows the block to scroll while maintaining its "stickiness" as the user scrolls the page.
+- **Customizable Options**: Easily configure the block's behavior with parameters such as `spaceBottom`, `spaceTop` to add margins and default `position` for `target` element.
+- **Cross-Browser Support**: The package works seamlessly across all modern browsers, ensuring consistent behavior on different platforms.
+- **Simplicity of Use**: Minimal code required for setup, providing maximum flexibility in usage.
+## Table of contents
+- [Installing](#installing)
+- [Using](#using)
+- [Links](#links)
+- [Copyright and license](#copyright-and-license)
+## Installing
+```sh
+npm install --save-dev stick-n-roll
+```
+## Using
+### HTML example
+```html
+<body>
+    <h1>Example</h1>
+    <main>
+        <aside id="container">
+            <div id="target-element">Sidebar content...</div>
+        </aside>
+        <section>
+            ...
+        </section>
+    </main>
+    <script>
+        const StickNRoll = require('stick-n-roll');
+        const container = document.getElementById('container');
+        const targetElement = document.getElementById('target-element');
+        const stickNRoll = new StickNRoll(container, targetElement, { spaceBottom: 8, spaceTop: 64 });
+        stickNRoll.enable();
+    </script>
+</body>
+```
+### Native javascript
+```js
+const StickNRoll = require('stick-n-roll');
+const container = document.getElementById('container');
+const targetElement = document.getElementById('target-element');
+const stickNRoll = new StickNRoll(container, targetElement, { spaceBottom: 8, spaceTop: 64, position: 'relative' });
+stickNRoll.enable(); // start
+// stickNRoll.updateSpaces({ spaceTop: 96, spaceBottom: 16, }); // Change spaces dynamically
+// stickNRoll.disable(); // disable listeners and stop running. You can start it again with help "enable()".
+```
+### React ts
+```ts
+import StickNRoll from 'stick-n-roll';
+// ...
+const ref = React.useRef<StickNRoll>(new StickNRoll(containerRef, targetElementRef, { spaceBottom: 8, spaceTop: 64 }));
+React.useEffect(() => {
+    if (ref.current) {
+        ref.current.enable(); // add listeners
+        return () => {
+            ref.current.disable(); // delete listeners
+        };
+    }
+}, []);
+// ...
+```
+## Links
+- [DOM](https://developer.mozilla.org/en-US/docs/Glossary/DOM)
+- [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)
+- [dimensions of elements](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)
+- [coordinate systems](https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems)
+- [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport)
+- [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
+- [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)
+- [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame)
+- [resizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
+- [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
+- [removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)
+## Copyright and license
+Code copyright 2025 the [author](https://github.com/devashtar). Code released under the [MIT License](./README.MD).

package/dist/index.d.mts ADDED Viewed

@@ -0,0 +1,206 @@
+/**
+ * Options type.
+ */
+type OptionsType = {
+    /**
+     * The space between bottom of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport} and bottom of the `visible area`.
+     * @default 0
+     */
+    spaceBottom?: number;
+    /**
+     * The space between top of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport} and top of the `visible area`.
+     * @default 0
+     */
+    spaceTop?: number;
+    /**
+     * Default {@link https://developer.mozilla.org/en-US/docs/Web/CSS/position|position} for the target `element`.
+     * @default ''
+     */
+    position?: CSSStyleDeclaration['position'];
+};
+/**
+ * Helps to give an element sticky scrolling capability.
+ */
+declare class StickNRoll {
+    /**
+     * Parent element of target {@link element}.
+     */
+    private container;
+    /**
+     * Target element with sticky and scroll abilities.
+     */
+    private element;
+    /**
+     * Triggered Event.
+     */
+    private events;
+    /**
+     * Indicates that a render request has already been initiated.
+     * @default false
+     */
+    private isRunningRequest;
+    /**
+     * The Current Y-axis coordinates relative to the {@link container}.
+     */
+    private translateY;
+    /**
+     * The maximum allowed Y-axis coordinates relative to the {@link container}.
+     */
+    private maxTranslateY;
+    /**
+     * Previous element height.
+     */
+    private prevElementHeight;
+    /**
+     * Height of the {@link container}.
+     */
+    private containerHeight;
+    /**
+     * Width of the {@link container}.
+     */
+    private containerWidth;
+    /**
+     * Coordinate by X-axis of the {@link container}.
+     */
+    private containerLeft;
+    /**
+     * Coordinate by Y-axis of the {@link container}.
+     */
+    private containerTop;
+    /**
+     * Previous width of the {@link container}.
+     */
+    private prevContainerWidth;
+    /**
+     * Previous coordinate by X-axis of the {@link container}.
+     */
+    private prevContainerLeft;
+    /**
+     * Previous coordinate by Y-axis of the {@link container}.
+     */
+    private prevContainerTop;
+    /**
+     * Height of the {@link collider}.
+     */
+    private colliderHeight;
+    /**
+     * Top coordinate of the {@link collider}.
+     */
+    private colliderTop;
+    /**
+     * Previous coordinate by X-axis of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport}.
+     */
+    private prevViewportScrollX;
+    /**
+     * Previous coordinate by Y-axis of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport}.
+     */
+    private prevViewportScrollY;
+    /**
+     * Space top.
+     * @default 0
+     */
+    private spaceTop;
+    /**
+     * Space bottom.
+     * @default 0
+     */
+    private spaceBottom;
+    /**
+     *  Resize observer.
+     */
+    private resizeObserver;
+    /**
+     * Current strategy. Helps to detect element behaviour.
+     * @default Strategy.None
+     */
+    private strategy;
+    /**
+     * Previous strategy.
+     * @default Strategy.None
+     */
+    private prevStrategy;
+    /**
+     * Previous state.
+     * @default Variant.None
+     */
+    private prevState;
+    /**
+     * List of available CSS properties.
+     */
+    private listOfRules;
+    /**
+     * List of css properties to be updated.
+     */
+    private rules;
+    /**
+     * @param {HTMLElement} container - The parent element ({@link container}) of {@link element}.
+     * @param {HTMLElement} element - The target {@link element} which will be endowed with stickiness and scrolling abilities relative to its parent element ({@link container}).
+     */
+    constructor(container: HTMLElement, element: HTMLElement, options?: OptionsType);
+    /**
+     * Enable sticky scrolling capability. Use {@link disable} method to deactivate sticky scrolling capability.
+     */
+    enable(): void;
+    /**
+     * Disable sticky scrolling capability. Use {@link enable} method to activate sticky scrolling capability again.
+     */
+    disable(): void;
+    /**
+     *  Update {@link spaceBottom} and {@link spaceTop}. It fires the render after changes of spaces.
+     */
+    updateSpaces(spaces: Pick<OptionsType, 'spaceBottom' | 'spaceTop'>): void;
+    /**
+     * Resize listener.
+     */
+    private _resizeListener;
+    /**
+     * Scroll listener.
+     */
+    private _scrollListener;
+    /**
+     * Get coordinates for passed element.
+     */
+    private _getCoords;
+    /**
+     * Update styles in target {@link element} and {@link container}.
+     */
+    private _render;
+    /**
+     * Get the scroll direction. `None` for horizontal scrolling or no scrolling.
+     */
+    private _getDirection;
+    /**
+     * Get state of target element.
+     */
+    private _getState;
+    /**
+     * Get a {@link strategy} that determines the further behavior of the target {@link element}.
+     */
+    private _getStrategy;
+    /**
+     * Calculate {@link https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements|dimensions}.
+     */
+    private _calcDims;
+    /**
+     * Calculate {@link https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems|coordinates}.
+     */
+    private _calcScroll;
+    /**
+     * Helps apply DOM manipulation and synchronize processing with rendering. See {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame|requestAnimationFrame}.
+     */
+    private _request;
+    /**
+     * Observe {@link https://developer.mozilla.org/en-US/docs/Web/API/Node|nodes} from target {@link element} to {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/body|document body} with help the {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver|ResizeObserver}.
+     */
+    private _observeTreeNodesFromCurrentToBody;
+    /**
+     * Add required event listeners. See {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener|addEventListener} and {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver|ResizeObserver}.
+     */
+    private _addListeners;
+    /**
+     * Remove all event listeners. See {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener|removeEventListener} and {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver|ResizeObserver}.
+     */
+    private _removeListeners;
+}
+export { StickNRoll, StickNRoll as default };

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,206 @@
+/**
+ * Options type.
+ */
+type OptionsType = {
+    /**
+     * The space between bottom of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport} and bottom of the `visible area`.
+     * @default 0
+     */
+    spaceBottom?: number;
+    /**
+     * The space between top of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport} and top of the `visible area`.
+     * @default 0
+     */
+    spaceTop?: number;
+    /**
+     * Default {@link https://developer.mozilla.org/en-US/docs/Web/CSS/position|position} for the target `element`.
+     * @default ''
+     */
+    position?: CSSStyleDeclaration['position'];
+};
+/**
+ * Helps to give an element sticky scrolling capability.
+ */
+declare class StickNRoll {
+    /**
+     * Parent element of target {@link element}.
+     */
+    private container;
+    /**
+     * Target element with sticky and scroll abilities.
+     */
+    private element;
+    /**
+     * Triggered Event.
+     */
+    private events;
+    /**
+     * Indicates that a render request has already been initiated.
+     * @default false
+     */
+    private isRunningRequest;
+    /**
+     * The Current Y-axis coordinates relative to the {@link container}.
+     */
+    private translateY;
+    /**
+     * The maximum allowed Y-axis coordinates relative to the {@link container}.
+     */
+    private maxTranslateY;
+    /**
+     * Previous element height.
+     */
+    private prevElementHeight;
+    /**
+     * Height of the {@link container}.
+     */
+    private containerHeight;
+    /**
+     * Width of the {@link container}.
+     */
+    private containerWidth;
+    /**
+     * Coordinate by X-axis of the {@link container}.
+     */
+    private containerLeft;
+    /**
+     * Coordinate by Y-axis of the {@link container}.
+     */
+    private containerTop;
+    /**
+     * Previous width of the {@link container}.
+     */
+    private prevContainerWidth;
+    /**
+     * Previous coordinate by X-axis of the {@link container}.
+     */
+    private prevContainerLeft;
+    /**
+     * Previous coordinate by Y-axis of the {@link container}.
+     */
+    private prevContainerTop;
+    /**
+     * Height of the {@link collider}.
+     */
+    private colliderHeight;
+    /**
+     * Top coordinate of the {@link collider}.
+     */
+    private colliderTop;
+    /**
+     * Previous coordinate by X-axis of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport}.
+     */
+    private prevViewportScrollX;
+    /**
+     * Previous coordinate by Y-axis of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport}.
+     */
+    private prevViewportScrollY;
+    /**
+     * Space top.
+     * @default 0
+     */
+    private spaceTop;
+    /**
+     * Space bottom.
+     * @default 0
+     */
+    private spaceBottom;
+    /**
+     *  Resize observer.
+     */
+    private resizeObserver;
+    /**
+     * Current strategy. Helps to detect element behaviour.
+     * @default Strategy.None
+     */
+    private strategy;
+    /**
+     * Previous strategy.
+     * @default Strategy.None
+     */
+    private prevStrategy;
+    /**
+     * Previous state.
+     * @default Variant.None
+     */
+    private prevState;
+    /**
+     * List of available CSS properties.
+     */
+    private listOfRules;
+    /**
+     * List of css properties to be updated.
+     */
+    private rules;
+    /**
+     * @param {HTMLElement} container - The parent element ({@link container}) of {@link element}.
+     * @param {HTMLElement} element - The target {@link element} which will be endowed with stickiness and scrolling abilities relative to its parent element ({@link container}).
+     */
+    constructor(container: HTMLElement, element: HTMLElement, options?: OptionsType);
+    /**
+     * Enable sticky scrolling capability. Use {@link disable} method to deactivate sticky scrolling capability.
+     */
+    enable(): void;
+    /**
+     * Disable sticky scrolling capability. Use {@link enable} method to activate sticky scrolling capability again.
+     */
+    disable(): void;
+    /**
+     *  Update {@link spaceBottom} and {@link spaceTop}. It fires the render after changes of spaces.
+     */
+    updateSpaces(spaces: Pick<OptionsType, 'spaceBottom' | 'spaceTop'>): void;
+    /**
+     * Resize listener.
+     */
+    private _resizeListener;
+    /**
+     * Scroll listener.
+     */
+    private _scrollListener;
+    /**
+     * Get coordinates for passed element.
+     */
+    private _getCoords;
+    /**
+     * Update styles in target {@link element} and {@link container}.
+     */
+    private _render;
+    /**
+     * Get the scroll direction. `None` for horizontal scrolling or no scrolling.
+     */
+    private _getDirection;
+    /**
+     * Get state of target element.
+     */
+    private _getState;
+    /**
+     * Get a {@link strategy} that determines the further behavior of the target {@link element}.
+     */
+    private _getStrategy;
+    /**
+     * Calculate {@link https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements|dimensions}.
+     */
+    private _calcDims;
+    /**
+     * Calculate {@link https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems|coordinates}.
+     */
+    private _calcScroll;
+    /**
+     * Helps apply DOM manipulation and synchronize processing with rendering. See {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame|requestAnimationFrame}.
+     */
+    private _request;
+    /**
+     * Observe {@link https://developer.mozilla.org/en-US/docs/Web/API/Node|nodes} from target {@link element} to {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/body|document body} with help the {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver|ResizeObserver}.
+     */
+    private _observeTreeNodesFromCurrentToBody;
+    /**
+     * Add required event listeners. See {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener|addEventListener} and {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver|ResizeObserver}.
+     */
+    private _addListeners;
+    /**
+     * Remove all event listeners. See {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener|removeEventListener} and {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver|ResizeObserver}.
+     */
+    private _removeListeners;
+}
+export { StickNRoll, StickNRoll as default };

package/dist/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var p=(i,t)=>{for(var e in t)n(i,e,{get:t[e],enumerable:!0})},c=(i,t,e,r)=>{if(t&&typeof t=="object"\|\|typeof t=="function")for(let s of h(t))!l.call(i,s)&&s!==e&&n(i,s,{get:()=>t[s],enumerable:!(r=a(t,s))\|\|r.enumerable});return i};var v=i=>c(n({},"__esModule",{value:!0}),i);var d={};p(d,{StickNRoll:()=>o,default:()=>f});module.exports=v(d);var o=class{container;element;events;isRunningRequest;translateY;maxTranslateY;prevElementHeight;containerHeight;containerWidth;containerLeft;containerTop;prevContainerWidth;prevContainerLeft;prevContainerTop;colliderHeight;colliderTop;prevViewportScrollX;prevViewportScrollY;spaceTop;spaceBottom;resizeObserver;strategy;prevStrategy;prevState;listOfRules;rules;constructor(t,e,r){this.container=t,this.element=e,this.isRunningRequest=!1,this.colliderHeight=0,this.colliderTop=0,this.containerHeight=0,this.containerWidth=0,this.containerLeft=0,this.containerTop=0,this.prevContainerWidth=0,this.prevContainerLeft=0,this.prevContainerTop=0,this.prevElementHeight=0,this.maxTranslateY=0,this.translateY=0,this.prevViewportScrollX=0,this.prevViewportScrollY=0,this.events=[0,0],this.strategy=1,this.prevStrategy=1,this.prevState=3,this.listOfRules={width:"",left:"",top:"",position:r?.position??"",transform:""},this.rules={},this.spaceBottom=r?.spaceBottom??0,this.spaceTop=r?.spaceTop??0,this._calcDims=this._calcDims.bind(this),this._calcScroll=this._calcScroll.bind(this),this._resizeListener=this._resizeListener.bind(this),this._scrollListener=this._scrollListener.bind(this),this.resizeObserver=new ResizeObserver(this._resizeListener)}enable(){this._addListeners()}disable(){this._removeListeners(),this.isRunningRequest=!1,this.events.fill(0)}updateSpaces(t){this.spaceBottom=t.spaceBottom??0,this.spaceTop=t.spaceTop??0,this._resizeListener()}_resizeListener(){this.events[0]===0&&(this.events[0]=1),this._request()}_scrollListener(){this.events[1]===0&&(this.events[1]=2),this._request()}_getCoords(t){let e={left:t.offsetLeft,top:t.offsetTop};for(;t=t.tagName==="BODY"?t.parentElement:t.offsetParent;)e.top+=t.offsetTop,e.left+=t.offsetLeft;return e}_render(t){t===0?(this.translateY=this.maxTranslateY,this.rules={top:this.spaceTop+"px",left:"0px",position:"sticky",width:this.container.clientWidth+"px"}):t===2?(this.translateY=0,this.rules={top:this.colliderHeight+this.spaceTop-this.element.offsetHeight+"px",left:this.containerLeft-window.scrollX+"px",position:"fixed",width:this.container.clientWidth+"px"}):t===1?(this.translateY=0,this.rules={top:this.spaceTop+"px",left:this.containerLeft-window.scrollX+"px",position:"fixed",width:this.container.clientWidth+"px"}):t===3?(this.translateY=0,this.rules={}):t===4&&(this.prevState===1?this.translateY=this.colliderTop-this.containerTop:this.prevState===2?this.translateY=this.colliderTop+this.colliderHeight-this.containerTop-this.prevElementHeight:this.prevState===0&&(this.translateY=this.containerHeight-this.element.offsetHeight),this.rules={position:"relative",transform:`translate3d(0px, ${this.translateY}px, 0px)`}),this.container.style.position=t===0?"relative":"";for(let e in this.listOfRules)this.element.style[e]=this.rules[e]??this.listOfRules[e]}_getDirection(){return this.prevViewportScrollY===window.scrollY?1:this.prevViewportScrollY<window.scrollY?0:2}_getState(t){if(this.prevState===1){if(this.colliderTop<=this.containerTop)return 3;if(this.colliderTop+this.element.offsetHeight>=this.containerTop+this.containerHeight)return 0;if(this.prevStrategy===2&&this.element.offsetHeight>this.colliderHeight)return this.prevStrategy=this.strategy,4;if(this.strategy===0&&t===0)return 4;if(this.prevViewportScrollX!==window.scrollX\|\|this.prevContainerLeft!==this.containerLeft\|\|this.prevContainerWidth!==this.containerWidth\|\|this.prevContainerTop!==this.containerTop)return 1}else if(this.prevState===2){if(this.colliderTop<=this.containerTop)return 3;if(this.colliderTop+this.colliderHeight>=this.containerTop+this.containerHeight)return 0;if(this.element.offsetHeight<=this.colliderHeight)return 1;if(t===2\|\|this.prevElementHeight!==this.element.offsetHeight)return 4;if(this.prevViewportScrollX!==window.scrollX\|\|this.prevContainerLeft!==this.containerLeft\|\|this.prevContainerWidth!==this.containerWidth\|\|this.prevContainerTop!==this.containerTop)return 2}else if(this.prevState===0){if(this.colliderTop<=this.containerTop)return 3;if(t===2&&this.colliderTop<=this.containerTop+this.maxTranslateY\|\|this.element.offsetHeight<this.containerTop+this.containerHeight-this.colliderTop)return 1;if(this.prevContainerWidth!==this.containerWidth)return 0}else if(this.prevState===3){if(this.colliderTop+this.element.offsetHeight>=this.containerTop+this.containerHeight)return 0;if(this.element.offsetHeight<this.colliderHeight&&this.colliderTop>=this.containerTop)return 1;if(this.strategy===0&&this.colliderTop+this.colliderHeight>=this.containerTop+this.element.offsetHeight)return 2}else if(this.prevState===4){if(this.containerHeight-this.translateY<this.element.offsetHeight)return 0;if(this.element.offsetHeight<this.colliderHeight\|\|this.colliderTop<=this.containerTop+this.translateY)return 1;if(this.translateY<this.maxTranslateY&&this.colliderTop+this.colliderHeight>this.containerTop+this.translateY+this.element.offsetHeight)return 2}return 5}_getStrategy(){return this.containerHeight<=this.element.offsetHeight?1:this.colliderHeight<this.element.offsetHeight?0:2}_calcDims(){let t=this._getCoords(this.container);this.containerLeft=t.left,this.containerTop=t.top,this.containerHeight=this.container.clientHeight,this.containerWidth=this.container.clientWidth,this.colliderHeight=window.innerHeight-this.spaceTop-this.spaceBottom,this.maxTranslateY=this.container.clientHeight-this.element.offsetHeight,this.strategy=this._getStrategy(),this.strategy===1?this.prevStrategy!==this.strategy&&this._render(3):this._calcScroll(),this.prevContainerWidth=this.containerWidth,this.prevContainerLeft=this.containerLeft,this.prevContainerTop=this.containerTop,this.prevElementHeight=this.element.offsetHeight,this.prevStrategy=this.strategy}_calcScroll(){this.colliderTop=window.scrollY+this.spaceTop;let t=this._getState(this._getDirection());t!==5&&(this._render(t),this.prevState=t),this.prevViewportScrollX=window.scrollX,this.prevViewportScrollY=window.scrollY}_request(){this.isRunningRequest\|\|(this.isRunningRequest=!0,window.requestAnimationFrame(()=>{this.events[0]===1?(this.events[0]=0,this._calcDims()):this.events[1]===2&&(this.events[1]=0,this._calcScroll()),this.isRunningRequest=!1}))}_observeTreeNodesFromCurrentToBody(t){for(;t&&(this.resizeObserver.observe(t),t.tagName!=="BODY");)t=t.parentElement}_addListeners(){window.addEventListener("scroll",this._scrollListener,{capture:!1,passive:!0}),this._observeTreeNodesFromCurrentToBody(this.element)}_removeListeners(){window.removeEventListener("scroll",this._scrollListener,{capture:!1}),this.resizeObserver.disconnect()}},f=o;0&&(module.exports={StickNRoll});
2	+ //# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * Options type.\n */\ntype OptionsType = {\n /**\n * The space between bottom of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport} and bottom of the `visible area`.\n * @default 0\n */\n spaceBottom?: number;\n /**\n * The space between top of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport} and top of the `visible area`.\n * @default 0\n */\n spaceTop?: number;\n /**\n * Default {@link https://developer.mozilla.org/en-US/docs/Web/CSS/position|position} for the target `element`.\n * @default ''\n */\n position?: CSSStyleDeclaration['position'];\n};\n\n/**\n * The element coordinates.\n */\ntype TypeElementCoords = {\n left: number;\n top: number;\n};\n\n/**\n * Indexes of events in the events array.\n */\nenum Item {\n Resize = 0,\n Scroll = 1,\n}\n\nenum Event {\n None,\n Resize,\n Scroll,\n}\n\n/**\n * Defines `viewport` direction.\n */\nenum Direction {\n Down,\n None,\n Up,\n}\n\n/**\n * Strategy.\n */\nenum Strategy {\n /**\n * Sticky both sides by Y-axis.\n */\n Both,\n /**\n * Nothing do.\n */\n None,\n /**\n * Sticky only top side.\n */\n Top,\n}\n\n/**\n * @enum {number} Position variant of target `element`.\n */\nenum State {\n /**\n * Element affixed at the bottom of the container.\n */\n ContainerBottom,\n /**\n * Element fixed at the top of the window viewport area (including top padding).\n */\n ColliderTop,\n /**\n * Element fixed at the bottom of the window viewport area (including bottom padding).\n */\n ColliderBottom,\n /**\n * Default element behavior. Case without specific rules.\n */\n None,\n /**\n * The element is offset along the Y axis relative to the container.\n */\n TranslateY,\n /**\n * Indicates that rendering should be skipped until the state changes.\n */\n Rest,\n}\n\ntype Rules = Pick<CSSStyleDeclaration, 'width' | 'left' | 'top' | 'position' | 'transform'>;\n\n/**\n * Helps to give an element sticky scrolling capability.\n */\nexport class StickNRoll {\n /**\n * Parent element of target {@link element}.\n */\n private container: HTMLElement;\n\n /**\n * Target element with sticky and scroll abilities.\n */\n private element: HTMLElement;\n\n /**\n * Triggered Event.\n */\n private events: [Event.Resize | Event.None, Event.Scroll | Event.None];\n\n /**\n * Indicates that a render request has already been initiated.\n * @default false\n */\n private isRunningRequest: boolean;\n\n /**\n * The Current Y-axis coordinates relative to the {@link container}.\n */\n private translateY: number;\n\n /**\n * The maximum allowed Y-axis coordinates relative to the {@link container}.\n */\n private maxTranslateY: number;\n\n /**\n * Previous element height.\n */\n private prevElementHeight: number;\n\n /**\n * Height of the {@link container}.\n */\n private containerHeight: number;\n\n /**\n * Width of the {@link container}.\n */\n private containerWidth: number;\n\n /**\n * Coordinate by X-axis of the {@link container}.\n */\n private containerLeft: number;\n\n /**\n * Coordinate by Y-axis of the {@link container}.\n */\n private containerTop: number;\n\n /**\n * Previous width of the {@link container}.\n */\n private prevContainerWidth: number;\n\n /**\n * Previous coordinate by X-axis of the {@link container}.\n */\n private prevContainerLeft: number;\n\n /**\n * Previous coordinate by Y-axis of the {@link container}.\n */\n private prevContainerTop: number;\n\n /**\n * Height of the {@link collider}.\n */\n private colliderHeight: number;\n\n /**\n * Top coordinate of the {@link collider}.\n */\n private colliderTop: number;\n\n /**\n * Previous coordinate by X-axis of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport}.\n */\n private prevViewportScrollX: number;\n\n /**\n * Previous coordinate by Y-axis of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport}.\n */\n private prevViewportScrollY: number;\n\n /**\n * Space top.\n * @default 0\n */\n private spaceTop: number;\n\n /**\n * Space bottom.\n * @default 0\n */\n private spaceBottom: number;\n\n /**\n * Resize observer.\n */\n private resizeObserver: ResizeObserver;\n\n /**\n * Current strategy. Helps to detect element behaviour.\n * @default Strategy.None\n */\n private strategy: Strategy;\n\n /**\n * Previous strategy.\n * @default Strategy.None\n */\n private prevStrategy: Strategy;\n\n /**\n * Previous state.\n * @default Variant.None\n */\n private prevState: State;\n\n /**\n * List of available CSS properties.\n */\n private listOfRules: Rules;\n\n /**\n * List of css properties to be updated.\n */\n private rules: Partial<Rules>;\n\n /**\n * @param {HTMLElement} container - The parent element ({@link container}) of {@link element}.\n * @param {HTMLElement} element - The target {@link element} which will be endowed with stickiness and scrolling abilities relative to its parent element ({@link container}).\n */\n constructor(container: HTMLElement, element: HTMLElement, options?: OptionsType) {\n this.container = container;\n this.element = element;\n\n this.isRunningRequest = false;\n\n this.colliderHeight = 0;\n this.colliderTop = 0;\n\n this.containerHeight = 0;\n this.containerWidth = 0;\n this.containerLeft = 0;\n this.containerTop = 0;\n this.prevContainerWidth = 0;\n this.prevContainerLeft = 0;\n this.prevContainerTop = 0;\n\n this.prevElementHeight = 0;\n\n this.maxTranslateY = 0;\n this.translateY = 0;\n\n this.prevViewportScrollX = 0;\n this.prevViewportScrollY = 0;\n\n this.events = [Event.None, Event.None];\n\n this.strategy = Strategy.None;\n this.prevStrategy = Strategy.None;\n\n this.prevState = State.None;\n\n this.listOfRules = { width: '', left: '', top: '', position: options?.position ?? '', transform: '' };\n this.rules = {};\n\n this.spaceBottom = options?.spaceBottom ?? 0;\n this.spaceTop = options?.spaceTop ?? 0;\n\n // Binds \"this\" context to the following class methods.\n this._calcDims = this._calcDims.bind(this);\n this._calcScroll = this._calcScroll.bind(this);\n this._resizeListener = this._resizeListener.bind(this);\n this._scrollListener = this._scrollListener.bind(this);\n\n // Create resize observer.\n this.resizeObserver = new ResizeObserver(this._resizeListener);\n }\n\n /**\n * Enable sticky scrolling capability. Use {@link disable} method to deactivate sticky scrolling capability.\n */\n public enable(): void {\n this._addListeners(); // calls _calcDims method by default, cause is used ResizeObserver\n }\n\n /**\n * Disable sticky scrolling capability. Use {@link enable} method to activate sticky scrolling capability again.\n */\n public disable(): void {\n this._removeListeners();\n this.isRunningRequest = false;\n this.events.fill(Event.None);\n }\n\n /**\n * Update {@link spaceBottom} and {@link spaceTop}. It fires the render after changes of spaces.\n */\n public updateSpaces(spaces: Pick<OptionsType, 'spaceBottom' | 'spaceTop'>): void {\n this.spaceBottom = spaces.spaceBottom ?? 0;\n this.spaceTop = spaces.spaceTop ?? 0;\n this._resizeListener();\n }\n\n /**\n * Resize listener.\n */\n private _resizeListener(): void {\n if (this.events[Item.Resize] === Event.None) this.events[Item.Resize] = Event.Resize;\n this._request();\n }\n\n /**\n * Scroll listener.\n */\n private _scrollListener(): void {\n if (this.events[Item.Scroll] === Event.None) this.events[Item.Scroll] = Event.Scroll;\n this._request();\n }\n\n /**\n * Get coordinates for passed element.\n */\n private _getCoords(element: HTMLElement): TypeElementCoords {\n const coords = { left: element.offsetLeft, top: element.offsetTop };\n while (((element as unknown) = 'BODY' === element.tagName ? element.parentElement : element.offsetParent)) {\n coords.top += element.offsetTop;\n coords.left += element.offsetLeft;\n }\n return coords;\n }\n\n /**\n * Update styles in target {@link element} and {@link container}.\n */\n private _render(state: State): void {\n if (state === State.ContainerBottom) {\n this.translateY = this.maxTranslateY;\n this.rules = {\n top: this.spaceTop + 'px',\n left: '0px',\n position: 'sticky',\n width: this.container.clientWidth + 'px',\n };\n } else if (state === State.ColliderBottom) {\n this.translateY = 0;\n this.rules = {\n top: this.colliderHeight + this.spaceTop - this.element.offsetHeight + 'px',\n left: this.containerLeft - window.scrollX + 'px',\n position: 'fixed',\n width: this.container.clientWidth + 'px',\n };\n } else if (state === State.ColliderTop) {\n this.translateY = 0;\n this.rules = {\n top: this.spaceTop + 'px',\n left: this.containerLeft - window.scrollX + 'px',\n position: 'fixed',\n width: this.container.clientWidth + 'px',\n };\n } else if (state === State.None) {\n this.translateY = 0;\n this.rules = {};\n } else if (state === State.TranslateY) {\n if (this.prevState === State.ColliderTop) {\n this.translateY = this.colliderTop - this.containerTop;\n } else if (this.prevState === State.ColliderBottom) {\n this.translateY = this.colliderTop + this.colliderHeight - this.containerTop - this.prevElementHeight;\n } else if (this.prevState === State.ContainerBottom) {\n this.translateY = this.containerHeight - this.element.offsetHeight;\n }\n this.rules = { position: 'relative', transform: `translate3d(0px, ${this.translateY}px, 0px)` };\n }\n\n this.container.style.position = state === State.ContainerBottom ? 'relative' : '';\n\n for (const key in this.listOfRules) {\n this.element.style[key as keyof Rules] =\n this.rules[key as unknown as keyof Rules] ?? this.listOfRules[key as unknown as keyof Rules];\n }\n }\n\n /**\n * Get the scroll direction. `None` for horizontal scrolling or no scrolling.\n */\n private _getDirection(): Direction {\n if (this.prevViewportScrollY === window.scrollY) return Direction.None;\n return this.prevViewportScrollY < window.scrollY ? Direction.Down : Direction.Up;\n }\n\n /**\n * Get state of target element.\n */\n private _getState(direction: Direction): State {\n if (this.prevState === State.ColliderTop) {\n if (this.colliderTop <= this.containerTop) {\n return State.None;\n }\n if (this.colliderTop + this.element.offsetHeight >= this.containerTop + this.containerHeight) {\n return State.ContainerBottom;\n }\n if (this.prevStrategy === Strategy.Top && this.element.offsetHeight > this.colliderHeight) {\n this.prevStrategy = this.strategy;\n return State.TranslateY;\n }\n if (this.strategy === Strategy.Both && direction === Direction.Down) {\n return State.TranslateY;\n }\n if (\n this.prevViewportScrollX !== window.scrollX ||\n this.prevContainerLeft !== this.containerLeft ||\n this.prevContainerWidth !== this.containerWidth ||\n this.prevContainerTop !== this.containerTop\n ) {\n return State.ColliderTop;\n }\n } else if (this.prevState === State.ColliderBottom) {\n if (this.colliderTop <= this.containerTop) {\n return State.None;\n }\n if (this.colliderTop + this.colliderHeight >= this.containerTop + this.containerHeight) {\n return State.ContainerBottom;\n }\n if (this.element.offsetHeight <= this.colliderHeight) {\n return State.ColliderTop;\n }\n if (direction === Direction.Up || this.prevElementHeight !== this.element.offsetHeight) {\n return State.TranslateY;\n }\n if (\n this.prevViewportScrollX !== window.scrollX ||\n this.prevContainerLeft !== this.containerLeft ||\n this.prevContainerWidth !== this.containerWidth ||\n this.prevContainerTop !== this.containerTop\n ) {\n return State.ColliderBottom;\n }\n } else if (this.prevState === State.ContainerBottom) {\n if (this.colliderTop <= this.containerTop) {\n return State.None;\n }\n if (direction === Direction.Up && this.colliderTop <= this.containerTop + this.maxTranslateY) {\n return State.ColliderTop;\n }\n if (this.element.offsetHeight < this.containerTop + this.containerHeight - this.colliderTop) {\n return State.ColliderTop;\n }\n if (this.prevContainerWidth !== this.containerWidth) {\n return State.ContainerBottom;\n }\n } else if (this.prevState === State.None) {\n if (this.colliderTop + this.element.offsetHeight >= this.containerTop + this.containerHeight) {\n return State.ContainerBottom;\n }\n if (this.element.offsetHeight < this.colliderHeight && this.colliderTop >= this.containerTop) {\n return State.ColliderTop;\n }\n if (\n this.strategy === Strategy.Both &&\n this.colliderTop + this.colliderHeight >= this.containerTop + this.element.offsetHeight\n ) {\n return State.ColliderBottom;\n }\n } else if (this.prevState === State.TranslateY) {\n if (this.containerHeight - this.translateY < this.element.offsetHeight) {\n return State.ContainerBottom;\n }\n if (this.element.offsetHeight < this.colliderHeight || this.colliderTop <= this.containerTop + this.translateY) {\n return State.ColliderTop;\n }\n if (\n this.translateY < this.maxTranslateY &&\n this.colliderTop + this.colliderHeight > this.containerTop + this.translateY + this.element.offsetHeight\n ) {\n return State.ColliderBottom;\n }\n }\n\n return State.Rest;\n }\n\n /**\n * Get a {@link strategy} that determines the further behavior of the target {@link element}.\n */\n private _getStrategy(): Strategy {\n if (this.containerHeight <= this.element.offsetHeight) return Strategy.None;\n if (this.colliderHeight < this.element.offsetHeight) return Strategy.Both;\n return Strategy.Top;\n }\n\n /**\n * Calculate {@link https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements|dimensions}.\n */\n private _calcDims(): void {\n const containerCoords = this._getCoords(this.container);\n this.containerLeft = containerCoords.left;\n this.containerTop = containerCoords.top;\n this.containerHeight = this.container.clientHeight;\n this.containerWidth = this.container.clientWidth;\n this.colliderHeight = window.innerHeight - this.spaceTop - this.spaceBottom;\n this.maxTranslateY = this.container.clientHeight - this.element.offsetHeight;\n\n this.strategy = this._getStrategy();\n\n if (this.strategy === Strategy.None) {\n if (this.prevStrategy !== this.strategy) this._render(State.None);\n } else {\n this._calcScroll();\n }\n\n this.prevContainerWidth = this.containerWidth;\n this.prevContainerLeft = this.containerLeft;\n this.prevContainerTop = this.containerTop;\n this.prevElementHeight = this.element.offsetHeight;\n this.prevStrategy = this.strategy;\n }\n\n /**\n * Calculate {@link https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems|coordinates}.\n */\n private _calcScroll(): void {\n this.colliderTop = window.scrollY + this.spaceTop;\n\n const state = this._getState(this._getDirection());\n\n if (state !== State.Rest) {\n this._render(state);\n this.prevState = state;\n }\n\n this.prevViewportScrollX = window.scrollX;\n this.prevViewportScrollY = window.scrollY;\n }\n\n /**\n * Helps apply DOM manipulation and synchronize processing with rendering. See {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame|requestAnimationFrame}.\n */\n private _request(): void {\n if (this.isRunningRequest) return;\n this.isRunningRequest = true;\n window.requestAnimationFrame(() => {\n if (this.events[Item.Resize] === Event.Resize) {\n this.events[Item.Resize] = Event.None;\n this._calcDims();\n } else if (this.events[Item.Scroll] === Event.Scroll) {\n this.events[Item.Scroll] = Event.None;\n this._calcScroll();\n }\n this.isRunningRequest = false;\n });\n }\n\n /**\n * Observe {@link https://developer.mozilla.org/en-US/docs/Web/API/Node|nodes} from target {@link element} to {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/body|document body} with help the {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver|ResizeObserver}.\n */\n private _observeTreeNodesFromCurrentToBody(element: HTMLElement): void {\n while (element) {\n this.resizeObserver.observe(element);\n if (element.tagName === 'BODY') break;\n (element as unknown) = element.parentElement;\n }\n }\n\n /**\n * Add required event listeners. See {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener|addEventListener} and {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver|ResizeObserver}.\n */\n private _addListeners(): void {\n window.addEventListener('scroll', this._scrollListener, { capture: false, passive: true });\n this._observeTreeNodesFromCurrentToBody(this.element);\n }\n\n /**\n * Remove all event listeners. See {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener|removeEventListener} and {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver|ResizeObserver}.\n */\n private _removeListeners(): void {\n window.removeEventListener('scroll', this._scrollListener, { capture: false }); // window\n this.resizeObserver.disconnect();\n }\n}\n\nexport default StickNRoll;"],"mappings":"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","names":["index_exports","__export","StickNRoll","index_default","__toCommonJS","StickNRoll","container","element","options","spaces","coords","state","key","direction","containerCoords","index_default"]}

package/dist/index.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ var r=class{container;element;events;isRunningRequest;translateY;maxTranslateY;prevElementHeight;containerHeight;containerWidth;containerLeft;containerTop;prevContainerWidth;prevContainerLeft;prevContainerTop;colliderHeight;colliderTop;prevViewportScrollX;prevViewportScrollY;spaceTop;spaceBottom;resizeObserver;strategy;prevStrategy;prevState;listOfRules;rules;constructor(t,e,i){this.container=t,this.element=e,this.isRunningRequest=!1,this.colliderHeight=0,this.colliderTop=0,this.containerHeight=0,this.containerWidth=0,this.containerLeft=0,this.containerTop=0,this.prevContainerWidth=0,this.prevContainerLeft=0,this.prevContainerTop=0,this.prevElementHeight=0,this.maxTranslateY=0,this.translateY=0,this.prevViewportScrollX=0,this.prevViewportScrollY=0,this.events=[0,0],this.strategy=1,this.prevStrategy=1,this.prevState=3,this.listOfRules={width:"",left:"",top:"",position:i?.position??"",transform:""},this.rules={},this.spaceBottom=i?.spaceBottom??0,this.spaceTop=i?.spaceTop??0,this._calcDims=this._calcDims.bind(this),this._calcScroll=this._calcScroll.bind(this),this._resizeListener=this._resizeListener.bind(this),this._scrollListener=this._scrollListener.bind(this),this.resizeObserver=new ResizeObserver(this._resizeListener)}enable(){this._addListeners()}disable(){this._removeListeners(),this.isRunningRequest=!1,this.events.fill(0)}updateSpaces(t){this.spaceBottom=t.spaceBottom??0,this.spaceTop=t.spaceTop??0,this._resizeListener()}_resizeListener(){this.events[0]===0&&(this.events[0]=1),this._request()}_scrollListener(){this.events[1]===0&&(this.events[1]=2),this._request()}_getCoords(t){let e={left:t.offsetLeft,top:t.offsetTop};for(;t=t.tagName==="BODY"?t.parentElement:t.offsetParent;)e.top+=t.offsetTop,e.left+=t.offsetLeft;return e}_render(t){t===0?(this.translateY=this.maxTranslateY,this.rules={top:this.spaceTop+"px",left:"0px",position:"sticky",width:this.container.clientWidth+"px"}):t===2?(this.translateY=0,this.rules={top:this.colliderHeight+this.spaceTop-this.element.offsetHeight+"px",left:this.containerLeft-window.scrollX+"px",position:"fixed",width:this.container.clientWidth+"px"}):t===1?(this.translateY=0,this.rules={top:this.spaceTop+"px",left:this.containerLeft-window.scrollX+"px",position:"fixed",width:this.container.clientWidth+"px"}):t===3?(this.translateY=0,this.rules={}):t===4&&(this.prevState===1?this.translateY=this.colliderTop-this.containerTop:this.prevState===2?this.translateY=this.colliderTop+this.colliderHeight-this.containerTop-this.prevElementHeight:this.prevState===0&&(this.translateY=this.containerHeight-this.element.offsetHeight),this.rules={position:"relative",transform:`translate3d(0px, ${this.translateY}px, 0px)`}),this.container.style.position=t===0?"relative":"";for(let e in this.listOfRules)this.element.style[e]=this.rules[e]??this.listOfRules[e]}_getDirection(){return this.prevViewportScrollY===window.scrollY?1:this.prevViewportScrollY<window.scrollY?0:2}_getState(t){if(this.prevState===1){if(this.colliderTop<=this.containerTop)return 3;if(this.colliderTop+this.element.offsetHeight>=this.containerTop+this.containerHeight)return 0;if(this.prevStrategy===2&&this.element.offsetHeight>this.colliderHeight)return this.prevStrategy=this.strategy,4;if(this.strategy===0&&t===0)return 4;if(this.prevViewportScrollX!==window.scrollX\|\|this.prevContainerLeft!==this.containerLeft\|\|this.prevContainerWidth!==this.containerWidth\|\|this.prevContainerTop!==this.containerTop)return 1}else if(this.prevState===2){if(this.colliderTop<=this.containerTop)return 3;if(this.colliderTop+this.colliderHeight>=this.containerTop+this.containerHeight)return 0;if(this.element.offsetHeight<=this.colliderHeight)return 1;if(t===2\|\|this.prevElementHeight!==this.element.offsetHeight)return 4;if(this.prevViewportScrollX!==window.scrollX\|\|this.prevContainerLeft!==this.containerLeft\|\|this.prevContainerWidth!==this.containerWidth\|\|this.prevContainerTop!==this.containerTop)return 2}else if(this.prevState===0){if(this.colliderTop<=this.containerTop)return 3;if(t===2&&this.colliderTop<=this.containerTop+this.maxTranslateY\|\|this.element.offsetHeight<this.containerTop+this.containerHeight-this.colliderTop)return 1;if(this.prevContainerWidth!==this.containerWidth)return 0}else if(this.prevState===3){if(this.colliderTop+this.element.offsetHeight>=this.containerTop+this.containerHeight)return 0;if(this.element.offsetHeight<this.colliderHeight&&this.colliderTop>=this.containerTop)return 1;if(this.strategy===0&&this.colliderTop+this.colliderHeight>=this.containerTop+this.element.offsetHeight)return 2}else if(this.prevState===4){if(this.containerHeight-this.translateY<this.element.offsetHeight)return 0;if(this.element.offsetHeight<this.colliderHeight\|\|this.colliderTop<=this.containerTop+this.translateY)return 1;if(this.translateY<this.maxTranslateY&&this.colliderTop+this.colliderHeight>this.containerTop+this.translateY+this.element.offsetHeight)return 2}return 5}_getStrategy(){return this.containerHeight<=this.element.offsetHeight?1:this.colliderHeight<this.element.offsetHeight?0:2}_calcDims(){let t=this._getCoords(this.container);this.containerLeft=t.left,this.containerTop=t.top,this.containerHeight=this.container.clientHeight,this.containerWidth=this.container.clientWidth,this.colliderHeight=window.innerHeight-this.spaceTop-this.spaceBottom,this.maxTranslateY=this.container.clientHeight-this.element.offsetHeight,this.strategy=this._getStrategy(),this.strategy===1?this.prevStrategy!==this.strategy&&this._render(3):this._calcScroll(),this.prevContainerWidth=this.containerWidth,this.prevContainerLeft=this.containerLeft,this.prevContainerTop=this.containerTop,this.prevElementHeight=this.element.offsetHeight,this.prevStrategy=this.strategy}_calcScroll(){this.colliderTop=window.scrollY+this.spaceTop;let t=this._getState(this._getDirection());t!==5&&(this._render(t),this.prevState=t),this.prevViewportScrollX=window.scrollX,this.prevViewportScrollY=window.scrollY}_request(){this.isRunningRequest\|\|(this.isRunningRequest=!0,window.requestAnimationFrame(()=>{this.events[0]===1?(this.events[0]=0,this._calcDims()):this.events[1]===2&&(this.events[1]=0,this._calcScroll()),this.isRunningRequest=!1}))}_observeTreeNodesFromCurrentToBody(t){for(;t&&(this.resizeObserver.observe(t),t.tagName!=="BODY");)t=t.parentElement}_addListeners(){window.addEventListener("scroll",this._scrollListener,{capture:!1,passive:!0}),this._observeTreeNodesFromCurrentToBody(this.element)}_removeListeners(){window.removeEventListener("scroll",this._scrollListener,{capture:!1}),this.resizeObserver.disconnect()}},o=r;export{r as StickNRoll,o as default};
2	+ //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * Options type.\n */\ntype OptionsType = {\n /**\n * The space between bottom of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport} and bottom of the `visible area`.\n * @default 0\n */\n spaceBottom?: number;\n /**\n * The space between top of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport} and top of the `visible area`.\n * @default 0\n */\n spaceTop?: number;\n /**\n * Default {@link https://developer.mozilla.org/en-US/docs/Web/CSS/position|position} for the target `element`.\n * @default ''\n */\n position?: CSSStyleDeclaration['position'];\n};\n\n/**\n * The element coordinates.\n */\ntype TypeElementCoords = {\n left: number;\n top: number;\n};\n\n/**\n * Indexes of events in the events array.\n */\nenum Item {\n Resize = 0,\n Scroll = 1,\n}\n\nenum Event {\n None,\n Resize,\n Scroll,\n}\n\n/**\n * Defines `viewport` direction.\n */\nenum Direction {\n Down,\n None,\n Up,\n}\n\n/**\n * Strategy.\n */\nenum Strategy {\n /**\n * Sticky both sides by Y-axis.\n */\n Both,\n /**\n * Nothing do.\n */\n None,\n /**\n * Sticky only top side.\n */\n Top,\n}\n\n/**\n * @enum {number} Position variant of target `element`.\n */\nenum State {\n /**\n * Element affixed at the bottom of the container.\n */\n ContainerBottom,\n /**\n * Element fixed at the top of the window viewport area (including top padding).\n */\n ColliderTop,\n /**\n * Element fixed at the bottom of the window viewport area (including bottom padding).\n */\n ColliderBottom,\n /**\n * Default element behavior. Case without specific rules.\n */\n None,\n /**\n * The element is offset along the Y axis relative to the container.\n */\n TranslateY,\n /**\n * Indicates that rendering should be skipped until the state changes.\n */\n Rest,\n}\n\ntype Rules = Pick<CSSStyleDeclaration, 'width' | 'left' | 'top' | 'position' | 'transform'>;\n\n/**\n * Helps to give an element sticky scrolling capability.\n */\nexport class StickNRoll {\n /**\n * Parent element of target {@link element}.\n */\n private container: HTMLElement;\n\n /**\n * Target element with sticky and scroll abilities.\n */\n private element: HTMLElement;\n\n /**\n * Triggered Event.\n */\n private events: [Event.Resize | Event.None, Event.Scroll | Event.None];\n\n /**\n * Indicates that a render request has already been initiated.\n * @default false\n */\n private isRunningRequest: boolean;\n\n /**\n * The Current Y-axis coordinates relative to the {@link container}.\n */\n private translateY: number;\n\n /**\n * The maximum allowed Y-axis coordinates relative to the {@link container}.\n */\n private maxTranslateY: number;\n\n /**\n * Previous element height.\n */\n private prevElementHeight: number;\n\n /**\n * Height of the {@link container}.\n */\n private containerHeight: number;\n\n /**\n * Width of the {@link container}.\n */\n private containerWidth: number;\n\n /**\n * Coordinate by X-axis of the {@link container}.\n */\n private containerLeft: number;\n\n /**\n * Coordinate by Y-axis of the {@link container}.\n */\n private containerTop: number;\n\n /**\n * Previous width of the {@link container}.\n */\n private prevContainerWidth: number;\n\n /**\n * Previous coordinate by X-axis of the {@link container}.\n */\n private prevContainerLeft: number;\n\n /**\n * Previous coordinate by Y-axis of the {@link container}.\n */\n private prevContainerTop: number;\n\n /**\n * Height of the {@link collider}.\n */\n private colliderHeight: number;\n\n /**\n * Top coordinate of the {@link collider}.\n */\n private colliderTop: number;\n\n /**\n * Previous coordinate by X-axis of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport}.\n */\n private prevViewportScrollX: number;\n\n /**\n * Previous coordinate by Y-axis of the {@link https://developer.mozilla.org/en-US/docs/Glossary/Viewport|viewport}.\n */\n private prevViewportScrollY: number;\n\n /**\n * Space top.\n * @default 0\n */\n private spaceTop: number;\n\n /**\n * Space bottom.\n * @default 0\n */\n private spaceBottom: number;\n\n /**\n * Resize observer.\n */\n private resizeObserver: ResizeObserver;\n\n /**\n * Current strategy. Helps to detect element behaviour.\n * @default Strategy.None\n */\n private strategy: Strategy;\n\n /**\n * Previous strategy.\n * @default Strategy.None\n */\n private prevStrategy: Strategy;\n\n /**\n * Previous state.\n * @default Variant.None\n */\n private prevState: State;\n\n /**\n * List of available CSS properties.\n */\n private listOfRules: Rules;\n\n /**\n * List of css properties to be updated.\n */\n private rules: Partial<Rules>;\n\n /**\n * @param {HTMLElement} container - The parent element ({@link container}) of {@link element}.\n * @param {HTMLElement} element - The target {@link element} which will be endowed with stickiness and scrolling abilities relative to its parent element ({@link container}).\n */\n constructor(container: HTMLElement, element: HTMLElement, options?: OptionsType) {\n this.container = container;\n this.element = element;\n\n this.isRunningRequest = false;\n\n this.colliderHeight = 0;\n this.colliderTop = 0;\n\n this.containerHeight = 0;\n this.containerWidth = 0;\n this.containerLeft = 0;\n this.containerTop = 0;\n this.prevContainerWidth = 0;\n this.prevContainerLeft = 0;\n this.prevContainerTop = 0;\n\n this.prevElementHeight = 0;\n\n this.maxTranslateY = 0;\n this.translateY = 0;\n\n this.prevViewportScrollX = 0;\n this.prevViewportScrollY = 0;\n\n this.events = [Event.None, Event.None];\n\n this.strategy = Strategy.None;\n this.prevStrategy = Strategy.None;\n\n this.prevState = State.None;\n\n this.listOfRules = { width: '', left: '', top: '', position: options?.position ?? '', transform: '' };\n this.rules = {};\n\n this.spaceBottom = options?.spaceBottom ?? 0;\n this.spaceTop = options?.spaceTop ?? 0;\n\n // Binds \"this\" context to the following class methods.\n this._calcDims = this._calcDims.bind(this);\n this._calcScroll = this._calcScroll.bind(this);\n this._resizeListener = this._resizeListener.bind(this);\n this._scrollListener = this._scrollListener.bind(this);\n\n // Create resize observer.\n this.resizeObserver = new ResizeObserver(this._resizeListener);\n }\n\n /**\n * Enable sticky scrolling capability. Use {@link disable} method to deactivate sticky scrolling capability.\n */\n public enable(): void {\n this._addListeners(); // calls _calcDims method by default, cause is used ResizeObserver\n }\n\n /**\n * Disable sticky scrolling capability. Use {@link enable} method to activate sticky scrolling capability again.\n */\n public disable(): void {\n this._removeListeners();\n this.isRunningRequest = false;\n this.events.fill(Event.None);\n }\n\n /**\n * Update {@link spaceBottom} and {@link spaceTop}. It fires the render after changes of spaces.\n */\n public updateSpaces(spaces: Pick<OptionsType, 'spaceBottom' | 'spaceTop'>): void {\n this.spaceBottom = spaces.spaceBottom ?? 0;\n this.spaceTop = spaces.spaceTop ?? 0;\n this._resizeListener();\n }\n\n /**\n * Resize listener.\n */\n private _resizeListener(): void {\n if (this.events[Item.Resize] === Event.None) this.events[Item.Resize] = Event.Resize;\n this._request();\n }\n\n /**\n * Scroll listener.\n */\n private _scrollListener(): void {\n if (this.events[Item.Scroll] === Event.None) this.events[Item.Scroll] = Event.Scroll;\n this._request();\n }\n\n /**\n * Get coordinates for passed element.\n */\n private _getCoords(element: HTMLElement): TypeElementCoords {\n const coords = { left: element.offsetLeft, top: element.offsetTop };\n while (((element as unknown) = 'BODY' === element.tagName ? element.parentElement : element.offsetParent)) {\n coords.top += element.offsetTop;\n coords.left += element.offsetLeft;\n }\n return coords;\n }\n\n /**\n * Update styles in target {@link element} and {@link container}.\n */\n private _render(state: State): void {\n if (state === State.ContainerBottom) {\n this.translateY = this.maxTranslateY;\n this.rules = {\n top: this.spaceTop + 'px',\n left: '0px',\n position: 'sticky',\n width: this.container.clientWidth + 'px',\n };\n } else if (state === State.ColliderBottom) {\n this.translateY = 0;\n this.rules = {\n top: this.colliderHeight + this.spaceTop - this.element.offsetHeight + 'px',\n left: this.containerLeft - window.scrollX + 'px',\n position: 'fixed',\n width: this.container.clientWidth + 'px',\n };\n } else if (state === State.ColliderTop) {\n this.translateY = 0;\n this.rules = {\n top: this.spaceTop + 'px',\n left: this.containerLeft - window.scrollX + 'px',\n position: 'fixed',\n width: this.container.clientWidth + 'px',\n };\n } else if (state === State.None) {\n this.translateY = 0;\n this.rules = {};\n } else if (state === State.TranslateY) {\n if (this.prevState === State.ColliderTop) {\n this.translateY = this.colliderTop - this.containerTop;\n } else if (this.prevState === State.ColliderBottom) {\n this.translateY = this.colliderTop + this.colliderHeight - this.containerTop - this.prevElementHeight;\n } else if (this.prevState === State.ContainerBottom) {\n this.translateY = this.containerHeight - this.element.offsetHeight;\n }\n this.rules = { position: 'relative', transform: `translate3d(0px, ${this.translateY}px, 0px)` };\n }\n\n this.container.style.position = state === State.ContainerBottom ? 'relative' : '';\n\n for (const key in this.listOfRules) {\n this.element.style[key as keyof Rules] =\n this.rules[key as unknown as keyof Rules] ?? this.listOfRules[key as unknown as keyof Rules];\n }\n }\n\n /**\n * Get the scroll direction. `None` for horizontal scrolling or no scrolling.\n */\n private _getDirection(): Direction {\n if (this.prevViewportScrollY === window.scrollY) return Direction.None;\n return this.prevViewportScrollY < window.scrollY ? Direction.Down : Direction.Up;\n }\n\n /**\n * Get state of target element.\n */\n private _getState(direction: Direction): State {\n if (this.prevState === State.ColliderTop) {\n if (this.colliderTop <= this.containerTop) {\n return State.None;\n }\n if (this.colliderTop + this.element.offsetHeight >= this.containerTop + this.containerHeight) {\n return State.ContainerBottom;\n }\n if (this.prevStrategy === Strategy.Top && this.element.offsetHeight > this.colliderHeight) {\n this.prevStrategy = this.strategy;\n return State.TranslateY;\n }\n if (this.strategy === Strategy.Both && direction === Direction.Down) {\n return State.TranslateY;\n }\n if (\n this.prevViewportScrollX !== window.scrollX ||\n this.prevContainerLeft !== this.containerLeft ||\n this.prevContainerWidth !== this.containerWidth ||\n this.prevContainerTop !== this.containerTop\n ) {\n return State.ColliderTop;\n }\n } else if (this.prevState === State.ColliderBottom) {\n if (this.colliderTop <= this.containerTop) {\n return State.None;\n }\n if (this.colliderTop + this.colliderHeight >= this.containerTop + this.containerHeight) {\n return State.ContainerBottom;\n }\n if (this.element.offsetHeight <= this.colliderHeight) {\n return State.ColliderTop;\n }\n if (direction === Direction.Up || this.prevElementHeight !== this.element.offsetHeight) {\n return State.TranslateY;\n }\n if (\n this.prevViewportScrollX !== window.scrollX ||\n this.prevContainerLeft !== this.containerLeft ||\n this.prevContainerWidth !== this.containerWidth ||\n this.prevContainerTop !== this.containerTop\n ) {\n return State.ColliderBottom;\n }\n } else if (this.prevState === State.ContainerBottom) {\n if (this.colliderTop <= this.containerTop) {\n return State.None;\n }\n if (direction === Direction.Up && this.colliderTop <= this.containerTop + this.maxTranslateY) {\n return State.ColliderTop;\n }\n if (this.element.offsetHeight < this.containerTop + this.containerHeight - this.colliderTop) {\n return State.ColliderTop;\n }\n if (this.prevContainerWidth !== this.containerWidth) {\n return State.ContainerBottom;\n }\n } else if (this.prevState === State.None) {\n if (this.colliderTop + this.element.offsetHeight >= this.containerTop + this.containerHeight) {\n return State.ContainerBottom;\n }\n if (this.element.offsetHeight < this.colliderHeight && this.colliderTop >= this.containerTop) {\n return State.ColliderTop;\n }\n if (\n this.strategy === Strategy.Both &&\n this.colliderTop + this.colliderHeight >= this.containerTop + this.element.offsetHeight\n ) {\n return State.ColliderBottom;\n }\n } else if (this.prevState === State.TranslateY) {\n if (this.containerHeight - this.translateY < this.element.offsetHeight) {\n return State.ContainerBottom;\n }\n if (this.element.offsetHeight < this.colliderHeight || this.colliderTop <= this.containerTop + this.translateY) {\n return State.ColliderTop;\n }\n if (\n this.translateY < this.maxTranslateY &&\n this.colliderTop + this.colliderHeight > this.containerTop + this.translateY + this.element.offsetHeight\n ) {\n return State.ColliderBottom;\n }\n }\n\n return State.Rest;\n }\n\n /**\n * Get a {@link strategy} that determines the further behavior of the target {@link element}.\n */\n private _getStrategy(): Strategy {\n if (this.containerHeight <= this.element.offsetHeight) return Strategy.None;\n if (this.colliderHeight < this.element.offsetHeight) return Strategy.Both;\n return Strategy.Top;\n }\n\n /**\n * Calculate {@link https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements|dimensions}.\n */\n private _calcDims(): void {\n const containerCoords = this._getCoords(this.container);\n this.containerLeft = containerCoords.left;\n this.containerTop = containerCoords.top;\n this.containerHeight = this.container.clientHeight;\n this.containerWidth = this.container.clientWidth;\n this.colliderHeight = window.innerHeight - this.spaceTop - this.spaceBottom;\n this.maxTranslateY = this.container.clientHeight - this.element.offsetHeight;\n\n this.strategy = this._getStrategy();\n\n if (this.strategy === Strategy.None) {\n if (this.prevStrategy !== this.strategy) this._render(State.None);\n } else {\n this._calcScroll();\n }\n\n this.prevContainerWidth = this.containerWidth;\n this.prevContainerLeft = this.containerLeft;\n this.prevContainerTop = this.containerTop;\n this.prevElementHeight = this.element.offsetHeight;\n this.prevStrategy = this.strategy;\n }\n\n /**\n * Calculate {@link https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems|coordinates}.\n */\n private _calcScroll(): void {\n this.colliderTop = window.scrollY + this.spaceTop;\n\n const state = this._getState(this._getDirection());\n\n if (state !== State.Rest) {\n this._render(state);\n this.prevState = state;\n }\n\n this.prevViewportScrollX = window.scrollX;\n this.prevViewportScrollY = window.scrollY;\n }\n\n /**\n * Helps apply DOM manipulation and synchronize processing with rendering. See {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame|requestAnimationFrame}.\n */\n private _request(): void {\n if (this.isRunningRequest) return;\n this.isRunningRequest = true;\n window.requestAnimationFrame(() => {\n if (this.events[Item.Resize] === Event.Resize) {\n this.events[Item.Resize] = Event.None;\n this._calcDims();\n } else if (this.events[Item.Scroll] === Event.Scroll) {\n this.events[Item.Scroll] = Event.None;\n this._calcScroll();\n }\n this.isRunningRequest = false;\n });\n }\n\n /**\n * Observe {@link https://developer.mozilla.org/en-US/docs/Web/API/Node|nodes} from target {@link element} to {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/body|document body} with help the {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver|ResizeObserver}.\n */\n private _observeTreeNodesFromCurrentToBody(element: HTMLElement): void {\n while (element) {\n this.resizeObserver.observe(element);\n if (element.tagName === 'BODY') break;\n (element as unknown) = element.parentElement;\n }\n }\n\n /**\n * Add required event listeners. See {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener|addEventListener} and {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver|ResizeObserver}.\n */\n private _addListeners(): void {\n window.addEventListener('scroll', this._scrollListener, { capture: false, passive: true });\n this._observeTreeNodesFromCurrentToBody(this.element);\n }\n\n /**\n * Remove all event listeners. See {@link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener|removeEventListener} and {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver|ResizeObserver}.\n */\n private _removeListeners(): void {\n window.removeEventListener('scroll', this._scrollListener, { capture: false }); // window\n this.resizeObserver.disconnect();\n }\n}\n\nexport default StickNRoll;"],"mappings":"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","names":["StickNRoll","container","element","options","spaces","coords","state","key","direction","containerCoords","index_default"]}

package/package.json ADDED Viewed

@@ -0,0 +1,50 @@
+{
+  "name": "stick-n-roll",
+  "version": "1.0.1",
+  "description": "stick-n-roll is a lightweight and user-friendly npm package that enables HTML elements to have functionality similar to position: sticky, with the added ability to scroll the block.",
+  "homepage": "https://devashtar.github.io/stick-n-roll/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/devashtar/stick-n-roll.git"
+  },
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup ./src",
+    "deploy": "gh-pages -d example"
+  },
+  "keywords": [
+    "sticky",
+    "fixed",
+    "scroll",
+    "ui",
+    "sidebar",
+    "aside",
+    "position",
+    "sticky",
+    "element",
+    "frontend",
+    "smart block",
+    "web development",
+    "user experience"
+  ],
+  "author": "devashtar",
+  "license": "MIT",
+  "devDependencies": {
+    "gh-pages": "^6.3.0",
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3"
+  }
+}