Skip to content

Commit a734987

Browse files
author
Null McNull
committed
block-ui new scope & hide child blocking scopes
1 parent 7acde5b commit a734987

12 files changed

+165
-308
lines changed

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,15 @@ body.block-ui > .block-ui-container {
1818
cursor: wait;
1919
}
2020

21-
.block-ui-container.block-ui-active {
21+
.block-ui-active > .block-ui-container {
2222
height: 100%;
2323
}
2424

25-
.block-ui-container.block-ui-visible {
25+
.block-ui-active .block-ui-active > .block-ui-container {
26+
height: 0;
27+
}
28+
29+
.block-ui-visible > .block-ui-container {
2630
opacity: 1;
2731
filter: alpha(opacity=100);
2832
}

‎src/angular-block-ui/block-ui-animations.css‎

Lines changed: 3 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,14 @@
11

22
/* - - - - - - 8-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
33

4-
.block-ui-fade > .block-ui-container {
5-
transition: height 0s ease 200ms, opacity 200ms ease;
4+
.block-ui-anim-fade > .block-ui-container {
5+
transition: height 0s linear 200ms, opacity 200ms ease 0s;
66
}
77

8-
.block-ui-fade > .block-ui-container.block-ui-visible {
8+
.block-ui-anim-fade > .block-ui-container.block-ui-visible {
99
/*this resets the initial delay of the height */
1010
/*and sizes the block to full height at once at the start of the block. */
1111
transition-delay: 0s;
12-
/*transition: height 0s ease 0s;*/
13-
}
14-
15-
/* - - - - - - 8-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
16-
17-
@keyframes block-ui-bounce {
18-
0%, 4%, 10%, 16%, 20% {
19-
transform: translate3d(0,0,0);
20-
}
21-
22-
8% {
23-
transform: translate3d(0, -30px, 0);
24-
}
25-
26-
14% {
27-
transform: translate3d(0, -15px, 0);
28-
}
29-
30-
18% {
31-
transform: translate3d(0,-4px,0);
32-
}
33-
34-
21%, 100% {}
35-
}
36-
37-
.block-ui-bounce > .block-ui-container.block-ui-visible .block-ui-message {
38-
animation: block-ui-bounce 4s linear 0s infinite;
39-
}
40-
41-
/* - - - - - - 8-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
42-
43-
@keyframes block-ui-flash {
44-
0%, 10%, 20% {
45-
opacity: 1;
46-
}
47-
48-
4%, 15% {
49-
opacity: 0;
50-
}
51-
52-
21%, 100% {}
53-
}
54-
55-
.block-ui-flash > .block-ui-container.block-ui-visible .block-ui-message {
56-
animation: block-ui-flash 3s linear 0s infinite;
57-
}
58-
59-
/* - - - - - - 8-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
60-
61-
@keyframes block-ui-pulse {
62-
0% {
63-
transform: scale3d(1, 1, 1);
64-
}
65-
66-
50% {
67-
transform: scale3d(1.05, 1.05, 1.05);
68-
}
69-
70-
100% {
71-
transform: scale3d(1, 1, 1);
72-
}
73-
}
74-
75-
.block-ui-pulse > .block-ui-container.block-ui-visible .block-ui-message {
76-
animation: block-ui-pulse 1s ease 0s infinite;
77-
}
78-
79-
/* - - - - - - 8-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
80-
81-
@keyframes block-ui-bounce-in {
82-
0%, 20%, 40%, 60%, 80%, 100% {
83-
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
84-
}
85-
86-
0% {
87-
opacity: 0;
88-
transform: scale3d(.3, .3, .3);
89-
}
90-
91-
20% {
92-
transform: scale3d(1.1, 1.1, 1.1);
93-
}
94-
95-
40% {
96-
transform: scale3d(.9, .9, .9);
97-
}
98-
99-
60% {
100-
opacity: 1;
101-
transform: scale3d(1.03, 1.03, 1.03);
102-
}
103-
104-
80% {
105-
transform: scale3d(.97, .97, .97);
106-
}
107-
108-
100% {
109-
opacity: 1;
110-
transform: scale3d(1, 1, 1);
111-
}
112-
}
113-
114-
.block-ui-bounce-in > .block-ui-container.block-ui-visible .block-ui-message {
115-
animation: block-ui-bounce-in 1s ease 0s infinite;
11612
}
11713

11814
/* - - - - - - 8-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ blkUI.directive('blockUiContainer', function (blockUIConfig, blockUiContainerLin
2121

2222
$scope.state = srvInstance.state();
2323

24-
$scope.$watch('state.blocking', function(value) {
25-
$element.toggleClass('block-ui-visible', !!value);
26-
});
27-
28-
$scope.$watch('state.blockCount > 0', function(value) {
29-
$element.toggleClass('block-ui-active', !!value);
30-
});
24+
// $scope.$watch('state.blocking', function(value) {
25+
// $element.toggleClass('block-ui-visible', !!value);
26+
// });
27+
//
28+
// $scope.$watch('state.blockCount > 0', function(value) {
29+
// $element.toggleClass('block-ui-active', !!value);
30+
// });
3131
};
3232
});

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

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -88,38 +88,38 @@ describe('block-ui-container-directive', function() {
8888

8989
});
9090

91-
it('should set the block-ui-visible class when in blocking state', function() {
92-
93-
linkFn($scope, $element, $attrs);
94-
expect($element.hasClass('block-ui-visible')).toBe(false);
95-
96-
blockInstance.start();
97-
$timeout.flush();
98-
$scope.$digest();
99-
100-
expect($element.hasClass('block-ui-visible')).toBe(true);
101-
102-
blockInstance.stop();
103-
$scope.$digest();
104-
105-
expect($element.hasClass('block-ui-visible')).toBe(false);
106-
});
107-
108-
it('should set the block-ui-active class when blockcount > 0', function() {
109-
110-
linkFn($scope, $element, $attrs);
111-
expect($element.hasClass('block-ui-active')).toBe(false);
112-
113-
blockInstance.start();
114-
$scope.$digest();
115-
116-
expect($element.hasClass('block-ui-active')).toBe(true);
117-
118-
blockInstance.stop();
119-
$scope.$digest();
120-
121-
expect($element.hasClass('block-ui-active')).toBe(false);
122-
});
91+
// it('should set the block-ui-visible class when in blocking state', function() {
92+
//
93+
// linkFn($scope, $element, $attrs);
94+
// expect($element.hasClass('block-ui-visible')).toBe(false);
95+
//
96+
// blockInstance.start();
97+
// $timeout.flush();
98+
// $scope.$digest();
99+
//
100+
// expect($element.hasClass('block-ui-visible')).toBe(true);
101+
//
102+
// blockInstance.stop();
103+
// $scope.$digest();
104+
//
105+
// expect($element.hasClass('block-ui-visible')).toBe(false);
106+
// });
107+
//
108+
// it('should set the block-ui-active class when blockcount > 0', function() {
109+
//
110+
// linkFn($scope, $element, $attrs);
111+
// expect($element.hasClass('block-ui-active')).toBe(false);
112+
//
113+
// blockInstance.start();
114+
// $scope.$digest();
115+
//
116+
// expect($element.hasClass('block-ui-active')).toBe(true);
117+
//
118+
// blockInstance.stop();
119+
// $scope.$digest();
120+
//
121+
// expect($element.hasClass('block-ui-active')).toBe(false);
122+
// });
123123

124124
});
125125
});

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

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
blkUI.directive('blockUi', function(blockUiCompileFn) {
22

33
return {
4+
scope: true,
45
restrict: 'A',
56
compile: blockUiCompileFn
67
};
@@ -16,11 +17,16 @@ blkUI.directive('blockUi', function(blockUiCompileFn) {
1617

1718
};
1819

19-
}).factory('blockUiPreLinkFn', function(blockUI, blockUIUtils) {
20+
}).factory('blockUiPreLinkFn', function(blockUI, blockUIUtils, blockUIConfig) {
2021

2122
return function($scope, $element, $attrs) {
2223

23-
$element.addClass('block-ui');
24+
// If the element does not have the class "block-ui" set, we set the
25+
// default css classes from the config.
26+
27+
if (!$element.hasClass('block-ui')) {
28+
$element.addClass(blockUIConfig.cssClass);
29+
}
2430

2531
// Expose the blockUiMessageClass attribute value on the scope
2632

@@ -75,12 +81,18 @@ blkUI.directive('blockUi', function(blockUiCompileFn) {
7581

7682
srvInstance.addRef();
7783

78-
// Set the aria-busy attribute if needed
84+
// Expose the state on the scope
85+
86+
$scope.$_blockUiState = srvInstance.state();
87+
88+
$scope.$watch('$_blockUiState.blocking', function (value) {
89+
// Set the aria-busy attribute if needed
90+
$element.attr('aria-busy', !!value);
91+
$element.toggleClass('block-ui-visible', !!value);
92+
});
7993

80-
$scope.$watch(function() {
81-
return srvInstance.state().blocking;
82-
}, function (value) {
83-
$element.attr('aria-busy', value);
94+
$scope.$watch('$_blockUiState.blockCount > 0', function(value) {
95+
$element.toggleClass('block-ui-active', !!value);
8496
});
8597

8698
// If a pattern is provided assign it to the state

0 commit comments

Comments
 (0)