https://skyhikes.com:8001/js1/ngprogress.js

1/*
2ngprogress 1.1.2 - slim, site-wide progressbar for AngularJS 
3(C) 2013 - Victor Bjelkholm 
4License: MIT 
5Source: https://github.com/VictorBjelkholm/ngProgress 
6Date Compiled: 2015-07-27 
7*/
8angular.module('ngProgress.provider', ['ngProgress.directive'])
9    .service('ngProgress', function () {
10        'use strict';
11				return ['$document', '$window', '$compile', '$rootScope', '$timeout', function($document, $window, $compile, $rootScope, $timeout) {
12						this.autoStyle = true;
13						this.count = 0;
14            this.height = '2px';
15						this.$scope = $rootScope.$new();
16						this.color = 'firebrick';
17						this.parent = $document.find('body')[0];
18						this.count = 0;
19
20            // Compile the directive
21            this.progressbarEl = $compile('<ng-progress></ng-progress>')(this.$scope);
22            // Add the element to body
23            this.parent.appendChild(this.progressbarEl[0]);
24            // Set the initial height
25            this.$scope.count = this.count;
26            // If height or color isn't undefined, set the height, background-color and color.
27            if (this.height !== undefined) {
28                this.progressbarEl.eq(0).children().css('height', this.height);
29            }
30            if (this.color !== undefined) {
31                this.progressbarEl.eq(0).children().css('background-color', this.color);
32                this.progressbarEl.eq(0).children().css('color', this.color);
33            }
34            // The ID for the interval controlling start()
35            this.intervalCounterId = 0;
36
37                // Starts the animation and adds between 0 - 5 percent to loading
38                // each 400 milliseconds. Should always be finished with progressbar.complete()
39                // to hide it
40                this.start = function () {
41                    // TODO Use requestAnimationFrame instead of setInterval
42                    // https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame
43                    this.show();
44                    var self = this;
45                    clearInterval(this.intervalCounterId);
46                    this.intervalCounterId = setInterval(function () {
47                        if (isNaN(self.count)) {
48                            clearInterval(self.intervalCounterId);
49                            self.count = 0;
50                            self.hide();
51                        } else {
52                            self.remaining = 100 - self.count;
53                            self.count = self.count + (0.15 * Math.pow(1 - Math.sqrt(self.remaining), 2));
54                            self.updateCount(self.count);
55                        }
56                    }, 200);
57                };
58                this.updateCount = function (new_count) {
59                    this.$scope.count = new_count;
60                    if(!this.$scope.$$phase) {
61                        this.$scope.$apply();
62                    }
63                };
64                // Sets the height of the progressbar. Use any valid CSS value
65                // Eg '10px', '1em' or '1%'
66                this.setHeight = function (new_height) {
67                    if (new_height !== undefined) {
68                        this.height = new_height;
69                        this.$scope.height = this.height;
70                        if(!this.$scope.$$phase) {
71                            this.$scope.$apply();
72                        }
73                    }
74                    return this.height;
75                };
76                // Sets the color of the progressbar and it's shadow. Use any valid HTML
77                // color
78                this.setColor = function(new_color) {
79                    if (new_color !== undefined) {
80                        this.color = new_color;
81                        this.$scope.color = this.color;
82                        if(!this.$scope.$$phase) {
83                            this.$scope.$apply();
84                        }
85                    }
86                    return this.color;
87                };
88                this.hide = function() {
89                    this.progressbarEl.children().css('opacity', '0');
90                    var self = this;
91                    self.animate(function () {
92                        self.progressbarEl.children().css('width', '0%');
93                        self.animate(function () {
94                            self.show();
95                        }, 500);
96                    }, 500);
97                };
98                this.show = function () {
99                    var self = this;
100                    self.animate(function () {
101                        self.progressbarEl.children().css('opacity', '1');
102                    }, 100);
103                };
104                // Cancel any prior animations before running new ones.
105                // Multiple simultaneous animations just look weird.
106                this.animate = function(fn, time) {
107                    if(this.animation !== undefined) { $timeout.cancel(this.animation); }
108                    this.animation = $timeout(fn, time);
109                };
110                // Returns on how many percent the progressbar is at. Should'nt be needed
111                this.status = function () {
112                    return this.count;
113                };
114                // Stops the progressbar at it's current location
115                this.stop = function () {
116                    clearInterval(this.intervalCounterId);
117                };
118                // Set's the progressbar percentage. Use a number between 0 - 100.

119                // If 100 is provided, complete will be called.
120                this.set = function (new_count) {
121                    this.show();
122                    this.updateCount(new_count);
123                    this.count = new_count;
124                    clearInterval(this.intervalCounterId);
125                    return this.count;
126                };
127                this.css = function (args) {
128                    return this.progressbarEl.children().css(args);
129                };
130                // Resets the progressbar to percetage 0 and therefore will be hided after
131                // it's rollbacked
132                this.reset = function () {
133                    clearInterval(this.intervalCounterId);
134                    this.count = 0;
135                    this.updateCount(this.count);
136                    return 0;
137                };
138                // Jumps to 100% progress and fades away progressbar.
139                this.complete = function () {
140                    this.count = 100;
141                    this.updateCount(this.count);
142                    var self = this;
143                    clearInterval(this.intervalCounterId);
144                    $timeout(function () {
145                        self.hide();
146                        $timeout(function () {
147                            self.count = 0;
148                            self.updateCount(self.count);
149                        }, 500);
150                    }, 1000);
151                    return this.count;
152                };
153                // Set the parent of the directive, sometimes body is not sufficient
154                this.setParent = function(newParent) {
155                    if(newParent === null || newParent === undefined) {
156                        throw new Error('Provide a valid parent of type HTMLElement');
157                    }
158
159                    if(this.parent !== null && this.parent !== undefined) {
160                        this.parent.removeChild(this.progressbarEl[0]);
161                    }
162
163                    this.parent = newParent;
164                    this.parent.appendChild(this.progressbarEl[0]);
165                };
166                // Gets the current element the progressbar is attached to
167                this.getDomElement = function () {
168                    return this.progressbarEl;
169                };
170                this.setAbsolute = function() {
171                    this.progressbarEl.css('position', 'absolute');
172                };
173            }];
174    })
175.factory('ngProgressFactory', ['$injector', 'ngProgress', function($injector, ngProgress) {
176    var service = {
177        createInstance: function () {
178            return $injector.instantiate(ngProgress);
179        }
180    };
181    return service;
182}]);
183angular.module('ngProgress.directive', [])
184    .directive('ngProgress', ["$window", "$rootScope", function ($window, $rootScope) {
185        var directiveObj = {
186            // Replace the directive
187            replace: true,
188            // Only use as a element
189            restrict: 'E',
190            link: function ($scope, $element, $attrs, $controller) {
191                // Watch the count on the $rootScope. As soon as count changes to something that
192                // isn't undefined or null, change the counter on $scope and also the width of
193                // the progressbar. The same goes for color and height on the $rootScope
194                $scope.$watch('count', function (newVal) {
195                    if (newVal !== undefined || newVal !== null) {
196                        $scope.counter = newVal;
197                        $element.eq(0).children().css('width', newVal + '%');
198                    }
199                });
200                $scope.$watch('color', function (newVal) {
201                    if (newVal !== undefined || newVal !== null) {
202                        $scope.color = newVal;
203                        $element.eq(0).children().css('background-color', newVal);
204                        $element.eq(0).children().css('color', newVal);
205                    }
206                });
207                $scope.$watch('height', function (newVal) {
208                    if (newVal !== undefined || newVal !== null) {
209                        $scope.height = newVal;
210                        $element.eq(0).children().css('height', newVal);
211                    }
212                });
213            },
214            // The actual html that will be used
215            template: '<div id="ngProgress-container"><div id="ngProgress"></div></div>'
216        };
217        return directiveObj;
218    }]);
219
220angular.module('ngProgress', ['ngProgress.directive', 'ngProgress.provider']);