angular-scroll-animate
Version:
An Angular.js directive which allows you to perform any javascript actions (in the controller, or on the element) when an element is scrolled into, or out of, the users viewport, without any other dependencies.
220 lines (176 loc) • 9.38 kB
HTML
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" ng-app="docsApp" lang="en" ng-controller="DocsController"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" ng-app="docsApp" lang="en" ng-controller="DocsController"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" ng-app="docsApp" lang="en" ng-controller="DocsController"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" ng-app="docsApp" lang="en" ng-controller="DocsController"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="Description"
content="AngularJS is what HTML would have been, had it been designed for building web-apps.
Declarative templates with data-binding, MVC, dependency injection and great
testability story all implemented with pure client-side JavaScript!">
<meta name="fragment" content="!">
<title ng-bind-template="Angular Scroll Animate: {{partialTitle}}">Docs</title>
<script type="text/javascript">
// dynamically add base tag as well as css and javascript files.
// we can't add css/js the usual way, because some browsers (FF) eagerly prefetch resources
// before the base attribute is added, causing 404 and terribly slow loading of the docs app.
(function() {
var indexFile = (location.pathname.match(/\/(index[^\.]*\.html)/) || ['', ''])[1],
origin, baseUrl, rUrl = /(#!\/|api|index[^\.]*\.html).*$/,
headEl = document.getElementsByTagName('head')[0],
sync = true;
if (location.href.slice(0, 7) == 'file://') {
baseUrl = location.href.replace(rUrl, indexFile);
} else {
origin = location.origin || (window.location.protocol + "//" + window.location.hostname +
(window.location.port ? ':' + window.location.port: ''));
baseUrl = origin + location.href.substr(origin.length).replace(rUrl, indexFile);
}
addTag('base', {href: baseUrl});
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/prettify.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'});
addTag('script', {src: 'js/google-code-prettify.js'}, sync);
addTag('script', {src: 'js/marked.js'}, sync);
addTag('script', {src: 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js'}, sync);
addTag('script', {src: '../dist/angular-scroll-animate.js'}, sync);
addTag('script', {src: 'js/angular-bootstrap.js'}, sync);
addTag('script', {src: 'js/angular-bootstrap-prettify.js'}, sync);
addTag('script', {src: 'js/docs-setup.js'}, sync);
addTag('script', {src: 'js/docs.js'}, sync);
function addTag(name, attributes, sync) {
var el = document.createElement(name),
attrName;
for (attrName in attributes) {
el.setAttribute(attrName, attributes[attrName]);
}
sync ? document.write(outerHTML(el)) : headEl.appendChild(el);
}
function outerHTML(node){
// if IE, Chrome take the internal method otherwise build one
return node.outerHTML || (
function(n){
var div = document.createElement('div'), h;
div.appendChild(n);
h = div.innerHTML;
div = null;
return h;
})(node);
}
})();
</script>
</head>
<body>
<header class="header">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand">Angular Scroll Animate</a>
<ul class="nav">
<li ng-repeat="(url, name) in sections" ng-class="{active: isActivePath(url)}">
<a ng-href="{{url}}"><i class="icon-book icon-white"></i> {{name}}</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<div role="main" class="container">
<div class="row clear-navbar"></div>
<div class="row">
<div class="span12">
<!--[if lt IE 7]>
<p class="alert alert-error">Your browser is <em>ancient!</em>
<a href="http://browsehappy.com/">Upgrade to a different browser</a> or
<a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to
experience this site.
</p>
<![endif]-->
<!--[if lt IE 9]>
<div class="alert">
You are using an old version of Internet Explorer.
For better and safer browsing experience please <a href="http://www.microsoft.com/IE9">upgrade IE</a>
or install <a href="http://google.com/chrome">Google Chrome browser</a>.
</div>
<![endif]-->
</div>
</div>
<div class="row">
<div class="span3">
<form class="form-search" ng-submit="submitForm()">
<input type="text" ng-model="search" placeholder="search the docs"
tabindex="1" accesskey="s" class="search-query">
<div class="spacer"></div>
<ul class="nav nav-list well" ng-show="pages.length">
<li ng-repeat="page in pages track by page.url" ng-class="navClass(page)" class="api-list-item expand">
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
</li>
</ul>
<ul class="nav nav-list well" ng-repeat="module in modules track by module.url" class="api-list-item">
<li class="nav-header module">
<a class="guide">module</a>
<a class="code" href="{{module.url}}" title="{{module.name}}">{{module.name}}</a>
</li>
<li ng-repeat="page in module.others track by page.url" ng-class="navClass(page)" class="api-list-item expand">
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
</li>
<li class="nav-header section" ng-show="module.directives.length">
<a class="guide">directive</a>
</li>
<li ng-repeat="page in module.directives track by page.url" ng-class="navClass(page)" class="api-list-item expand">
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
</li>
<li class="nav-header section" ng-show="module.controllers.length">
<a class="guide">controller</a>
</li>
<li ng-repeat="page in module.controllers track by page.url" ng-class="navClass(page)" class="api-list-item expand">
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
</li>
<li class="nav-header section" ng-show="module.filters.length">
<a class="guide">filter</a>
</li>
<li ng-repeat="page in module.filters track by page.url" ng-class="navClass(page)" class="api-list-item expand">
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
</li>
<li class="nav-header section" ng-show="module.services.length">
<a class="guide">service</a>
</li>
<li ng-repeat="service in module.services track by (service.instance.url || service.provider.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 ? service.instance.url : service.provider.url}}" tabindex="2">{{service.name}}</a>
</li>
<li class="nav-header section" ng-show="module.types.length">
<a class="guide">Types</a>
</li>
<li ng-repeat="page in module.types track by page.url" ng-class="navClass(page)" class="api-list-item expand">
<a href="{{page.url}}" tabindex="2">{{page.shortName}}</a>
</li>
<li class="nav-header section" ng-show="module.globals.length">
<a class="global guide">global APIs</a>
</li>
<li ng-repeat="page in module.globals track by page.url" ng-class="navClass(page)" class="api-list-item expand">
<a href="{{page.url}}" tabindex="2">{{page.id}}</a>
</li>
</ul>
</form>
</div>
<div class="span9">
<ul class="breadcrumb">
<li ng-repeat="crumb in breadcrumb">
<span ng-hide="crumb.url">{{crumb.name}}</span>
<a ng-show="crumb.url" href="{{crumb.url}}">{{crumb.name}}</a>
<span ng-show="crumb.url" class="divider">/</span>
</li>
</ul>
<div id="loading" ng-show="loading">Loading...</div>
<div ng-hide="loading" ng-include src="currentPage.partialUrl" onload="afterPartialLoaded()" autoscroll class="content slide-reveal"></div>
</div>
</div>
</div>
</body>
</html>