Skip to content

Commit 7acde5b

Browse files
author
Null McNull
committed
block-ui-message-class
1 parent 7f8197b commit 7acde5b

File tree

3 files changed

+143
-12
lines changed

3 files changed

+143
-12
lines changed

‎src/angular-block-ui/angular-block-ui.ng.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<div class="block-ui-overlay"></div>
22
<div class="block-ui-message-container" aria-live="assertive" aria-atomic="true">
3-
<div class="block-ui-message">{{ state.message }}</div>
4-
</div>
3+
<div class="block-ui-message" ng-class="$_blockUiMessageClass">{{ state.message }}</div>
4+
</div>

‎src/angular-block-ui/block-ui-directive.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,12 @@ blkUI.directive('blockUi', function(blockUiCompileFn) {
2222

2323
$element.addClass('block-ui');
2424

25+
// Expose the blockUiMessageClass attribute value on the scope
26+
27+
$attrs.$observe('blockUiMessageClass', function(value) {
28+
$scope.$_blockUiMessageClass = value;
29+
});
30+
2531
// Create the blockUI instance
2632
// Prefix underscore to prevent integers:
2733
// https://github.com/McNull/angular-block-ui/pull/8
@@ -89,6 +95,25 @@ blkUI.directive('blockUi', function(blockUiCompileFn) {
8995
// Store a reference to the service instance on the element
9096

9197
$element.data('block-ui', srvInstance);
98+
9299
};
93100

94-
});
101+
});
102+
//.factory('blockUiPostLinkFn', function(blockUIUtils) {
103+
//
104+
// return function($scope, $element, $attrs) {
105+
//
106+
// var $message;
107+
//
108+
// $attrs.$observe('blockUiMessageClass', function(value) {
109+
//
110+
// $message = $message || blockUIUtils.findElement($element, function($e) {
111+
// return $e.hasClass('block-ui-message');
112+
// });
113+
//
114+
// $message.addClass(value);
115+
//
116+
// });
117+
// };
118+
//
119+
//});

‎src/angular-block-ui/block-ui-directive.test.js‎

