aboutsummaryrefslogtreecommitdiffstats
path: root/docs
diff options
context:
space:
mode:
Diffstat (limited to 'docs')
-rw-r--r--docs/component-spec/annotationsSpec.js39
-rw-r--r--docs/components/angular-bootstrap/bootstrap-prettify.js5
-rw-r--r--docs/components/angular-bootstrap/bootstrap.js9
-rw-r--r--docs/src/example.js2
-rw-r--r--docs/src/ngdoc.js67
-rw-r--r--docs/src/templates/css/animations.css43
-rw-r--r--docs/src/templates/index.html13
-rw-r--r--docs/src/templates/js/docs.js2
8 files changed, 68 insertions, 112 deletions
diff --git a/docs/component-spec/annotationsSpec.js b/docs/component-spec/annotationsSpec.js
index 321118ad..a17c906c 100644
--- a/docs/component-spec/annotationsSpec.js
+++ b/docs/component-spec/annotationsSpec.js
@@ -67,41 +67,33 @@ describe('Docs Annotations', function() {
var $scope, parent, element, url, window;
beforeEach(function() {
- module(function($provide, $animationProvider) {
+ module(function($provide, $animateProvider) {
$provide.value('$window', window = angular.mock.createMockWindow());
- $animationProvider.register('foldout-enter', function($window) {
+ $animateProvider.register('.foldout', function($window) {
return {
- start : function(element, done) {
+ enter : function(element, done) {
$window.setTimeout(done, 1000);
- }
- }
- });
- $animationProvider.register('foldout-hide', function($window) {
- return {
- start : function(element, done) {
+ },
+ show : function(element, done) {
$window.setTimeout(done, 500);
- }
- }
- });
- $animationProvider.register('foldout-show', function($window) {
- return {
- start : function(element, done) {
+ },
+ hide : function(element, done) {
$window.setTimeout(done, 200);
}
}
});
});
- inject(function($rootScope, $compile, $templateCache, $rootElement, $animator) {
- $animator.enabled(true);
+ inject(function($rootScope, $compile, $templateCache, $rootElement, $animate) {
+ $animate.enabled(true);
url = '/page.html';
$scope = $rootScope.$new();
parent = angular.element('<div class="parent"></div>');
- element = angular.element('<div data-url="' + url + '" foldout></div>');
//we're injecting the element to the $rootElement since the changes in
- //$animator only detect and perform animations if the root element has
+ //$animate only detect and perform animations if the root element has
//animations enabled. If the element is not apart of the DOM
//then animations are skipped.
+ element = angular.element('<div data-url="' + url + '" class="foldout" foldout></div>');
parent.append(element);
$rootElement.append(parent);
body.append($rootElement);
@@ -142,16 +134,19 @@ describe('Docs Annotations', function() {
$httpBackend.flush();
window.setTimeout.expect(1).process();
window.setTimeout.expect(1000).process();
+ window.setTimeout.expect(0).process();
//hide
element.triggerHandler('click');
window.setTimeout.expect(1).process();
- window.setTimeout.expect(500).process();
+ window.setTimeout.expect(200).process();
+ window.setTimeout.expect(0).process();
//show
element.triggerHandler('click');
window.setTimeout.expect(1).process();
- window.setTimeout.expect(200).process();
+ window.setTimeout.expect(500).process();
+ window.setTimeout.expect(0).process();
}));
});
@@ -160,7 +155,7 @@ describe('Docs Annotations', function() {
var window, $scope, ctrl;
beforeEach(function() {
- module(function($provide, $animationProvider) {
+ module(function($provide, $animateProvider) {
$provide.value('$window', window = angular.mock.createMockWindow());
});
inject(function($rootScope, $controller, $location, $cookies, sections) {
diff --git a/docs/components/angular-bootstrap/bootstrap-prettify.js b/docs/components/angular-bootstrap/bootstrap-prettify.js
index ad5340e5..fa40c6e7 100644
--- a/docs/components/angular-bootstrap/bootstrap-prettify.js
+++ b/docs/components/angular-bootstrap/bootstrap-prettify.js
@@ -183,8 +183,8 @@ directive.ngEvalJavascript = ['getEmbeddedTemplate', function(getEmbeddedTemplat
}];
-directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location', '$sniffer',
- function($templateCache, $browser, docsRootScope, $location, $sniffer) {
+directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location', '$sniffer', '$animate',
+ function($templateCache, $browser, docsRootScope, $location, $sniffer, $animate) {
return {
terminal: true,
link: function(scope, element, attrs) {
@@ -193,6 +193,7 @@ directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location',
deregisterEmbedRootScope;
modules.push(['$provide', function($provide) {
+ $provide.value('$animate', $animate);
$provide.value('$templateCache', $templateCache);
$provide.value('$anchorScroll', angular.noop);
$provide.value('$browser', $browser);
diff --git a/docs/components/angular-bootstrap/bootstrap.js b/docs/components/angular-bootstrap/bootstrap.js
index 170e8805..20a5741d 100644
--- a/docs/components/angular-bootstrap/bootstrap.js
+++ b/docs/components/angular-bootstrap/bootstrap.js
@@ -335,12 +335,11 @@ directive.tabPane = function() {
};
};
-directive.foldout = ['$http', '$animator','$window', function($http, $animator, $window) {
+directive.foldout = ['$http', '$animate','$window', function($http, $animate, $window) {
return {
restrict: 'A',
priority : 500,
link: function(scope, element, attrs) {
- var animator = $animator(scope, { ngAnimate: "'foldout'" });
var container, loading, url = attrs.url;
if(/\/build\//.test($window.location.href)) {
url = '/build/docs' + url;
@@ -353,7 +352,7 @@ directive.foldout = ['$http', '$animator','$window', function($http, $animator,
loading = true;
var par = element.parent();
container = angular.element('<div class="foldout">loading...</div>');
- animator.enter(container, null, par);
+ $animate.enter(container, null, par);
$http.get(url, { cache : true }).success(function(html) {
loading = false;
@@ -367,12 +366,12 @@ directive.foldout = ['$http', '$animator','$window', function($http, $animator,
//avoid showing the element if the user has already closed it
if(container.css('display') == 'block') {
container.css('display','none');
- animator.show(container);
+ $animate.show(container);
}
});
}
else {
- container.css('display') == 'none' ? animator.show(container) : animator.hide(container);
+ container.hasClass('ng-hide') ? $animate.show(container) : $animate.hide(container);
}
});
});
diff --git a/docs/src/example.js b/docs/src/example.js
index cdbc24a7..9471b3fa 100644
--- a/docs/src/example.js
+++ b/docs/src/example.js
@@ -134,7 +134,7 @@ exports.Example.prototype.toHtmlTabs = function() {
exports.Example.prototype.toHtmlEmbed = function() {
var out = [];
- out.push('<div class="well doc-example-live animator-container"');
+ out.push('<div class="well doc-example-live animate-container"');
if(this.animations) {
out.push(" ng-class=\"{'animations-off':animationsOff == true}\"");
}
diff --git a/docs/src/ngdoc.js b/docs/src/ngdoc.js
index 394510c5..eb26bbf2 100644
--- a/docs/src/ngdoc.js
+++ b/docs/src/ngdoc.js
@@ -494,6 +494,19 @@ Doc.prototype = {
html_usage_parameters: function(dom) {
var self = this;
var params = this.param ? this.param : [];
+ if(this.animations) {
+ dom.h('Animations', this.animations, function(animations){
+ dom.html('<ul>');
+ var animations = animations.split("\n");
+ animations.forEach(function(ani) {
+ dom.html('<li>');
+ dom.text(ani);
+ dom.html('</li>');
+ });
+ dom.html('</ul>');
+ });
+ dom.html('<a href="api/ngAnimate.$animate">Click here</a> to learn more about the steps involved in the animation.');
+ }
if(params.length > 0) {
dom.html('<h2 id="parameters">Parameters</h2>');
dom.html('<table class="variables-matrix table table-bordered table-striped">');
@@ -538,18 +551,6 @@ Doc.prototype = {
dom.html('</tbody>');
dom.html('</table>');
}
- if(this.animations) {
- dom.h('Animations', this.animations, function(animations){
- dom.html('<ul>');
- var animations = animations.split("\n");
- animations.forEach(function(ani) {
- dom.html('<li>');
- dom.text(ani);
- dom.html('</li>');
- });
- dom.html('</ul>');
- });
- }
},
html_usage_returns: function(dom) {
@@ -665,48 +666,6 @@ Doc.prototype = {
dom.text('</' + element + '>');
});
}
- if(self.animations) {
- var animations = [], matches = self.animations.split("\n");
- matches.forEach(function(ani) {
- var name = ani.match(/^\s*(.+?)\s*-/)[1];
- animations.push(name);
- });
-
- dom.html('with <span id="animations">animations</span>');
- var comment;
- if(animations.length == 1) {
- comment = 'The ' + animations[0] + ' animation is supported';
- }
- else {
- var rhs = animations[animations.length-1];
- var lhs = '';
- for(var i=0;i<animations.length-1;i++) {
- if(i>0) {
- lhs += ', ';
- }
- lhs += animations[i];
- }
- comment = 'The ' + lhs + ' and ' + rhs + ' animations are supported';
- }
- var element = self.element || 'ANY';
- dom.code(function() {
- dom.text('//' + comment + "\n");
- dom.text('<' + element + ' ');
- dom.text(dashCase(self.shortName));
- renderParams('\n ', '="', '"', true);
- dom.text(' ng-animate="{');
- animations.forEach(function(ani, index) {
- if (index) {
- dom.text(', ');
- }
- dom.text(ani + ': \'' + ani + '-animation\'');
- });
- dom.text('}">\n ...\n');
- dom.text('</' + element + '>');
- });
-
- dom.html('<a href="api/ng.$animator#Methods">Click here</a> to learn more about the steps involved in the animation.');
- }
}
self.html_usage_directiveInfo(dom);
self.html_usage_parameters(dom);
diff --git a/docs/src/templates/css/animations.css b/docs/src/templates/css/animations.css
index 2d54bbfb..7324a8a1 100644
--- a/docs/src/templates/css/animations.css
+++ b/docs/src/templates/css/animations.css
@@ -1,4 +1,4 @@
-.reveal {
+.reveal.ng-enter {
-webkit-transition:1s linear all;
-moz-transition:1s linear all;
-o-transition:1s linear all;
@@ -6,7 +6,7 @@
opacity:0;
}
-.reveal.reveal-active {
+.reveal.ng-enter.ng-enter-active {
opacity:1;
}
@@ -15,48 +15,45 @@
overflow:hidden;
}
-.slide-reveal {
+.slide-reveal > .ng-enter {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
- opacity:0.5;
+ opacity:0.5;
position:relative;
opacity:0;
top:10px;
}
-.slide-reveal.slide-reveal-active {
+.slide-reveal > .ng-enter.ng-enter-active {
top:0;
opacity:1;
}
-.expand-enter {
+.expand.ng-enter,
+.expand.ng-leave {
-webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
-moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
-o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
-
+}
+.expand.ng-enter {
opacity:0;
line-height:0;
height:0!important;
}
-.expand-enter.expand-enter-active {
+.expand.ng-enter.expand.ng-enter-active {
opacity:1;
line-height:20px;
height:20px!important;
}
-.expand-leave {
- -webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
- -moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
- -o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
- transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
-
+.expand.ng-leave {
opacity:1;
height:20px;
}
-.expand-leave.expand-leave-active {
+.expand.ng-leave.expand.ng-leave-active {
opacity:0;
height:0;
}
@@ -73,32 +70,36 @@
padding:1em;
}
-.animator-container.animations-off * {
+.animate-container.animations-off * {
-webkit-transition: none;
-moz-transition: none;
-o-transition: color 0 ease-in; /* opera is special :) */
transition: none;
}
-.foldout-show, .foldout-enter, .foldout-hide {
+.foldout.ng-enter,
+.foldout.ng-hide-add,
+.foldout.ng-hide-remove {
-webkit-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
-moz-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
-o-transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
transition:0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
}
-.foldout-show, .foldout-enter {
+.foldout.ng-hide-remove,
+.foldout.ng-enter {
opacity:0;
}
-.foldout-show.foldout-show-active, .foldout-hide.foldout-hide-active {
+.foldout.ng-hide-remove.ng-hide-remove-active,
+.foldout.ng-enter.ng-enter-active {
opacity:1;
}
-.foldout-hide {
+.foldout.ng-hide-add {
opacity:1;
}
-.foldout-hide.foldout-hide-active {
+.foldout.ng-hide-add.ng-hide-active {
opacity:0;
}
diff --git a/docs/src/templates/index.html b/docs/src/templates/index.html
index 82a5c87e..3f3e83c8 100644
--- a/docs/src/templates/index.html
+++ b/docs/src/templates/index.html
@@ -43,6 +43,7 @@
addTag('script', {src: path('angular-cookies.js') }, sync);
addTag('script', {src: path('angular-sanitize.js') }, sync);
addTag('script', {src: path('angular-mobile.js') }, sync);
+ addTag('script', {src: path('angular-animate.js') }, sync);
addTag('script', {src: 'components/angular-bootstrap.js' }, sync);
addTag('script', {src: 'components/angular-bootstrap-prettify.js' }, sync);
addTag('script', {src: 'components/google-code-prettify.js' }, sync);
@@ -201,7 +202,7 @@
</header>
<div id="docs-fold-overlay" ng-show="docs_fold" ng-click="fold(null)"></div>
- <div id="docs-fold" ng-show="docs_fold" ng-animate="'fold'">
+ <div class="foldout" id="docs-fold" ng-show="docs_fold">
<div id="docs-fold-close" ng-click="fold(null)">
<span class="icon-remove-sign"></span>
</div>
@@ -283,21 +284,21 @@
<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 track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
+ <li ng-repeat="page in module.directives track by page.url" ng-class="navClass(page)" class="expand api-list-item">
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
</li>
<li class="nav-header section" ng-show="module.filters">
<a href="{{URL.filter}}" class="guide">filter</a>
</li>
- <li ng-repeat="page in module.filters track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
+ <li ng-repeat="page in module.filters track by page.url" ng-class="navClass(page)" class="expand api-list-item">
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
</li>
<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 track by service.instance.url" ng-animate="'expand'" ng-class="navClass(service.instance, service.provider)" class="api-list-item">
+ <li ng-repeat="service in module.services track by service.instance.url" ng-class="navClass(service.instance, service.provider)" class="api-list-item expand">
<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>
@@ -305,7 +306,7 @@
<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 track by page.url" ng-class="navClass(page)" ng-animate="'expand'" class="api-list-item">
+ <li ng-repeat="page in module.types track by page.url" ng-class="navClass(page)" class="expand api-list-item">
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
</li>
@@ -334,7 +335,7 @@
<div id="loading" ng-show="loading">Loading...</div>
- <div ng-hide="loading" ng-include src="currentPage.partialUrl" onload="afterPartialLoaded()" autoscroll class="content" ng-animate="{enter: 'slide-reveal'}" ></div>
+ <div ng-hide="loading" ng-include src="currentPage.partialUrl" onload="afterPartialLoaded()" autoscroll class="content slide-reveal"></div>
<div id="disqus" class="disqus">
<h2>Discussion</h2>
diff --git a/docs/src/templates/js/docs.js b/docs/src/templates/js/docs.js
index 7cac6a9a..05b09571 100644
--- a/docs/src/templates/js/docs.js
+++ b/docs/src/templates/js/docs.js
@@ -803,7 +803,7 @@ docsApp.controller.DocsController = function($scope, $location, $window, $cookie
};
-angular.module('docsApp', ['ngResource', 'ngRoute', 'ngCookies', 'ngSanitize', 'bootstrap', 'bootstrapPrettify', 'docsData']).
+angular.module('docsApp', ['ngResource', 'ngRoute', 'ngCookies', 'ngSanitize', 'ngAnimate', 'bootstrap', 'bootstrapPrettify', 'docsData']).
config(function($locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
}).
generated by cgit v1.2.3 (git 2.25.1) at 2025-11-01 17:18:58 +0000