Add share/postman/examples/
This commit is contained in:
parent
3b9f683b5b
commit
9d831d6d04
3 changed files with 41 additions and 2 deletions
|
@ -19,7 +19,7 @@ progress bar is removed once the delivery is complete:
|
|||
<html>
|
||||
<head>
|
||||
<title>Postman</title>
|
||||
<script type="module" src="/postman.js"></script>
|
||||
<script type="module" src="delivery.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="postman loader">
|
||||
|
@ -31,7 +31,7 @@ progress bar is removed once the delivery is complete:
|
|||
</html>
|
||||
```
|
||||
|
||||
**postman.js**
|
||||
**delivery.js**
|
||||
|
||||
```typescript
|
||||
import postman, { item } from "postman";
|
||||
|
|
25
share/postman/examples/progressbar/delivery.js
Normal file
25
share/postman/examples/progressbar/delivery.js
Normal 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
14
share/postman/examples/progressbar/index.html
Normal 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>
|
Loading…
Reference in a new issue