From 19f1801379104bc1f74fbb9d288f71034ba829c9 Mon Sep 17 00:00:00 2001 From: Matias Niemelä Date: Tue, 2 Apr 2013 19:41:16 -0400 Subject: docs: add animations into docs and directive examples --- src/ng/directive/ngInclude.js | 43 +++++++++++- src/ng/directive/ngRepeat.js | 102 +++++++++++++++++++++------ src/ng/directive/ngShowHide.js | 154 +++++++++++++++++++++++++++++++++++------ src/ng/directive/ngSwitch.js | 101 ++++++++++++++++++--------- src/ng/directive/ngView.js | 61 ++++++++++++++-- 5 files changed, 376 insertions(+), 85 deletions(-) (limited to 'src/ng/directive') diff --git a/src/ng/directive/ngInclude.js b/src/ng/directive/ngInclude.js index a385d00b..45800e75 100644 --- a/src/ng/directive/ngInclude.js +++ b/src/ng/directive/ngInclude.js @@ -41,7 +41,9 @@ url of the template: {{template.url}}
-
+
@@ -53,10 +55,45 @@ } - Content of template1.html +
Content of template1.html
 - Content of template2.html +
Content of template2.html
+ + + .example-leave-setup, + .example-enter-setup { + -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + + position:absolute; + top:0; + left:0; + right:0; + bottom:0; + } + + .example-animate-container > * { + display:block; + padding:10px; + } + + .example-enter-setup { + top:-50px; + } + .example-enter-setup.example-enter-start { + top:0; + } + + .example-leave-setup { + top:0; + } + .example-leave-setup.example-leave-start { + top:50px; + } it('should load template1.html', function() { diff --git a/src/ng/directive/ngRepeat.js b/src/ng/directive/ngRepeat.js index fada0696..060f3392 100644 --- a/src/ng/directive/ngRepeat.js +++ b/src/ng/directive/ngRepeat.js @@ -61,26 +61,86 @@ * @example * This example initializes the scope to a list of names and * then uses `ngRepeat` to display every person: - - -
- I have {{friends.length}} friends. They are: -
    -
  • - [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old. -
    • -
-
- - - it('should check ng-repeat', function() { - var r = using('.doc-example-live').repeater('ul li'); - expect(r.count()).toBe(2); - expect(r.row(0)).toEqual(["1","John","25"]); - expect(r.row(1)).toEqual(["2","Mary","28"]); - }); - - + + +
+ I have {{friends.length}} friends. They are: + +
    +
  • + [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old. +
    • +
+
+ + + .example-repeat-enter-setup, + .example-repeat-leave-setup, + .example-repeat-move-setup { + -webkit-transition:all linear 0.5s; + -moz-transition:all linear 0.5s; + -ms-transition:all linear 0.5s; + -o-transition:all linear 0.5s; + transition:all linear 0.5s; + } + + .example-repeat-enter-setup { + line-height:0; + opacity:0; + } + .example-repeat-enter-setup.example-repeat-enter-start { + line-height:20px; + opacity:1; + } + + .example-repeat-leave-setup { + opacity:1; + line-height:20px; + } + .example-repeat-leave-setup.example-repeat-leave-start { + opacity:0; + line-height:0; + } + + .example-repeat-move-setup { } + .example-repeat-move-setup.example-repeat-move-start { } + + + it('should render initial data set', function() { + var r = using('.doc-example-live').repeater('ul li'); + expect(r.count()).toBe(10); + expect(r.row(0)).toEqual(["1","John","25"]); + expect(r.row(1)).toEqual(["2","Jessie","30"]); + expect(r.row(9)).toEqual(["10","Samantha","60"]); + expect(binding('friends.length')).toBe("10"); + }); + + it('should update repeater when filter predicate changes', function() { + var r = using('.doc-example-live').repeater('ul li'); + expect(r.count()).toBe(10); + + input('q').enter('ma'); + + expect(r.count()).toBe(2); + expect(r.row(0)).toEqual(["1","Mary","28"]); + expect(r.row(1)).toEqual(["2","Samantha","60"]); + }); + + */ var ngRepeatDirective = ['$parse', '$animator', function($parse, $animator) { var NG_REMOVED = '$$NG_REMOVED'; @@ -119,7 +179,7 @@ var ngRepeatDirective = ['$parse', '$animator', function($parse, $animator) { return hashKey(value); } } - + match = lhs.match(/^(?:([\$\w]+)|\(([\$\w]+)\s*,\s*([\$\w]+)\))$/); if (!match) { throw Error("'item' in 'item in collection' should be identifier or (key, value) but got '" + diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js index 418a43ff..7ccc0aa0 100644 --- a/src/ng/directive/ngShowHide.js +++ b/src/ng/directive/ngShowHide.js @@ -24,13 +24,68 @@ * then the element is shown or hidden respectively. * * @example - - - Click me:
- Show: I show up when your checkbox is checked.
- Hide: I hide when your checkbox is checked. - - + + + Click me:
+
+ Show: + + I show up when your checkbox is checked. + +
+
+ Hide: + + I hide when your checkbox is checked. + +
+ + + .example-show-setup, .example-hide-setup { + -webkit-transition:all linear 0.5s; + -moz-transition:all linear 0.5s; + -ms-transition:all linear 0.5s; + -o-transition:all linear 0.5s; + transition:all linear 0.5s; + } + + .example-show-setup { + line-height:0; + opacity:0; + padding:0 10px; + } + .example-show-start.example-show-start { + line-height:20px; + opacity:1; + padding:10px; + border:1px solid black; + background:white; + } + + .example-hide-setup { + line-height:20px; + opacity:1; + padding:10px; + border:1px solid black; + background:white; + } + .example-hide-start.example-hide-start { + line-height:0; + opacity:0; + padding:0 10px; + } + + .check-element { + padding:10px; + border:1px solid black; + background:white; + } + + it('should check ng-show / ng-hide', function() { expect(element('.doc-example-live span:first:hidden').count()).toEqual(1); expect(element('.doc-example-live span:last:visible').count()).toEqual(1); @@ -40,8 +95,8 @@ expect(element('.doc-example-live span:first:visible').count()).toEqual(1); expect(element('.doc-example-live span:last:hidden').count()).toEqual(1); }); - - + + */ //TODO(misko): refactor to remove element from the DOM var ngShowDirective = ['$animator', function($animator) { @@ -78,24 +133,79 @@ var ngShowDirective = ['$animator', function($animator) { * the element is shown or hidden respectively. * * @example - - - Click me:
- Show: I show up when you checkbox is checked?
- Hide: I hide when you checkbox is checked? - - + + + Click me:
+
+ Show: + + I show up when your checkbox is checked. + +
+
+ Hide: + + I hide when your checkbox is checked. + +
+ + + .example-show-setup, .example-hide-setup { + -webkit-transition:all linear 0.5s; + -moz-transition:all linear 0.5s; + -ms-transition:all linear 0.5s; + -o-transition:all linear 0.5s; + transition:all linear 0.5s; + } + + .example-show-setup { + line-height:0; + opacity:0; + padding:0 10px; + } + .example-show-start.example-show-start { + line-height:20px; + opacity:1; + padding:10px; + border:1px solid black; + background:white; + } + + .example-hide-setup { + line-height:20px; + opacity:1; + padding:10px; + border:1px solid black; + background:white; + } + .example-hide-start.example-hide-start { + line-height:0; + opacity:0; + padding:0 10px; + } + + .check-element { + padding:10px; + border:1px solid black; + background:white; + } + + it('should check ng-show / ng-hide', function() { - expect(element('.doc-example-live span:first:hidden').count()).toEqual(1); - expect(element('.doc-example-live span:last:visible').count()).toEqual(1); + expect(element('.doc-example-live .check-element:first:hidden').count()).toEqual(1); + expect(element('.doc-example-live .check-element:last:visible').count()).toEqual(1); input('checked').check(); - expect(element('.doc-example-live span:first:visible').count()).toEqual(1); - expect(element('.doc-example-live span:last:hidden').count()).toEqual(1); + expect(element('.doc-example-live .check-element:first:visible').count()).toEqual(1); + expect(element('.doc-example-live .check-element:last:hidden').count()).toEqual(1); }); - - + + */ //TODO(misko): refactor to remove element from the DOM var ngHideDirective = ['$animator', function($animator) { diff --git a/src/ng/directive/ngSwitch.js b/src/ng/directive/ngSwitch.js index 8b0dab31..8cf8945d 100644 --- a/src/ng/directive/ngSwitch.js +++ b/src/ng/directive/ngSwitch.js @@ -47,40 +47,77 @@ * * * @example - - - -
- - selection={{selection}} -
-
+ + +
+ + selection={{selection}} +
+
Settings Div
- Home Span - default -
+
Home Span
+
default
- - - it('should start in settings', function() { - expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Settings Div/); - }); - it('should change to home', function() { - select('selection').option('home'); - expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Home Span/); - }); - it('should select default', function() { - select('selection').option('other'); - expect(element('.doc-example-live [ng-switch]').text()).toMatch(/default/); - }); - - +
+ + + function Ctrl($scope) { + $scope.items = ['settings', 'home', 'other']; + $scope.selection = $scope.items[0]; + } + + + .example-leave-setup, .example-enter-setup { + -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + + position:absolute; + top:0; + left:0; + right:0; + bottom:0; + } + + .example-animate-container > * { + display:block; + padding:10px; + } + + .example-enter-setup { + top:-50px; + } + .example-enter-start.example-enter-start { + top:0; + } + + .example-leave-setup { + top:0; + } + .example-leave-start.example-leave-start { + top:50px; + } + + + it('should start in settings', function() { + expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Settings Div/); + }); + it('should change to home', function() { + select('selection').option('home'); + expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Home Span/); + }); + it('should select default', function() { + select('selection').option('other'); + expect(element('.doc-example-live [ng-switch]').text()).toMatch(/default/); + }); + + */ var ngSwitchDirective = ['$animator', function($animator) { return { diff --git a/src/ng/directive/ngView.js b/src/ng/directive/ngView.js index 2ffd64da..5b6d938b 100644 --- a/src/ng/directive/ngView.js +++ b/src/ng/directive/ngView.js @@ -21,7 +21,7 @@ * * @scope * @example - +
Choose: @@ -31,7 +31,10 @@ Gatsby: Ch4 | Scarlet Letter
-
+ 
$location.path() = {{$location.path()}}
@@ -43,14 +46,58 @@ - controller: {{name}}
- Book Id: {{params.bookId}}
+
+ controller: {{name}}
+ Book Id: {{params.bookId}}
+
- controller: {{name}}
- Book Id: {{params.bookId}}
- Chapter Id: {{params.chapterId}} +
+ controller: {{name}}
+ Book Id: {{params.bookId}}
+ Chapter Id: {{params.chapterId}} +
+ + + + .example-leave-setup, .example-enter-setup { + -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; + -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; + -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; + -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; + transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; + } + + .example-animate-container { + position:relative; + height:100px; + } + + .example-animate-container > * { + display:block; + width:100%; + border-left:1px solid black; + + position:absolute; + top:0; + left:0; + right:0; + bottom:0; + padding:10px; + } + + .example-enter-setup { + left:100%; + } + .example-enter-setup.example-enter-start { + left:0; + } + + .example-leave-setup { } + .example-leave-setup.example-leave-start { + left:-100%; + } -- cgit v1.2.3