wcomponent-check-connexion/dist-src/index.min.js

web component that is used to check user connexion

import{LitElement,html,css}from"lit-element/lit-element";export default class CheckConnexion extends LitElement{constructor(){super(),this.tStart=null,this.tEnd=null,this.image=new Image,this.counter=0,this.arrTimes=[],this.abortFallback=!1,this.timeToCount=3,this.threshold=2e3,this.offlineTimeout=2e3,this.message="Disconnected",this.timeout=(()=>{}),this.intervalCheckLatency=6e3,this.state=!0}static get properties(){return{timeToCount:{type:Number},threshold:{type:Number},offlineTimeout:{type:Number},message:{type:Text},intervalCheckLatency:{type:Number},active:{type:Boolean}}}firstUpdated(t){this.checkConnectivity()}changeConnectivity(t){const e=new CustomEvent("connexion-changed",{detail:t});document.dispatchEvent(e),this.changeState(t),t&&clearTimeout(this.timeout)}changeState(t){t!==this.state&&(this.state=!this.state,this.requestUpdate())}checkConnectivity(){navigator.onLine?this.changeConnectivity(!0):this.timeout=setTimeout(()=>{this.changeConnectivity(!1)},this.offlineTimeout),window.addEventListener("online",()=>{this.changeConnectivity(!0)}),window.addEventListener("offline",()=>{this.timeout=setTimeout(()=>{this.changeConnectivity(!1)},this.offlineTimeout)}),this.timeoutCallback(),this.checkLatency(t=>this.handleLatency(t)),setInterval(()=>{this.reset(),this.timeoutCallback(),this.checkLatency(t=>this.handleLatency(t))},this.intervalCheckLatency)}checkLatency(t){if(this.tStart=(new Date).getTime(),this.counter<this.timeToCount)this.image.src="https://www.google.com/images/phd/px.gif?t="+this.tStart,this.image.onload=(()=>{this.abortFallback=!0,this.tEnd=(new Date).getTime();let e=this.tEnd-this.tStart;this.arrTimes.push(e),this.checkLatency(t),this.counter++}),this.image.offline=(()=>{this.timeout=setTimeout(()=>{this.changeConnectivity(!1)},this.offlineTimeout)});else{const e=this.arrTimes.reduce((t,e)=>t+e)/this.arrTimes.length;t(e)}}timeoutCallback(){this.timeout=setTimeout(()=>{this.abortFallback||(console.log("Connectivity is too slow, falling back offline experience"),this.changeConnectivity(!1))},this.threshold+1)}reset(){this.arrTimes=[],this.counter=0}handleLatency(t){if(!(t<=this.threshold))return this.changeConnectivity(!1);this.changeConnectivity(!0)}static get styles(){return css`       
            .connexion {
                --check-connexion-font-size: 2vh;
                --check-connexion-background-color: #d00000;
                --check-connexion-text-color: #ffffff;
                --check-connexion-text-transform: uppercase;
                --check-connexion-height: 50px;
            } 
            
            .connexion {
                height: 0;
                opacity: 0;
                position: fixed;
                line-height: var(--check-connexion-height);
                bottom: 0;
                width: 100%;
                background-color: var(--check-connexion-background-color);
                color: var(--check-connexion-text-color);
                text-align: center;
                padding: 5px;
                transition: 1s all ease-in-out;
                overflow: hidden;
            }
            .active {
                height: var(--check-connexion-height);
                opacity: 1;
            }
            .isDisconnected {
                font-size: var(--check-connexion-font-size);
                text-transform: var(--check-connexion-text-transform)
            }
        `}render(){let t=this.state?"":"active";return html`
            <div class="connexion ${t}">
                <div class="isDisconnected">${this.message}</div>
            </div>
        `}}customElements.define("check-connexion",CheckConnexion);
//# sourceMappingURL=index.min.js.map