0x1eef/postman
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add share/postman/examples/

Browse source
This commit is contained in:
0x1eef 2024-07-12 02:26:46 -03:00
parent 3b9f683b5b
commit 9d831d6d04
3 changed files with 41 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -19,7 +19,7 @@ progress bar is removed once the delivery is complete:
<html> <html>
<head> <head>
<title>Postman</title> <title>Postman</title>
<script type="module" src="/postman.js"></script> <script type="module" src="delivery.js"></script>
</head> </head>
<body> <body>
<div class="postman loader"> <div class="postman loader">
@ -31,7 +31,7 @@ progress bar is removed once the delivery is complete:
</html> </html>
``` ```
**postman.js** **delivery.js**
```typescript ```typescript
import postman, { item } from "postman"; import postman, { item } from "postman";

25
share/postman/examples/progressbar/delivery.js Normal file
View file

@ -0,0 +1,25 @@
import postman, { item } from "postman";
document.addEventListener("DOMContentLoaded", () => {
const bar = document.querySelector("progress");
const span = document.querySelector(".percentage");
const delivery = postman(
item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
item.script("/js/app.js"),
item.image("/images/app.png"),
item.css("/css/app.css"),
item.progress((percent) => {
bar.value = percent;
span.innerText = `${percent}%`;
})
).deliver();
delivery.then((package) => {
/* Add page assets */
package.fonts.forEach((font) => documents.fonts.add(font));
package.scripts.forEach((script) => document.body.appendChild(script));
package.css.forEach((css) => document.head.appendChild(css));
/* Replace progress bar */
bar.remove();
span.remove();
});
});

14
share/postman/examples/progressbar/index.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Postman</title>
<script type="module" src="postman.js"></script>
</head>
<body>
<div class="postman loader">
<progress value="0" max="100"></progress>
<span class="percentage"></span>
</div>
</div>
</body>
</html>