Skip to content

Instantly share code, notes, and snippets.

@deepakshrma
Last active February 24, 2016 15:25
Show Gist options
  • Save deepakshrma/c8735a8607bd599a7f9c to your computer and use it in GitHub Desktop.
Save deepakshrma/c8735a8607bd599a7f9c to your computer and use it in GitHub Desktop.
angular-network-connection.js
/**
* @author: Deepak Vishwakarma
* @version: 0.0.1
* @copyright: [email protected]
*/
(function (window, document, angular, undefined) {
'use strict';
angular
.module('ngNetworkConnection', [])
.provider('NetworkConnection', function () {
var _options = {
modal: false,
rootScope: false,
rootEvent: true
};
var windowNavigator = window.navigator;
this.set = function (options) {
angular.extend(_options, options || {});
console.info('connection config::', _options)
return this;
};
this.$get = ['$rootScope', '$window', '$modal', 'NetworkStatusEnum', '$timeout', function ($rootScope, $window, $modal, NetworkStatusEnum, $timeout) {
var offlineModalInstance,
modalTemplate = [
'<div class="network-modal container">',
'<div class="content">',
"<p class='message'>{{('common.noIntConnectionLg'|translate) || 'No Internet connection. Please try again later.'}}</p>",
'<button class="btn-ok green-btn" ng-click="NetworkCtrl.ok()">OK</button>',
'</div>',
'</div></div>'
].join('');
var events = [];
var _isModalEnabled = _options.modal;
var _isRootScopeEnabled = _options.rootScope;
var _isRootEventEnabled = _options.rootEvent;
var eventsMap = {};
function _showOfflineModal() {
if (offlineModalInstance) {
if (offlineModalInstance.opened.$$state) {
offlineModalInstance = $modal.open({
template: modalTemplate,
controller: 'NetworkConnectionCtrl',
controllerAs: 'NetworkCtrl',
show: false
});
}
} else {
offlineModalInstance = $modal.open({
template: modalTemplate,
controller: 'NetworkConnectionCtrl',
controllerAs: 'NetworkCtrl',
show: false
});
}
}
function _hideOfflineModal() {
if (offlineModalInstance && offlineModalInstance.close) {
offlineModalInstance.close();
}
}
function _updateStatus(status) {
_emitEvents(status);
if (_isModalEnabled) {
_updateModal(status);
}
if (_isRootScopeEnabled) {
_updateRootScope();
}
if (_isRootEventEnabled) {
_emitRootEvent();
}
}
function _updateRootScope(status) {
$rootScope.$apply(function () {
$rootScope.networkStatus = (NetworkStatusEnum.OFFLINE === status) ? false : true;
});
}
function _updateModal(status) {
switch (status) {
case NetworkStatusEnum.OFFLINE:
_showOfflineModal();
break;
case NetworkStatusEnum.ONLINE:
_hideOfflineModal();
break;
}
}
function _emitRootEvent(status) {
$rootScope.$emit('$networkConnection', status)
}
function _watch() {
$rootScope.networkStatus = windowNavigator.onLine;
$window.addEventListener(NetworkStatusEnum.OFFLINE, function () {
$timeout(function () {
_updateStatus(NetworkStatusEnum.OFFLINE);
}, 100);
}, false);
$window.addEventListener(NetworkStatusEnum.ONLINE, function () {
$timeout(function () {
_updateStatus(NetworkStatusEnum.ONLINE);
}, 100);
}, false);
}
function _emitEvents(status) {
console.info('connection _emitEvents:: ', status);
events.forEach(function (events) {
if (typeof events.cb === 'function') {
events.cb(status);
}
})
}
function _bindEvent(callback, name) {
var uniqueBindId = Date.now();
events.push({id: uniqueBindId, cb: callback});
eventsMap[uniqueBindId] = events.length - 1;
return uniqueBindId;
}
function _unbindEvent(id) {
var index = eventsMap[id];
if (typeof index == 'undefined') {
index = -1;
}
if (index > -1) {
console.info('connection _unbindEvent:: ', events[index]);
events = events.splice(index, 1);
}
return index;
}
function _currentStatus() {
return windowNavigator.onLine;
}
return {
watch: _watch,
currentStatus: _currentStatus,
open: _showOfflineModal,
bind: _bindEvent,
unbind: _unbindEvent
}
}];
})
.controller('NetworkConnectionCtrl', function ($scope, $modalInstance) {
var ConnectionCtrl = this;
ConnectionCtrl.ok = function (option) {
$modalInstance.close(option);
};
ConnectionCtrl.cancel = function () {
$modalInstance.dismiss('no');
};
})
.constant('NetworkStatusEnum', {
ONLINE: 'online',
OFFLINE: 'offline'
});
})(window, document, window.angular);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment