Permalink
Browse files

Merge pull request ryvan-js#4 from psaung/binding-handler

Added event handler.
  • Loading branch information...
ryvan-js committed Mar 15, 2017
2 parents c19ab1e + f014ec9 commit 8ab7ce3789a75d18f4ab8b80c45d7339a8b89f9e
Showing with 56 additions and 16 deletions.
  1. +42 −10 dist/wiremonkey.js
  2. +14 −6 index.html
@@ -23,6 +23,9 @@ Git:http://github/ryvan-js
</div>\
</div>");

_.connectedHandler = [];
_.disconnectedHandler = [];

_.conf = {
parentElement:"body",
WmElement:document.querySelector(".wm_container"),
@@ -41,15 +44,34 @@ Git:http://github/ryvan-js
_.onLine= true;

_.onDisconnect = function(){
_.changeConnectionStatus(false);
_.conf.WmElement.querySelector('span').innerHTML = _.message.connectionLost;
_.conf.WmElement.className = _.conf.WmElement.className +" "+ _.conf.classSlideIn;
}

_.onConnect = function(){
_.changeConnectionStatus(true);
_.conf.WmElement.querySelector('span').innerHTML = _.message.reconnected;
_.conf.WmElement.className = _.conf.WmElement.className +" "+ _.conf.classConnected;
}


// observer pattern for detecting connection status
_.changeConnectionStatus = function(val) {
if(val !== undefined) {
// connected
if(val) {
for(var i = 0; i < _.connectedHandler.length; i++) {
_.connectedHandler[i](this);
}
} else { // disconnected
for(var i = 0; i < _.disconnectedHandler.length; i++) {
_.disconnectedHandler[i](this);
}
}
this.onLine = val;
}
}

//_.init();

}
@@ -58,6 +80,18 @@ Git:http://github/ryvan-js

}());

// on event handlers
WireMonkey.prototype.on = function(event, handler) {
switch(event) {
case 'connected':
this.connectedHandler.push(handler);
break;
case 'disconnected':
this.disconnectedHandler.push(handler);
break;
}
}

WireMonkey.prototype.checkConnection = function () {
var _ = this;

@@ -69,7 +103,7 @@ Git:http://github/ryvan-js
var i = new Image();
i.onerror = function(){ _.onLine = false};
i.onload = function(){ _.onLine = true};
i.src = _.conf.imgUrl + new Date().getTime();
i.src = _.conf.imgUrl + new Date().getTime();
}

return _.onLine;
@@ -80,8 +114,8 @@ Git:http://github/ryvan-js
var conf = _.conf;
var msg = _.message;
var connection = true;


setInterval(function(){

isOnline = _.checkConnection();
@@ -92,22 +126,20 @@ Git:http://github/ryvan-js
_.onDisconnect();
connection = false;
}
}else
}else
if(isOnline && !connection){
_.onConnect();
setTimeout(function(){
conf.WmElement.className = conf.WmElement.className +" "+ conf.classSlideOut;
reset_element = true;
reset_element = true;
},1000);
return connection = true;
return connection = true;
}
},4000);
}


window.WireMonkey = new WireMonkey();

//console.log( WM );
}());


@@ -4,7 +4,7 @@
<meta name='viewport' content="width=device-width,initial-scale=1.0">
<meta author = "Ryvan Prabhu">
<link href='dist/css/wiremonkey.css' rel='stylesheet'>

<style>
body,html{
margin:0;
@@ -57,16 +57,16 @@
button.connect{
background:url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MzYuMTI3IDQzNi4xMjciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQzNi4xMjcgNDM2LjEyNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIxMjhweCIgaGVpZ2h0PSIxMjhweCI+CjxwYXRoIGQ9Ik0zNTAuMzU5LDE5MS4wMTZjLTcuODE0LTY2LjEzMy02NC4wNjItMTE3LjQzMS0xMzIuMjk2LTExNy40MzFTOTMuNTgxLDEyNC44ODMsODUuNzY4LDE5MS4wMTYgIEMzOC40MDIsMTkxLjAxNiwwLDIyOS40MTMsMCwyNzYuNzc5YzAsNDcuMzY2LDM4LjM5Nyw4NS43NjMsODUuNzYzLDg1Ljc2M2gyNjQuNjAxYzQ3LjM2NiwwLDg1Ljc2My0zOC4zOTcsODUuNzYzLTg1Ljc2MyAgQzQzNi4xMjcsMjI5LjQxMywzOTcuNzI1LDE5MS4wMTYsMzUwLjM1OSwxOTEuMDE2eiIgZmlsbD0iI0ZGRkZGRiIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K) no-repeat center;
background-size:100% 100%;
}
button.disconnect{
}
</style>
</head>

<div class='container'>
<h1>Wiremonkey</h1>
<p>Wiremonkey is a independant javascript plugin which will monitor the browser's internet connection in realtime and will notify the users if an error dignosed with it.</p>
@@ -78,11 +78,19 @@ <h4>Disconnect Your Internet Connection</h4>
</div>
<script src='dist/wiremonkey.js' type="text/javascript"></script>
<script>
window.onload = function(){
WireMonkey.init();
WireMonkey.on('connected', function(){
console.log('Your connection is alived.');
});
WireMonkey.on('disconnected', function(){
console.log('You are disconnected from internet.');
});
//demo purpose
document.querySelector('#btn_test').addEventListener('click',function(){
if(this.className === "connect"){
@@ -103,4 +111,4 @@ <h4>Disconnect Your Internet Connection</h4>
}
</script>
</body>
</body>

0 comments on commit 8ab7ce3

Please sign in to comment.