FIX: Location change

Author: Null McNull

package/angular-block-ui/README.md

@@ -0,0 +1,116 @@
+angular-block-ui
+============
+A simple AngularJS module that allows you to block user interaction on AJAX requests. Blocking is done automatically for each http request and/or manually via an injectable service.
+
+#### Dependencies
+Besides AngularJS (~1.2.4), none.  
+
+#### Usage
+By default the module will block the user interface on each pending request made from the browser. This behavior can be modified in the configuration.
+ 
+It's also possible to do the blocking manually. The blockUI module exposes a service by the same name. Access to the service is gained by injecting it into your controller or directive:
+
+    angular.module('myApp').controller('MyController', function($scope, blockUI) {
+      // A function called from user interface, which performs an async operation.
+      $scope.onSave = function(item) {
+    
+        // Block the user interface
+        blockUI.start();
+
+        // Perform the async operation    
+        item.$save(function() {
+      
+          // Unblock the user interface
+          blockUI.stop();
+          
+        });
+      };
+    });
+
+BlockUI service methods
+=======================
+
+#### start
+The start method will start the user interface block. Because multiple user interface elements can request a user interface block at the same time, the service keeps track of the number of start calls. Each call to start() will increase the count and every call to stop() will decrease the value. Whenever the count reaches 0 the block will end.
+
+*Note: By default the block is immediately active after calling this method, but to prevent trashing the user interface everytime a button is pressed, the block is visible after a short delay. This behaviour can be modified in the configuration.*
+
+**Arguments:**
+
+* **message** (string)
+Indicates the message to be shown in the overlay. If none is provided, the default message from the configuration is used.
+
+#### stop
+This will decrease the block count. The block will end if the count is 0.
+
+#### reset
+The reset will force a unblock by setting the block count to 0.
+
+#### message
+Allows the message shown in the overlay to be updated while to block is active.
+
+BlockUI overlay template
+========================
+
+The html and styling of the builtin template is kept barebone. It consist of two divs (overlay and message):
+
+    <div ng-show="blockCount > 0" class="block-ui-overlay" ng-class="{ 'block-ui-visible': blocking }"></div>
+    <div ng-show="blocking" class="block-ui-message">{{ message }}</div>
+
+A custom template can be specified in the module configuration.
+
+BlockUI module configuration
+============================
+
+The configuration of the BlockUI module can be modified via the **blockUIConfigProvider** during the config phase of your Angular application:
+
+    angular.module('myApp').config(function(blockUIConfigProvider) {
+      
+      // Change the default overlay message
+      blockUIConfigProvider.message('Please stop clicking!');
+      
+      // Change the default delay to 100ms before the blocking is visible
+      blockUIConfigProvider.delay(100);
+      
+    });
+
+### Methods
+
+#### message
+Changes the default message to be used when no message has been provided to the *start* method of the service. Default value is *'Loading ...'*.
+
+    // Change the default overlay message
+    blockUIConfigProvider.message('Please wait');
+
+#### delay
+Specifies the amount in milliseconds before the block is visible to the user. By delaying a visible block your application will appear more responsive. The default value is *250*.
+
+    // Change the default delay to 100ms before the blocking is visible ...
+    blockUIConfigProvider.delay(100);
+    
+    // ... or completely remove the delay
+    blockUIConfigProvider.delay(1);
+    
+#### template
+Specifies a custom template to use as the overlay.
+
+    // Provide a custom template to use
+    blockUIConfigProvider.template('<div class="block-ui-overlay">{{ message }}</div>');
+
+#### templateUrl
+Specifies a url to retrieve the template from. *The current release only works with pre-cached templates, which means that this url should be known in the $templateCache service of Angular. If you're using the grunt with html2js or angular-templates, which I highly recommend, you're already set.*
+
+    // Provide the custom template via a url
+    blockUIConfigProvider.templateUrl('my-templates/block-ui-overlay.html');
+
+#### autoBlock
+By default the BlockUI module will start a block whenever the Angular *$http* service has an pending request. If you don't want this behaviour and want to do all the blocking manually you can change this value to *false*.
+
+    // Disable automatically blocking of the user interface
+    blockUIConfigProvider.autoBlock(false);
+
+#### resetOnException
+By default the BlockUI module will reset the block count and hide the overlay whenever an exception has occured. You can set this value to *false* if you don't want this behaviour.
+
+    // Disable clearing block whenever an exception has occured
+    blockUIConfigProvider.resetOnException(false);

package/angular-block-ui/angular-block-ui.css

@@ -15,19 +15,25 @@
   -ms-filter:"alpha(opacity=50)";
   cursor: wait;
 }
-.block-ui-message {
-  font-size: 20px;
-  font-weight: bold;
-  z-index: 10002;
+.block-ui-message-container {
   position: fixed;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 0;
   text-align: center;
-  width: 30%;
-  top: 40%;
-  left: 30%;
-  padding: 20px;
+  z-index: 10002;
+}
+.block-ui-message {
+  cursor: wait;
+  display: inline-block;
+  text-align: left;
   background-color: #333;
+  color: #f5f5f5;
+  padding: 20px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
-  color: #f5f5f5;
+  font-size: 20px;
+  font-weight: bold;
 }

package/angular-block-ui/angular-block-ui.js

@@ -37,29 +37,20 @@
         _config.resetOnException = enabled;
       };
 
