diff --git a/.yo-rc.json b/.yo-rc.json index 27a0a4f..e1b1dc1 100644 --- a/.yo-rc.json +++ b/.yo-rc.json @@ -4,8 +4,8 @@ "authorName": "Tine Kondo", "authorEmail": "kondotine@gmail.com", "githubUsername": "tinesoft", - "githubRepoName": "ng-scrollreveal", - "projectName": "ng-scrollreveal", + "githubRepoName": "ngx-scrollreveal", + "projectName": "ngx-scrollreveal", "projectVersion": "2.2.0", "projectDescription": "Angular directives for ScrollReveal : a JavaScript library for easily animating elements as they enter/leave the viewport.", "projectKeywords": [ diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c64dc9..dcf4f37 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,71 +1,71 @@ -# [2.2.0](https://github.com/tinesoft/ng-scrollreveal/compare/v2.1.0...v2.2.0) (2017-11-22) +# [2.2.0](https://github.com/tinesoft/ngx-scrollreveal/compare/v2.1.0...v2.2.0) (2017-11-22) ### Features -* **packaging:** relax `peerDependencies` versions ([ccfcec2](https://github.com/tinesoft/ng-scrollreveal/commit/ccfcec2)) +* **packaging:** relax `peerDependencies` versions ([ccfcec2](https://github.com/tinesoft/ngx-scrollreveal/commit/ccfcec2)) -# [2.1.0](https://github.com/tinesoft/ng-scrollreveal/compare/0.6.1...v2.1.0) (2017-09-23) +# [2.1.0](https://github.com/tinesoft/ngx-scrollreveal/compare/0.6.1...v2.1.0) (2017-09-23) ### Features -* **uinversal:** add universal (server side rendering) support and update demo app ([6fac32b](https://github.com/tinesoft/ng-scrollreveal/commit/6fac32b)), closes [#50](https://github.com/tinesoft/ng-scrollreveal/issues/50) +* **uinversal:** add universal (server side rendering) support and update demo app ([6fac32b](https://github.com/tinesoft/ngx-scrollreveal/commit/6fac32b)), closes [#50](https://github.com/tinesoft/ngx-scrollreveal/issues/50) -## [2.0.3](https://github.com/tinesoft/ng-scrollreveal/compare/2.0.2...v2.0.3) (2017-06-08) +## [2.0.3](https://github.com/tinesoft/ngx-scrollreveal/compare/2.0.2...v2.0.3) (2017-06-08) ### Bug Fixes -* **config:** relax type of `config.container` into `Element | string` ([b8b56d0](https://github.com/tinesoft/ng-scrollreveal/commit/b8b56d0)), closes [#15](https://github.com/tinesoft/ng-scrollreveal/issues/15) +* **config:** relax type of `config.container` into `Element | string` ([b8b56d0](https://github.com/tinesoft/ngx-scrollreveal/commit/b8b56d0)), closes [#15](https://github.com/tinesoft/ngx-scrollreveal/issues/15) -## [2.0.2](https://github.com/tinesoft/ng-scrollreveal/compare/2.0.1...2.0.2) (2017-03-24) +## [2.0.2](https://github.com/tinesoft/ngx-scrollreveal/compare/2.0.1...2.0.2) (2017-03-24) ### Bug Fixes -* **peerDependencies:** remove 'angular-cli-ghpages' from peerDependencies (accidentally added since v2.0.0) ([141e133](https://github.com/tinesoft/ng-scrollreveal/commit/141e133)) +* **peerDependencies:** remove 'angular-cli-ghpages' from peerDependencies (accidentally added since v2.0.0) ([141e133](https://github.com/tinesoft/ngx-scrollreveal/commit/141e133)) -## [2.0.1](https://github.com/tinesoft/ng-scrollreveal/compare/2.0.0...2.0.1) (2017-03-24) +## [2.0.1](https://github.com/tinesoft/ngx-scrollreveal/compare/2.0.0...2.0.1) (2017-03-24) ### Bug Fixes -* **config:** export `NgsRevealConfig` service to allow global configuration ([a3c64cc](https://github.com/tinesoft/ng-scrollreveal/commit/a3c64cc)), closes [#6](https://github.com/tinesoft/ng-scrollreveal/issues/6) +* **config:** export `NgsRevealConfig` service to allow global configuration ([a3c64cc](https://github.com/tinesoft/ngx-scrollreveal/commit/a3c64cc)), closes [#6](https://github.com/tinesoft/ngx-scrollreveal/issues/6) -# [2.0.0](https://github.com/tinesoft/ng-scrollreveal/compare/1.0.1...2.0.0) (2017-03-08) +# [2.0.0](https://github.com/tinesoft/ngx-scrollreveal/compare/1.0.1...2.0.0) (2017-03-08) ### Code Refactoring -* **all:** move demo app to own folder and improve build tools ([504499b](https://github.com/tinesoft/ng-scrollreveal/commit/504499b)) +* **all:** move demo app to own folder and improve build tools ([504499b](https://github.com/tinesoft/ngx-scrollreveal/commit/504499b)) ### Features -* **all:** making @IgorMinar happy all the way (it's just angular!) ([061c648](https://github.com/tinesoft/ng-scrollreveal/commit/061c648)) +* **all:** making @IgorMinar happy all the way (it's just angular!) ([061c648](https://github.com/tinesoft/ngx-scrollreveal/commit/061c648)) ### BREAKING CHANGES -* **all:** rename UMD bundled file from `ng-scrollreveal.min.js` to `ng-scrollreveal.umd.js` -* **all:** rename package from `ng2-scrollreveal` to `ng-scrollreveal` to conform with new Angular Naming Guidelines. +* **all:** rename UMD bundled file from `ngx-scrollreveal.min.js` to `ngx-scrollreveal.umd.js` +* **all:** rename package from `ng2-scrollreveal` to `ngx-scrollreveal` to conform with new Angular Naming Guidelines. This only affect how you install and import the library (no actual breaking changes in code). @@ -82,16 +82,16 @@ import { NgsRevealModule } from 'ng2-scrollreveal'; After: ``` -npm install --save ng-scrollreveal +npm install --save ngx-scrollreveal ... -import { NgsRevealModule } from 'ng-scrollreveal'; +import { NgsRevealModule } from 'ngx-scrollreveal'; ``` -## [1.0.1](https://github.com/tinesoft/ng-scrollreveal/compare/1.0.0...1.0.1) (2016-11-27) +## [1.0.1](https://github.com/tinesoft/ngx-scrollreveal/compare/1.0.0...1.0.1) (2016-11-27) diff --git a/README.md b/README.md index 8245ba6..0a47157 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,20 @@ -# ng-scrollreveal - [Angular](http://angular.io/) directives for [ScrollReveal JS](https://scrollrevealjs.org/) +# ngx-scrollreveal - [Angular](http://angular.io/) directives for [ScrollReveal JS](https://scrollrevealjs.org/) -[![npm version](https://badge.fury.io/js/ng-scrollreveal.svg)](https://badge.fury.io/js/ng-scrollreveal) -[![Build Status](https://travis-ci.org/tinesoft/ng-scrollreveal.svg?branch=master)](https://travis-ci.org/tinesoft/ng-scrollreveal) -[![Coverage Status](https://coveralls.io/repos/github/tinesoft/ng-scrollreveal/badge.svg?branch=master)](https://coveralls.io/github/tinesoft/ng-scrollreveal?branch=master) -[![devDependency Status](https://david-dm.org/tinesoft/ng-scrollreveal/dev-status.svg?branch=master)](https://david-dm.org/tinesoft/ng-scrollreveal#info=devDependencies) -[![Greenkeeper Badge](https://badges.greenkeeper.io/tinesoft/ng-scrollreveal.svg)](https://greenkeeper.io/) +[![npm version](https://badge.fury.io/js/ngx-scrollreveal.svg)](https://badge.fury.io/js/ngx-scrollreveal) +[![Build Status](https://travis-ci.org/tinesoft/ngx-scrollreveal.svg?branch=master)](https://travis-ci.org/tinesoft/ngx-scrollreveal) +[![Coverage Status](https://coveralls.io/repos/github/tinesoft/ngx-scrollreveal/badge.svg?branch=master)](https://coveralls.io/github/tinesoft/ngx-scrollreveal?branch=master) +[![devDependency Status](https://david-dm.org/tinesoft/ngx-scrollreveal/dev-status.svg?branch=master)](https://david-dm.org/tinesoft/ngx-scrollreveal#info=devDependencies) +[![Greenkeeper Badge](https://badges.greenkeeper.io/tinesoft/ngx-scrollreveal.svg)](https://greenkeeper.io/) ScrollReveal JS is a great library that allows easy scroll animations for web and mobile browsers. ## Demo -View all the directives in action at https://tinesoft.github.io/ng-scrollreveal +View all the directives in action at https://tinesoft.github.io/ngx-scrollreveal ## Dependencies -* [Angular](https://angular.io) (*requires* Angular 6+, [v2.2.0](https://github.com/tinesoft/ng-scrollreveal/tree/v2.2.0) is the latest version for Angular < 6 ) +* [Angular](https://angular.io) (*requires* Angular 6+, [v2.2.0](https://github.com/tinesoft/ngx-scrollreveal/tree/v2.2.0) is the latest version for Angular < 6 ) * [ScrollReveal](https://scrollrevealjs.org) (*requires* ScrollReveal 4 or higher, tested with 4.0.2) ## Installation @@ -40,11 +40,11 @@ npm install --save scrollreveal ##### SystemJS >**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle. -In your systemjs config file, `map` needs to tell the System loader where to look for `ng-scrollreveal`: +In your systemjs config file, `map` needs to tell the System loader where to look for `ngx-scrollreveal`: ```ts map: { - 'ng-scrollreveal': 'node_modules/ng-scrollreveal/bundles/ng-scrollreveal.min.js', + 'ngx-scrollreveal': 'node_modules/ngx-scrollreveal/bundles/ngx-scrollreveal.min.js', } ``` @@ -69,20 +69,20 @@ In your index.html file, add script tag to load `scrollreveal` globally: --- -Now install `ng-scrollreveal` via: +Now install `ngx-scrollreveal` via: ```shell -npm install --save ng-scrollreveal +npm install --save ngx-scrollreveal ``` Once installed you need to import the main module: ```ts -import {NgsRevealModule} from 'ng-scrollreveal'; +import {NgsRevealModule} from 'ngx-scrollreveal'; ``` ```ts -import {NgsRevealModule} from 'ng-scrollreveal'; +import {NgsRevealModule} from 'ngx-scrollreveal'; @NgModule({ declarations: [AppComponent, ...], @@ -184,7 +184,7 @@ You can inject the config service, typically in your root component, and customi ```ts import {Component} from '@angular/core'; -import {NgsRevealConfig} from 'ng-scrollreveal'; +import {NgsRevealConfig} from 'ngx-scrollreveal'; @Component({ selector: 'app-root', @@ -194,7 +194,7 @@ import {NgsRevealConfig} from 'ng-scrollreveal'; }) export class AppComponent { constructor(config: NgsRevealConfig) { - // customize default values of ng-scrollreveal directives used by this component tree + // customize default values of ngx-scrollreveal directives used by this component tree config.duration = 5000; config.easing = 'cubic-bezier(0.645, 0.045, 0.355, 1)'; @@ -212,7 +212,7 @@ You can now subscribe to some events triggered by `ScrollReveal` before/after an ```ts import { Component, OnInit, OnDestroy } from '@angular/core'; -import { NgsRevealService } from 'ng-scrollreveal'; +import { NgsRevealService } from 'ngx-scrollreveal'; @Component({ selector: 'app-root', @@ -259,4 +259,4 @@ export class AppComponent implements OnInit, OnDestroy{ ## Credits -`ng-scrollreveal` is built upon [ScrollReveal JS](https://scrollrevealjs.org) by **Julian Lloyd**. Thanks to him for the great work! +`ngx-scrollreveal` is built upon [ScrollReveal JS](https://scrollrevealjs.org) by **Julian Lloyd**. Thanks to him for the great work! diff --git a/demo/README.md b/demo/README.md index 1e6edbe..4f6c747 100644 --- a/demo/README.md +++ b/demo/README.md @@ -1,4 +1,4 @@ -# ng-scrollreveal-demo +# ngx-scrollreveal-demo This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.0. diff --git a/demo/angular.json b/demo/angular.json index 69d2a17..0b48abc 100644 --- a/demo/angular.json +++ b/demo/angular.json @@ -3,7 +3,7 @@ "version": 1, "newProjectRoot": "projects", "projects": { - "ng-scrollreveal-demo": { + "ngx-scrollreveal-demo": { "root": "", "sourceRoot": "src", "projectType": "application", @@ -60,23 +60,23 @@ "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { - "browserTarget": "ng-scrollreveal-demo:build", + "browserTarget": "ngx-scrollreveal-demo:build", "hmrWarning": false }, "configurations": { "production": { - "browserTarget": "ng-scrollreveal-demo:build:production" + "browserTarget": "ngx-scrollreveal-demo:build:production" }, "hmr": { "hmr": true, - "browserTarget": "ng-scrollreveal-demo:build:hmr" + "browserTarget": "ngx-scrollreveal-demo:build:hmr" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { - "browserTarget": "ng-scrollreveal-demo:build" + "browserTarget": "ngx-scrollreveal-demo:build" } }, "test": { @@ -118,7 +118,7 @@ } } }, - "ng-scrollreveal-demo-e2e": { + "ngx-scrollreveal-demo-e2e": { "root": "e2e/", "projectType": "application", "architect": { @@ -126,7 +126,7 @@ "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "ng-scrollreveal-demo:serve" + "devServerTarget": "ngx-scrollreveal-demo:serve" } }, "lint": { @@ -141,5 +141,5 @@ } } }, - "defaultProject": "ng-scrollreveal-demo" + "defaultProject": "ngx-scrollreveal-demo" } \ No newline at end of file diff --git a/demo/e2e/src/app.e2e-spec.ts b/demo/e2e/src/app.e2e-spec.ts index 2ef56ac..1f2d3f8 100644 --- a/demo/e2e/src/app.e2e-spec.ts +++ b/demo/e2e/src/app.e2e-spec.ts @@ -1,6 +1,6 @@ import { NgScrollrevealDemoPage } from './app.po'; -describe('ng-scrollreveal-demo App', () => { +describe('ngx-scrollreveal-demo App', () => { let page: NgScrollrevealDemoPage; beforeEach(() => { diff --git a/demo/package.json b/demo/package.json index 9b3bcf8..6e1fd36 100644 --- a/demo/package.json +++ b/demo/package.json @@ -1,8 +1,8 @@ { - "name": "ng-scrollreveal-demo", + "name": "ngx-scrollreveal-demo", "version": "0.0.0", "license": "MIT", - "description": "Demo app for ng-scrollreveal", + "description": "Demo app for ngx-scrollreveal", "scripts": { "ng": "ng", "start": "ng serve", @@ -10,7 +10,7 @@ "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", - "postinstall": "npm link ng-scrollreveal" + "postinstall": "npm link ngx-scrollreveal" }, "private": true, "dependencies": { diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts index 10d6ba3..33580ea 100644 --- a/demo/src/app/app.component.ts +++ b/demo/src/app/app.component.ts @@ -3,7 +3,7 @@ import { Router, NavigationEnd, RouterEvent } from '@angular/router'; import { isPlatformBrowser } from '@angular/common'; import { filter } from 'rxjs/operators'; import { Subscription } from 'rxjs'; -import { NgsRevealService } from 'ng-scrollreveal'; +import { NgsRevealService } from 'ngx-scrollreveal'; @Component({ selector: 'app-root', diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts index 7d03749..3c729d1 100644 --- a/demo/src/app/app.module.ts +++ b/demo/src/app/app.module.ts @@ -18,7 +18,7 @@ import { AppComponent } from './app.component'; // Add .withServerTransition() to support Universal rendering. // The application ID can be any identifier which is unique on // the page. - BrowserModule.withServerTransition({ appId: 'ng-scrollreveal-demo-id' }), + BrowserModule.withServerTransition({ appId: 'ngx-scrollreveal-demo-id' }), TransferHttpCacheModule, FormsModule, HttpModule, diff --git a/demo/src/app/getting-started/getting-started.component.html b/demo/src/app/getting-started/getting-started.component.html index 94f7c3a..7e24058 100644 --- a/demo/src/app/getting-started/getting-started.component.html +++ b/demo/src/app/getting-started/getting-started.component.html @@ -25,23 +25,23 @@
-Note:If you are using
+In your systemjs config file,SystemJS
, you should adjust your configuration to point to the UMD bundle. -In your systemjs config file,map
needs to tell the System loader where to look forng-scrollreveal
:map
needs to tell the System loader where to look forngx-scrollreveal
:
+map:'ng-scrollreveal': 'node_modules/ng-scrollreveal/bundles/ng-scrollreveal.min.js'
map:'ngx-scrollreveal': 'node_modules/ngx-scrollreveal/bundles/ngx-scrollreveal.min.js'
In your systemjs config file, meta
needs to tell the System loader how to load scrollreveal
:
meta:'./node_modules/scrollreveal/dist/scrollreveal.min.js':format: 'amd'
In your index.html file, add script tag to load scrollreveal
globally:
<!-- 1 Configure SystemJS --><script src="system.config.js"></script><!-- 2 Add scrollreveal dependency--><script src="node_modules/scrollreveal/dist/scrollreveal.min.js"></script>
Now install ng-scrollreveal
via:
Now install ngx-scrollreveal
via:
npm install --save ng-scrollreveal
Once installed you need to import the main module:
-+;
;
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice NgsRevealModule.forRoot()
):
+;@
;@
Other modules in your application can simply import NgsRevealModule
:
+;@
;@
The library is composed of two main directives: ngsReveal
and ngsRevealSet
.
You can inject the config service, typically in your root component, and customize the values of its properties in order to provide default values for all the ng-reveal directives used in the application.
-+;;@{{ '{' }}// customize default values of ng-scrollreveal directives used by this component treeconfigduration = 5000;configeasing = 'cubic-bezier(0.645, 0.045, 0.355, 1)';//other options here}
;;@{{ '{' }}// customize default values of ngx-scrollreveal directives used by this component treeconfigduration = 5000;configeasing = 'cubic-bezier(0.645, 0.045, 0.355, 1)';//other options here}
ng-scrollreveal
is built upon ScrollReveal JS by Julian Lloyd. Thanks to him for the great work!
ngx-scrollreveal
is built upon ScrollReveal JS by Julian Lloyd. Thanks to him for the great work!
Angular 2+ directives for ScrollReveal JS: easy scroll animations library for mobile and web browsers.
Scroll down to see it in action!