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..4f94a1cd3572 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.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..6e3be195ec3c 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,21 +232,21 @@
  • directive
    • -
  • +
  • {{page.shortName}}
  • filter
    • -
  • +
  • {{page.shortName}}
  • service
    • -
  • +
  • {{service.name}}
    • @@ -253,7 +254,7 @@
  • Types
    • -
  • +
  • {{page.shortName}}
    • @@ -281,7 +282,7 @@
    Loading...
    -
    +

    Discussion

    diff --git a/package.json b/package.json index 5a9159806e4b..771bea680154 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "q-fs": "0.1.36", "qq": "0.3.5", "shelljs": "0.1.2", - "karma": "~0.8", + "karma": "0.8.4", "yaml-js": "0.0.5" } } diff --git a/src/bootstrap/bootstrap-prettify.js b/src/bootstrap/bootstrap-prettify.js index 026587a27a58..a9e61d4fdeb5 100644 --- a/src/bootstrap/bootstrap-prettify.js +++ b/src/bootstrap/bootstrap-prettify.js @@ -179,7 +179,8 @@ directive.ngEvalJavascript = ['getEmbeddedTemplate', function(getEmbeddedTemplat }]; -directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location', function($templateCache, $browser, docsRootScope, $location) { +directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location', '$sniffer', + function($templateCache, $browser, docsRootScope, $location, $sniffer) { return { terminal: true, link: function(scope, element, attrs) { @@ -189,6 +190,7 @@ directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location', $provide.value('$templateCache', $templateCache); $provide.value('$anchorScroll', angular.noop); $provide.value('$browser', $browser); + $provide.value('$sniffer', $sniffer); $provide.provider('$location', function() { this.$get = ['$rootScope', function($rootScope) { docsRootScope.$on('$locationChangeSuccess', function(event, oldUrl, newUrl) { @@ -223,6 +225,7 @@ directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location', event.preventDefault(); } }); + angular.bootstrap(element, modules); } }; 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..060f3392f002 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 418a43ffd9cb..7ccc0aa06b71 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 8b0dab31911b..8cf8945da8b6 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 2ffd64da0b8f..5b6d938bc5c8 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%; + } diff --git a/src/ngScenario/Application.js b/src/ngScenario/Application.js index 2ca6c8fdf555..f7ce28cbedbf 100644 --- a/src/ngScenario/Application.js +++ b/src/ngScenario/Application.js @@ -49,7 +49,7 @@ angular.scenario.Application.prototype.getWindow_ = function() { */ angular.scenario.Application.prototype.navigateTo = function(url, loadFn, errorFn) { var self = this; - var frame = this.getFrame_(); + var frame = self.getFrame_(); //TODO(esprehn): Refactor to use rethrow() errorFn = errorFn || function(e) { throw e; }; if (url === 'about:blank') { @@ -57,21 +57,39 @@ angular.scenario.Application.prototype.navigateTo = function(url, loadFn, errorF } else if (url.charAt(0) === '#') { url = frame.attr('src').split('#')[0] + url; frame.attr('src', url); - this.executeAction(loadFn); + self.executeAction(loadFn); } else { frame.remove(); - this.context.find('#test-frames').append('