瀏覽代碼

promises error

tags/0.1.0
Robin Thoni 9 年之前
父節點
當前提交
fb64e1886d
共有 3 個文件被更改,包括 44 次插入271 次删除
  1. 10
    3
      src/lubusy.css
  2. 34
    265
      src/lubusy.js
  3. 0
    3
      src/promises.js

+ 10
- 3
src/lubusy.css 查看文件

@@ -92,7 +92,14 @@
92 92
     box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
93 93
 }
94 94
 .lu-busy-default-text{
95
-    margin:13px 12px 6px 49px;
95
+    margin:7px 12px 0 40px;
96
+    font-size:16px;
97
+    color:#555;
98
+    text-align: left;
99
+    max-width: 400px;
100
+}
101
+.lu-busy-default-error-text{
102
+    margin:7px 12px 0 12px;
96 103
     font-size:16px;
97 104
     color:#555;
98 105
     text-align: left;
@@ -103,8 +110,8 @@
103 110
     width:25px;
104 111
     height:25px;
105 112
     display:inline-block;
106
-    top:12px;
107
-    left:14px;
113
+    top:6px;
114
+    left:8px;
108 115
 }
109 116
 .lu-busy-default-spinner div{
110 117
     width:12%;

+ 34
- 265
src/lubusy.js 查看文件

@@ -2,9 +2,8 @@
2 2
  * Created by robin on 10/24/15.
3 3
  */
4 4
 
5
-
6 5
 angular.module('luticateUtils')
7
-    .directive('luBusy', ['$compile', 'luticatePromises', function($compile, luticatePromises){
6
+    .directive('luBusy', ['$compile', '$http', 'luticatePromises', '$templateCache', function($compile, $http, luticatePromises, $templateCache){
8 7
         return {
9 8
             restrict: 'A',
10 9
             scope: {},
@@ -14,13 +13,13 @@ angular.module('luticateUtils')
14 13
                 if (position === 'static' || position === '' || typeof position === 'undefined'){
15 14
                     element.css('position','relative');
16 15
                 }
17
-                var group = attrs.luBusy;
18 16
 
19 17
                 $scope.isLoading = false;
20 18
                 $scope.hasError = false;
21 19
 
22 20
                 $scope.update = function()
23 21
                 {
22
+                    var group = attrs.luBusy;
24 23
                     var loaders = luticatePromises.getLoadersGroup(group);
25 24
                     $scope.isLoading = false;
26 25
                     if (loaders != null) {
@@ -28,9 +27,9 @@ angular.module('luticateUtils')
28 27
                             return promise.status == 0;
29 28
                         });
30 29
                     }
31
-                    var errors = luticatePromises.getLoadersGroup(group);
30
+                    var errors = luticatePromises.getErrorsGroup(group);
32 31
                     $scope.hasError = false;
33
-                    if (loaders != null) {
32
+                    if (errors != null) {
34 33
                         $scope.hasError = errors.some(function (promise) {
35 34
                             return promise.status == 2;
36 35
                         });
@@ -46,276 +45,34 @@ angular.module('luticateUtils')
46 45
                     return $scope.hasError;
47 46
                 };
48 47
 
49
-                var backdrop = '<div class="lu-busy lu-busy-backdrop lu-busy-backdrop-animation ng-hide" ng-show="loaderSplashIsActive()"></div>';
50
-                var backdropElement = $compile(backdrop)($scope);
51
-                element.append(backdropElement);
48
+                function addTemplate(template, ngShow) {
52 49
 
53
-                var template = '<div class="lu-busy lu-busy-animation ng-hide" ng-show="loaderSplashIsActive()"><div class="lu-busy-default-wrapper">' +
54
-                    '<div class="lu-busy-default-sign">' +
55
-                    '<div class="lu-busy-default-text">Please wait...</div>' +
56
-                    '</div>' +
57
-                    '</div></div>';
58
-                var templateElement = $compile(template)($scope);
59
-
60
-                angular.element(templateElement.children()[0])
61
-                    .css('position','absolute')
62
-                    .css('top',0)
63
-                    .css('left',0)
64
-                    .css('right',0)
65
-                    .css('bottom',0);
66
-                element.append(templateElement);
67
-            }
68
-        };
69
-    }
70
-    ]);
50
+                    $http.get(template, {cache: $templateCache}).success(function (indicatorTemplate) {
51
+                        var templateScope = $scope.$new();
52
+                        var backdrop = '<div class="lu-busy lu-busy-backdrop lu-busy-backdrop-animation ng-hide" ng-show="' + ngShow + '"></div>';
53
+                        var backdropElement = $compile(backdrop)(templateScope);
54
+                        element.append(backdropElement);
71 55
 
72
-/*
73
-angular.module('luticateUtils').factory('_luBusyTrackerFactory',['$timeout','$q',function($timeout,$q){
56
+                        var template = '<div class="lu-busy lu-busy-animation" ng-show="' + ngShow + '">' + indicatorTemplate + '</div>';
57
+                        var templateElement = $compile(template)(templateScope);
58
+                        element.append(templateElement);
74 59
 
75
-    return function(){
76
-
77
-        var tracker = {};
78
-        tracker.promises = [];
79
-        tracker.delayPromise = null;
80
-        tracker.durationPromise = null;
81
-        tracker.delayJustFinished = false;
82
-
83
-        tracker.reset = function(options){
84
-            tracker.minDuration = options.minDuration;
85
-
86
-            tracker.promises = [];
87
-            angular.forEach(options.promises,function(p){
88
-                if (!p || p.$luBusyFulfilled) {
89
-                    return;
90
-                }
91
-                addPromiseLikeThing(p);
92
-            });
93
-
94
-            if (tracker.promises.length === 0) {
95
-                //if we have no promises then dont do the delay or duration stuff
96
-                return;
97
-            }
98
-
99
-            tracker.delayJustFinished = false;
100
-            if (options.delay) {
101
-                tracker.delayPromise = $timeout(function(){
102
-                    tracker.delayPromise = null;
103
-                    tracker.delayJustFinished = true;
104
-                },parseInt(options.delay,10));
105
-            }
106
-            if (options.minDuration) {
107
-                tracker.durationPromise = $timeout(function(){
108
-                    tracker.durationPromise = null;
109
-                },parseInt(options.minDuration,10) + (options.delay ? parseInt(options.delay,10) : 0));
110
-            }
111
-        };
112
-
113
-        tracker.isPromise = function(promiseThing){
114
-            var then = promiseThing && (promiseThing.then || promiseThing.$then ||
115
-                (promiseThing.$promise && promiseThing.$promise.then));
116
-
117
-            return typeof then !== 'undefined';
118
-        };
119
-
120
-        tracker.callThen = function(promiseThing,success,error){
121
-            var promise;
122
-            if (promiseThing.then || promiseThing.$then){
123
-                promise = promiseThing;
124
-            } else if (promiseThing.$promise){
125
-                promise = promiseThing.$promise;
126
-            } else if (promiseThing.denodeify){
127
-                promise = $q.when(promiseThing);
128
-            }
129
-
130
-            var then = (promise.then || promise.$then);
131
-
132
-            then.call(promise,success,error);
133
-        };
134
-
135
-        var addPromiseLikeThing = function(promise){
136
-
137
-            if (!tracker.isPromise(promise)) {
138
-                throw new Error('luBusy expects a promise (or something that has a .promise or .$promise');
139
-            }
140
-
141
-            if (tracker.promises.indexOf(promise) !== -1){
142
-                return;
143
-            }
144
-            tracker.promises.push(promise);
145
-
146
-            tracker.callThen(promise, function(){
147
-                promise.$luBusyFulfilled = true;
148
-                if (tracker.promises.indexOf(promise) === -1) {
149
-                    return;
150
-                }
151
-                tracker.promises.splice(tracker.promises.indexOf(promise),1);
152
-            },function(){
153
-                promise.$luBusyFulfilled = true;
154
-                if (tracker.promises.indexOf(promise) === -1) {
155
-                    return;
156
-                }
157
-                tracker.promises.splice(tracker.promises.indexOf(promise),1);
158
-            });
159
-        };
160
-
161
-        tracker.active = function(){
162
-            if (tracker.delayPromise){
163
-                return false;
164
-            }
165
-
166
-            if (!tracker.delayJustFinished){
167
-                if (tracker.durationPromise){
168
-                    return true;
169
-                }
170
-                return tracker.promises.length > 0;
171
-            } else {
172
-                //if both delay and min duration are set,
173
-                //we don't want to initiate the min duration if the
174
-                //promise finished before the delay was complete
175
-                tracker.delayJustFinished = false;
176
-                if (tracker.promises.length === 0) {
177
-                    tracker.durationPromise = null;
178
-                }
179
-                return tracker.promises.length > 0;
180
-            }
181
-        };
182
-
183
-        return tracker;
184
-
185
-    };
186
-}]);
187
-
188
-angular.module('luticateUtils').value('luBusyDefaults',{});
189
-
190
-angular.module('luticateUtils').directive('luBusy',['$compile','$templateCache','luBusyDefaults','$http','_luBusyTrackerFactory',
191
-    function($compile,$templateCache,luBusyDefaults,$http,_luBusyTrackerFactory){
192
-        return {
193
-            restrict: 'A',
194
-            link: function(scope, element, attrs, fn) {
195
-
196
-                //Apply position:relative to parent element if necessary
197
-                var position = element.css('position');
198
-                if (position === 'static' || position === '' || typeof position === 'undefined'){
199
-                    element.css('position','relative');
60
+                    }).error(function (data) {
61
+                        throw new Error('Template specified for luBusy (' + template + ') could not be loaded. ' + data);
62
+                    });
200 63
                 }
201
-
202
-                var templateElement;
203
-                var backdropElement;
204
-                var currentTemplate;
205
-                var templateScope;
206
-                var backdrop;
207
-                var tracker = _luBusyTrackerFactory();
208
-
209
-                var defaults = {
210
-                    templateUrl: 'luticate-busy.html',
211
-                    delay:0,
212
-                    minDuration:0,
213
-                    backdrop: true,
214
-                    message:'Please Wait...',
215
-                    wrapperClass: 'lu-busy lu-busy-animation'
216
-                };
217
-
218
-                angular.extend(defaults,luBusyDefaults);
219
-
220
-                scope.$watchCollection(attrs.luBusy,function(options){
221
-
222
-                    if (!options) {
223
-                        options = {promise:null};
224
-                    }
225
-
226
-                    if (angular.isString(options)) {
227
-                        throw new Error('Invalid value for lu-busy. luBusy no longer accepts string ids to represent promises/trackers.');
228
-                    }
229
-
230
-                    //is it an array (of promises) or one promise
231
-                    if (angular.isArray(options) || tracker.isPromise(options)) {
232
-                        options = {promise:options};
233
-                    }
234
-
235
-                    options = angular.extend(angular.copy(defaults),options);
236
-
237
-                    if (!options.templateUrl){
238
-                        options.templateUrl = defaults.templateUrl;
239
-                    }
240
-
241
-                    if (!angular.isArray(options.promise)){
242
-                        options.promise = [options.promise];
243
-                    }
244
-
245
-                    // options.promise = angular.isArray(options.promise) ? options.promise : [options.promise];
246
-                    // options.message = options.message ? options.message : 'Please Wait...';
247
-                    // options.template = options.template ? options.template : luBusyTemplateName;
248
-                    // options.minDuration = options.minDuration ? options.minDuration : 0;
249
-                    // options.delay = options.delay ? options.delay : 0;
250
-
251
-                    if (!templateScope) {
252
-                        templateScope = scope.$new();
253
-                    }
254
-
255
-                    templateScope.$message = options.message;
256
-
257
-                    if (!angular.equals(tracker.promises,options.promise)) {
258
-                        tracker.reset({
259
-                            promises:options.promise,
260
-                            delay:options.delay,
261
-                            minDuration: options.minDuration
262
-                        });
263
-                    }
264
-
265
-                    templateScope.$luBusyIsActive = function() {
266
-                        return tracker.active();
267
-                    };
268
-
269
-
270
-                    if (!templateElement || currentTemplate !== options.templateUrl || backdrop !== options.backdrop) {
271
-
272
-                        if (templateElement) {
273
-                            templateElement.remove();
274
-                        }
275
-                        if (backdropElement){
276
-                            backdropElement.remove();
277
-                        }
278
-
279
-                        currentTemplate = options.templateUrl;
280
-                        backdrop = options.backdrop;
281
-
282
-                        $http.get(currentTemplate,{cache: $templateCache}).success(function(indicatorTemplate){
283
-
284
-                            options.backdrop = typeof options.backdrop === 'undefined' ? true : options.backdrop;
285
-
286
-                            if (options.backdrop){
287
-                                var backdrop = '<div class="lu-busy lu-busy-backdrop lu-busy-backdrop-animation ng-hide" ng-show="$luBusyIsActive()"></div>';
288
-                                backdropElement = $compile(backdrop)(templateScope);
289
-                                element.append(backdropElement);
290
-                            }
291
-
292
-                            var template = '<div class="'+options.wrapperClass+' ng-hide" ng-show="$luBusyIsActive()">' + indicatorTemplate + '</div>';
293
-                            templateElement = $compile(template)(templateScope);
294
-
295
-                            angular.element(templateElement.children()[0])
296
-                                .css('position','absolute')
297
-                                .css('top',0)
298
-                                .css('left',0)
299
-                                .css('right',0)
300
-                                .css('bottom',0);
301
-                            element.append(templateElement);
302
-
303
-                        }).error(function(data){
304
-                            throw new Error('Template specified for luBusy ('+options.templateUrl+') could not be loaded. ' + data);
305
-                        });
306
-                    }
307
-
308
-                },true);
64
+                addTemplate('luticate-busy.html', 'loaderSplashIsActive()');
65
+                addTemplate('luticate-error.html', 'errorSplashIsActive()');
309 66
             }
310 67
         };
311 68
     }
312
-]);
69
+    ]);
313 70
 
314 71
 angular.module('luticateUtils').run(['$templateCache', function($templateCache) {
315 72
     'use strict';
316 73
 
317 74
     $templateCache.put('luticate-busy.html',
318
-        "<div class=\"lu-busy-default-wrapper\">\n" +
75
+        "<div class=\"lu-busy-default-wrapper\" style=\"position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;\">\n" +
319 76
         "\n" +
320 77
         "   <div class=\"lu-busy-default-sign\">\n" +
321 78
         "\n" +
@@ -334,11 +91,23 @@ angular.module('luticateUtils').run(['$templateCache', function($templateCache)
334 91
         "         <div class=\"bar12\"></div>\n" +
335 92
         "      </div>\n" +
336 93
         "\n" +
337
-        "      <div class=\"lu-busy-default-text\">{{$message}}</div>\n" +
94
+        "      <div class=\"lu-busy-default-text\">Please wait...</div>\n" +
95
+        "\n" +
96
+        "   </div>\n" +
97
+        "\n" +
98
+        "</div>"
99
+    );
100
+
101
+    $templateCache.put('luticate-error.html',
102
+        "<div class=\"lu-busy-default-wrapper\" style=\"position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;\">\n" +
103
+        "\n" +
104
+        "   <div class=\"lu-busy-default-sign\">\n" +
105
+        "\n" +
106
+        "      <div class=\"lu-busy-default-error-text\">Error</div>\n" +
338 107
         "\n" +
339 108
         "   </div>\n" +
340 109
         "\n" +
341 110
         "</div>"
342 111
     );
343 112
 
344
-}]);*/
113
+}]);

+ 0
- 3
src/promises.js 查看文件

@@ -8,11 +8,8 @@
8 8
         .factory('luticatePromises', [function() {
9 9
 
10 10
             var luticatePromises = {};
11
-
12 11
             luticatePromises.promises = {};
13
-
14 12
             luticatePromises.loaders = [];
15
-
16 13
             luticatePromises.errors = [];
17 14
 
18 15
             luticatePromises.build = function(array)

Loading…
取消
儲存