diff --git a/docs/src/example.js b/docs/src/example.js index 7477b0a5055c..eadc218f1f35 100644 --- a/docs/src/example.js +++ b/docs/src/example.js @@ -57,12 +57,27 @@ exports.Example.prototype.addSource = function(name, content) { } }; +exports.Example.prototype.enableAnimations = function() { + this.animations = true; +}; + +exports.Example.prototype.disableAnimations = function() { + this.animations = false; +}; + exports.Example.prototype.toHtml = function() { - return '

Source

\n' + - this.toHtmlEdit() + - this.toHtmlTabs() + - '

Demo

\n' + - this.toHtmlEmbed(); + var html = "

Source

\n"; + html += this.toHtmlEdit(); + html += this.toHtmlTabs(); + if(this.animations) { + html += '
'; + html += ' '; + html += ' '; + html += '
'; + } + html += "

Demo

\n"; + html += this.toHtmlEmbed(); + return html; }; @@ -116,7 +131,10 @@ exports.Example.prototype.toHtmlTabs = function() { exports.Example.prototype.toHtmlEmbed = function() { var out = []; - out.push('
'); diff --git a/docs/src/ngdoc.js b/docs/src/ngdoc.js index 3e1bbe9d00a6..ddc8dbabd6e4 100644 --- a/docs/src/ngdoc.js +++ b/docs/src/ngdoc.js @@ -130,8 +130,13 @@ Doc.prototype = { parts.forEach(function(text, i) { parts[i] = (text || ''). - replace(/([\s\S]*?)<\/example>/gmi, function(_, module, deps, content) { + replace(/([\s\S]*?)<\/example>/gmi, + function(_, module, deps, animations, content) { + var example = new Example(self.scenarios); + if(animations) { + example.enableAnimations(); + } example.setModule(module); example.addDeps(deps); @@ -437,9 +442,11 @@ Doc.prototype = { var restrict = self.restrict || 'AC'; if (restrict.match(/E/)) { - dom.text('This directive can be used as custom element, but we aware of '); - dom.tag('a', {href:'guide/ie'}, 'IE restrictions'); - dom.text('.'); + dom.html('

'); + dom.text('This directive can be used as custom element, but we aware of '); + dom.tag('a', {href:'guide/ie'}, 'IE restrictions'); + dom.text('.'); + dom.html('

'); } if (self.usage) { diff --git a/docs/src/templates/css/animations.css b/docs/src/templates/css/animations.css new file mode 100644 index 000000000000..3defa5ad430d --- /dev/null +++ b/docs/src/templates/css/animations.css @@ -0,0 +1,73 @@ +.reveal-setup { + -webkit-transition:1s linear all; + -moz-transition:1s linear all; + -ms-transition:1s linear all; + -o-transition:1s linear all; + transition:1s linear all; + + opacity:0; +} +.reveal-setup.reveal-start { + opacity:1; +} + +.slide-reveal-setup { + -webkit-transition:0.5s linear all; + -moz-transition:0.5s linear all; + -ms-transition:0.5s linear all; + -o-transition:0.5s linear all; + transition:0.5s linear all; + opacity:0.5; +} +.slide-reveal-setup.slide-reveal-start { + opacity:1; +} + +.slide-enter-setup { + -webkit-transition:0.5s linear all; + -moz-transition:0.5s linear all; + -ms-transition:0.5s linear all; + -o-transition:0.5s linear all; + transition:0.5s linear all; + + position:relative; + left:10px; + opacity:0; +} +.slide-enter-setup.slide-enter-start { + left:0; + opacity:1; +} + +.slide-leave-setup { + -webkit-transition:0.5s linear all; + -moz-transition:0.5s linear all; + -ms-transition:0.5s linear all; + -o-transition:0.5s linear all; + transition:0.5s linear all; + + opacity:1; +} +.slide-leave-setup.slide-leave-start { + opacity:0; +} + +.example-animate-container { + position:relative; + background:white; + border:1px solid black; + height:40px; + overflow:hidden; +} + +.example-animate-container > div { + padding:1em; +} + +.animator-container.animations-off * { + -webkit-transition: none; + -moz-transition: none; + -ms-transition: none; + -o-transition: color 0 ease-in; /* opera is special :) */ + transition: none; +} diff --git a/docs/src/templates/css/docs.css b/docs/src/templates/css/docs.css index 70d98a3c8bea..bed88f802eba 100644 --- a/docs/src/templates/css/docs.css +++ b/docs/src/templates/css/docs.css @@ -3,6 +3,15 @@ img.AngularJS-small { height: 25px; } +/* this is here to avoid the display=block shuffling of ngShow */ +.breadcrumb li > * { + float:left; + margin:0 2px 0 0; +} + +.breadcrumb { + padding-bottom:2px; +} .clear-navbar { margin-top: 60px; diff --git a/docs/src/templates/index.html b/docs/src/templates/index.html index bd460838ae37..0477d9c471eb 100644 --- a/docs/src/templates/index.html +++ b/docs/src/templates/index.html @@ -34,6 +34,7 @@ addTag('link', {rel: 'stylesheet', href: 'css/bootstrap.min.css', type: 'text/css'}); addTag('link', {rel: 'stylesheet', href: 'css/font-awesome.css', type: 'text/css'}); addTag('link', {rel: 'stylesheet', href: 'css/docs.css', type: 'text/css'}); + addTag('link', {rel: 'stylesheet', href: 'css/animations.css', type: 'text/css'}); if (jQuery) addTag('script', {src: debug ? 'js/jquery.js' : 'js/jquery.min.js'}); addTag('script', {src: path('angular.js')}, sync); addTag('script', {src: path('angular-resource.js') }, sync); @@ -231,11 +232,11 @@ -
  • +
  • {{page.shortName}}
  • -
  • filter
  • @@ -245,7 +246,7 @@
  • -
  • +
  • {{service.name}}
  • @@ -253,7 +254,7 @@ -
  • +
  • {{page.shortName}}
  • @@ -281,7 +282,7 @@
    Loading...
    -
    +

    Discussion

    diff --git a/src/ng/directive/ngInclude.js b/src/ng/directive/ngInclude.js index a385d00be485..45800e758d4e 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 fada069610dd..798f22a2eeba 100644 --- a/src/ng/directive/ngRepeat.js +++ b/src/ng/directive/ngRepeat.js @@ -61,26 +61,73 @@ * @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 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"]); + }); + +
    */ var ngRepeatDirective = ['$parse', '$animator', function($parse, $animator) { var NG_REMOVED = '$$NG_REMOVED'; diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js index 418a43ffd9cb..7e9900fa4fb0 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,13 +133,68 @@ 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); @@ -94,8 +204,8 @@ var ngShowDirective = ['$animator', function($animator) { 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 ngHideDirective = ['$animator', function($animator) { diff --git a/src/ng/directive/ngSwitch.js b/src/ng/directive/ngSwitch.js index 8b0dab31911b..665a9554b43c 100644 --- a/src/ng/directive/ngSwitch.js +++ b/src/ng/directive/ngSwitch.js @@ -47,40 +47,79 @@ * * * @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 load template1.html', function() { + expect(element('.doc-example-live [ng-include]').text()). + toMatch(/Content of template1.html/); + }); + it('should load template2.html', function() { + select('template').option('1'); + expect(element('.doc-example-live [ng-include]').text()). + toMatch(/Content of template2.html/); + }); + it('should change to blank', function() { + select('template').option(''); + expect(element('.doc-example-live [ng-include]').text()).toEqual(''); + }); + + */ var ngSwitchDirective = ['$animator', function($animator) { return { diff --git a/src/ng/directive/ngView.js b/src/ng/directive/ngView.js index 2ffd64da0b8f..340b874c89f0 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%; + }