Skip to content

Commit 191651a

Browse files
author
Null McNull
committed
Merge branch 'single-block-ui-element' into animation
Conflicts: dist/angular-block-ui.css.map dist/angular-block-ui.js.map
2 parents 0f1e814 + 538d7d2 commit 191651a

25 files changed

+812
-720
lines changed

‎.idea/runConfigurations/gulpfile_js_test_watch.xml‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md‎

Lines changed: 21 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -77,65 +77,39 @@ The callback function to queue.
7777
Blocking individual elements
7878
============================
7979

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.
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 wrapping them in a `block-ui` element.
8181

82+
#### Manual blocking
8283
```
83-
<div>
84+
<div block-ui="myBlockUI">
8485
<p> ... I'm blockable ... </p>
85-
<div block-ui="myBlockUI"></div>
8686
</div>
8787
```
8888

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.
89+
The `block-ui` directive takes an optional value, which can be used to get an instance of the associated `blockUI` service.
9290

9391
```
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>
92+
// Get the reference to the block service.
93+
var myBlockUI = blockUI.instances.get('myBlockUI');
94+
95+
// Start blocking the element.
96+
myBlockUI.start();
97+
98+
$timeout(function() {
99+
// Stop the block after some async operation.
100+
myBlockUI.stop();
101+
}, 1000);
99102
```
103+
#### Automatic blocking
100104

101-
#### Manual blocking
105+
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.
102106

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-
105107
```
106-
<div>
108+
<!-- Initiated the UI block whenever a request to '/api/quote' is performed -->
109+
<div block-ui block-ui-pattern="/^\/api\/quote($|\/).*/"></div>
107110
<p> ... I'm blockable ... </p>
108-
<div block-ui="myBlockUI"></div>
109111
</div>
110112
```
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.
139113

140114
BlockUI module configuration
141115
============================
@@ -206,13 +180,12 @@ Allows you to specify a filter function to exclude certain ajax requests from bl
206180
});
207181

208182
#### autoInjectBodyBlock
209-
When the module is started it will inject the _main block element_ as a child of the _body element_.
183+
When the module is started it will inject the _main block element_ by adding the `block-ui` directive to the `body` element.
210184

211-
<body>
212-
<div block-ui="main"></div>
185+
<body block-ui="main">
213186
</body>
214187

215-
This behaviour can be disabled if there no need for any _fullscreen_ blocking or if more control over this element is required.
188+
This behaviour can be disabled if there no need for any _fullscreen_ blocking or if there's more control required.
216189

217190
blockUIConfigProvider.autoInjectBodyBlock(false); // Disable auto body block
218191

‎dist/README.md‎

Lines changed: 21 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -77,65 +77,39 @@ The callback function to queue.
7777
Blocking individual elements
7878
============================
7979

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.
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 wrapping them in a `block-ui` element.
8181

82+
#### Manual blocking
8283
```
83-
<div>
84+
<div block-ui="myBlockUI">
8485
<p> ... I'm blockable ... </p>
85-
<div block-ui="myBlockUI"></div>
8686
</div>
8787
```
8888

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.
89+
The `block-ui` directive takes an optional value, which can be used to get an instance of the associated `blockUI` service.
9290

9391
```
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>
92+
// Get the reference to the block service.
93+
var myBlockUI = blockUI.instances.get('myBlockUI');
94+
95+
// Start blocking the element.
96+
myBlockUI.start();
97+
98+
$timeout(function() {
99+
// Stop the block after some async operation.
100+
myBlockUI.stop();
101+
}, 1000);
99102
```
103+
#### Automatic blocking
100104

101-
#### Manual blocking
105+
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.
102106

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-
105107
```
106-
<div>
108+
<!-- Initiated the UI block whenever a request to '/api/quote' is performed -->
109+
<div block-ui block-ui-pattern="/^\/api\/quote($|\/).*/"></div>
107110
<p> ... I'm blockable ... </p>
108-
<div block-ui="myBlockUI"></div>
109111
</div>
110112
```
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.
139113

140114
BlockUI module configuration
141115
============================
@@ -206,13 +180,12 @@ Allows you to specify a filter function to exclude certain ajax requests from bl
206180
});
207181

208182
#### autoInjectBodyBlock
209-
When the module is started it will inject the _main block element_ as a child of the _body element_.
183+
When the module is started it will inject the _main block element_ by adding the `block-ui` directive to the `body` element.
210184

211-
<body>
212-
<div block-ui="main"></div>
185+
<body block-ui="main">
213186
</body>
214187

215-
This behaviour can be disabled if there no need for any _fullscreen_ blocking or if more control over this element is required.
188+
This behaviour can be disabled if there no need for any _fullscreen_ blocking or if there's more control required.
216189

217190
blockUIConfigProvider.autoInjectBodyBlock(false); // Disable auto body block
218191

‎dist/angular-block-ui.css‎

Lines changed: 53 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/angular-block-ui.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)