front-utils/src/lubusy.js

/**
 * Created by robin on 10/24/15.
 */


angular.module('luticateUtils')
    .directive('luBusy', ['$compile', 'luticatePromises', function($compile, luticatePromises){
        return {
            restrict: 'A',
            scope: {},
            link: function($scope, element, attrs) {

                var position = element.css('position');
                if (position === 'static' || position === '' || typeof position === 'undefined'){
                    element.css('position','relative');
                }
                var group = attrs.luBusy;

                $scope.isLoading = false;
                $scope.hasError = false;

                $scope.update = function()
                {
                    var loaders = luticatePromises.getLoadersGroup(group);
                    $scope.isLoading = false;
                    if (loaders != null) {
                        $scope.isLoading = loaders.some(function (promise) {
                            return promise.status == 0;
                        });
                    }
                    var errors = luticatePromises.getLoadersGroup(group);
                    $scope.hasError = false;
                    if (loaders != null) {
                        $scope.hasError = errors.some(function (promise) {
                            return promise.status == 2;
                        });
                    }
                };

                $scope.loaderSplashIsActive = function() {
                    $scope.update();
                    return $scope.isLoading && !$scope.hasError;
                };
                $scope.errorSplashIsActive = function() {
                    $scope.update();
                    return $scope.hasError;
                };

                var backdrop = '<div class="lu-busy lu-busy-backdrop lu-busy-backdrop-animation ng-hide" ng-show="loaderSplashIsActive()"></div>';
                var backdropElement = $compile(backdrop)($scope);
                element.append(backdropElement);

                var template = '<div class="lu-busy lu-busy-animation ng-hide" ng-show="loaderSplashIsActive()"><div class="lu-busy-default-wrapper">' +
                    '<div class="lu-busy-default-sign">' +
                    '<div class="lu-busy-default-text">Please wait...</div>' +
                    '</div>' +
                    '</div></div>';
                var templateElement = $compile(template)($scope);

                angular.element(templateElement.children()[0])
                    .css('position','absolute')
                    .css('top',0)
                    .css('left',0)
                    .css('right',0)
                    .css('bottom',0);
                element.append(templateElement);
            }
        };
    }
    ]);

