Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 19f1801

Browse files
matskoIgorMinar
matsko
authored and
IgorMinar
committed
docs: add animations into docs and directive examples
1 parent 303df9d commit 19f1801

File tree

10 files changed

+496
-97
lines changed

10 files changed

+496
-97
lines changed

‎docs/src/example.js

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,27 @@ exports.Example.prototype.addSource = function(name, content) {
5757
}
5858
};
5959

60+
exports.Example.prototype.enableAnimations = function() {
61+
this.animations = true;
62+
};
63+
64+
exports.Example.prototype.disableAnimations = function() {
65+
this.animations = false;
66+
};
67+
6068
exports.Example.prototype.toHtml = function() {
61-
return '<h2>Source</h2>\n' +
62-
this.toHtmlEdit() +
63-
this.toHtmlTabs() +
64-
'<h2>Demo</h2>\n' +
65-
this.toHtmlEmbed();
69+
var html = "<h2>Source</h2>\n";
70+
html += this.toHtmlEdit();
71+
html += this.toHtmlTabs();
72+
if(this.animations) {
73+
html += '<div class="pull-right">';
74+
html += ' <button class="btn btn-primary" ng-click="animationsOff=true" ng-hide="animationsOff">Animations on</button>';
75+
html += ' <button class="btn btn-primary disabled" ng-click="animationsOff=false" ng-show="animationsOff">Animations off</button>';
76+
html += '</div>';
77+
}
78+
html += "<h2>Demo</h2>\n";
79+
html += this.toHtmlEmbed();
80+
return html;
6681
};
6782

6883

