Skip to content
This repository was archived by the owner on Jun 11, 2021. It is now read-only.

Commit

Permalink
added ignoreOnRoutes
Browse files Browse the repository at this point in the history
  • Loading branch information
@bergben
bergben committed Apr 26, 2017
1 parent 6c20d19 commit 430d4d4
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 89 deletions.
11 changes: 11 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,17 @@ By default the transition will take place on any route change. You can activate
```
onlyOnRoutes takes an array of strings, in the example above the transition would only happen on any route containing "blog" in the url.

### ignoreOnRoutes
By default the transition will take place on any route change. You can deactivate the transition for routes that contain one or more certain strings:
```html
<!-- my.component.html -->
<ng2-page-transition [ignoreOnRoutes]="['blog']">
<router-outlet></router-outlet>
Some other content
</ng2-page-transition>
```
ignoreOnRoutes takes an array of strings, in the example above the transition wouldn't be triggered on any route containing "blog" in the url.

### Custom transition
If you want a different animation than the default fade out and in then you can do that like so:
```html
Expand Down
110 changes: 55 additions & 55 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,56 @@
{
"name": "ng2-page-transition",
"version": "1.0.4",
"description": "Simple Angular2 component that creates a page transition animation on route changes",
"repository": {
"type": "git",
"url": "git+https://github.com/bergben/ng2-page-transition.git"
},
"license": "MIT",
"main": "./dist/bundles/ng2-page-transition.umd.js",
"module": "./dist/ng2-page-transition.js",
"typings": "./dist/ng2-page-transition.d.ts",
"scripts": {
"transpile": "ngc",
"package": "rollup -c",
"minify": "uglifyjs dist/bundles/ng2-page-transition.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/ng2-page-transition.umd.min.js",
"build": "npm run transpile && npm run package && npm run minify"
},
"author": {
"name": "Benedikt Berger",
"email": "benedikt.berger@live.de"
},
"keywords": [
"angular",
"angular2",
"page",
"transition",
"animation"
],
"peerDependencies": {
"@angular/router": "^3.0.0",
"@angular/core": "^2.0.0"
},
"devDependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "^2.4.8",
"@angular/compiler-cli": "^2.4.8",
"@angular/core": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/router": "3.4.8",
"@types/node": "^7.0.5",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rollup": "^0.41.4",
"rxjs": "5.1.1",
"tslint": "^4.4.2",
"typescript": "^2.1.6",
"uglify-js": "^2.7.5",
"zone.js": "^0.7.7"
},
"bugs": {
"url": "https://github.com/bergben/ng2-page-transition/issues"
},
"homepage": "https://github.com/bergben/ng2-page-transition#readme"
}
"name": "ng2-page-transition",
"version": "1.1.0",
"description": "Simple Angular2 component that creates a page transition animation on route changes",
"repository": {
"type": "git",
"url": "git+https://github.com/bergben/ng2-page-transition.git"
},
"license": "MIT",
"main": "./dist/bundles/ng2-page-transition.umd.js",
"module": "./dist/ng2-page-transition.js",
"typings": "./dist/ng2-page-transition.d.ts",
"scripts": {
"transpile": "ngc",
"package": "rollup -c",
"minify": "uglifyjs dist/bundles/ng2-page-transition.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/ng2-page-transition.umd.min.js",
"build": "npm run transpile && npm run package && npm run minify"
},
"author": {
"name": "Benedikt Berger",
"email": "benedikt.berger@live.de"
},
"keywords": [
"angular",
"angular2",
"page",
"transition",
"animation"
],
"peerDependencies": {
"@angular/router": "^3.0.0",
"@angular/core": "^2.0.0"
},
"devDependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "^2.4.8",
"@angular/compiler-cli": "^2.4.8",
"@angular/core": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/router": "3.4.8",
"@types/node": "^7.0.5",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rollup": "^0.41.4",
"rxjs": "5.1.1",
"tslint": "^4.4.2",
"typescript": "^2.1.6",
"uglify-js": "^2.7.5",
"zone.js": "^0.7.7"
},
"bugs": {
"url": "https://github.com/bergben/ng2-page-transition/issues"
},
"homepage": "https://github.com/bergben/ng2-page-transition#readme"
}
91 changes: 57 additions & 34 deletions src/ng2-page-transition.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { defaultPageTransition } from './default-transition.animation';
export class Ng2PageTransitionComponent{
@Input() scrollTop:boolean = true;
@Input() onlyOnRoutes:string[] = [""];
@Input() ignoreOnRoutes:string[] = [""];
@Input() animation: any = {
state: "leave",
custom: false,
Expand All @@ -19,43 +20,65 @@ export class Ng2PageTransitionComponent{
delayPromise:Promise<any>;
constructor(@Inject(forwardRef(() => Router)) private router: Router) {
this.animation.state = "leave";
router.events.subscribe((event) => {
for(let i=0;i<this.onlyOnRoutes.length;i++){
if(event.url && event.url.indexOf(this.onlyOnRoutes[i])>-1){
if (event instanceof NavigationStart) {
this.animation.state = "leave";
this.delayPromise = new Promise((resolve, reject) => {
window.setTimeout(()=>{
resolve(true);
}, this.animation.enterDelay);
}
);
}
else if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
if(typeof this.delayPromise !=="undefined"){
this.delayPromise.then(()=>{
this.animation.state = "out";
if(this.scrollTop){
window.scrollTo(0, 0);
}
setTimeout(()=>{
this.animation.state = "enter";
},0);
});
router.events.subscribe(event => this.routerSubscription(event));
}
private routerSubscription(event:any){
if(this.shouldTriggerForRoute(event.url)){
if (event instanceof NavigationStart) {
this.animation.state = "leave";
this.delayPromise = new Promise((resolve, reject) => {
window.setTimeout(()=>{
resolve(true);
}, this.animation.enterDelay);
}
else{
this.animation.state = "out";
if(this.scrollTop){
window.scrollTo(0, 0);
}
setTimeout(()=>{
this.animation.state = "enter";
},0);
);
}
else if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
if(typeof this.delayPromise !=="undefined"){
this.delayPromise.then(()=>{
this.animation.state = "out";
if(this.scrollTop){
window.scrollTo(0, 0);
}
setTimeout(()=>{
this.animation.state = "enter";
},0);
});
}
else{
this.animation.state = "out";
if(this.scrollTop){
window.scrollTo(0, 0);
}
}
return;
setTimeout(()=>{
this.animation.state = "enter";
},0);
}
}
});
}
}
private shouldTriggerForRoute(url:string):boolean{
return this.passesOnlyOnRoutes(url) && this.passesIgnoreOnRoutes(url);
}
private passesOnlyOnRoutes(url:string):boolean{
if(!url){
return false;
}
for(let i=0;i<this.onlyOnRoutes.length;i++){
if(url.indexOf(this.onlyOnRoutes[i])>-1){
return true;
}
}
return false;
}
private passesIgnoreOnRoutes(url:string):boolean{
if(!url){
return false;
}
let filteredRoutes=this.ignoreOnRoutes.filter(route => { return url.indexOf(route)>-1});
if(filteredRoutes.length && filteredRoutes.length>0){
return false;
}
return true;
}
}

0 comments on commit 430d4d4

Please sign in to comment.