75 lines
1.6 KiB
JavaScript
75 lines
1.6 KiB
JavaScript
/**
|
|
@license
|
|
Copyright (c) 2025 trading_peter
|
|
This program is available under Apache License Version 2.0
|
|
*/
|
|
|
|
import { LitElement, html, css } from 'lit';
|
|
|
|
class TpTimeoutStrip extends LitElement {
|
|
static get styles() {
|
|
return [
|
|
css`
|
|
:host {
|
|
display: block;
|
|
height: var(--tp-timeout-strip-width, 3px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.strip {
|
|
height: 100%;
|
|
width: 100%;
|
|
background: var(--tp-timeout-strip-color, #000);
|
|
transform-origin: left;
|
|
display: none;
|
|
}
|
|
|
|
.strip.active {
|
|
display: block;
|
|
animation: shrink linear forwards;
|
|
}
|
|
|
|
@keyframes shrink {
|
|
from {
|
|
transform: scaleX(1);
|
|
}
|
|
to {
|
|
transform: scaleX(0);
|
|
}
|
|
}
|
|
`
|
|
];
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<div class="strip ${this.active ? 'active' : ''}" style="animation-duration: ${this.timeout}ms" @animationend=${this._onAnimationEnd}></div>
|
|
`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
active: { type: Boolean },
|
|
timeout: { type: Number }
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.active = false;
|
|
this.timeout = 0;
|
|
this._onAnimationEnd = this._onAnimationEnd.bind(this);
|
|
}
|
|
|
|
show(timeout) {
|
|
this.timeout = timeout;
|
|
this.active = true;
|
|
}
|
|
|
|
_onAnimationEnd() {
|
|
this.active = false;
|
|
this.dispatchEvent(new CustomEvent('timeout', { detail: null, bubbles: true, composed: true }));
|
|
}
|
|
}
|
|
|
|
window.customElements.define('tp-timeout-strip', TpTimeoutStrip); |