From c57ff8a4b575ecb5c9fe626c8b8b92bbca7681bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=91=9E=E9=91=AB?= <15939942017@163.com>
Date: Fri, 21 Jul 2023 15:59:17 +0800
Subject: [PATCH 1/3] add umd
---
README.md | 31 ++-
examples/vanilla-js/index-umd.html | 329 +++++++++++++++++++++++++++++
lib/index.umd.js | 243 +++++++++++++++++++++
lib/index.umd.js.map | 1 +
package.json | 3 +
vite.config.cjs | 10 +-
6 files changed, 613 insertions(+), 4 deletions(-)
create mode 100644 examples/vanilla-js/index-umd.html
create mode 100644 lib/index.umd.js
create mode 100644 lib/index.umd.js.map
diff --git a/README.md b/README.md
index 8ac8f95..f8d598f 100644
--- a/README.md
+++ b/README.md
@@ -43,9 +43,9 @@ _Aren't the alternative approaches sufficient?_
## Install
$ yarn add body-scroll-lock-upgrade
-
+
or
-
+
$ npm install body-scroll-lock-upgrade
You can also load via a `` tag (refer to the lib folder).
@@ -268,6 +268,33 @@ Then in the javascript:
```
+### UMD
+
+```javascript
+
+
+
+```
+
+###
+
+
+
## Demo
Check out the demo, powered by Vercel.
diff --git a/examples/vanilla-js/index-umd.html b/examples/vanilla-js/index-umd.html
new file mode 100644
index 0000000..94cd9c9
--- /dev/null
+++ b/examples/vanilla-js/index-umd.html
@@ -0,0 +1,329 @@
+
+
+
+
+
+ Document
+
+
+
+ open dialog
+
+
+
close dialog
+
+
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+
+
+
+
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+ Click on the Vite and React logos to learn more
+
+
+
+
+
+
+
diff --git a/lib/index.umd.js b/lib/index.umd.js
new file mode 100644
index 0000000..9af925b
--- /dev/null
+++ b/lib/index.umd.js
@@ -0,0 +1,243 @@
+/**
+ * name: body-scroll-lock-upgrade
+ * version: v1.0.3
+ * author: Rick.li
+ */
+(function(global, factory) {
+ typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.bodyScrollLockUpgrade = {}));
+})(this, function(exports2) {
+ "use strict";
+ let hasPassiveEvents = false;
+ if (typeof window !== "undefined") {
+ const passiveTestOptions = {
+ get passive() {
+ hasPassiveEvents = true;
+ return void 0;
+ }
+ };
+ window.addEventListener("testPassive", null, passiveTestOptions);
+ window.removeEventListener("testPassive", null, passiveTestOptions);
+ }
+ const isIosDevice = typeof window !== "undefined" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1);
+ let locks = [];
+ let locksIndex = /* @__PURE__ */ new Map();
+ let documentListenerAdded = false;
+ let initialClientY = -1;
+ let previousBodyOverflowSetting;
+ let htmlStyle;
+ let bodyStyle;
+ let previousBodyPaddingRight;
+ const allowTouchMove = (el) => locks.some((lock) => {
+ if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
+ return true;
+ }
+ return false;
+ });
+ const preventDefault = (rawEvent) => {
+ const e = rawEvent || window.event;
+ if (allowTouchMove(e.target)) {
+ return true;
+ }
+ if (e.touches.length > 1)
+ return true;
+ if (e.preventDefault)
+ e.preventDefault();
+ return false;
+ };
+ const setOverflowHidden = (options) => {
+ if (previousBodyPaddingRight === void 0) {
+ const reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
+ const scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
+ if (reserveScrollBarGap && scrollBarGap > 0) {
+ const computedBodyPaddingRight = parseInt(
+ window.getComputedStyle(document.body).getPropertyValue("padding-right"),
+ 10
+ );
+ previousBodyPaddingRight = document.body.style.paddingRight;
+ document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`;
+ }
+ }
+ if (previousBodyOverflowSetting === void 0) {
+ previousBodyOverflowSetting = document.body.style.overflow;
+ document.body.style.overflow = "hidden";
+ }
+ };
+ const restoreOverflowSetting = () => {
+ if (previousBodyPaddingRight !== void 0) {
+ document.body.style.paddingRight = previousBodyPaddingRight;
+ previousBodyPaddingRight = void 0;
+ }
+ if (previousBodyOverflowSetting !== void 0) {
+ document.body.style.overflow = previousBodyOverflowSetting;
+ previousBodyOverflowSetting = void 0;
+ }
+ };
+ const setPositionFixed = () => window.requestAnimationFrame(() => {
+ const $html = document.documentElement;
+ const $body = document.body;
+ if (bodyStyle === void 0) {
+ htmlStyle = { ...$html.style };
+ bodyStyle = { ...$body.style };
+ const { scrollY, scrollX, innerHeight } = window;
+ $html.style.height = "100%";
+ $html.style.overflow = "hidden";
+ $body.style.position = "fixed";
+ $body.style.top = `${-scrollY}px`;
+ $body.style.left = `${-scrollX}px`;
+ $body.style.width = "100%";
+ $body.style.height = "auto";
+ $body.style.overflow = "hidden";
+ setTimeout(
+ () => window.requestAnimationFrame(() => {
+ const bottomBarHeight = innerHeight - window.innerHeight;
+ if (bottomBarHeight && scrollY >= innerHeight) {
+ $body.style.top = -(scrollY + bottomBarHeight) + "px";
+ }
+ }),
+ 300
+ );
+ }
+ });
+ const restorePositionSetting = () => {
+ if (bodyStyle !== void 0) {
+ const y = -parseInt(document.body.style.top, 10);
+ const x = -parseInt(document.body.style.left, 10);
+ const $html = document.documentElement;
+ const $body = document.body;
+ $html.style.height = (htmlStyle == null ? void 0 : htmlStyle.height) || "";
+ $html.style.overflow = (htmlStyle == null ? void 0 : htmlStyle.overflow) || "";
+ $body.style.position = bodyStyle.position || "";
+ $body.style.top = bodyStyle.top || "";
+ $body.style.left = bodyStyle.left || "";
+ $body.style.width = bodyStyle.width || "";
+ $body.style.height = bodyStyle.height || "";
+ $body.style.overflow = bodyStyle.overflow || "";
+ window.scrollTo(x, y);
+ bodyStyle = void 0;
+ }
+ };
+ const isTargetElementTotallyScrolled = (targetElement) => targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
+ const handleScroll = (event, targetElement) => {
+ const clientY = event.targetTouches[0].clientY - initialClientY;
+ if (allowTouchMove(event.target)) {
+ return false;
+ }
+ if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
+ return preventDefault(event);
+ }
+ if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
+ return preventDefault(event);
+ }
+ event.stopPropagation();
+ return true;
+ };
+ const disableBodyScroll = (targetElement, options) => {
+ if (!targetElement) {
+ console.error(
+ "disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices."
+ );
+ return;
+ }
+ locksIndex.set(
+ targetElement,
+ (locksIndex == null ? void 0 : locksIndex.get(targetElement)) ? (locksIndex == null ? void 0 : locksIndex.get(targetElement)) + 1 : 1
+ );
+ if (locks.some((lock2) => lock2.targetElement === targetElement)) {
+ return;
+ }
+ const lock = {
+ targetElement,
+ options: options || {}
+ };
+ locks = [...locks, lock];
+ if (isIosDevice) {
+ setPositionFixed();
+ } else {
+ setOverflowHidden(options);
+ }
+ if (isIosDevice) {
+ targetElement.ontouchstart = (event) => {
+ if (event.targetTouches.length === 1) {
+ initialClientY = event.targetTouches[0].clientY;
+ }
+ };
+ targetElement.ontouchmove = (event) => {
+ if (event.targetTouches.length === 1) {
+ handleScroll(event, targetElement);
+ }
+ };
+ if (!documentListenerAdded) {
+ document.addEventListener(
+ "touchmove",
+ preventDefault,
+ hasPassiveEvents ? { passive: false } : void 0
+ );
+ documentListenerAdded = true;
+ }
+ }
+ };
+ const clearAllBodyScrollLocks = () => {
+ if (isIosDevice) {
+ locks.forEach((lock) => {
+ lock.targetElement.ontouchstart = null;
+ lock.targetElement.ontouchmove = null;
+ });
+ if (documentListenerAdded) {
+ document.removeEventListener(
+ "touchmove",
+ preventDefault,
+ hasPassiveEvents ? { passive: false } : void 0
+ );
+ documentListenerAdded = false;
+ }
+ initialClientY = -1;
+ }
+ if (isIosDevice) {
+ restorePositionSetting();
+ } else {
+ restoreOverflowSetting();
+ }
+ locks = [];
+ locksIndex.clear();
+ };
+ const enableBodyScroll = (targetElement) => {
+ if (!targetElement) {
+ console.error(
+ "enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices."
+ );
+ return;
+ }
+ locksIndex.set(
+ targetElement,
+ (locksIndex == null ? void 0 : locksIndex.get(targetElement)) ? (locksIndex == null ? void 0 : locksIndex.get(targetElement)) - 1 : 0
+ );
+ if ((locksIndex == null ? void 0 : locksIndex.get(targetElement)) === 0) {
+ locks = locks.filter((lock) => lock.targetElement !== targetElement);
+ locksIndex == null ? void 0 : locksIndex.delete(targetElement);
+ }
+ if (isIosDevice) {
+ targetElement.ontouchstart = null;
+ targetElement.ontouchmove = null;
+ if (documentListenerAdded && locks.length === 0) {
+ document.removeEventListener(
+ "touchmove",
+ preventDefault,
+ hasPassiveEvents ? { passive: false } : void 0
+ );
+ documentListenerAdded = false;
+ }
+ }
+ if (locks.length === 0) {
+ if (isIosDevice) {
+ restorePositionSetting();
+ } else {
+ restoreOverflowSetting();
+ }
+ }
+ };
+ exports2.clearAllBodyScrollLocks = clearAllBodyScrollLocks;
+ exports2.disableBodyScroll = disableBodyScroll;
+ exports2.enableBodyScroll = enableBodyScroll;
+ Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});
+//# sourceMappingURL=index.umd.js.map
diff --git a/lib/index.umd.js.map b/lib/index.umd.js.map
new file mode 100644
index 0000000..389412d
--- /dev/null
+++ b/lib/index.umd.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/body-scroll-lock.ts"],"sourcesContent":["export type BodyScrollOptions = {\n reserveScrollBarGap?: boolean | undefined;\n allowTouchMove?: ((el: EventTarget) => boolean) | undefined;\n};\n\ntype BodyStyleType = {\n position: string;\n top: string;\n left: string;\n width: string;\n height: string;\n overflow: string;\n};\n\ninterface Lock {\n targetElement: HTMLElement;\n options: BodyScrollOptions;\n}\n\n// Older browsers don't support event options, feature detect it.\nlet hasPassiveEvents = false;\nif (typeof window !== \"undefined\") {\n const passiveTestOptions: any = {\n get passive() {\n hasPassiveEvents = true;\n return undefined;\n },\n };\n (window as any).addEventListener(\"testPassive\", null, passiveTestOptions);\n (window as any).removeEventListener(\"testPassive\", null, passiveTestOptions);\n}\n\nconst isIosDevice =\n typeof window !== \"undefined\" &&\n window.navigator &&\n window.navigator.platform &&\n (/iP(ad|hone|od)/.test(window.navigator.platform) ||\n (window.navigator.platform === \"MacIntel\" &&\n window.navigator.maxTouchPoints > 1));\ntype HandleScrollEvent = TouchEvent;\n\nlet locks: Array = [];\nlet locksIndex: Map = new Map();\nlet documentListenerAdded: boolean = false;\nlet initialClientY: number = -1;\nlet previousBodyOverflowSetting: string | undefined;\nlet htmlStyle:\n | {\n height: string;\n overflow: string;\n }\n | undefined;\nlet bodyStyle: BodyStyleType | undefined;\n\nlet previousBodyPaddingRight: string | undefined;\n\n// returns true if `el` should be allowed to receive touchmove events.\nconst allowTouchMove = (el: EventTarget): boolean =>\n locks.some((lock) => {\n if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {\n return true;\n }\n\n return false;\n });\n\nconst preventDefault = (rawEvent: HandleScrollEvent): boolean => {\n const e: any = rawEvent || window.event;\n\n // For the case whereby consumers adds a touchmove event listener to document.\n // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })\n // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then\n // the touchmove event on document will break.\n if (allowTouchMove(e.target)) {\n return true;\n }\n\n // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).\n if (e.touches.length > 1) return true;\n\n if (e.preventDefault) e.preventDefault();\n\n return false;\n};\n\nconst setOverflowHidden = (options?: BodyScrollOptions) => {\n // If previousBodyPaddingRight is already set, don't set it again.\n if (previousBodyPaddingRight === undefined) {\n const reserveScrollBarGap =\n !!options && options.reserveScrollBarGap === true;\n const scrollBarGap =\n window.innerWidth - document.documentElement.clientWidth;\n\n if (reserveScrollBarGap && scrollBarGap > 0) {\n const computedBodyPaddingRight = parseInt(\n window\n .getComputedStyle(document.body)\n .getPropertyValue(\"padding-right\"),\n 10\n );\n previousBodyPaddingRight = document.body.style.paddingRight;\n document.body.style.paddingRight = `${\n computedBodyPaddingRight + scrollBarGap\n }px`;\n }\n }\n\n // If previousBodyOverflowSetting is already set, don't set it again.\n if (previousBodyOverflowSetting === undefined) {\n previousBodyOverflowSetting = document.body.style.overflow;\n document.body.style.overflow = \"hidden\";\n }\n};\n\nconst restoreOverflowSetting = () => {\n if (previousBodyPaddingRight !== undefined) {\n document.body.style.paddingRight = previousBodyPaddingRight;\n\n // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it\n // can be set again.\n previousBodyPaddingRight = undefined;\n }\n\n if (previousBodyOverflowSetting !== undefined) {\n document.body.style.overflow = previousBodyOverflowSetting;\n\n // Restore previousBodyOverflowSetting to undefined\n // so setOverflowHidden knows it can be set again.\n previousBodyOverflowSetting = undefined;\n }\n};\n\nconst setPositionFixed = () =>\n window.requestAnimationFrame(() => {\n const $html = document.documentElement;\n const $body = document.body;\n // If bodyStyle is already set, don't set it again.\n if (bodyStyle === undefined) {\n htmlStyle = { ...$html.style };\n bodyStyle = { ...$body.style };\n\n // Update the dom inside an animation frame\n const { scrollY, scrollX, innerHeight } = window;\n\n $html.style.height = \"100%\";\n $html.style.overflow = \"hidden\";\n\n $body.style.position = \"fixed\";\n $body.style.top = `${-scrollY}px`;\n $body.style.left = `${-scrollX}px`;\n $body.style.width = \"100%\";\n $body.style.height = \"auto\";\n $body.style.overflow = \"hidden\";\n\n setTimeout(\n () =>\n window.requestAnimationFrame(() => {\n // Attempt to check if the bottom bar appeared due to the position change\n const bottomBarHeight = innerHeight - window.innerHeight;\n if (bottomBarHeight && scrollY >= innerHeight) {\n // Move the content further up so that the bottom bar doesn't hide it\n $body.style.top = -(scrollY + bottomBarHeight) + \"px\";\n }\n }),\n 300\n );\n }\n });\n\nconst restorePositionSetting = () => {\n if (bodyStyle !== undefined) {\n // Convert the position from \"px\" to Int\n const y = -parseInt(document.body.style.top, 10);\n const x = -parseInt(document.body.style.left, 10);\n\n // Restore styles\n const $html = document.documentElement;\n const $body = document.body;\n\n $html.style.height = htmlStyle?.height || \"\";\n $html.style.overflow = htmlStyle?.overflow || \"\";\n\n $body.style.position = bodyStyle.position || \"\";\n $body.style.top = bodyStyle.top || \"\";\n $body.style.left = bodyStyle.left || \"\";\n $body.style.width = bodyStyle.width || \"\";\n $body.style.height = bodyStyle.height || \"\";\n $body.style.overflow = bodyStyle.overflow || \"\";\n\n // Restore scroll\n window.scrollTo(x, y);\n\n bodyStyle = undefined;\n }\n};\n\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions\nconst isTargetElementTotallyScrolled = (targetElement: HTMLElement): boolean =>\n targetElement\n ? targetElement.scrollHeight - targetElement.scrollTop <=\n targetElement.clientHeight\n : false;\n\nconst handleScroll = (\n event: HandleScrollEvent,\n targetElement: HTMLElement\n): boolean => {\n const clientY = event.targetTouches[0].clientY - initialClientY;\n\n if (allowTouchMove(event.target as EventTarget)) {\n return false;\n }\n\n if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {\n // element is at the top of its scroll.\n return preventDefault(event);\n }\n\n if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {\n // element is at the bottom of its scroll.\n return preventDefault(event);\n }\n\n event.stopPropagation();\n return true;\n};\n\n/**\n *\n * @param targetElement HTMLElement\n * @param options BodyScrollOptions\n * @returns void\n */\nexport const disableBodyScroll = (\n targetElement: HTMLElement,\n options?: BodyScrollOptions\n): void => {\n // targetElement must be provided\n if (!targetElement) {\n // eslint-disable-next-line no-console\n console.error(\n \"disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.\"\n );\n return;\n }\n\n locksIndex.set(\n targetElement,\n locksIndex?.get(targetElement)\n ? (locksIndex?.get(targetElement) as number) + 1\n : 1\n );\n // disableBodyScroll must not have been called on this targetElement before\n if (locks.some((lock) => lock.targetElement === targetElement)) {\n return;\n }\n\n const lock = {\n targetElement,\n options: options || {},\n };\n locks = [...locks, lock];\n\n if (isIosDevice) {\n setPositionFixed();\n } else {\n setOverflowHidden(options);\n }\n\n if (isIosDevice) {\n targetElement.ontouchstart = (event: HandleScrollEvent) => {\n if (event.targetTouches.length === 1) {\n // detect single touch.\n initialClientY = event.targetTouches[0].clientY;\n }\n };\n targetElement.ontouchmove = (event: HandleScrollEvent) => {\n if (event.targetTouches.length === 1) {\n // detect single touch.\n handleScroll(event, targetElement);\n }\n };\n\n if (!documentListenerAdded) {\n document.addEventListener(\n \"touchmove\",\n preventDefault,\n hasPassiveEvents ? { passive: false } : undefined\n );\n documentListenerAdded = true;\n }\n }\n};\n\nexport const clearAllBodyScrollLocks = (): void => {\n if (isIosDevice) {\n // Clear all locks ontouchstart/ontouchmove handlers, and the references.\n locks.forEach((lock: Lock) => {\n lock.targetElement.ontouchstart = null;\n lock.targetElement.ontouchmove = null;\n });\n\n if (documentListenerAdded) {\n (document as any).removeEventListener(\n \"touchmove\",\n preventDefault,\n hasPassiveEvents ? { passive: false } : undefined\n );\n documentListenerAdded = false;\n }\n\n // Reset initial clientY.\n initialClientY = -1;\n }\n\n if (isIosDevice) {\n restorePositionSetting();\n } else {\n restoreOverflowSetting();\n }\n\n locks = [];\n locksIndex.clear();\n};\n\n/**\n * @param targetElement\n * @returns void\n */\nexport const enableBodyScroll = (targetElement: HTMLElement): void => {\n if (!targetElement) {\n // eslint-disable-next-line no-console\n console.error(\n \"enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.\"\n );\n return;\n }\n\n locksIndex.set(\n targetElement,\n locksIndex?.get(targetElement)\n ? (locksIndex?.get(targetElement) as number) - 1\n : 0\n );\n if (locksIndex?.get(targetElement) === 0) {\n locks = locks.filter((lock) => lock.targetElement !== targetElement);\n locksIndex?.delete(targetElement);\n }\n\n if (isIosDevice) {\n targetElement.ontouchstart = null;\n targetElement.ontouchmove = null;\n\n if (documentListenerAdded && locks.length === 0) {\n (document as any).removeEventListener(\n \"touchmove\",\n preventDefault,\n hasPassiveEvents ? { passive: false } : undefined\n );\n documentListenerAdded = false;\n }\n }\n\n if (locks.length === 0) {\n if (isIosDevice) {\n restorePositionSetting();\n } else {\n restoreOverflowSetting();\n }\n }\n};\n"],"names":["lock"],"mappings":"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"}
\ No newline at end of file
diff --git a/package.json b/package.json
index 4414f89..5cffb3d 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,9 @@
"description": "Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus)",
"main": "lib/index.js",
"module": "lib/index.esm.js",
+ "browser": {
+ "bodyScrollLockUpgrade": "lib/index.umd.js"
+ },
"typings": "lib/index.d.ts",
"author": "Rick.li",
"homepage": "https://github.com/rick-liruixin/body-scroll-lock-upgrade",
diff --git a/vite.config.cjs b/vite.config.cjs
index cbf118c..666e603 100644
--- a/vite.config.cjs
+++ b/vite.config.cjs
@@ -14,8 +14,14 @@ export default defineConfig({
sourcemap: true,
lib: {
entry: resolvePath("./src/index.ts"),
- formats: ["es", "cjs"],
- fileName: (format) => (format === "es" ? `index.esm.js` : `index.js`),
+ name: "bodyScrollLockUpgrade",
+ formats: ["es", "cjs", "umd"],
+ fileName: (format) =>
+ format === "es"
+ ? `index.esm.js`
+ : format === "umd"
+ ? `index.umd.js`
+ : `index.js`,
},
},
plugins: [
From 15df1aff73cd56c1917c421314e2e6952ab50fbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=91=9E=E9=91=AB?= <15939942017@163.com>
Date: Fri, 21 Jul 2023 16:06:41 +0800
Subject: [PATCH 2/3] add umd
---
CHANGELOG.md | 6 ++++++
lib/index.esm.js | 2 +-
lib/index.js | 2 +-
lib/index.umd.js | 2 +-
package.json | 2 +-
5 files changed, 10 insertions(+), 4 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 19a9821..12bf295 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
# body-scroll-lock-upgrade
+## 1.0.4
+
+### Patch Changes
+
+- add umd
+
## 1.0.3
### Patch Changes
diff --git a/lib/index.esm.js b/lib/index.esm.js
index a3ffef3..fd70abe 100644
--- a/lib/index.esm.js
+++ b/lib/index.esm.js
@@ -1,6 +1,6 @@
/**
* name: body-scroll-lock-upgrade
- * version: v1.0.3
+ * version: v1.0.4
* author: Rick.li
*/
let hasPassiveEvents = false;
diff --git a/lib/index.js b/lib/index.js
index d6ba78c..6395ec4 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -1,6 +1,6 @@
/**
* name: body-scroll-lock-upgrade
- * version: v1.0.3
+ * version: v1.0.4
* author: Rick.li
*/
"use strict";
diff --git a/lib/index.umd.js b/lib/index.umd.js
index 9af925b..9fc7731 100644
--- a/lib/index.umd.js
+++ b/lib/index.umd.js
@@ -1,6 +1,6 @@
/**
* name: body-scroll-lock-upgrade
- * version: v1.0.3
+ * version: v1.0.4
* author: Rick.li
*/
(function(global, factory) {
diff --git a/package.json b/package.json
index 5cffb3d..582868c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "body-scroll-lock-upgrade",
- "version": "1.0.3",
+ "version": "1.0.4",
"description": "Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus)",
"main": "lib/index.js",
"module": "lib/index.esm.js",
From d1cea9c73feafef7906cefb64591a6806552469c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=91=9E=E9=91=AB?= <15939942017@163.com>
Date: Fri, 21 Jul 2023 16:14:57 +0800
Subject: [PATCH 3/3] add umd
---
README.md | 43 ++++++++++++++++++-------------------------
1 file changed, 18 insertions(+), 25 deletions(-)
diff --git a/README.md b/README.md
index f8d598f..d9dcbf9 100644
--- a/README.md
+++ b/README.md
@@ -266,33 +266,26 @@ Then in the javascript:
+// umd
+
+
```
-### UMD
-
-```javascript
-
-
-
-```
-
-###
-
## Demo