@ramstack/pagelock 1.0.1 → 1.1.0

package/README.md

@@ -1,18 +1,20 @@
-# Pagelock
+# @ramstack/pagelock
+[![NPM](https://img.shields.io/npm/v/@ramstack/pagelock)](https://www.npmjs.com/package/@ramstack/pagelock)
+[![MIT](https://img.shields.io/github/license/rameel/pagelock)](https://github.com/rameel/pagelock/blob/main/LICENSE)
 
-The `@ramstack/pagelock` represents a simple utility for managing page scroll locking.
-The library weighs around 750 bytes, and has no external dependencies.
+`@ramstack/pagelock` is a simple utility for managing page scroll locking.
+The library is around 750 bytes in size and has no external dependencies.
 
 ## Installation
 
-### Via NPM
+### Using NPM
 ```sh
 npm install --save @ramstack/pagelock
 ```
 
-### Via CDN
+### Using CDN
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@ramstack/pagelock@1.0.0/dist/pagelock.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@ramstack/pagelock@1/dist/pagelock.min.js"></script>
 ```
 
 ## Usage examples
@@ -26,7 +28,7 @@ npm install --save @ramstack/pagelock
     let release;
 
     async function show() {
-        // Lock the page scroll before show modal dialog
+        // Lock the page scroll before showing the modal dialog
         release = pagelock();
 
         await showModal();
@@ -76,23 +78,23 @@ watch(show, value => {
 ```js
 /**
  * Locks the page scroll. Subsequent calls to the function add to the queue of lock holders.
- * Page scroll remains locked until the queue is empty. To forcibly release the page scroll,
+ * The page scroll remains locked until the queue is empty. To forcibly release the page scroll,
  * bypassing the queue, call the {@link pageunlock} function with `force = true`.
  *
  * @returns {() => void} - A function to unlock the page scroll.
- * Subsequent calls to the release function are safe and only release its own captured lock,
- * without affecting the other locks in the queue.
+ * Subsequent calls to this release function are safe: it only releases its own lock
+ * without affecting the others in the queue.
  */
 function pagelock(): () => void;
 ```
 
 ```js
 /**
- * Unlocks the page scroll. In contrast to the release function returned by {@link pagelock},
- * the {@link pageunlock} function sequentially clears the queue of lock holders.
+ * Unlocks the page scroll. Unlike the release function returned by {@link pagelock},
+ * this function removes locks from the end of the queue (one by one).
  *
- * @param {boolean} [force] - If `true`, forcibly unlocks the page scroll, bypassing the queue;
- * otherwise, only the last lock in the queue will be released. The default is `false`.
+ * @param {boolean} [force] - If `true`, forcibly unlocks the page scroll, clearing the entire queue.
+ * Otherwise, only the most recent lock is released. Defaults to `false`.
  */
 function pageunlock(force?: boolean): void;
 ```

package/dist/pagelock.esm.js

@@ -1,47 +1,44 @@
-let locks = [];
-let sequence = 0;
-let width;
-let props;
+const storage = document._r_pagelock ??= { locks: [], sequence: 0 };
 function pagelock() {
-    if (!props) {
+    if (!storage.props) {
         const { offsetHeight, clientHeight } = document.documentElement;
         const style = document.body.style;
-        props = {
+        storage.props = {
             overflow: style.overflow,
             paddingRight: style.paddingRight
         };
         if (offsetHeight > clientHeight) {
-            style.paddingRight = scrollbarWidth();
+            style.paddingRight = scrollbar_width();
         }
         style.overflow = "hidden";
     }
-    const seq = ++sequence;
-    locks.push(seq);
+    const seq = ++storage.sequence;
+    storage.locks.push(seq);
     return () => {
-        locks = locks.filter(v => v !== seq);
+        storage.locks = storage.locks.filter(v => v !== seq);
         restore();
     };
 }
 function pageunlock(force) {
-    force ? locks = [] : locks.pop();
+    force ? storage.locks = [] : storage.locks.pop();
     restore();
 }
 function restore() {
-    if (props && !locks.length) {
-        Object.assign(document.body.style, props);
-        props = null;
+    if (storage.props && !storage.locks.length) {
+        Object.assign(document.body.style, storage.props);
+        storage.props = null;
     }
 }
-function scrollbarWidth() {
-    if (!width) {
+function scrollbar_width() {
+    if (!storage.width) {
         const outer = document.createElement("div");
         outer.innerHTML = "<div style='width:80px;height:80px;position:absolute;left:-90px;top:-90px;overflow:auto'><div style='height:99px'></div></div>";
         const inner = outer.firstChild;
         document.body.appendChild(outer);
-        width = (inner.offsetWidth - inner.clientWidth) + "px";
+        storage.width = (inner.offsetWidth - inner.clientWidth) + "px";
         document.body.removeChild(outer);
     }
-    return width;
+    return storage.width;
 }
 
-export { pagelock, pageunlock };
+export { pagelock, pageunlock };

package/dist/pagelock.esm.min.js

@@ -1 +1 @@
-let t,e,o=[],i=0;function n(){if(!e){const{offsetHeight:o,clientHeight:i}=document.documentElement,n=document.body.style;e={overflow:n.overflow,paddingRight:n.paddingRight},o>i&&(n.paddingRight=function(){if(!t){const e=document.createElement("div");e.innerHTML="<div style='width:80px;height:80px;position:absolute;left:-90px;top:-90px;overflow:auto'><div style='height:99px'></div></div>";const o=e.firstChild;document.body.appendChild(e),t=o.offsetWidth-o.clientWidth+"px",document.body.removeChild(e)}return t}()),n.overflow="hidden"}const n=++i;return o.push(n),()=>{o=o.filter(t=>t!==n),l()}}function d(t){t?o=[]:o.pop(),l()}function l(){e&&!o.length&&(Object.assign(document.body.style,e),e=null)}export{n as pagelock,d as pageunlock};
+const t=document._r_pagelock??={locks:[],sequence:0};function o(){if(!t.props){const{offsetHeight:o,clientHeight:e}=document.documentElement,n=document.body.style;t.props={overflow:n.overflow,paddingRight:n.paddingRight},o>e&&(n.paddingRight=function(){if(!t.width){const o=document.createElement("div");o.innerHTML="<div style='width:80px;height:80px;position:absolute;left:-90px;top:-90px;overflow:auto'><div style='height:99px'></div></div>";const e=o.firstChild;document.body.appendChild(o),t.width=e.offsetWidth-e.clientWidth+"px",document.body.removeChild(o)}return t.width}()),n.overflow="hidden"}const o=++t.sequence;return t.locks.push(o),()=>{t.locks=t.locks.filter(t=>t!==o),n()}}function e(o){o?t.locks=[]:t.locks.pop(),n()}function n(){t.props&&!t.locks.length&&(Object.assign(document.body.style,t.props),t.props=null)}export{o as pagelock,e as pageunlock};

package/dist/pagelock.js

@@ -1,53 +1,50 @@
 (function (exports) {
     'use strict';
 
-    let locks = [];
-    let sequence = 0;
-    let width;
-    let props;
+    const storage = document._r_pagelock ??= { locks: [], sequence: 0 };
     function pagelock() {
-        if (!props) {
+        if (!storage.props) {
             const { offsetHeight, clientHeight } = document.documentElement;
             const style = document.body.style;
-            props = {
+            storage.props = {
                 overflow: style.overflow,
                 paddingRight: style.paddingRight
             };
             if (offsetHeight > clientHeight) {
-                style.paddingRight = scrollbarWidth();
+                style.paddingRight = scrollbar_width();
             }
             style.overflow = "hidden";
         }
-        const seq = ++sequence;
-        locks.push(seq);
+        const seq = ++storage.sequence;
+        storage.locks.push(seq);
         return () => {
-            locks = locks.filter(v => v !== seq);
+            storage.locks = storage.locks.filter(v => v !== seq);
             restore();
         };
     }
     function pageunlock(force) {
-        force ? locks = [] : locks.pop();
+        force ? storage.locks = [] : storage.locks.pop();
         restore();
     }
     function restore() {
-        if (props && !locks.length) {
-            Object.assign(document.body.style, props);
-            props = null;
+        if (storage.props && !storage.locks.length) {
+            Object.assign(document.body.style, storage.props);
+            storage.props = null;
         }
     }
-    function scrollbarWidth() {
-        if (!width) {
+    function scrollbar_width() {
+        if (!storage.width) {
             const outer = document.createElement("div");
             outer.innerHTML = "<div style='width:80px;height:80px;position:absolute;left:-90px;top:-90px;overflow:auto'><div style='height:99px'></div></div>";
             const inner = outer.firstChild;
             document.body.appendChild(outer);
-            width = (inner.offsetWidth - inner.clientWidth) + "px";
+            storage.width = (inner.offsetWidth - inner.clientWidth) + "px";
             document.body.removeChild(outer);
         }
-        return width;
+        return storage.width;
     }
 
     exports.pagelock = pagelock;
     exports.pageunlock = pageunlock;
 
-})(this.window = this.window || {});
+})(this.window = this.window || {});

package/dist/pagelock.min.js

@@ -1 +1 @@
-!function(t){"use strict";let e,i,n=[],o=0;function d(){i&&!n.length&&(Object.assign(document.body.style,i),i=null)}t.pagelock=function(){if(!i){const{offsetHeight:t,clientHeight:n}=document.documentElement,o=document.body.style;i={overflow:o.overflow,paddingRight:o.paddingRight},t>n&&(o.paddingRight=function(){if(!e){const t=document.createElement("div");t.innerHTML="<div style='width:80px;height:80px;position:absolute;left:-90px;top:-90px;overflow:auto'><div style='height:99px'></div></div>";const i=t.firstChild;document.body.appendChild(t),e=i.offsetWidth-i.clientWidth+"px",document.body.removeChild(t)}return e}()),o.overflow="hidden"}const t=++o;return n.push(t),()=>{n=n.filter(e=>e!==t),d()}},t.pageunlock=function(t){t?n=[]:n.pop(),d()}}(this.window=this.window||{});
+!function(t){"use strict";const o=document._r_pagelock??={locks:[],sequence:0};function e(){o.props&&!o.locks.length&&(Object.assign(document.body.style,o.props),o.props=null)}t.pagelock=function(){if(!o.props){const{offsetHeight:t,clientHeight:e}=document.documentElement,i=document.body.style;o.props={overflow:i.overflow,paddingRight:i.paddingRight},t>e&&(i.paddingRight=function(){if(!o.width){const t=document.createElement("div");t.innerHTML="<div style='width:80px;height:80px;position:absolute;left:-90px;top:-90px;overflow:auto'><div style='height:99px'></div></div>";const e=t.firstChild;document.body.appendChild(t),o.width=e.offsetWidth-e.clientWidth+"px",document.body.removeChild(t)}return o.width}()),i.overflow="hidden"}const t=++o.sequence;return o.locks.push(t),()=>{o.locks=o.locks.filter(o=>o!==t),e()}},t.pageunlock=function(t){t?o.locks=[]:o.locks.pop(),e()}}(this.window=this.window||{});

package/dist/types/pagelock.d.ts

@@ -1,18 +1,18 @@
 /**
  * Locks the page scroll. Subsequent calls to the function add to the queue of lock holders.
- * Page scroll remains locked until the queue is empty. To forcibly release the page scroll,
+ * The page scroll remains locked until the queue is empty. To forcibly release the page scroll,
  * bypassing the queue, call the {@link pageunlock} function with `force = true`.
  *
  * @returns {() => void} - A function to unlock the page scroll.
- * Subsequent calls to the release function are safe and only release its own captured lock,
- * without affecting the other locks in the queue.
+ * Subsequent calls to this release function are safe: it only releases its own lock
+ * without affecting the others in the queue.
  */
 export declare function pagelock(): () => void;
 /**
- * Unlocks the page scroll. In contrast to the release function returned by {@link pagelock},
- * the {@link pageunlock} function sequentially clears the queue of lock holders.
+ * Unlocks the page scroll. Unlike the release function returned by {@link pagelock},
+ * this function removes locks from the end of the queue (one by one).
  *
- * @param {boolean} [force] - If `true`, forcibly unlocks the page scroll, bypassing the queue;
- * otherwise, only the last lock in the queue will be released. The default is `false`.
+ * @param {boolean} [force] - If `true`, forcibly unlocks the page scroll, clearing the entire queue.
+ * Otherwise, only the most recent lock is released. Defaults to `false`.
  */
 export declare function pageunlock(force?: boolean): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramstack/pagelock",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A simple utility for managing page scroll locking. No external dependencies.",
   "type": "module",
   "author": "rameel <rameel-b@hotmail.com>",