feat(ndgocs) add animations into API directive examples

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 '<h2>Source</h2>\n' +
-          this.toHtmlEdit() +
-          this.toHtmlTabs() +
-          '<h2>Demo</h2>\n' +
-          this.toHtmlEmbed();
+  var html = "<h2>Source</h2>\n";
+  html += this.toHtmlEdit();
+  html += this.toHtmlTabs();
+  if(this.animations) {
+    html += '<div class="pull-right">';
+    html += ' <button class="btn btn-primary" ng-click="animationsOff=true" ng-hide="animationsOff">Animations on</button>';
+    html += ' <button class="btn btn-primary disabled" ng-click="animationsOff=false" ng-show="animationsOff">Animations off</button>';
+    html += '</div>';
+  }
+  html += "<h2>Demo</h2>\n";
+  html += this.toHtmlEmbed();
+  return html;
 };
 
 
@@ -116,7 +131,10 @@ exports.Example.prototype.toHtmlTabs = function() {
 
 exports.Example.prototype.toHtmlEmbed = function() {
   var out = [];
-  out.push('<div class="well doc-example-live"');
+  out.push('<div class="well doc-example-live animator-container"');
+  if(this.animations) {
+    out.push(" ng-class=\"{'animations-off':animationsOff == true}\"");
+  }
   out.push(' ng-embed-app="' + this.module + '"');
   out.push(' ng-set-html="' + this.html[0].id + '"');
   out.push(' ng-eval-javascript="' + ids(this.js) + '">');

docs/src/ngdoc.js

@@ -130,8 +130,13 @@ Doc.prototype = {
 
     parts.forEach(function(text, i) {
       parts[i] = (text || '').
-        replace(/<example(?:\s+module="([^"]*)")?(?:\s+deps="([^"]*)")?>([\s\S]*?)<\/example>/gmi, function(_, module, deps, content) {
+        replace(/<example(?:\s+module="([^"]*)")?(?:\s+deps="([^"]*)")?(\s+animations="true")?>([\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('<p>');
+         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('</p>');
       }
 
       if (self.usage) {

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;
+}

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;

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 @@
             <li class="nav-header section" ng-show="module.directives">
               <a href="{{URL.directive}}" class="guide">directive</a>
             </li>
-            <li ng-repeat="page in module.directives" ng-class="navClass(page)">
+            <li ng-repeat="page in module.directives" ng-class="navClass(page)" ng-animate="{enter: 'slide-enter', move: 'slide-move', leave: 'slide-leave'}">
               <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
             </li>
 
-            <li class="nav-header section" ng-show="module.filters">
+            <li ng-repeat="page in module.filters" ng-class="navClass(page)" ng-animate="{enter: 'slide-enter', move: 'slide-move', leave: 'slide-leave'}">
               <a href="{{URL.filter}}" class="guide">filter</a>
             </li>
             <li ng-repeat="page in module.filters" ng-class="navClass(page)">
@@ -245,15 +246,15 @@
             <li class="nav-header section" ng-show="module.services">
               <a href="{{URL.service}}" class="guide">service</a>
             </li>
-            <li ng-repeat="service in module.services" ng-class="navClass(service.instance, service.provider)">
+            <li ng-repeat="service in module.services" ng-animate="{enter: 'slide-enter', move: 'slide-move', leave: 'slide-leave'}" ng-class="navClass(service.instance, service.provider)">
               <a ng-show="service.provider" class="pull-right" href="{{service.provider.url}}" tabindex="2"><i class="icon-cog"></i></a>
               <a href="{{service.instance.url}}" tabindex="2">{{service.name}}</a>
             </li>
 
             <li class="nav-header section" ng-show="module.types">
               <a href="{{URL.type}}" class="guide">Types</a>
             </li>
-            <li ng-repeat="page in module.types" ng-class="navClass(page)">
+            <li ng-repeat="page in module.types" ng-class="navClass(page)" ng-animate="{enter: 'slide-enter', move: 'slide-move', leave: 'slide-leave'}">
               <a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
             </li>
 
@@ -281,7 +282,7 @@
 
         <div id="loading" ng-show="loading">Loading...</div>
 
-        <div ng-hide="loading" ng-include src="currentPage.partialUrl" onload="afterPartialLoaded()" autoscroll class="content"></div>
+        <div ng-hide="loading" ng-include src="currentPage.partialUrl" onload="afterPartialLoaded()" autoscroll class="content" ng-animate="{enter: 'slide-reveal'}" ></div>
 
         <div id="disqus" class="disqus">
           <h2>Discussion</h2>

src/ng/directive/ngInclude.js

@@ -41,7 +41,9 @@
        </select>
        url of the template: <tt>{{template.url}}</tt>
        <hr/>
-       <div ng-include src="template.url"></div>
+       <div class="example-animate-container"
+            ng-include="template.url"
+            ng-animate="{enter: 'example-enter', leave: 'example-leave'}"></div>
      </div>
     </file>
     <file name="script.js">
@@ -53,10 +55,45 @@
       }
      </file>
     <file name="template1.html">
-      Content of template1.html
+      <div>Content of template1.html</div>
     </file>
     <file name="template2.html">
-      Content of template2.html
+      <div>Content of template2.html</div>
+    </file>
+    <file name="animations.css">
+      .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;
+      }
     </file>
     <file name="scenario.js">
       it('should load template1.html', function() {

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:
-    <doc:example>
-      <doc:source>
-        <div ng-init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">
-          I have {{friends.length}} friends. They are:
-          <ul>
-            <li ng-repeat="friend in friends">
-              [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
-            </li>
-          </ul>
-        </div>
-      </doc:source>
-      <doc:scenario>
-         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"]);
-         });
-      </doc:scenario>
-    </doc:example>
+  <example animations="true">
+    <file name="index.html">
+      <div ng-init="friends = [
+        {name:'John', age:25, gender:'boy'},
+        {name:'Jessie', age:30, gender:'girl'},
+        {name:'Johanna', age:28, gender:'girl'},
+        {name:'Joy', age:15, gender:'girl'},
+        {name:'Mary', age:28, gender:'girl'},
+        {name:'Peter', age:95, gender:'boy'},
+        {name:'Sebastian', age:50, gender:'boy'},
+        {name:'Erika', age:27, gender:'girl'},
+        {name:'Patrick', age:40, gender:'boy'},
+        {name:'Samantha', age:60, gender:'girl'}
+      ]">
+        I have {{friends.length}} friends. They are:
+        <input type="search" ng-model="q" placeholder="filter friends..." />
+        <ul>
+          <li ng-repeat="friend in friends | filter:q"
+              ng-animate="{enter: 'example-repeat-enter',
+                          leave: 'example-repeat-leave',
+                          move: 'example-repeat-move'}">
+            [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
+          </li>
+        </ul>
+      </div>
+    </file>
+    <file name="animations.css">
+      .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 { }
+    </file>
+    <file name="scenerio.js">
+       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"]);
+       });
+      </file>
+    </example>
  */
 var ngRepeatDirective = ['$parse', '$animator', function($parse, $animator) {
   var NG_REMOVED = '$$NG_REMOVED';