Skip to content

Commit 7f8197b

Browse files
author
Null McNull
committed
utils findElement
1 parent a61ec26 commit 7f8197b

File tree

9 files changed

+252
-29
lines changed

9 files changed

+252
-29
lines changed

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@
4444
"showdown": "~0.3.1",
4545
"angular-mocks": "~1.2.22",
4646
"angular-inform": "~0.0.8",
47-
"angular-animate": "~1.2.22"
47+
"angular-animate": "~1.2.22",
48+
"animate.css": "~3.2.0"
4849
},
4950
"overrides": {
5051
"respond": {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ describe('block-ui-directive', function() {
5050

5151
});
5252

53-
describe('link', function() {
53+
describe('pre-link', function() {
5454

5555
it('should add the block-ui class to the element', function() {
5656

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11

22
blkUI.factory('blockUIUtils', function() {
33

4+
var $ = angular.element;
5+
46
var utils = {
57
buildRegExp: function(pattern) {
68
var match = pattern.match(/^\/(.*)\/([gim]*)$/), regExp;
@@ -37,6 +39,29 @@ blkUI.factory('blockUIUtils', function() {
3739
}
3840

3941
return false;
42+
},
43+
findElement: function ($element, predicateFn, traverse) {
44+
var ret = null;
45+
46+
if (predicateFn($element)) {
47+
ret = $element;
48+
} else {
49+
50+
var $elements;
51+
52+
if (traverse) {
53+
$elements = $element.parent();
54+
} else {
55+
$elements = $element.children();
56+
}
57+
58+
var i = $elements.length;
59+
while (!ret && i--) {
60+
ret = utils.findElement($($elements[i]), predicateFn, traverse);
61+
}
62+
}
63+
64+
return ret;
4065
}
4166
};
4267

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

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
describe('block-ui-utils', function() {
22

3-
var utils;
3+
var utils, $ = angular.element;
44

55
beforeEach(function() {
66
module('blockUI');
@@ -114,5 +114,54 @@ describe('block-ui-utils', function() {
114114

115115
});
116116

117+
}); // forEachFn
118+
119+
describe('findElement', function() {
120+
121+
it('should return the current element', function() {
122+
123+
function myPredicate($e) {
124+
return $e.hasClass('my-class');
125+
}
126+
127+
var $element = $('<div class="my-class"></div>');
128+
129+
var result = utils.findElement($element, myPredicate);
130+
131+
expect(result).toBe($element);
132+
133+
});
134+
135+
it('should return the child element', function() {
136+
137+
function myPredicate($e) {
138+
return $e.hasClass('my-class');
139+
}
140+
141+
var $element = $('<div><div class="my-class"></div></div>');
142+
var expected = $element.children()[0];
143+
144+
var result = utils.findElement($element, myPredicate);
145+
146+
expect(result[0]).toBe(expected);
147+
148+
});
149+
150+
it('should return the parent element', function() {
151+
152+
function myPredicate($e) {
153+
return $e.hasClass('my-class');
154+
}
155+
156+
var expected = $('<div class="my-class"><div></div></div>');
157+
var $element = $(expected.children()[0]);
158+
159+
var result = utils.findElement($element, myPredicate, true);
160+
161+
expect(result[0]).toBe(expected[0]);
162+
163+
});
164+
117165
});
166+
118167
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ angular.module('myApp').directive('myAnimationTester', function(blockUI, $compil
3535

3636
var $blockUI = locateElementWithClass($element, 'block-ui-target');
3737
$blockUI.attr('block-ui', instanceName);
38-
$blockUI.attr('block-ui-animation', $attrs.myAnimationTester);
38+
$blockUI.attr('block-ui-message-class', $attrs.myAnimationTester);
3939

4040
$compile($blockUI)($scope);
4141

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<h2>block-ui-animation: {{ animation }}</h2>
1+
<h2>{{ animation }}</h2>
22
<div class="my-animation-tester">
3-
<div class="block-ui-target">
3+
<div class="block-ui block-ui-target block-ui-anim-fade">
44

55
<form class="form-horizontal" ng-submit="fakeSubmit()">
66
<div class="form-group">

‎src/app/examples/animations.html‎

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

3-
<div my-animation-tester="bounce-in"></div>
4-
<div my-animation-tester="pulse"></div>
5-
<div my-animation-tester="flash"></div>
6-
<div my-animation-tester="bounce"></div>
7-
<div my-animation-tester="fade"></div>
3+
<!--<div my-animation-tester="animated infinite bounce"></div>-->
4+
<!--<div my-animation-tester="bounce-in"></div>-->
5+
<!--<div my-animation-tester="pulse"></div>-->
6+
<!--<div my-animation-tester="flash"></div>-->
7+
<!--<div my-animation-tester="bounce"></div>-->
8+
<!--<div my-animation-tester="fade"></div>-->
89

10+
<div ng-if="animateCss.recompile">
11+
<div block-ui="animateCssTest" block-ui-message-class="animated infinite {{ animateCss.selected.name }}">
12+
<div class="jumbotron">
13+
<h1>{{ animateCss.selected.name }}</h1>
14+
</div>
15+
</div>
16+
</div>
17+
18+
<select class="form-control" ng-options="animation.name group by animation.group for animation in animateCss.options" ng-model="animateCss.selected" ng-change="animateCss.recompile = false"></select>
919
</div>

‎src/app/examples/animations.js‎

Lines changed: 155 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,32 +28,169 @@ angular.module('myApp').controller('AnimationController', function($scope, $time
2828
// }
2929
// };
3030

31-
$scope.startBlock = function(id, timeout) {
31+
// $scope.startBlock = function(id, timeout) {
32+
//
33+
// var blockInstance = blockUI.instances.get(id);
34+
//
35+
// blockInstance.start();
36+
//
37+
// if(timeout >= 0) {
38+
// $timeout(function() {
39+
// blockInstance.stop();
40+
// }, timeout);
41+
// }
42+
// };
43+
//
44+
// $scope.stopBlock = function(id) {
45+
// var blockInstance = blockUI.instances.get(id);
46+
// blockInstance.stop();
47+
// };
48+
//
49+
// $scope.toggleBlock = function(id) {
50+
// var blockInstance = blockUI.instances.get(id);
51+
//
52+
// if(blockInstance.state().blocking) {
53+
// blockInstance.stop();
54+
// } else {
55+
// blockInstance.start();
56+
// }
57+
// };
58+
59+
var animateConfig = {
60+
61+
"attention_seekers": {
62+
"bounce": true,
63+
"flash": true,
64+
"pulse": true,
65+
"rubberBand": true,
66+
"shake": true,
67+
"swing": true,
68+
"tada": true,
69+
"wobble": true
70+
},
71+
72+
"bouncing_entrances": {
73+
"bounceIn": true,
74+
"bounceInDown": true,
75+
"bounceInLeft": true,
76+
"bounceInRight": true,
77+
"bounceInUp": true
78+
},
79+
80+
"bouncing_exits": {
81+
"bounceOut": true,
82+
"bounceOutDown": true,
83+
"bounceOutLeft": true,
84+
"bounceOutRight": true,
85+
"bounceOutUp": true
86+
},
3287

33-
var blockInstance = blockUI.instances.get(id);
88+
"fading_entrances": {
89+
"fadeIn": true,
90+
"fadeInDown": true,
91+
"fadeInDownBig": true,
92+
"fadeInLeft": true,
93+
"fadeInLeftBig": true,
94+
"fadeInRight": true,
95+
"fadeInRightBig": true,
96+
"fadeInUp": true,
97+
"fadeInUpBig": true
98+
},
3499

35-
blockInstance.start();
100+
"fading_exits": {
101+
"fadeOut": true,
102+
"fadeOutDown": true,
103+
"fadeOutDownBig": true,
104+
"fadeOutLeft": true,
105+
"fadeOutLeftBig": true,
106+
"fadeOutRight": true,
107+
"fadeOutRightBig": true,
108+
"fadeOutUp": true,
109+
"fadeOutUpBig": true
110+
},
36111

37-
if(timeout >= 0) {
38-
$timeout(function() {
39-
blockInstance.stop();
40-
}, timeout);
112+
"flippers": {
113+
"flip": true,
114+
"flipInX": true,
115+
"flipInY": true,
116+
"flipOutX": true,
117+
"flipOutY": true
118+
},
119+
120+
"lightspeed": {
121+
"lightspeedIn": true,
122+
"lightspeedOut": true
123+
},
124+
125+
"rotating_entrances": {
126+
"rotateIn": true,
127+
"rotateInDownLeft": true,
128+
"rotateInDownRight": true,
129+
"rotateInUpLeft": true,
130+
"rotateInUpRight": true
131+
},
132+
133+
"rotating_exits": {
134+
"rotateOut": true,
135+
"rotateOutDownLeft": true,
136+
"rotateOutDownRight": true,
137+
"rotateOutUpLeft": true,
138+
"rotateOutUpRight": true
139+
},
140+
141+
"specials": {
142+
"hinge": true,
143+
"rollIn": true,
144+
"rollOut": true
145+
},
146+
147+
"zooming_entrances": {
148+
"zoomIn": true,
149+
"zoomInDown": true,
150+
"zoomInLeft": true,
151+
"zoomInRight": true,
152+
"zoomInUp": true
153+
},
154+
155+
"zooming_exits": {
156+
"zoomOut": true,
157+
"zoomOutDown": true,
158+
"zoomOutLeft": true,
159+
"zoomOutRight": true,
160+
"zoomOutUp": true
41161
}
42-
};
43162

44-
$scope.stopBlock = function(id) {
45-
var blockInstance = blockUI.instances.get(id);
46-
blockInstance.stop();
47163
};
48164

49-
$scope.toggleBlock = function(id) {
50-
var blockInstance = blockUI.instances.get(id);
165+
(function() {
166+
167+
var options = [];
51168

52-
if(blockInstance.state().blocking) {
53-
blockInstance.stop();
54-
} else {
55-
blockInstance.start();
169+
angular.forEach(animateConfig, function(group, groupName) {
170+
angular.forEach(group, function(b, animName) {
171+
options.push({
172+
name: animName, group: groupName
173+
});
174+
});
175+
});
176+
177+
178+
$scope.animateCss = {
179+
options: options,
180+
selected: options[0]
181+
};
182+
183+
})();
184+
185+
$scope.$watch('animateCss.recompile', function(value) {
186+
187+
if(!value) {
188+
$scope.animateCss.recompile = true;
56189
}
57-
};
190+
});
191+
192+
var blockInstance = blockUI.instances.get('animateCssTest');
193+
blockInstance.addRef();
194+
blockInstance.start();
58195

59196
});

‎src/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<title><%- pkg.name %></title>
1111

1212
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
13+
<link rel="stylesheet" href="vendor/animate.css/animate.min.css">
1314
<link rel="stylesheet" href="vendor/angular-inform/dist/angular-inform.min.css">
1415

1516
<% _.forEach(css, function(include) { %>

0 commit comments

Comments
 (0)