|
| 1 | +angular-block-ui |
| 2 | +============ |
| 3 | +An 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. |
| 4 | + |
| 5 | +#### Dependencies |
| 6 | +Besides AngularJS (~1.2.4), none. |
| 7 | + |
| 8 | +#### Demos |
| 9 | +Live demos can be found on [Plunker](http://plnkr.co/edit/XWRfHX?p=preview) or by executing the website included in the [GitHub project](https://github.com/McNull/angular-block-ui) . |
| 10 | + |
| 11 | +#### Installation |
| 12 | +Either copy the contents of the `package` directory of the [Github](https://github.com/McNull/angular-block-ui) project or install with _bower_ from the command line (**recommended**): |
| 13 | + |
| 14 | + bower install angular-block-ui |
| 15 | + |
| 16 | +Include both the JS and CSS file in your html: |
| 17 | + |
| 18 | + <link rel="stylesheet" href="path-to-block-ui/angular-block-ui.min.css"/> |
| 19 | + <!-- After AngularJS --> |
| 20 | + <script src="path-to-block-ui/angular-block-ui.min.js"></script> |
| 21 | +Create a dependency on `blockUI` in your main Angular module: |
| 22 | + |
| 23 | + angular.module('myApp', ['blockUI']) |
| 24 | + |
| 25 | +#### Usage |
| 26 | +By default the module will block the user interface on each pending request made from the browser. This behaviour can be modified in the configuration. |
| 27 | + |
| 28 | +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: |
| 29 | + |
| 30 | + angular.module('myApp').controller('MyController', function($scope, blockUI) { |
| 31 | + // A function called from user interface, which performs an async operation. |
| 32 | + $scope.onSave = function(item) { |
| 33 | + |
| 34 | + // Block the user interface |
| 35 | + blockUI.start(); |
| 36 | + |
| 37 | + // Perform the async operation |
| 38 | + item.$save(function() { |
| 39 | + |
| 40 | + // Unblock the user interface |
| 41 | + blockUI.stop(); |
| 42 | + |
| 43 | + }); |
| 44 | + }; |
| 45 | + }); |
| 46 | + |
| 47 | +BlockUI service methods |
| 48 | +======================= |
| 49 | + |
| 50 | +#### start |
| 51 | +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. |
| 52 | + |
| 53 | +*Note: By default the block is immediately active after calling this method, but to prevent trashing the user interface each time a button is pressed, the block is visible after a short delay. This behaviour can be modified in the configuration.* |
| 54 | + |
| 55 | +**Arguments:** |
| 56 | + |
| 57 | +* **message** (string) |
| 58 | +Indicates the message to be shown in the overlay. If none is provided, the default message from the configuration is used. |
| 59 | + |
| 60 | +#### stop |
| 61 | +This will decrease the block count. The block will end if the count is 0. |
| 62 | + |
| 63 | +#### reset |
| 64 | +The reset will force an unblock by setting the block count to 0. |
| 65 | + |
| 66 | +#### message |
| 67 | +Allows the message shown in the overlay to be updated while to block is active. |
| 68 | + |
| 69 | +#### done |
| 70 | +Queues a callback function to be called when the block has finished. This can be useful whenever you wish to redirect the user to a different location while there are still pending AJAX requests. |
| 71 | + |
| 72 | +**Arguments:** |
| 73 | + |
| 74 | +* **callback** (function) |
| 75 | +The callback function to queue. |
| 76 | + |
| 77 | +Blocking individual elements |
| 78 | +============================ |
| 79 | + |
| 80 | +Instead of blocking the whole page, it's also possible to block individual elements. Just like the main `blockUI` service, this can be done either manually or automatically. Elements can be made _block ui enabled_ by adding a sibling `block-ui` directive element. |
| 81 | + |
| 82 | +``` |
| 83 | +<div> |
| 84 | + <p> ... I'm blockable ... </p> |
| 85 | + <div block-ui="myBlockUI"></div> |
| 86 | +</div> |
| 87 | +``` |
| 88 | + |
| 89 | +#### Automatic blocking |
| 90 | + |
| 91 | +Automatic blocking elements can be done by providing the `block-ui` directive a `block-ui-pattern` attribute. This attribute should contain a valid regular expression, which indicates the requests that are associated with the specific element. |
| 92 | + |
| 93 | +``` |
| 94 | +<div> |
| 95 | + <p> ... I'm blockable ... </p> |
| 96 | + <!-- Initiated the block whenever a request to '/api/quote' is performed --> |
| 97 | + <div block-ui block-ui-pattern="/^\/api\/quote($|\/).*/"></div> |
| 98 | +</div> |
| 99 | +``` |
| 100 | + |
| 101 | +#### Manual blocking |
| 102 | + |
| 103 | +By providing the `block-ui` directive a name the controller can request the instance via the injected `blockUI` service. All functions exposed by the main `blockUI` service are available on the individual instances. |
| 104 | + |
| 105 | +``` |
| 106 | +<div> |
| 107 | + <p> ... I'm blockable ... </p> |
| 108 | + <div block-ui="myBlockUI"></div> |
| 109 | +</div> |
| 110 | +``` |
| 111 | +``` |
| 112 | +angular.module('myApp').controller('MyController', function($scope, $http, blockUI) { |
| 113 | +
|
| 114 | + // Grab the reference to the instance defined in the html markup |
| 115 | + var myBlockUI = blockUI.instances.get('myBlockUI'); |
| 116 | + |
| 117 | + $scope.doSomethingAsync = function() { |
| 118 | + |
| 119 | + myBlockUI.start(); |
| 120 | + |
| 121 | + $timeout(function() { |
| 122 | + myBlockUI.stop(); |
| 123 | + }, 1000); |
| 124 | + |
| 125 | + }; |
| 126 | +}); |
| 127 | +``` |
| 128 | + |
| 129 | + |
| 130 | +BlockUI overlay template |
| 131 | +======================== |
| 132 | + |
| 133 | +The html and styling of the builtin template is kept bare bone. It consist of two divs (overlay and message): |
| 134 | + |
| 135 | + <div ng-show="blockCount > 0" class="block-ui-overlay" ng-class="{ 'block-ui-visible': blocking }"></div> |
| 136 | + <div ng-show="blocking" class="block-ui-message">{{ message }}</div> |
| 137 | + |
| 138 | +A custom template can be specified in the module configuration. |
| 139 | + |
| 140 | +BlockUI module configuration |
| 141 | +============================ |
| 142 | + |
| 143 | +The configuration of the BlockUI module can be modified via the **blockUIConfigProvider** during the config phase of your Angular application: |
| 144 | + |
| 145 | + angular.module('myApp').config(function(blockUIConfigProvider) { |
| 146 | + |
| 147 | + // Change the default overlay message |
| 148 | + blockUIConfigProvider.message('Please stop clicking!'); |
| 149 | + |
| 150 | + // Change the default delay to 100ms before the blocking is visible |
| 151 | + blockUIConfigProvider.delay(100); |
| 152 | + |
| 153 | + }); |
| 154 | + |
| 155 | +### Methods |
| 156 | + |
| 157 | +#### message |
| 158 | +Changes the default message to be used when no message has been provided to the *start* method of the service. Default value is *'Loading ...'*. |
| 159 | + |
| 160 | + // Change the default overlay message |
| 161 | + blockUIConfigProvider.message('Please wait'); |
| 162 | + |
| 163 | +#### delay |
| 164 | +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*. |
| 165 | + |
| 166 | + // Change the default delay to 100ms before the blocking is visible ... |
| 167 | + blockUIConfigProvider.delay(100); |
| 168 | + |
| 169 | + // ... or completely remove the delay |
| 170 | + blockUIConfigProvider.delay(1); |
| 171 | + |
| 172 | +#### template |
| 173 | +Specifies a custom template to use as the overlay. |
| 174 | + |
| 175 | + // Provide a custom template to use |
| 176 | + blockUIConfigProvider.template('<div class="block-ui-overlay">{{ message }}</div>'); |
| 177 | + |
| 178 | +#### templateUrl |
| 179 | +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.* |
| 180 | + |
| 181 | + // Provide the custom template via a url |
| 182 | + blockUIConfigProvider.templateUrl('my-templates/block-ui-overlay.html'); |
| 183 | + |
| 184 | +#### autoBlock |
| 185 | +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*. |
| 186 | + |
| 187 | + // Disable automatically blocking of the user interface |
| 188 | + blockUIConfigProvider.autoBlock(false); |
| 189 | + |
| 190 | +#### resetOnException |
| 191 | +By default the BlockUI module will reset the block count and hide the overlay whenever an exception has occurred. You can set this value to *false* if you don't want this behaviour. |
| 192 | + |
| 193 | + // Disable clearing block whenever an exception has occurred |
| 194 | + blockUIConfigProvider.resetOnException(false); |
| 195 | + |
| 196 | +#### requestFilter |
| 197 | +Allows you to specify a filter function to exclude certain ajax requests from blocking the user interface. The function is passed the [Angular request config object](http://docs.angularjs.org/api/ng/service/$http). The blockUI service will ignore requests when the function returns `false`. |
| 198 | + |
| 199 | + // Tell the blockUI service to ignore certain requests |
| 200 | + blockUIConfigProvider.requestFilter(function(config) { |
| 201 | + |
| 202 | + // If the request starts with '/api/quote' ... |
| 203 | + if(config.url.match(/^\/api\/quote($|\/).*/)) { |
| 204 | + return false; // ... don't block it. |
| 205 | + } |
| 206 | + }); |
0 commit comments