@@ -116,7 +131,10 @@ exports.Example.prototype.toHtmlTabs = function() {
116131

117132
exports.Example.prototype.toHtmlEmbed = function() {
118133
var out = [];
119-
out.push('<div class="well doc-example-live"');
134+
out.push('<div class="well doc-example-live animator-container"');
135+
if(this.animations) {
136+
out.push(" ng-class=\"{'animations-off':animationsOff == true}\"");
137+
}
120138
out.push(' ng-embed-app="' + this.module + '"');
121139
out.push(' ng-set-html="' + this.html[0].id + '"');
122140
out.push(' ng-eval-javascript="' + ids(this.js) + '">');

‎docs/src/ngdoc.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,13 @@ Doc.prototype = {
130130

131131
parts.forEach(function(text, i) {
132132
parts[i] = (text || '').
133-
replace(/<example(?:\s+module="([^"]*)")?(?:\s+deps="([^"]*)")?>([\s\S]*?)<\/example>/gmi, function(_, module, deps, content) {
133+
replace(/<example(?:\s+module="([^"]*)")?(?:\s+deps="([^"]*)")?(\s+animations="true")?>([\s\S]*?)<\/example>/gmi,
134+
function(_, module, deps, animations, content) {
135+
134136
var example = new Example(self.scenarios);
137+
if(animations) {
138+
example.enableAnimations();
139+
}
135140

136141
example.setModule(module);
137142
example.addDeps(deps);
@@ -437,9 +442,11 @@ Doc.prototype = {
437442
var restrict = self.restrict || 'AC';
438443

439444
if (restrict.match(/E/)) {
445+
dom.html('<p>');
440446
dom.text('This directive can be used as custom element, but we aware of ');
441447
dom.tag('a', {href:'guide/ie'}, 'IE restrictions');
442448
dom.text('.');
449+
dom.html('</p>');
443450
}
444451

445452
if (self.usage) {

‎docs/src/templates/css/animations.css

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.reveal-setup {
2+
-webkit-transition:1s linear all;
3+
-moz-transition:1s linear all;
4+
-ms-transition:1s linear all;
5+
-o-transition:1s linear all;
6+
transition:1s linear all;
7+
8+
opacity:0;
9+
}
10+
.reveal-setup.reveal-start {
11+
opacity:1;
12+
}
13+
14+
.slide-reveal-setup {
15+
-webkit-transition:0.5s linear all;
16+
-moz-transition:0.5s linear all;
17+
-ms-transition:0.5s linear all;
18+
-o-transition:0.5s linear all;
19+
transition:0.5s linear all;
20+
opacity:0.5;
21+
}
22+
.slide-reveal-setup.slide-reveal-start {
23+
opacity:1;
24+
}
25+
26+
.slide-enter-setup {
27+
-webkit-transition:0.5s linear all;
28+
-moz-transition:0.5s linear all;
29+
-ms-transition:0.5s linear all;
30+
-o-transition:0.5s linear all;
31+
transition:0.5s linear all;
32+
33+
position:relative;
34+
left:10px;
35+
opacity:0;
36+
}
37+
.slide-enter-setup.slide-enter-start {
38+
left:0;
39+
opacity:1;
40+
}
41+
42+
.slide-leave-setup {
43+
-webkit-transition:0.5s linear all;
44+
-moz-transition:0.5s linear all;
45+
-ms-transition:0.5s linear all;
46+
-o-transition:0.5s linear all;
47+
transition:0.5s linear all;
48+
49+
opacity:1;
50+
}
51+
.slide-leave-setup.slide-leave-start {
52+
opacity:0;
53+
}
54+
55+
.example-animate-container {
56+
position:relative;
57+
background:white;
58+
border:1px solid black;
59+
height:40px;
60+
overflow:hidden;
61+
}
62+
63+
.example-animate-container > div {
64+
padding:1em;
65+
}
66+
67+
.animator-container.animations-off * {
68+
-webkit-transition: none;
69+
-moz-transition: none;
70+
-ms-transition: none;
71+
-o-transition: color 0 ease-in; /* opera is special :) */
72+
transition: none;
73+
}

‎docs/src/templates/css/docs.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,15 @@ img.AngularJS-small {
33
height: 25px;
44
}
55

6+
/* this is here to avoid the display=block shuffling of ngShow */
7+
.breadcrumb li > * {
8+
float:left;
9+
margin:0 2px 0 0;
10+
}
11+
12+
.breadcrumb {
13+
padding-bottom:2px;
14+
}
615

716
.clear-navbar {
817
margin-top: 60px;

‎docs/src/templates/index.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
addTag('link', {rel: 'stylesheet', href: 'css/bootstrap.min.css', type: 'text/css'});
3535
addTag('link', {rel: 'stylesheet', href: 'css/font-awesome.css', type: 'text/css'});
3636
addTag('link', {rel: 'stylesheet', href: 'css/docs.css', type: 'text/css'});
37+
addTag('link', {rel: 'stylesheet', href: 'css/animations.css', type: 'text/css'});
3738
if (jQuery) addTag('script', {src: debug ? 'js/jquery.js' : 'js/jquery.min.js'});
3839
addTag('script', {src: path('angular.js')}, sync);
3940
addTag('script', {src: path('angular-resource.js') }, sync);
@@ -231,29 +232,29 @@
231232
<li class="nav-header section" ng-show="module.directives">
232233
<a href="{{URL.directive}}" class="guide">directive</a>
233234
</li>
234-
<li ng-repeat="page in module.directives" ng-class="navClass(page)">
235+
<li ng-repeat="page in module.directives" ng-class="navClass(page)" ng-animate="'slide'">
235236
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
236237
</li>
237238

238239
<li class="nav-header section" ng-show="module.filters">
239240
<a href="{{URL.filter}}" class="guide">filter</a>
240241
</li>
241-
<li ng-repeat="page in module.filters" ng-class="navClass(page)">
242+
<li ng-repeat="page in module.filters" ng-class="navClass(page)" ng-animate="'slide'">
242243
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
243244
</li>
244245

245246
<li class="nav-header section" ng-show="module.services">
246247
<a href="{{URL.service}}" class="guide">service</a>
247248
</li>
248-
<li ng-repeat="service in module.services" ng-class="navClass(service.instance, service.provider)">
249+
<li ng-repeat="service in module.services" ng-animate="'slide'" ng-class="navClass(service.instance, service.provider)">
249250
<a ng-show="service.provider" class="pull-right" href="{{service.provider.url}}" tabindex="2"><i class="icon-cog"></i></a>
250251
<a href="{{service.instance.url}}" tabindex="2">{{service.name}}</a>
251252
</li>
252253

253254
<li class="nav-header section" ng-show="module.types">
254255
<a href="{{URL.type}}" class="guide">Types</a>
255256
</li>
256-
<li ng-repeat="page in module.types" ng-class="navClass(page)">
257+
<li ng-repeat="page in module.types" ng-class="navClass(page)" ng-animate="'slide'">
257258
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
258259
</li>
259260

@@ -281,7 +282,7 @@
281282

282283
<div id="loading" ng-show="loading">Loading...</div>
283284

284-
<div ng-hide="loading" ng-include src="currentPage.partialUrl" onload="afterPartialLoaded()" autoscroll class="content"></div>
285+
<div ng-hide="loading" ng-include src="currentPage.partialUrl" onload="afterPartialLoaded()" autoscroll class="content" ng-animate="{enter: 'slide-reveal'}" ></div>
285286

286287
<div id="disqus" class="disqus">
287288
<h2>Discussion</h2>

‎src/ng/directive/ngInclude.js

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@
4141
</select>
4242
url of the template: <tt>{{template.url}}</tt>
4343
<hr/>
44-
<div ng-include src="template.url"></div>
44+
<div class="example-animate-container"
45+
ng-include="template.url"
46+
ng-animate="{enter: 'example-enter', leave: 'example-leave'}"></div>
4547
</div>
4648
</file>
4749
<file name="script.js">
@@ -53,10 +55,45 @@
5355
}
5456
</file>
5557
<file name="template1.html">
56-
Content of template1.html
58+
<div>Content of template1.html</div>
5759
</file>
5860
<file name="template2.html">
59-
Content of template2.html
61+
<div>Content of template2.html</div>
62+
</file>
63+
<file name="animations.css">
64+
.example-leave-setup,
65+
.example-enter-setup {
66+
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
67+
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
68+
-ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
69+
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
70+
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
71+
72+
position:absolute;
73+
top:0;
74+
left:0;
75+
right:0;
76+
bottom:0;
77+
}
78+
79+
.example-animate-container > * {
80+
display:block;
81+
padding:10px;
82+
}
83+
84+
.example-enter-setup {
85+
top:-50px;
86+
}
87+
.example-enter-setup.example-enter-start {
88+
top:0;
89+
}
90+
91+
.example-leave-setup {
92+
top:0;
93+
}
94+
.example-leave-setup.example-leave-start {
95+
top:50px;
96+
}
6097
</file>
6198
<file name="scenario.js">
6299
it('should load template1.html', function() {

‎src/ng/directive/ngRepeat.js

Lines changed: 81 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -61,26 +61,86 @@
6161
* @example
6262
* This example initializes the scope to a list of names and
6363
* then uses `ngRepeat` to display every person:
64-
<doc:example>
65-
<doc:source>
66-
<div ng-init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">
67-
I have {{friends.length}} friends. They are:
68-
<ul>
69-
<li ng-repeat="friend in friends">
70-
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
71-
</li>
72-
</ul>
73-
</div>
74-
</doc:source>
75-
<doc:scenario>
76-
it('should check ng-repeat', function() {
77-
var r = using('.doc-example-live').repeater('ul li');
78-
expect(r.count()).toBe(2);
79-
expect(r.row(0)).toEqual(["1","John","25"]);
80-
expect(r.row(1)).toEqual(["2","Mary","28"]);
81-
});
82-
</doc:scenario>
83-
</doc:example>
64+
<example animations="true">
65+
<file name="index.html">
66+
<div ng-init="friends = [
67+
{name:'John', age:25, gender:'boy'},
68+
{name:'Jessie', age:30, gender:'girl'},
69+
{name:'Johanna', age:28, gender:'girl'},
70+
{name:'Joy', age:15, gender:'girl'},
71+
{name:'Mary', age:28, gender:'girl'},
72+
{name:'Peter', age:95, gender:'boy'},
73+
{name:'Sebastian', age:50, gender:'boy'},
74+
{name:'Erika', age:27, gender:'girl'},
75+
{name:'Patrick', age:40, gender:'boy'},
76+
{name:'Samantha', age:60, gender:'girl'}
77+
]">
78+
I have {{friends.length}} friends. They are:
79+
<input type="search" ng-model="q" placeholder="filter friends..." />
80+
<ul>
81+
<li ng-repeat="friend in friends | filter:q"
82+
ng-animate="{enter: 'example-repeat-enter',
83+
leave: 'example-repeat-leave',
84+
move: 'example-repeat-move'}">
85+
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
86+
</li>
87+
</ul>
88+
</div>
89+
</file>
90+
<file name="animations.css">
91+
.example-repeat-enter-setup,
92+
.example-repeat-leave-setup,
93+
.example-repeat-move-setup {
94+
-webkit-transition:all linear 0.5s;
95+
-moz-transition:all linear 0.5s;
96+
-ms-transition:all linear 0.5s;
97+
-o-transition:all linear 0.5s;
98+
transition:all linear 0.5s;
99+
}
100+
101+
.example-repeat-enter-setup {
102+
line-height:0;
103+
opacity:0;
104+
}
105+
.example-repeat-enter-setup.example-repeat-enter-start {
106+
line-height:20px;
107+
opacity:1;
108+
}
109+
110+
.example-repeat-leave-setup {
111+
opacity:1;
112+
line-height:20px;
113+
}
114+
.example-repeat-leave-setup.example-repeat-leave-start {
115+
opacity:0;
116+
line-height:0;
117+
}
118+
119+
.example-repeat-move-setup { }
120+
.example-repeat-move-setup.example-repeat-move-start { }
121+
</file>
122+
<file name="scenario.js">
123+
it('should render initial data set', function() {
124+
var r = using('.doc-example-live').repeater('ul li');
125+
expect(r.count()).toBe(10);
126+
expect(r.row(0)).toEqual(["1","John","25"]);
127+
expect(r.row(1)).toEqual(["2","Jessie","30"]);
128+
expect(r.row(9)).toEqual(["10","Samantha","60"]);
129+
expect(binding('friends.length')).toBe("10");
130+
});
131+
132+
it('should update repeater when filter predicate changes', function() {
133+
var r = using('.doc-example-live').repeater('ul li');
134+
expect(r.count()).toBe(10);
135+
136+
input('q').enter('ma');
137+
138+
expect(r.count()).toBe(2);
139+
expect(r.row(0)).toEqual(["1","Mary","28"]);
140+
expect(r.row(1)).toEqual(["2","Samantha","60"]);
141+
});
142+
</file>
143+
</example>
84144
*/
85145
var ngRepeatDirective = ['$parse', '$animator', function($parse, $animator) {
86146
var NG_REMOVED = '$$NG_REMOVED';
@@ -119,7 +179,7 @@ var ngRepeatDirective = ['$parse', '$animator', function($parse, $animator) {
119179
return hashKey(value);
120180
}
121181
}
122-
182+
123183
match = lhs.match(/^(?:([\$\w]+)|\(([\$\w]+)\s*,\s*([\$\w]+)\))$/);
124184
if (!match) {
125185
throw Error("'item' in 'item in collection' should be identifier or (key, value) but got '" +

0 commit comments

Comments
 (0)