Skip to content

Commit

Permalink
Merge pull request #14 from rick-liruixin/develop
Browse files Browse the repository at this point in the history 
add umd
  • Loading branch information
@rick-liruixin
rick-liruixin authored Jul 21, 2023
2 parents f447e91 + d1cea9c commit 1e90c65
Show file tree
Hide file tree
Showing 9 changed files with 615 additions and 7 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# body-scroll-lock-upgrade

## 1.0.4

### Patch Changes

- add umd

## 1.0.3

### Patch Changes
Expand Down
24 changes: 22 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<script src="lib/bodyScrollLock.js"></script>` tag (refer to the lib folder).
Expand Down Expand Up @@ -266,8 +266,28 @@ Then in the javascript:

</script>

// umd
<script src="../../lib/index.umd.js"></script>
<script>
const open = () => {
document.querySelector(".dialog").style.display = "block";
document.querySelector(".mask").style.display = "block";
const targetElement = document.querySelector(".dialog");
bodyScrollLockUpgrade.disableBodyScroll(targetElement);
};
const close = () => {
document.querySelector(".dialog").style.display = "none";
document.querySelector(".mask").style.display = "none";
const targetElement = document.querySelector(".dialog");
bodyScrollLockUpgrade.enableBodyScroll(targetElement);
};
document.getElementById("open").addEventListener("click", open);
document.getElementById("close").addEventListener("click", close);
</script>
```



## Demo

Check out the demo, powered by Vercel.
Expand Down
329 changes: 329 additions & 0 deletions examples/vanilla-js/index-umd.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,329 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.dialog {
display: none;
width: 70%;
height: 70%;
position: fixed;
top: 15%;
left: 15%;
overflow-y: auto;
z-index: 10;
color: #000;
background-color: #fff;
}
.mask {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #0000005e;
z-index: 9;
}
</style>
</head>
<body>
<button id="open">open dialog</button>
<div class="dialog body-scroll-lock-ignore">
<br />
<button id="close">close dialog</button>
<br />
<br />
<p class="read-the-docs">
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
</p>
</div>
<div class="mask"></div>

<p class="read-the-docs">
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
Click on the Vite and React logos to learn more
<br />
</p>

<script src="../../lib/index.umd.js"></script>
<script>
const open = () => {
document.querySelector(".dialog").style.display = "block";
document.querySelector(".mask").style.display = "block";
const targetElement = document.querySelector(".dialog");
bodyScrollLockUpgrade.disableBodyScroll(targetElement);
};
const close = () => {
document.querySelector(".dialog").style.display = "none";
document.querySelector(".mask").style.display = "none";
const targetElement = document.querySelector(".dialog");
bodyScrollLockUpgrade.enableBodyScroll(targetElement);
};
document.getElementById("open").addEventListener("click", open);
document.getElementById("close").addEventListener("click", close);
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion lib/index.esm.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion lib/index.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 1e90c65

Please sign in to comment.