Skip to content

Commit 308a1c8

Browse files
author
Null McNull
committed
initial gulp refactor
1 parent b3dd51c commit 308a1c8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+5096
-0
lines changed

Diff for: .gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.idea/workspace.xml
2+
.idea/tasks.xml
3+
.DS_Store
4+
node_modules/*
5+
bower_components/*
6+
dest/*
7+
!dest/angular-block-ui/*
8+
dest/angular-block-ui/angular-block-ui-templates.js

Diff for: .idea/.name

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: .idea/angular-project-template.iml

+10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: .idea/encodings.xml

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: .idea/inspectionProfiles/Project_Default.xml

+41
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: .idea/inspectionProfiles/profiles_settings.xml

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: .idea/jsLibraryMappings.xml

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: .idea/libraries/angular_project_template_node_modules.xml

+14
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: .idea/misc.xml

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: .idea/modules.xml

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: .idea/runConfigurations/gulpfile_js.xml

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: .idea/scopes/scope_settings.xml

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: .idea/vcs.xml

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: .idea/webResources.xml

+15
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: README.md

+206
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
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

Comments
 (0)