-      this.$get = ['$templateCache',
-        function($templateCache) {
-
-          if (!_config.template) {
-            _config.template = $templateCache.get(_config.templateUrl);
-          }
-
-          return _config;
-        }
-      ];
-
+      this.$get = function() {
+        return _config;
+      };
+      
     }); // blockUIConfig
 
     $provide.decorator('$exceptionHandler', ['$delegate', '$injector',
       function($delegate, $injector) {
-        return function(exception, cause) {
+        var blockUI;
 
+        return function(exception, cause) {
           if (_config.resetOnException) {
-            var blockUI = $injector.get('blockUI');
-
-            if (blockUI) {
-              blockUI.reset();
-            }
+            blockUI = blockUI || $injector.get('blockUI');
+            blockUI.reset();
           }
 
           $delegate(exception, cause);
@@ -115,43 +106,44 @@
     $httpProvider.interceptors.push('blockUIHttpInterceptor');
   });
 
+  angular.module('blockUI').directive('blockUi', function(blockUI, blockUIConfig) {
 
-  angular.module('blockUI').factory('blockUI', function(blockUIConfig, $document, $rootScope, $timeout, $compile) {
-
-    var $overlay, $scope, startPromise, stopPromise;
-
-    initScope();
-    initOverlay();
+    return {
+      restrict: 'A',
+      templateUrl: blockUIConfig.template ? undefined : blockUIConfig.templateUrl,
+      template: blockUIConfig.template,
+      link: function($scope, $element, $attrs) {
+        $scope.state = blockUI.state();
 
-    function initScope() {
-      $scope = $rootScope.$new();
-      $scope.blockCount = 0;
+        var i = 0; // Skip the initial location change
 
-      $scope.$on('$locationChangeStart', function(event, newUrl, oldUrl) {
-        if ($scope.blockCount > 0) {
-          event.preventDefault();
-        }
-      });
-    }
+        $scope.$on('$locationChangeStart', function(event) {
+          if (i++ && $scope.state.blockCount > 0) {
+            event.preventDefault();
+          }
+        });
+      }
+    };
 
-    function initOverlay() {
-      var $body = $document.find('body');
-      var $overlay = angular.element(blockUIConfig.template);
+  });
 
-      $compile($overlay)($scope);
+  angular.module('blockUI').factory('blockUI', function(blockUIConfig, $timeout) {
 
-      $body.append($overlay);
-    }
+    var state = { 
+      blockCount: 0, 
+      message: blockUIConfig.message,
+      blocking: false
+    }, startPromise, stopPromise;
 
     function start(message) {
-      $scope.message = message || blockUIConfig.message;
+      state.message = message || blockUIConfig.message;
 
-      $scope.blockCount++;
+      state.blockCount++;
 
       if (!startPromise) {
         startPromise = $timeout(function() {
           startPromise = null;
-          $scope.blocking = true;
+          state.blocking = true;
         }, blockUIConfig.delay);
       }
     }
@@ -164,41 +156,46 @@
     }
 
     function stop() {
-      $scope.blockCount = Math.max(0, --$scope.blockCount);
+      state.blockCount = Math.max(0, --state.blockCount);
 
-      if ($scope.blockCount === 0) {
+      if (state.blockCount === 0) {
         cancelStartTimeout();
-        $scope.blocking = false;
+        state.blocking = false;
       }
     }
 
     function message(message) {
-      $scope.message = message;
+      state.message = message;
     }
 
     function reset() {
       cancelStartTimeout();
-      $scope.blockCount = 0;
-      $scope.blocking = false;
+      state.blockCount = 0;
+      state.blocking = false;
     }
 
     return {
+      state: function() { return state; },
       start: start,
       stop: stop,
       message: message,
       reset: reset
     };
   });
-
-  // By forcing the injection of the blockUI service we ensure that it's initialized at application start.
-  angular.module('blockUI').run(function(blockUI) {});
+  
+  angular.module('blockUI').run(function($document) {
+    $document.find('body').append('<div block-ui></div>');
+  });
 
 })(angular);
 
 angular.module('templates-angularBlockUI', ['angular-block-ui/angular-block-ui.tmpl.html']);
 
 angular.module("angular-block-ui/angular-block-ui.tmpl.html", []).run(["$templateCache", function($templateCache) {
   $templateCache.put("angular-block-ui/angular-block-ui.tmpl.html",
-    "<div ng-show=\"blockCount > 0\" class=\"block-ui-overlay\" ng-class=\"{ 'block-ui-visible': blocking }\"></div>\n" +
-    "<div ng-show=\"blocking\" class=\"block-ui-message\">{{ message }}</div>");
+    "<div ng-show=\"state.blockCount > 0\" class=\"block-ui-overlay\" ng-class=\"{ 'block-ui-visible': state.blocking }\"></div>\n" +
+    "<div ng-show=\"state.blocking\" class=\"block-ui-message-container\">\n" +
+    "  <div class=\"block-ui-message\">{{ state.message }}</div>  \n" +
+    "</div>\n" +
+    "");
 }]);

package/angular-block-ui/angular-block-ui.min.css

@@ -15,19 +15,25 @@
   -ms-filter:"alpha(opacity=50)";
   cursor: wait;
 }
-.block-ui-message {
-  font-size: 20px;
-  font-weight: bold;
-  z-index: 10002;
+.block-ui-message-container {
   position: fixed;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 0;
   text-align: center;
-  width: 30%;
-  top: 40%;
-  left: 30%;
-  padding: 20px;
+  z-index: 10002;
+}
+.block-ui-message {
+  cursor: wait;
+  display: inline-block;
+  text-align: left;
   background-color: #333;
+  color: #f5f5f5;
+  padding: 20px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
-  color: #f5f5f5;
+  font-size: 20px;
+  font-weight: bold;
 }