Skip to content

Commit c7d08a9

Browse files
author
Null McNull
committed
animation helper
1 parent 6a4582b commit c7d08a9

File tree

7 files changed

+229
-97
lines changed

7 files changed

+229
-97
lines changed

‎src/app/app.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,15 @@ angular.module('myApp', [
3636

3737
delayConfig.excludes.push(/.*\.md/i);
3838

39-
delayConfig.enabled = true;
39+
delayConfig.enabled = false;
4040
delayConfig.timeout.min = 1000;
4141
delayConfig.timeout.max = 2000;
4242

43+
// blockUIConfigProvider.animation(null);
44+
4345
// blockUIConfigProvider.delay(1000);
4446

45-
// blockUIConfigProvider.template('<pre><code>{{ state | json }}</code></pre>');
47+
// blockUIConfigProvider.template('<pre><code>{{ state | json }}</code></pre>');
4648

4749
// blockUIConfigProvider.autoInjectBodyBlock(false);
4850

‎src/app/examples/animation-tester.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.my-animation-tester {
2+
position: relative;
3+
padding: 45px 15px 15px;
4+
background-color: #fff;
5+
border-color: #ddd;
6+
border-style: solid;
7+
border-width: 1px;
8+
}
9+
10+
.my-animation-tester:after {
11+
content:"DUMMY";
12+
position: absolute;
13+
top: 15px;
14+
left: 15px;
15+
font-size: 12px;
16+
font-weight: 700;
17+
color: #bbb;
18+
text-transform: uppercase;
19+
letter-spacing: 1px;
20+
}
21+
22+
.my-animation-tester-state {
23+
border-top: none;
24+
25+
}
26+
.my-animation-tester-state:after {
27+
content:"STATE";
28+
}

‎src/app/examples/animation-tester.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
angular.module('myApp').directive('myAnimationTester', function(blockUI, $compile, $timeout) {
2+
3+
var $ = angular.element;
4+
5+
function locateElementWithClass($element, className) {
6+
7+
var ret;
8+
9+
if($element.hasClass(className)) {
10+
ret = $element;
11+
} else {
12+
var children = $element.children();
13+
14+
var i = children.length;
15+
16+
while(i-- && !ret) {
17+
var $c = $(children[i]);
18+
ret = locateElementWithClass($c, className);
19+
}
20+
}
21+
22+
return ret;
23+
}
24+
25+
return {
26+
restrict: 'AE',
27+
templateUrl: 'app/examples/animation-tester.ng.html',
28+
29+
link: function($scope, $element, $attrs) {
30+
31+
$scope.animation = $attrs.myAnimationTester;
32+
var instanceName = 'anim-test-' + $attrs.myAnimationTester;
33+
var instance = blockUI.instances.get(instanceName);
34+
var state = instance.state();
35+
36+
var $blockUI = locateElementWithClass($element, 'block-ui-target');
37+
$blockUI.attr('block-ui', instanceName);
38+
$blockUI.attr('block-ui-animation', $attrs.myAnimationTester);
39+
40+
$compile($blockUI)($scope);
41+
42+
$scope.fakeSubmit = function() {
43+
instance.start(state.message);
44+
45+
$timeout(function() {
46+
instance.stop();
47+
}, 1000);
48+
49+
};
50+
51+
$scope.activeBlock = function(value) {
52+
if(value) {
53+
state.blockCount += 1;
54+
} else {
55+
state.blockCount -= 1;
56+
}
57+
};
58+
59+
$scope.state = state;
60+
61+
}
62+
};
63+
64+
});

‎src/app/examples/animation-tester.ng.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<h2>block-ui-animation: {{ animation }}</h2>
2+
<div class="my-animation-tester">
3+
<div class="block-ui-target">
4+
5+
<form class="form-horizontal" ng-submit="fakeSubmit()">
6+
<div class="form-group">
7+
<label class="col-sm-2 control-label">Textbox</label>
8+
9+
<div class="col-sm-10">
10+
<input type="text" class="form-control" placeholder="Textbox" ng-model="state.message">
11+
</div>
12+
</div>
13+
<div class="form-group">
14+
<div class="col-sm-offset-2 col-sm-10">
15+
<div class="checkbox">
16+
<label>
17+
<input type="checkbox"> Checkbox
18+
</label>
19+
</div>
20+
</div>
21+
</div>
22+
<div class="form-group">
23+
<div class="col-sm-offset-2 col-sm-10">
24+
<button type="submit" class="btn btn-default">Button</button>
25+
</div>
26+
</div>
27+
</form>
28+
29+
</div>
30+
</div>
31+
<div class="my-animation-tester my-animation-tester-state">
32+
<label class="checkbox-inline">
33+
<input type="checkbox" ng-model="input.active" ng-change="activeBlock(input.active)"> Active
34+
</label>
35+
<label class="checkbox-inline" ng-if="input.active">
36+
<input type="checkbox" ng-model="state.blocking"> Visible
37+
</label>
38+
</div>

‎src/app/examples/animations.css‎

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,68 @@
11

22

3-
.my-block-area {
4-
position: relative;
5-
}
3+
/*.my-block-area {*/
4+
/*position: relative;*/
5+
/*}*/
66

7-
.my-block-container {
8-
position: absolute;
9-
z-index: 10000;
10-
top: 0; right: 0; bottom: 0; left: 0;
11-
height: 0;
12-
overflow: hidden;
13-
opacity: 0;
14-
filter: alpha(opacity=00);
15-
cursor: wait;
16-
}
7+
/*.my-block-container {*/
8+
/*position: absolute;*/
9+
/*z-index: 10000;*/
10+
/*top: 0; right: 0; bottom: 0; left: 0;*/
11+
/*height: 0;*/
12+
/*overflow: hidden;*/
13+
/*opacity: 0;*/
14+
/*filter: alpha(opacity=00);*/
15+
/*cursor: wait;*/
16+
/*}*/
1717

18-
.my-block-container.my-block-active {
19-
height: 100%;
20-
}
18+
/*.my-block-container.my-block-active {*/
19+
/*height: 100%;*/
20+
/*}*/
2121

22-
.my-block-container.my-block-visible {
23-
opacity: 1;
24-
filter: alpha(opacity=100);
25-
}
22+
/*.my-block-container.my-block-visible {*/
23+
/*opacity: 1;*/
24+
/*filter: alpha(opacity=100);*/
25+
/*}*/
2626

27-
.my-block-overlay {
28-
width: 100%;
29-
height: 100%;
30-
opacity: 0.5;
31-
filter: alpha(opacity=50);
32-
background-color: white;
33-
}
27+
/*.my-block-overlay {*/
28+
/*width: 100%;*/
29+
/*height: 100%;*/
30+
/*opacity: 0.5;*/
31+
/*filter: alpha(opacity=50);*/
32+
/*background-color: white;*/
33+
/*}*/
3434

35-
.my-block-message-container {
36-
position: absolute;
37-
top: 35%;
38-
left: 0;
39-
right: 0;
40-
height: 0;
41-
text-align: center;
42-
z-index: 10001;
43-
}
35+
/*.my-block-message-container {*/
36+
/*position: absolute;*/
37+
/*top: 35%;*/
38+
/*left: 0;*/
39+
/*right: 0;*/
40+
/*height: 0;*/
41+
/*text-align: center;*/
42+
/*z-index: 10001;*/
43+
/*}*/
4444

45-
.my-block-message {
46-
display: inline-block;
47-
text-align: left;
48-
background-color: #333;
49-
color: #f5f5f5;
50-
padding: 20px;
51-
border-radius: 4px;
52-
font-size: 20px;
53-
font-weight: bold;
54-
filter: alpha(opacity=100);
55-
}
45+
/*.my-block-message {*/
46+
/*display: inline-block;*/
47+
/*text-align: left;*/
48+
/*background-color: #333;*/
49+
/*color: #f5f5f5;*/
50+
/*padding: 20px;*/
51+
/*border-radius: 4px;*/
52+
/*font-size: 20px;*/
53+
/*font-weight: bold;*/
54+
/*filter: alpha(opacity=100);*/
55+
/*}*/
5656

57-
.my-fade-in-out > .my-block-container {
58-
transition: height 0s ease 200ms, opacity 200ms ease;
59-
}
57+
/*.my-fade-in-out > .my-block-container {*/
58+
/*transition: height 0s ease 200ms, opacity 200ms ease;*/
59+
/*}*/
6060

61-
.my-fade-in-out > .my-block-container.my-block-visible {
61+
/*.my-fade-in-out > .my-block-container.my-block-visible {*/
6262
/*this resets the initial delay of the height */
6363
/*and sizes the block to full height at once at the start of the block. */
64-
transition-delay: 0s;
65-
}
64+
/*transition-delay: 0s;*/
65+
/*}*/
6666

6767
/*.block-ui-fade-in .block-ui-container.block-ui-visible {*/
6868
/*opacity: 1.0;*/

‎src/app/examples/animations.html‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
<div ng-controller="AnimationController">
22

3+
<div my-animation-tester="fade"/>
34

5+
<!--<div class="my-block-area my-fade-in-out">-->
6+
<!--<div my-demo-table></div>-->
47

5-
<div class="my-block-area my-fade-in-out">
6-
<div my-demo-table></div>
7-
8-
<div class="my-block-container"
9-
ng-class="{ 'my-block-active': state.myBlockActive,
10-
'my-block-visible': state.myBlockVisible }">
11-
<div class="my-block-overlay"></div>
12-
<div class="my-block-message-container">
13-
<div class="my-block-message">Loading ...</div>
14-
</div>
15-
</div>
16-
</div>
8+
<!--<div class="my-block-container"-->
9+
<!--ng-class="{ 'my-block-active': state.myBlockActive,-->
10+
<!--'my-block-visible': state.myBlockVisible }">-->
11+
<!--<div class="my-block-overlay"></div>-->
12+
<!--<div class="my-block-message-container">-->
13+
<!--<div class="my-block-message">Loading ...</div>-->
14+
<!--</div>-->
15+
<!--</div>-->
16+
<!--</div>-->
1717

