| 1 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
| 2 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
| 3 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
| 4 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
| 5 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
| 6 | };
|
| 7 | import { adoptedStyle, customElement } from '@mantou/gem/lib/decorators';
|
| 8 | import { GemElement, html } from '@mantou/gem/lib/element';
|
| 9 | import { createCSSSheet, css } from '@mantou/gem/lib/utils';
|
| 10 | import { theme } from '../lib/theme';
|
| 11 | import { sleep } from '../lib/utils';
|
| 12 | const style = createCSSSheet(css `
|
| 13 | :host(:where(:not([hidden]))) {
|
| 14 | view-transition-name: dy-page-loadbar;
|
| 15 | z-index: ${theme.popupZIndex};
|
| 16 | position: fixed;
|
| 17 | display: flex;
|
| 18 | justify-content: flex-end;
|
| 19 | align-items: flex-end;
|
| 20 | top: env(titlebar-area-height, var(--titlebar-area-height, 0px));
|
| 21 | left: 0;
|
| 22 | height: 2px;
|
| 23 | transition: width 0.3s;
|
| 24 | background-color: ${theme.informativeColor};
|
| 25 | }
|
| 26 | .head {
|
| 27 | width: 300px;
|
| 28 | height: 400%;
|
| 29 | background-color: inherit;
|
| 30 | border-start-start-radius: 50%;
|
| 31 | border-end-start-radius: 50%;
|
| 32 | filter: drop-shadow(0 0 4px ${theme.informativeColor});
|
| 33 | }
|
| 34 | `);
|
| 35 | |
| 36 | |
| 37 |
|
| 38 | let DuoyunPageLoadbarElement = class DuoyunPageLoadbarElement extends GemElement {
|
| 39 | constructor() {
|
| 40 | super();
|
| 41 | this.state = {
|
| 42 | progress: 0,
|
| 43 | };
|
| 44 | this.mounted = () => {
|
| 45 | Loadbar.instance = this;
|
| 46 | return () => (Loadbar.instance = undefined);
|
| 47 | };
|
| 48 | this.render = () => {
|
| 49 | return html `
|
| 50 | <style>
|
| 51 | :host {
|
| 52 | width: ${this.state.progress}%;
|
| 53 | }
|
| 54 | </style>
|
| 55 | <div class="head"></div>
|
| 56 | `;
|
| 57 | };
|
| 58 | document.body.append(this);
|
| 59 | this.internals.role = 'progressbar';
|
| 60 | }
|
| 61 | static async start({ delay = 100 } = {}) {
|
| 62 | clearInterval(Loadbar.timer);
|
| 63 | Loadbar.timer = window.setTimeout(() => {
|
| 64 | const instance = Loadbar.instance || new Loadbar();
|
| 65 | instance.setState({ progress: 0 });
|
| 66 | Loadbar.timer = window.setInterval(() => {
|
| 67 | instance.setState({ progress: instance.state.progress + (95 - instance.state.progress) * 0.1 });
|
| 68 | }, 100);
|
| 69 | }, delay);
|
| 70 | }
|
| 71 | static async end() {
|
| 72 | clearInterval(Loadbar.timer);
|
| 73 | const instance = Loadbar.instance;
|
| 74 | if (instance) {
|
| 75 | instance.setState({ progress: 100 });
|
| 76 | await sleep(300);
|
| 77 | instance.remove();
|
| 78 | }
|
| 79 | }
|
| 80 | };
|
| 81 | DuoyunPageLoadbarElement.timer = 0;
|
| 82 | DuoyunPageLoadbarElement = __decorate([
|
| 83 | customElement('dy-page-loadbar'),
|
| 84 | adoptedStyle(style)
|
| 85 | ], DuoyunPageLoadbarElement);
|
| 86 | export { DuoyunPageLoadbarElement };
|
| 87 | export const Loadbar = DuoyunPageLoadbarElement;
|
| 88 | |
| \ | No newline at end of file |