Merge pull request #3 from mohammadumairkhan/master

added a functionality to configure directive from app.config and add spe...
DanWahlin · Aug 15, 2014 · 68f689a · 68f689a
2 parents 4b6bfc0 + 674d0c1
commit 68f689a
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 10 deletions.
diff --git a/app/app.js b/app/app.js
@@ -1,15 +1,21 @@
 (function () {
 
     angular.module('customersApp', ['ngRoute', 'wc.Directives'])
-        .config(['$routeProvider', function ($routeProvider) {
+        .config(['$routeProvider','wcOverlayConfigProvider', function ($routeProvider, wcOverlayConfigProvider) {
             $routeProvider
                 .when('/', {
                     templateUrl: '/app/views/customers.html',
                     controller: 'CustomersController'
                 })
                 .otherwise({ redirectTo: '/' });
+            wcOverlayConfigProvider.setDelay(100);
+            wcOverlayConfigProvider.setExceptionUrls(            [
+                {
+                    method: 'GET',
+                    url:    '/api/dataservice/existingcustomers'
+                }
+            ]);
         }]);
-
 }());
 
 

diff --git a/app/directives/wcAngularOverlay.js b/app/directives/wcAngularOverlay.js
@@ -1,6 +1,6 @@
 (function () {
 
-    var wcOverlayDirective = function ($q, $timeout, $window, httpInterceptor) {
+    var wcOverlayDirective = function ($q, $timeout, $window, httpInterceptor, wcOverlayConfig) {
         return {
             restrict: 'EA',
             transclude: true,
@@ -17,7 +17,8 @@
                     timerPromise = null,
                     timerPromiseHide = null,
                     inSession = false,
-                    queue = [];
+                    queue = [],
+                    overlayConfig = wcOverlayConfig.getConfig();
 
                 init();
 
@@ -31,7 +32,9 @@
                 function wireUpHttpInterceptor() {
 
                     httpInterceptor.request = function (config) {
-                        processRequest();
+                        //I want to have a condition to not show the overlay on specific calls
+                        if(shouldShowOverlay(config.method, config.url))
+                            processRequest();
                         return config || $q.when(config);
                     };
 
@@ -66,7 +69,7 @@
                     if (queue.length == 1) {
                         timerPromise = $timeout(function () {
                             if (queue.length) showOverlay();
-                        }, scope.wcOverlayDelay ? scope.wcOverlayDelay : 500); //Delay showing for 500 millis to avoid flicker
+                        }, scope.wcOverlayDelay ? scope.wcOverlayDelay : overlayConfig.delay); //Delay showing for 500 millis to avoid flicker
                     }
                 }
 
@@ -83,7 +86,7 @@
                                 hideOverlay();
                                 if (timerPromiseHide) $timeout.cancel(timerPromiseHide);
                             }
-                        }, scope.wcOverlayDelay ? scope.wcOverlayDelay : 500);
+                        }, scope.wcOverlayDelay ? scope.wcOverlayDelay : overlayConfig.delay);
                     }
                 }
 
@@ -133,6 +136,25 @@
                         return func(element, null)[style];
                     }
                 }();
+
+                function shouldShowOverlay(method, url){
+                    var searchCriteria = {
+                        method: method,
+                        url: url
+                    }
+                    return angular.isUndefined(findUrl(overlayConfig.exceptUrls, searchCriteria));
+                }
+
+                function findUrl(urlList, searchCriteria){
+                    var retVal = undefined;
+                    angular.forEach(urlList, function(url){
+                        if(angular.equals(url, searchCriteria)){
+                            retVal = true;
+                            return false; //break out of forEach
+                        }
+                    });
+                    return retVal;
+                }
             }
         }
     },
@@ -145,8 +167,51 @@
         return {}
     };
 
+    var wcOverlayConfig = function(){
+
+        //default config
+        var config = {
+            delay: 500,
+            exceptUrls: []
+        };
+
+        //set delay
+        this.setDelay = function(delayTime){
+            config.delay = delayTime;
+        };
+
+        //set exception urls
+        this.setExceptionUrls = function(urlList){
+            config.exceptUrls = urlList;
+        }
+
+        this.$get = function(){
+            return {
+                getDelayTime: getDelayTime,
+                getExceptUrls: getExceptUrls,
+                getConfig: getConfig
+            };
+
+            function getDelayTime(){
+                return config.delay;
+            }
+
+            function getExceptUrls(){
+                return config.exceptUrls;
+            }
+
+            function getConfig(){
+                return config;
+            }
+        };
+    }
+
     var wcDirectivesApp = angular.module('wc.Directives', []);
 
+    //provider service to setup overlay configuration in the app.config
+    //this will configure the delay and the APIs which you don't want to show overlay on
+    wcDirectivesApp.provider('wcOverlayConfig', wcOverlayConfig);
+
     //Empty factory to hook into $httpProvider.interceptors
     //Directive will hookup request, response, and responseError interceptors
     wcDirectivesApp.factory('httpInterceptor', httpInterceptor);
@@ -157,6 +222,6 @@
     //Directive that uses the httpInterceptor factory above to monitor XHR calls
     //When a call is made it displays an overlay and a content area 
     //No attempt has been made at this point to test on older browsers
-    wcDirectivesApp.directive('wcOverlay', ['$q', '$timeout', '$window', 'httpInterceptor', wcOverlayDirective]);
+    wcDirectivesApp.directive('wcOverlay', ['$q', '$timeout', '$window', 'httpInterceptor','wcOverlayConfig', wcOverlayDirective]);
 
 }());
diff --git a/index.html b/index.html
@@ -36,13 +36,13 @@
         </div>
     </div>
 
-    <div data-wc-overlay="" data-wc-overlay-delay="100">
+    <div data-wc-overlay="">
         <br /><img src="content/images/spinner.gif" />&nbsp;&nbsp;Loading
     </div>
 
     <script src="scripts/angular.js"></script>
     <script src="scripts/angular-route.js"></script>
-    
+
     <script src="app/app.js"></script>
     <script src="app/controllers/customersController.js"></script>
     <script src="app/services/customersService.js"></script>