front-utils/src/lubusy.js

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

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

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

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

                var options = {
                    group: attrs.luBusy,
                    templateLoader: "luticate-loader.html",
                    templateError: "luticate-error.html"
                };

                var o = $scope.luBusy();
                if (o != null) {
                    angular.extend(options, o);
                }

                $scope.update = function()
                {
                    var loaders = luticatePromises.getLoadersGroup(options.group);
                    $scope.isLoading = false;
                    if (loaders != null) {
                        $scope.isLoading = loaders.some(function (promise) {
                            return promise.status == 0;
                        });
                    }
                    var errors = luticatePromises.getErrorsGroup(options.group);
                    $scope.hasError = false;
                    if (errors != 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;
                };

                function addTemplate(template, ngShow) {

                    $http.get(template, {cache: $templateCache}).success(function (indicatorTemplate) {
                        var templateScope = $scope.$new();
                        var backdrop = '<div class="lu-busy lu-busy-backdrop lu-busy-backdrop-animation ng-hide" ng-show="' + ngShow + '"></div>';
                        var backdropElement = $compile(backdrop)(templateScope);
                        element.append(backdropElement);

                        var template = '<div class="lu-busy lu-busy-animation" ng-show="' + ngShow + '">' + indicatorTemplate + '</div>';
                        var templateElement = $compile(template)(templateScope);
                        element.append(templateElement);

                    }).error(function (data) {
                        throw new Error('Template specified for luBusy (' + template + ') could not be loaded. ' + data);
                    });
                }
                addTemplate(options.templateLoader, 'loaderSplashIsActive()');
                addTemplate(options.templateError, 'errorSplashIsActive()');
            }
        };
    }
    ]);

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

    $templateCache.put('luticate-loader.html',
        "<div class=\"lu-busy-default-wrapper\" style=\"position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;\">\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\">Please wait...</div>\n" +
        "\n" +
        "   </div>\n" +
        "\n" +
        "</div>"
    );

    $templateCache.put('luticate-error.html',
        "<div class=\"lu-busy-default-wrapper\" style=\"position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;\">\n" +
        "\n" +
        "   <div class=\"lu-busy-default-sign\">\n" +
        "\n" +
        "      <div class=\"lu-busy-default-error-text\">Error</div>\n" +
        "\n" +
        "   </div>\n" +
        "\n" +
        "</div>"
    );

}]);