/*
angular.module('luticateUtils').factory('_luBusyTrackerFactory',['$timeout','$q',function($timeout,$q){

    return function(){

        var tracker = {};
        tracker.promises = [];
        tracker.delayPromise = null;
        tracker.durationPromise = null;
        tracker.delayJustFinished = false;

        tracker.reset = function(options){
            tracker.minDuration = options.minDuration;

            tracker.promises = [];
            angular.forEach(options.promises,function(p){
                if (!p || p.$luBusyFulfilled) {
                    return;
                }
                addPromiseLikeThing(p);
            });

            if (tracker.promises.length === 0) {
                //if we have no promises then dont do the delay or duration stuff
                return;
            }

            tracker.delayJustFinished = false;
            if (options.delay) {
                tracker.delayPromise = $timeout(function(){
                    tracker.delayPromise = null;
                    tracker.delayJustFinished = true;
                },parseInt(options.delay,10));
            }
            if (options.minDuration) {
                tracker.durationPromise = $timeout(function(){
                    tracker.durationPromise = null;
                },parseInt(options.minDuration,10) + (options.delay ? parseInt(options.delay,10) : 0));
            }
        };

        tracker.isPromise = function(promiseThing){
            var then = promiseThing && (promiseThing.then || promiseThing.$then ||
                (promiseThing.$promise && promiseThing.$promise.then));

            return typeof then !== 'undefined';
        };

        tracker.callThen = function(promiseThing,success,error){
            var promise;
            if (promiseThing.then || promiseThing.$then){
                promise = promiseThing;
            } else if (promiseThing.$promise){
                promise = promiseThing.$promise;
            } else if (promiseThing.denodeify){
                promise = $q.when(promiseThing);
            }

            var then = (promise.then || promise.$then);

            then.call(promise,success,error);
        };

        var addPromiseLikeThing = function(promise){

            if (!tracker.isPromise(promise)) {
                throw new Error('luBusy expects a promise (or something that has a .promise or .$promise');
            }

            if (tracker.promises.indexOf(promise) !== -1){
                return;
            }
            tracker.promises.push(promise);

            tracker.callThen(promise, function(){
                promise.$luBusyFulfilled = true;
                if (tracker.promises.indexOf(promise) === -1) {
                    return;
                }
                tracker.promises.splice(tracker.promises.indexOf(promise),1);
            },function(){
                promise.$luBusyFulfilled = true;
                if (tracker.promises.indexOf(promise) === -1) {
                    return;
                }
                tracker.promises.splice(tracker.promises.indexOf(promise),1);
            });
        };

        tracker.active = function(){
            if (tracker.delayPromise){
                return false;
            }

            if (!tracker.delayJustFinished){
                if (tracker.durationPromise){
                    return true;
                }
                return tracker.promises.length > 0;
            } else {
                //if both delay and min duration are set,
                //we don't want to initiate the min duration if the
                //promise finished before the delay was complete
                tracker.delayJustFinished = false;
                if (tracker.promises.length === 0) {
                    tracker.durationPromise = null;
                }
                return tracker.promises.length > 0;
            }
        };

        return tracker;

    };
}]);

angular.module('luticateUtils').value('luBusyDefaults',{});

angular.module('luticateUtils').directive('luBusy',['$compile','$templateCache','luBusyDefaults','$http','_luBusyTrackerFactory',
    function($compile,$templateCache,luBusyDefaults,$http,_luBusyTrackerFactory){
        return {
            restrict: 'A',
            link: function(scope, element, attrs, fn) {

                //Apply position:relative to parent element if necessary
                var position = element.css('position');
                if (position === 'static' || position === '' || typeof position === 'undefined'){
                    element.css('position','relative');
                }

                var templateElement;
                var backdropElement;
                var currentTemplate;
                var templateScope;
                var backdrop;
                var tracker = _luBusyTrackerFactory();

                var defaults = {
                    templateUrl: 'luticate-busy.html',
                    delay:0,
                    minDuration:0,
                    backdrop: true,
                    message:'Please Wait...',
                    wrapperClass: 'lu-busy lu-busy-animation'
                };

                angular.extend(defaults,luBusyDefaults);

                scope.$watchCollection(attrs.luBusy,function(options){

                    if (!options) {
                        options = {promise:null};
                    }

                    if (angular.isString(options)) {
                        throw new Error('Invalid value for lu-busy. luBusy no longer accepts string ids to represent promises/trackers.');
                    }

                    //is it an array (of promises) or one promise
                    if (angular.isArray(options) || tracker.isPromise(options)) {
                        options = {promise:options};
                    }

                    options = angular.extend(angular.copy(defaults),options);

                    if (!options.templateUrl){
                        options.templateUrl = defaults.templateUrl;
                    }

                    if (!angular.isArray(options.promise)){
                        options.promise = [options.promise];
                    }

                    // options.promise = angular.isArray(options.promise) ? options.promise : [options.promise];
                    // options.message = options.message ? options.message : 'Please Wait...';
                    // options.template = options.template ? options.template : luBusyTemplateName;
                    // options.minDuration = options.minDuration ? options.minDuration : 0;
                    // options.delay = options.delay ? options.delay : 0;

                    if (!templateScope) {
                        templateScope = scope.$new();
                    }

                    templateScope.$message = options.message;

                    if (!angular.equals(tracker.promises,options.promise)) {
                        tracker.reset({
                            promises:options.promise,
                            delay:options.delay,
                            minDuration: options.minDuration
                        });
                    }

                    templateScope.$luBusyIsActive = function() {
                        return tracker.active();
                    };


                    if (!templateElement || currentTemplate !== options.templateUrl || backdrop !== options.backdrop) {

                        if (templateElement) {
                            templateElement.remove();
                        }
                        if (backdropElement){
                            backdropElement.remove();
                        }

                        currentTemplate = options.templateUrl;
                        backdrop = options.backdrop;

                        $http.get(currentTemplate,{cache: $templateCache}).success(function(indicatorTemplate){

                            options.backdrop = typeof options.backdrop === 'undefined' ? true : options.backdrop;

                            if (options.backdrop){
                                var backdrop = '<div class="lu-busy lu-busy-backdrop lu-busy-backdrop-animation ng-hide" ng-show="$luBusyIsActive()"></div>';
                                backdropElement = $compile(backdrop)(templateScope);
                                element.append(backdropElement);
                            }

                            var template = '<div class="'+options.wrapperClass+' ng-hide" ng-show="$luBusyIsActive()">' + indicatorTemplate + '</div>';
                            templateElement = $compile(template)(templateScope);

                            angular.element(templateElement.children()[0])
                                .css('position','absolute')
                                .css('top',0)
                                .css('left',0)
                                .css('right',0)
                                .css('bottom',0);
                            element.append(templateElement);

                        }).error(function(data){
                            throw new Error('Template specified for luBusy ('+options.templateUrl+') could not be loaded. ' + data);
                        });
                    }

                },true);
            }
        };
    }
]);

angular.module('luticateUtils').run(['$templateCache', function($templateCache) {
    'use strict';

    $templateCache.put('luticate-busy.html',
        "<div class=\"lu-busy-default-wrapper\">\n" +
        "\n" +
        "   <div class=\"lu-busy-default-sign\">\n" +
        "\n" +
        "      <div class=\"lu-busy-default-spinner\">\n" +
        "         <div class=\"bar1\"></div>\n" +
        "         <div class=\"bar2\"></div>\n" +
        "         <div class=\"bar3\"></div>\n" +
        "         <div class=\"bar4\"></div>\n" +
        "         <div class=\"bar5\"></div>\n" +
        "         <div class=\"bar6\"></div>\n" +
        "         <div class=\"bar7\"></div>\n" +
        "         <div class=\"bar8\"></div>\n" +
        "         <div class=\"bar9\"></div>\n" +
        "         <div class=\"bar10\"></div>\n" +
        "         <div class=\"bar11\"></div>\n" +
        "         <div class=\"bar12\"></div>\n" +
        "      </div>\n" +
        "\n" +
        "      <div class=\"lu-busy-default-text\">{{$message}}</div>\n" +
        "\n" +
        "   </div>\n" +
        "\n" +
        "</div>"
    );

}]);*/