Skip to content

Commit e9ea6ba

Browse files
author
Null McNull
committed
documentation & block-ui-id refactor
1 parent 61f2305 commit e9ea6ba

30 files changed

+914
-344
lines changed

‎README.md‎

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
angular-block-ui
22
============
3-
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.
3+
An elegant but advanced 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.
44

55
#### Dependencies
66
Besides AngularJS (~1.2.4), none.
77

8+
#### Demos
9+
Live demos can be found on plunker or by executing the website included in the [GitHub project](https://github.com/McNull/angular-block-ui) .
10+
811
#### Installation
912
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**):
1013

@@ -58,7 +61,7 @@ Indicates the message to be shown in the overlay. If none is provided, the defau
5861
This will decrease the block count. The block will end if the count is 0.
5962

6063
#### reset
61-
The reset will force a unblock by setting the block count to 0.
64+
The reset will force an unblock by setting the block count to 0.
6265

6366
#### message
6467
Allows the message shown in the overlay to be updated while to block is active.
@@ -71,6 +74,59 @@ Queues a callback function to be called when the block has finished. This can be
7174
* **callback** (function)
7275
The callback function to queue.
7376

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+
74130
BlockUI overlay template
75131
========================
76132

‎bower.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-block-ui",
3-
"version": "0.0.4",
3+
"version": "0.0.5",
44
"keywords": [
55
"angular",
66
"angularjs",
@@ -11,7 +11,7 @@
1111
"authors": [
1212
"Null McNull <[email protected]>"
1313
],
14-
"description": "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.",
14+
"description": "An elegant but advanced 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.",
1515
"license": "MIT",
1616
"main": "package/**/*",
1717
"ignore": [

‎build-package.sh‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
#!/bin/bash
22

3+
set -e
34
rm -r package
45
grunt package:angularBlockUI
56
grunt package:angularBlockUI --target=release

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "angular-block-ui",
3-
"version": "0.0.4",
4-
"description": "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.",
3+
"version": "0.0.5",
4+
"description": "An elegant but advanced 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.",
55
"main": "grunt",
66
"scripts": {
77
"test": "grunt test"

‎package/angular-block-ui/README.md‎

Lines changed: 59 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
angular-block-ui
22
============
3-
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.
3+
An elegant but advanced 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.
44

55
#### Dependencies
66
Besides AngularJS (~1.2.4), none.
77

8+
#### Demos
9+
Live demos can be found on plunker or by executing the website included in the [GitHub project](https://github.com/McNull/angular-block-ui) .
10+
811
#### Installation
912
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**):
1013

@@ -14,8 +17,7 @@ Include both the JS and CSS file in your html:
1417

1518
<link rel="stylesheet" href="path-to-block-ui/angular-block-ui.min.css"/>
1619
<!-- After AngularJS -->
17-
<script src="path-to-block-ui/angular-block-ui.min.js"></script>
18-
20+
<script src="path-to-block-ui/angular-block-ui.min.js"></script>
1921
Create a dependency on `blockUI` in your main Angular module:
2022

2123
angular.module('myApp', ['blockUI'])
@@ -59,7 +61,7 @@ Indicates the message to be shown in the overlay. If none is provided, the defau
5961
This will decrease the block count. The block will end if the count is 0.
6062

6163
#### reset
62-
The reset will force a unblock by setting the block count to 0.
64+
The reset will force an unblock by setting the block count to 0.
6365

6466
#### message
6567
Allows the message shown in the overlay to be updated while to block is active.
@@ -72,6 +74,59 @@ Queues a callback function to be called when the block has finished. This can be
7274
* **callback** (function)
7375
The callback function to queue.
7476

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+
75130
BlockUI overlay template
76131
========================
77132

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,34 @@
77
height: 100%;
88
top: 0;
99
left: 0;
10+
position: absolute;
11+
}
12+
13+
body > .block-ui > .block-ui-overlay {
1014
position: fixed;
1115
}
16+
1217
.block-ui-overlay.block-ui-visible {
1318
background-color: #fff;
1419
opacity: 0.5;
1520
-ms-filter:"alpha(opacity=50)";
1621
cursor: wait;
1722
}
23+
1824
.block-ui-message-container {
19-
position: fixed;
20-
top: 50%;
25+
position: absolute;
26+
top: 40%;
2127
left: 0;
2228
right: 0;
2329
height: 0;
2430
text-align: center;
2531
z-index: 10002;
2632
}
33+
34+
body > .block-ui > .block-ui-message-container {
35+
position: fixed;
36+
}
37+
2738
.block-ui-message {
2839
cursor: wait;
2940
display: inline-block;
@@ -36,4 +47,4 @@
3647
border-radius: 4px;
3748
font-size: 20px;
3849
font-weight: bold;
39-
}
50+
}

0 commit comments

Comments
 (0)