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 + + + + +
+
+ +
+
+

+ 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