Lines changed: 115 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
11
describe('block-ui-directive', function() {
22

3-
var $ = angular.element, $attrs = {}, $compile, $scope, blockUI, $timeout, config, configCopy, preLinkFn, compileFn;
3+
var $ = angular.element, $attrs = {
4+
$observe: function(key, cb) {
5+
$scope.$watch(function() {
6+
return $attrs[key];
7+
}, function(value) {
8+
cb(value);
9+
});
10+
11+
}
12+
}, $compile, $scope, blockUI, $timeout, config, configCopy, preLinkFn, postLinkFn, compileFn;
413

514
beforeEach(function() {
615
module('blockUI');
716

8-
inject(function(_blockUI_, _$timeout_, _$rootScope_, _$compile_, blockUIConfig, blockUiPreLinkFn, blockUiCompileFn) {
17+
inject(function(_blockUI_, _$timeout_, _$rootScope_, _$compile_, blockUIConfig, blockUiPreLinkFn, /*blockUiPostLinkFn,*/ blockUiCompileFn) {
918

1019
blockUI = _blockUI_;
1120
$timeout = _$timeout_;
1221
$compile = _$compile_;
1322
$scope = _$rootScope_.$new();
1423
config = blockUIConfig;
1524
preLinkFn = blockUiPreLinkFn;
25+
// postLinkFn = blockUiPostLinkFn;
1626
compileFn = blockUiCompileFn;
1727

1828
});
@@ -85,8 +95,6 @@ describe('block-ui-directive', function() {
8595

8696
var expectedId = '_' + $scope.$id;
8797

88-
var $attrs = {};
89-
9098
var $element = $('<div></div>');
9199

92100
preLinkFn($scope, $element, $attrs);
@@ -158,8 +166,9 @@ describe('block-ui-directive', function() {
158166
expect(instance._refs).toBe(0);
159167

160168
var $element = $('<div></div>');
169+
$attrs.blockUi = instanceName;
161170

162-
preLinkFn($scope, $element, { blockUi: instanceName });
171+
preLinkFn($scope, $element, $attrs);
163172

164173
expect(instance._refs).toBe(1);
165174

@@ -168,8 +177,9 @@ describe('block-ui-directive', function() {
168177
it('should release the instance when the scope is destroyed', function() {
169178

170179
var $element = $('<div></div>');
180+
$attrs.blockUi = instanceName;
171181

172-
preLinkFn($scope, $element, { blockUi: instanceName });
182+
preLinkFn($scope, $element, $attrs);
173183

174184
spyOn(instance, 'release').andCallThrough();
175185
spyOn(blockUI.instances, '_destroy');
@@ -191,7 +201,10 @@ describe('block-ui-directive', function() {
191201
var $element = $('<div></div>');
192202
var pattern = '^\/api\/quote($|\/).*';
193203

194-
preLinkFn($scope, $element, { blockUi: 'myInstance', blockUiPattern: '/' + pattern + '/' });
204+
$attrs.blockUi = 'myInstance';
205+
$attrs.blockUiPattern = '/' + pattern + '/';
206+
207+
preLinkFn($scope, $element, $attrs);
195208

196209
var instance = blockUI.instances.myInstance;
197210

@@ -207,7 +220,9 @@ describe('block-ui-directive', function() {
207220

208221
var blockInstance = blockUI.instances.get('myInstance');
209222
var $element = $('<div></div>');
210-
preLinkFn($scope, $element, { blockUi: 'myInstance' });
223+
$attrs.blockUi = 'myInstance';
224+
225+
preLinkFn($scope, $element, $attrs);
211226

212227
blockInstance.start();
213228
$timeout.flush(); // skip the delay of the block
@@ -222,6 +237,97 @@ describe('block-ui-directive', function() {
222237
});
223238
});
224239

225-
}); // link
240+
describe('block-ui-message-class', function() {
241+
242+
it('should expose the block-ui-message-class attribute value on the scope', function() {
243+
244+
var $element = $('<div></div>');
245+
$attrs.blockUiMessageClass = 'my-class';
246+
247+
preLinkFn($scope, $element, $attrs);
248+
$scope.$digest();
249+
250+
expect($scope.$_blockUiMessageClass).toBe($attrs.blockUiMessageClass);
251+
252+
});
253+
254+
it('should observe the block-ui-message-class attribute value', function() {
255+
256+
var $element = $('<div></div>');
257+
258+
preLinkFn($scope, $element, $attrs);
259+
$scope.$digest();
260+
261+
$attrs.blockUiMessageClass = 'my-class';
262+
$scope.$digest();
263+
264+
expect($scope.$_blockUiMessageClass).toBe($attrs.blockUiMessageClass);
265+
266+
});
267+
268+
});
226269

270+
}); // pre-link
271+
272+
// describe('post-link', function() {
273+
//
274+
// describe('block-ui-message-class', function() {
275+
//
276+
// it('should add css classes to the .block-ui-message element', function() {
277+
//
278+
// // Arrange
279+
//
280+
// // <div block-ui>
281+
// // <div class="block-ui-message"></div>
282+
// // </div>
283+
//
284+
// var messageClass = 'my-message-class';
285+
// var $blockUi = $('<div block-ui></div>');
286+
// var $message = $('<div class="block-ui-message"></div>');
287+
//
288+
// $blockUi.append($message);
289+
//
290+
// $attrs.blockUiMessageClass = messageClass;
291+
//
292+
// // Act
293+
//
294+
// postLinkFn($scope, $blockUi, $attrs);
295+
// $scope.$digest();
296+
//
297+
// // Assert
298+
//
299+
// expect($message.hasClass(messageClass)).toBe(true);
300+
//
301+
// });
302+
//
303+
// it('should add css classes to the correct .block-ui-message element', function() {
304+
//
305+
// // Arrange
306+
//
307+
// // <div block-ui>
308+
// // <div class="block-ui-message"></div>
309+
// // </div>
310+
//
311+
// var messageClass = 'my-message-class';
312+
// var $blockUi = $('<div block-ui></div>');
313+
// var $message = $('<div class="block-ui-message"></div>');
314+
//
315+
// $blockUi.append($message);
316+
//
317+
// $attrs.blockUiMessageClass = messageClass;
318+
//
319+
// // Act
320+
//
321+
// postLinkFn($scope, $blockUi, $attrs);
322+
// $scope.$digest();
323+
//
324+
// // Assert
325+
//
326+
// expect($message.hasClass(messageClass)).toBe(true);
327+
//
328+
// });
329+
// });
330+
//
331+
//
332+
// });
227333
});

0 commit comments

Comments
 (0)