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

web component that is used to check user connexion

import{LitElement,css,html}from"lit-element/lit-element";function _taggedTemplateLiteral(t,e){return e||(e=t.slice(0)),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(e)}}))}function _templateObject2(){const t=_taggedTemplateLiteral(['\n            <div class="connexion ','">\n                <div class="isDisconnected">',"</div>\n            </div>\n        "]);return _templateObject2=function(){return t},t}function _templateObject(){const t=_taggedTemplateLiteral(["       \n            .connexion {\n                --check-connexion-font-size: 2vh;\n                --check-connexion-background-color: #d00000;\n                --check-connexion-text-color: #ffffff;\n                --check-connexion-text-transform: uppercase;\n                --check-connexion-height: 50px;\n            } \n            \n            .connexion {\n                height: 0;\n                opacity: 0;\n                position: fixed;\n                line-height: var(--check-connexion-height);\n                bottom: 0;\n                width: 100%;\n                background-color: var(--check-connexion-background-color);\n                color: var(--check-connexion-text-color);\n                text-align: center;\n                padding: 5px;\n                transition: 1s all ease-in-out;\n                overflow: hidden;\n            }\n            .active {\n                height: var(--check-connexion-height);\n                opacity: 1;\n            }\n            .isDisconnected {\n                font-size: var(--check-connexion-font-size);\n                text-transform: var(--check-connexion-text-transform)\n            }\n        "]);return _templateObject=function(){return t},t}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(_templateObject())}render(){let t=this.state?"":"active";return html(_templateObject2(),t,this.message)}}customElements.define("check-connexion",CheckConnexion);export default CheckConnexion;
//# sourceMappingURL=index.min.js.map