1818

19-
<pre><code>state = {{ state | json }}</code></pre>
20-
<p>
21-
<button type="button" class="btn btn-default" ng-click="toggleMyBlock()">Toggle Block</button>
22-
</p>
19+
<!--<pre><code>state = {{ state | json }}</code></pre>-->
20+
<!--<p>-->
21+
<!--<button type="button" class="btn btn-default" ng-click="toggleMyBlock()">Toggle Block</button>-->
22+
<!--</p>-->
2323

2424
<!--<div class="example">-->
2525
<!--<div block-ui="fade" class="block-ui-fade">-->

‎src/app/examples/animations.js‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
angular.module('myApp').controller('AnimationController', function($scope, $timeout, blockUI) {
22

3-
$scope.toggleMyBlock = function() {
4-
$scope.state = $scope.state || {};
5-
6-
if($scope.state.myBlockActive) {
7-
8-
// if($scope.state.promise) {
9-
// $timeout.cancel($scope.state.promise);
10-
// delete $scope.state.promise;
11-
// }
12-
13-
if($scope.state.myBlockVisible) {
14-
$scope.state.myBlockActive = false;
15-
$scope.state.myBlockVisible = false;
16-
} else {
17-
$scope.state.myBlockVisible = true;
18-
}
19-
20-
21-
} else {
22-
$scope.state.myBlockActive = true;
23-
24-
// $scope.state.promise = $timeout(function() {
3+
// $scope.toggleMyBlock = function() {
4+
// $scope.state = $scope.state || {};
5+
//
6+
// if($scope.state.myBlockActive) {
7+
//
8+
//// if($scope.state.promise) {
9+
//// $timeout.cancel($scope.state.promise);
10+
//// delete $scope.state.promise;
11+
//// }
12+
//
13+
// if($scope.state.myBlockVisible) {
14+
// $scope.state.myBlockActive = false;
15+
// $scope.state.myBlockVisible = false;
16+
// } else {
2517
// $scope.state.myBlockVisible = true;
26-
// delete $scope.state.promise;
27-
// }, 200);
28-
}
29-
};
18+
// }
19+
//
20+
//
21+
// } else {
22+
// $scope.state.myBlockActive = true;
23+
//
24+
//// $scope.state.promise = $timeout(function() {
25+
//// $scope.state.myBlockVisible = true;
26+
//// delete $scope.state.promise;
27+
//// }, 200);
28+
// }
29+
// };
3030

3131
$scope.startBlock = function(id, timeout) {
3232

0 commit comments

Comments
 (0)