sounisi5011/'Online and offline events example

## 'Online and offline events example
Online and offline events example

## README.md

      
    Raw
  

              README.md
            
          
    Online and offline events example

Online Demo

http://bl.ocks.org/sounisi5011/raw/2fb8d0d82f9bb38e99789b2f3f42cbeb/

  
## app.js
(function(window, document, navigator, console) {
  var navigationStart = Date.now();
  var originalTitle = document.title;
  var statusElem = document.getElementById('status');
  /**
   * @param  {!Event=} event
   */
  var updateOnlineStatus = function(event) {
    var date = Date.now();
    var condition = navigator.onLine;

    updateStatusText(condition ? 'online' : 'offline');
    updateStatusTitleText(condition);

    if (console) {
      if (event && navigationStart <= event.timeStamp) {
        date = event.timeStamp;
      }
      console.groupCollapsed(event ? (event.type + ' event firing') : 'init');
      console.log(formatDate(new Date(date)));
      console.log('navigator.onLine:');
      console.log(navigator.onLine);
      console.groupEnd();
    }
  };
  /**
   * @param  {!Date} date
   * @return {string}
   */
  var formatDate = function(date) {
    var timezoneOffset = date.getTimezoneOffset();
    var timezoneOffsetAbs = Math.abs(timezoneOffset);
    var y = date.getFullYear();
    var m = ('0' + (date.getMonth() + 1)).slice(-2);
    var d = ('0' + date.getDate()).slice(-2);
    var h = ('0' + date.getHours()).slice(-2);
    var i = ('0' + date.getMinutes()).slice(-2);
    var s = ('0' + date.getSeconds()).slice(-2);
    var ms = ('00' + date.getMilliseconds()).slice(-3);
    var p = (
      (timezoneOffset < 0 ? '-' : '+') +
      ('0' + (timezoneOffsetAbs / 60 | 0)).slice(-2) +
      ':' + ('0' + timezoneOffsetAbs % 60).slice(-2)
    );

    return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s + '.' + ms + p;
  };
  /**
   * @param  {string} statusText
   */
  var updateStatusText = function(statusText) {
    statusElem.textContent = statusText;
  };
  /**
   * @param  {boolean} status
   */
  var updateStatusTitleText = function(status) {
    document.title = (status ? 'online' : '[!] offline') + ' / ' + originalTitle;
  };

  if (!console.log || !console.groupCollapsed || !console.groupEnd) {
    console = null;
  }

  if (typeof navigator.onLine === 'boolean') {
    window.addEventListener('online',  updateOnlineStatus, false);
    window.addEventListener('offline', updateOnlineStatus, false);
    window.addEventListener('onload',  updateOnlineStatus, false);
    updateOnlineStatus();
  } else {
    updateStatusText('Online and offline events not support');
  }
})(window, document, navigator, (window.console || {}));

## index.html
<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1.0">
<meta name=format-detection content="telephone=no,email=no,address=no">
<title>Online and offline events example</title>

<h1>Online and offline events example</h1>

<p id=status>JavaScript is disabled.</p>

<script src="app.js"></script>
	(function(window, document, navigator, console) {
	var navigationStart = Date.now();
	var originalTitle = document.title;
	var statusElem = document.getElementById('status');
	/**
	* @param {!Event=} event
	*/
	var updateOnlineStatus = function(event) {
	var date = Date.now();
	var condition = navigator.onLine;

	updateStatusText(condition ? 'online' : 'offline');
	updateStatusTitleText(condition);

	if (console) {
	if (event && navigationStart <= event.timeStamp) {
	date = event.timeStamp;
	}
	console.groupCollapsed(event ? (event.type + ' event firing') : 'init');
	console.log(formatDate(new Date(date)));
	console.log('navigator.onLine:');
	console.log(navigator.onLine);
	console.groupEnd();
	}
	};
	/**
	* @param {!Date} date
	* @return {string}
	*/
	var formatDate = function(date) {
	var timezoneOffset = date.getTimezoneOffset();
	var timezoneOffsetAbs = Math.abs(timezoneOffset);
	var y = date.getFullYear();
	var m = ('0' + (date.getMonth() + 1)).slice(-2);
	var d = ('0' + date.getDate()).slice(-2);
	var h = ('0' + date.getHours()).slice(-2);
	var i = ('0' + date.getMinutes()).slice(-2);
	var s = ('0' + date.getSeconds()).slice(-2);
	var ms = ('00' + date.getMilliseconds()).slice(-3);
	var p = (
	(timezoneOffset < 0 ? '-' : '+') +
	('0' + (timezoneOffsetAbs / 60 \| 0)).slice(-2) +
	':' + ('0' + timezoneOffsetAbs % 60).slice(-2)
	);

	return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s + '.' + ms + p;
	};
	/**
	* @param {string} statusText
	*/
	var updateStatusText = function(statusText) {
	statusElem.textContent = statusText;
	};
	/**
	* @param {boolean} status
	*/
	var updateStatusTitleText = function(status) {
	document.title = (status ? 'online' : '[!] offline') + ' / ' + originalTitle;
	};

	if (!console.log \|\| !console.groupCollapsed \|\| !console.groupEnd) {
	console = null;
	}

	if (typeof navigator.onLine === 'boolean') {
	window.addEventListener('online', updateOnlineStatus, false);
	window.addEventListener('offline', updateOnlineStatus, false);
	window.addEventListener('onload', updateOnlineStatus, false);
	updateOnlineStatus();
	} else {
	updateStatusText('Online and offline events not support');
	}
	})(window, document, navigator, (window.console \|\| {}));
	<!DOCTYPE html>
	<meta charset=utf-8>
	<meta name=viewport content="width=device-width,initial-scale=1.0">
	<meta name=format-detection content="telephone=no,email=no,address=no">
	<title>Online and offline events example</title>

	<h1>Online and offline events example</h1>

	<p id=status>JavaScript is disabled.</p>

	<script src="app.js"></script>