Skip to content

Instantly share code, notes, and snippets.

@aherok
Created January 15, 2014 13:36
Show Gist options
  • Save aherok/8436313 to your computer and use it in GitHub Desktop.
Save aherok/8436313 to your computer and use it in GitHub Desktop.
AngularJS module that displays "please wait" message on time-taking actions. First attempt, yet working.
/**
* Indicator module - fades HTML content and displays "please wait" message on time-taking actions
* usage:
*
* html:
* <div busy-indicator="main-progress">
*
* js:
* busyIndicator.add("main-progress");
* // do some time-taking actions...
* busyIndicator.remove("main-progress");
*
*/
angular.module('busyIndicator', ['ngAnimate'])
.service('busyIndicator', function () {
var tracker, add, remove, get;
tracker = {};
add = function (track_id) {
if (undefined === tracker[track_id]) {
tracker[track_id] = 0;
}
tracker[track_id]++;
};
remove = function (track_id) {
if (tracker[track_id] === undefined) {
tracker[track_id] = 0;
} else {
tracker[track_id]--;
}
};
get = function (track_id) {
return tracker[track_id] || 0;
};
return {
add: add,
remove: remove,
get: get
};
})
.directive('busyIndicator', ['$compile', 'busyIndicator', function ($compile, busyIndicator) {
return {
restrict: 'A',
scope: {
busyIndicator: '='
},
link: function (scope, element, attrs) {
var track_var = attrs.busyIndicator;
// used in ng-show
scope.isActive = function () {
return busyIndicator.get(track_var) > 0;
};
// element's css `position` value needs to be relative-like
var position = element.css('position');
if (position === 'static' || position === '' || typeof position === 'undefined') {
element.css('position', 'relative');
}
// html to append: backdrop + message "please wait"
var template = '<div class="busy-indicator busy-indicator-animation" ng-show="isActive()">' +
'<div class="busy-indicator busy-indicator-bg"></div>' +
'<div class="busy-indicator-message"><span>Please wait...</span></div>' +
'</div>';
var templateElement = $compile(template)(scope);
element.append(templateElement);
}
};
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment