A simple Angular 4+ plugin enabling you to smooth scroll to any element on your page and enhance scroll-based features in your app. Works for Angular 4+ , both AoT and SSR . No dependencies.
-
You've reached your destination.
@@ -171,8 +171,8 @@ Besides scrolling to a specific element, it is also possible to scroll a given o
```html
+ ngxScrollTo
+ [ngxScrollToOffset]="200">
Go down 200 pixels
```
@@ -189,22 +189,22 @@ Besides scrolling to a specific element, it is also possible to scroll a given o
**my.service.ts**
-```js
+```typescript
import { Injectable } from '@angular/core';
import { ScrollToService, ScrollToConfigOptions } from '@nicky-lenaers/ngx-scroll-to';
@Injectable()
export class MyService {
- constructor(private _scrollToService: ScrollToService) { }
+ constructor(private scrollToService: ScrollToService) { }
- public triggerScrollTo() {
+ triggerScrollTo() {
const config: ScrollToConfigOptions = {
target: 'destination'
};
- this._scrollToService.scrollTo(config);
+ this.scrollToService.scrollTo(config);
}
}
```
@@ -219,43 +219,43 @@ Just like with the Directive, the Service can be used to scroll to an offset onl
**my.service.ts**
-```js
+```typescript
import { Injectable } from '@angular/core';
import { ScrollToService, ScrollToConfigOptions } from '@nicky-lenaers/ngx-scroll-to';
@Injectable()
export class MyService {
- constructor(private _scrollToService: ScrollToService) { }
+ constructor(private scrollToService: ScrollToService) { }
- public triggerScrollToOffsetOnly(offset: number = 0) {
+ triggerScrollToOffsetOnly(offset: number = 0) {
const config: ScrollToConfigOptions = {
offset
};
- this._scrollToService.scrollTo(config);
+ this.scrollToService.scrollTo(config);
}
}
```
## Advanced Usage - Directive
**my.component.ts**
-```js
+```typescript
import { ScrollToAnimationEasing, ScrollToEvent, ScrollToOffsetMap } from '@nicky-lenaers/ngx-scroll-to';
@Component({
- selector: 'my-component'
+ selector: 'my-component',
templateUrl: './my.component.html'
})
export class MyComponent {
- public ngxScrollToDestination: string;
- public ngxScrollToEvent: ScrollToEvent;
- public ngxScrollToDuration: number;
- public ngxScrollToEasing: ScrollToAnimationEasing;
- public ngxScrollToOffset: number;
- public ngxScrollToOffsetMap: ScrollToOffsetMap;
+ ngxScrollToDestination: string;
+ ngxScrollToEvent: ScrollToEvent;
+ ngxScrollToDuration: number;
+ ngxScrollToEasing: ScrollToAnimationEasing;
+ ngxScrollToOffset: number;
+ ngxScrollToOffsetMap: ScrollToOffsetMap;
constructor() {
@@ -273,7 +273,7 @@ export class MyComponent {
}
- public toggleDestination() {
+ toggleDestination() {
this.ngxScrollToDestination = this.ngxScrollToDestination === 'destination-1' ? 'destination-2' : 'destination-1';
}
}
@@ -285,12 +285,12 @@ export class MyComponent {
Toggle Destination
+ [ngxScrollTo]="ngxScrollToDestination"
+ [ngxScrollToEvent]="ngxScrollToEvent"
+ [ngxScrollToDuration]="ngxScrollToDuration"
+ [ngxScrollToEasing]="ngxScrollToEasing"
+ [ngxScrollToOffset]="ngxScrollToOffset"
+ [ngxScrollToOffsetMap]="ngxScrollToOffsetMap">
Go to destination
@@ -317,16 +317,16 @@ export class MyComponent {
**my.service.ts**
-```js
+```typescript
import { Injectable } from '@angular/core';
import { ScrollToService, ScrollToConfigOptions } from '@nicky-lenaers/ngx-scroll-to';
@Injectable()
export class MyService {
- constructor(private _scrollToService: ScrollToService) { }
+ constructor(private scrollToService: ScrollToService) { }
- public triggerScrollTo() {
+ triggerScrollTo() {
/**
* @see NOTE:1
@@ -339,13 +339,13 @@ export class MyService {
offset: 20
};
- this._scrollToService.scrollTo(config);
+ this.scrollToService.scrollTo(config);
}
}
```
**NOTE:1**
-*The `container` property is an optional property. By default, `ngx-scroll-to` searches for the first scrollable parent `HTMLElement` with respect to the specified `target`. This should suffice in most cases. However, if multiple scrollable parents reside in the DOM tree, you have the degree of freedom the specify a specific container by using the `container` property, as used in the above example.*
+*The `container` property is an optional property. By default, `ngxScrollTo` searches for the first scrollable parent `HTMLElement` with respect to the specified `target`. This should suffice in most cases. However, if multiple scrollable parents reside in the DOM tree, you have the degree of freedom the specify a specific container by using the `container` property, as used in the above example.*
## Directive Attributes Map
@@ -360,27 +360,27 @@ export class MyService {
''
- ngx-scroll-to-event ngxScrollToEvent ScrollToEventclick
- ngx-scroll-to-duration ngxScrollToDuration number650
- ngx-scroll-to-easing ngxScrollToEasing ScrollToAnimationEasingeaseInOutQuad
- ngx-scroll-to-offset ngxScrollToOffset number0
- ngx-scroll-to-offset-map ngxScrollToOffsetMap ScrollToOffsetMapnew Map()
@@ -390,18 +390,18 @@ export class MyService {
In some occasions, one might misspell a target or container selector string. Even though `ngx-scoll-to` will not be able to initiate the scrolling animation, you can catch the internally generated error and handle it as you please on the `Observable` chain returned from the `scrollTo` method.
**faulty.service.ts**
-```js
+```typescript
import { Injectable } from '@angular/core';
import { ScrollToService } from '@nicky-lenaers/ngx-scroll-to';
@Injectable()
export class FaultyService {
- constructor(private _scrollToService: ScrollToService) { }
+ constructor(private scrollToService: ScrollToService) { }
- public triggerScrollTo() {
+ triggerScrollTo() {
- this._scrollToService
+ this.scrollToService
.scrollTo({
target: 'faulty-id'
})
@@ -414,10 +414,10 @@ export class FaultyService {
```
## Directive Attribute Map Details
-#### {
+ return browser.get(browser.baseUrl) as Promise;
+ }
+
+ getTitleText(): Promise {
+ return element(by.css('app-root .content span')).getText() as Promise;
+ }
+}
diff --git a/e2e/tsconfig.e2e.json b/projects/ngx-scroll-to-demo/e2e/tsconfig.json
similarity index 63%
rename from e2e/tsconfig.e2e.json
rename to projects/ngx-scroll-to-demo/e2e/tsconfig.json
index 1d9e5ed..bc240fb 100644
--- a/e2e/tsconfig.e2e.json
+++ b/projects/ngx-scroll-to-demo/e2e/tsconfig.json
@@ -1,8 +1,7 @@
{
- "extends": "../tsconfig.json",
+ "extends": "../../../tsconfig.json",
"compilerOptions": {
- "outDir": "../out-tsc/e2e",
- "baseUrl": "./",
+ "outDir": "../../../out-tsc/e2e",
"module": "commonjs",
"target": "es5",
"types": [
diff --git a/karma.conf.js b/projects/ngx-scroll-to-demo/karma.conf.js
similarity index 68%
rename from karma.conf.js
rename to projects/ngx-scroll-to-demo/karma.conf.js
index 8893c95..0195b9f 100644
--- a/karma.conf.js
+++ b/projects/ngx-scroll-to-demo/karma.conf.js
@@ -4,30 +4,29 @@
module.exports = function (config) {
config.set({
basePath: '',
- frameworks: ['jasmine', '@angular/cli'],
+ frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
- require('@angular/cli/plugins/karma')
+ require('@angular-devkit/build-angular/plugins/karma')
],
- client:{
+ client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
- reports: [ 'html', 'lcovonly' ],
+ dir: require('path').join(__dirname, '../../coverage/ngx-scroll-to-demo'),
+ reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
- angularCli: {
- environment: 'dev'
- },
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
- singleRun: true
+ singleRun: false,
+ restartOnFileChange: true
});
};
diff --git a/src/app/+container-offset/container-offset-routing.module.ts b/projects/ngx-scroll-to-demo/src/app/+container-offset/container-offset-routing.module.ts
similarity index 100%
rename from src/app/+container-offset/container-offset-routing.module.ts
rename to projects/ngx-scroll-to-demo/src/app/+container-offset/container-offset-routing.module.ts
diff --git a/src/app/+container-offset/container-offset.component.html b/projects/ngx-scroll-to-demo/src/app/+container-offset/container-offset.component.html
similarity index 100%
rename from src/app/+container-offset/container-offset.component.html
rename to projects/ngx-scroll-to-demo/src/app/+container-offset/container-offset.component.html
diff --git a/src/app/+container-offset/container-offset.component.scss b/projects/ngx-scroll-to-demo/src/app/+container-offset/container-offset.component.scss
similarity index 100%
rename from src/app/+container-offset/container-offset.component.scss
rename to projects/ngx-scroll-to-demo/src/app/+container-offset/container-offset.component.scss
diff --git a/src/app/+container-offset/container-offset.component.ts b/projects/ngx-scroll-to-demo/src/app/+container-offset/container-offset.component.ts
similarity index 96%
rename from src/app/+container-offset/container-offset.component.ts
rename to projects/ngx-scroll-to-demo/src/app/+container-offset/container-offset.component.ts
index 8fe9257..4ced78d 100644
--- a/src/app/+container-offset/container-offset.component.ts
+++ b/projects/ngx-scroll-to-demo/src/app/+container-offset/container-offset.component.ts
@@ -2,7 +2,7 @@ import { AfterViewInit, Component, ElementRef, VERSION, ViewChild } from '@angul
import { ScrollToConfigOptions, ScrollToService } from '@nicky-lenaers/ngx-scroll-to';
@Component({
- selector: 'ngx-container-offset',
+ selector: 'app-container-offset',
templateUrl: './container-offset.component.html',
styleUrls: ['./container-offset.component.scss']
})
diff --git a/src/app/+container-offset/container-offset.module.ts b/projects/ngx-scroll-to-demo/src/app/+container-offset/container-offset.module.ts
similarity index 100%
rename from src/app/+container-offset/container-offset.module.ts
rename to projects/ngx-scroll-to-demo/src/app/+container-offset/container-offset.module.ts
diff --git a/src/app/+container-target/container-target-routing.module.ts b/projects/ngx-scroll-to-demo/src/app/+container-target/container-target-routing.module.ts
similarity index 100%
rename from src/app/+container-target/container-target-routing.module.ts
rename to projects/ngx-scroll-to-demo/src/app/+container-target/container-target-routing.module.ts
diff --git a/src/app/+container-target/container-target.component.html b/projects/ngx-scroll-to-demo/src/app/+container-target/container-target.component.html
similarity index 100%
rename from src/app/+container-target/container-target.component.html
rename to projects/ngx-scroll-to-demo/src/app/+container-target/container-target.component.html
diff --git a/src/app/+container-target/container-target.component.scss b/projects/ngx-scroll-to-demo/src/app/+container-target/container-target.component.scss
similarity index 89%
rename from src/app/+container-target/container-target.component.scss
rename to projects/ngx-scroll-to-demo/src/app/+container-target/container-target.component.scss
index a37d56f..59ede70 100644
--- a/src/app/+container-target/container-target.component.scss
+++ b/projects/ngx-scroll-to-demo/src/app/+container-target/container-target.component.scss
@@ -3,10 +3,6 @@
position: relative;
}
-#hero {
- margin-top: 100vh;
-}
-
#another-scroll-container {
background-color: lightgray;
diff --git a/src/app/+container-target/container-target.component.ts b/projects/ngx-scroll-to-demo/src/app/+container-target/container-target.component.ts
similarity index 67%
rename from src/app/+container-target/container-target.component.ts
rename to projects/ngx-scroll-to-demo/src/app/+container-target/container-target.component.ts
index f12cbf7..810db03 100644
--- a/src/app/+container-target/container-target.component.ts
+++ b/projects/ngx-scroll-to-demo/src/app/+container-target/container-target.component.ts
@@ -3,17 +3,18 @@ import { ScrollToService } from '@nicky-lenaers/ngx-scroll-to';
/** Container Target Component */
@Component({
- selector: 'ngx-container-target',
+ selector: 'app-container-target',
templateUrl: './container-target.component.html',
styleUrls: ['./container-target.component.scss']
})
export class ContainerTargetComponent {
- constructor(private _scrollToService: ScrollToService) { }
+ constructor(private scrollToService: ScrollToService) {
+ }
- public scrollToElementInAnotherContainer(container, event) {
+ scrollToElementInAnotherContainer(container, event) {
- const sub = this._scrollToService.scrollTo({
+ const sub = this.scrollToService.scrollTo({
container: '#another-scroll-container',
target: 'another-scroll-container-destination',
easing: 'easeOutElastic',
@@ -22,8 +23,9 @@ export class ContainerTargetComponent {
sub.subscribe(
value => console.log(value),
- err => { throw new Error(err); }
+ err => {
+ throw new Error(err);
+ }
);
}
-
}
diff --git a/src/app/+container-target/container-target.module.ts b/projects/ngx-scroll-to-demo/src/app/+container-target/container-target.module.ts
similarity index 100%
rename from src/app/+container-target/container-target.module.ts
rename to projects/ngx-scroll-to-demo/src/app/+container-target/container-target.module.ts
diff --git a/src/app/+home/home-routing.module.ts b/projects/ngx-scroll-to-demo/src/app/+home/home-routing.module.ts
similarity index 100%
rename from src/app/+home/home-routing.module.ts
rename to projects/ngx-scroll-to-demo/src/app/+home/home-routing.module.ts
diff --git a/projects/ngx-scroll-to-demo/src/app/+home/home.component.html b/projects/ngx-scroll-to-demo/src/app/+home/home.component.html
new file mode 100644
index 0000000..ebe6b85
--- /dev/null
+++ b/projects/ngx-scroll-to-demo/src/app/+home/home.component.html
@@ -0,0 +1,11 @@
+Go
+
+ You've reached your destination.
+
diff --git a/src/app/+home/home.component.scss b/projects/ngx-scroll-to-demo/src/app/+home/home.component.scss
similarity index 100%
rename from src/app/+home/home.component.scss
rename to projects/ngx-scroll-to-demo/src/app/+home/home.component.scss
diff --git a/src/app/+home/home.component.ts b/projects/ngx-scroll-to-demo/src/app/+home/home.component.ts
similarity index 80%
rename from src/app/+home/home.component.ts
rename to projects/ngx-scroll-to-demo/src/app/+home/home.component.ts
index fb7d1bd..2a549e3 100644
--- a/src/app/+home/home.component.ts
+++ b/projects/ngx-scroll-to-demo/src/app/+home/home.component.ts
@@ -2,14 +2,14 @@ import { Component, OnInit } from '@angular/core';
/** Home Component */
@Component({
- selector: 'ngx-home',
+ selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
- public visible = false;
- public offsetMap;
+ visible = false;
+ offsetMap;
constructor() {
this.offsetMap = new Map();
@@ -20,8 +20,7 @@ export class HomeComponent implements OnInit {
ngOnInit() {
}
- public show() {
+ show() {
this.visible = true;
}
-
}
diff --git a/src/app/+home/home.module.ts b/projects/ngx-scroll-to-demo/src/app/+home/home.module.ts
similarity index 100%
rename from src/app/+home/home.module.ts
rename to projects/ngx-scroll-to-demo/src/app/+home/home.module.ts
diff --git a/src/app/+offset-only/offset-only-routing.module.ts b/projects/ngx-scroll-to-demo/src/app/+offset-only/offset-only-routing.module.ts
similarity index 100%
rename from src/app/+offset-only/offset-only-routing.module.ts
rename to projects/ngx-scroll-to-demo/src/app/+offset-only/offset-only-routing.module.ts
diff --git a/src/app/+offset-only/offset-only.component.html b/projects/ngx-scroll-to-demo/src/app/+offset-only/offset-only.component.html
similarity index 80%
rename from src/app/+offset-only/offset-only.component.html
rename to projects/ngx-scroll-to-demo/src/app/+offset-only/offset-only.component.html
index 283a462..b038ffe 100644
--- a/src/app/+offset-only/offset-only.component.html
+++ b/projects/ngx-scroll-to-demo/src/app/+offset-only/offset-only.component.html
@@ -1,7 +1,7 @@
+ ngxScrollTo
+ [ngxScrollToEasing]="'easeOutElastic'"
+ [ngxScrollToOffset]="50">
Scroll To Offset Only - Directive
diff --git a/src/app/+offset-only/offset-only.component.scss b/projects/ngx-scroll-to-demo/src/app/+offset-only/offset-only.component.scss
similarity index 100%
rename from src/app/+offset-only/offset-only.component.scss
rename to projects/ngx-scroll-to-demo/src/app/+offset-only/offset-only.component.scss
diff --git a/src/app/+offset-only/offset-only.component.ts b/projects/ngx-scroll-to-demo/src/app/+offset-only/offset-only.component.ts
similarity index 64%
rename from src/app/+offset-only/offset-only.component.ts
rename to projects/ngx-scroll-to-demo/src/app/+offset-only/offset-only.component.ts
index 0c44c9b..d675bf2 100644
--- a/src/app/+offset-only/offset-only.component.ts
+++ b/projects/ngx-scroll-to-demo/src/app/+offset-only/offset-only.component.ts
@@ -3,24 +3,25 @@ import { ScrollToService } from '@nicky-lenaers/ngx-scroll-to';
/** Offset Only Component */
@Component({
- selector: 'ngx-offset-only',
+ selector: 'app-offset-only',
templateUrl: './offset-only.component.html',
styleUrls: ['./offset-only.component.scss']
})
export class OffsetOnlyComponent {
- constructor(private _scrollToService: ScrollToService) { }
+ constructor(private scrollToService: ScrollToService) {
+ }
- public scrollToOffsetOnly(offset: number = 0) {
- this._scrollToService.scrollTo({
+ scrollToOffsetOnly(offset: number = 0) {
+ this.scrollToService.scrollTo({
easing: 'easeOutElastic',
duration: 1000,
offset
});
}
- public scrollToOffsetOnlyInContainer() {
- this._scrollToService.scrollTo({
+ scrollToOffsetOnlyInContainer() {
+ this.scrollToService.scrollTo({
container: '#scrollable-container',
easing: 'easeInOutQuart',
offset: 300
diff --git a/src/app/+offset-only/offset-only.module.ts b/projects/ngx-scroll-to-demo/src/app/+offset-only/offset-only.module.ts
similarity index 100%
rename from src/app/+offset-only/offset-only.module.ts
rename to projects/ngx-scroll-to-demo/src/app/+offset-only/offset-only.module.ts
diff --git a/src/app/app-routing.module.ts b/projects/ngx-scroll-to-demo/src/app/app-routing.module.ts
similarity index 54%
rename from src/app/app-routing.module.ts
rename to projects/ngx-scroll-to-demo/src/app/app-routing.module.ts
index 7b3d1c5..5c70199 100644
--- a/src/app/app-routing.module.ts
+++ b/projects/ngx-scroll-to-demo/src/app/app-routing.module.ts
@@ -4,19 +4,19 @@ import { RouterModule, Routes } from '@angular/router';
export const routes: Routes = [
{
path: 'home',
- loadChildren: './+home/home.module#HomeModule'
+ loadChildren: () => import('./+home/home.module').then(m => m.HomeModule)
},
{
path: 'container-target',
- loadChildren: './+container-target/container-target.module#ContainerTargetModule'
+ loadChildren: () => import('./+container-target/container-target.module').then(m => m.ContainerTargetModule)
},
{
path: 'container-offset',
- loadChildren: './+container-offset/container-offset.module#ContainerOffsetModule'
+ loadChildren: () => import('./+container-offset/container-offset.module').then(m => m.ContainerOffsetModule)
},
{
path: 'offset-only',
- loadChildren: './+offset-only/offset-only.module#OffsetOnlyModule'
+ loadChildren: () => import('./+offset-only/offset-only.module').then(m => m.OffsetOnlyModule)
},
{
path: '**',
diff --git a/projects/ngx-scroll-to-demo/src/app/app.component.html b/projects/ngx-scroll-to-demo/src/app/app.component.html
new file mode 100644
index 0000000..a4bbd48
--- /dev/null
+++ b/projects/ngx-scroll-to-demo/src/app/app.component.html
@@ -0,0 +1,21 @@
+
+
{{ title }} app is running!
+
+
+
+
+
+
+
ScrollTo
+ NgxScrollToDemo
(id: string): T;
+ };
+};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
@@ -28,5 +23,3 @@ getTestBed().initTestEnvironment(
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
-// Finally, start Karma to run the tests.
-__karma__.start();
diff --git a/projects/ngx-scroll-to-demo/tsconfig.app.json b/projects/ngx-scroll-to-demo/tsconfig.app.json
new file mode 100644
index 0000000..011b2e0
--- /dev/null
+++ b/projects/ngx-scroll-to-demo/tsconfig.app.json
@@ -0,0 +1,19 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../out-tsc/app",
+ "types": [],
+ "paths": {
+ "@nicky-lenaers/ngx-scroll-to": [
+ "projects/ngx-scroll-to/src/public-api.ts"
+ ]
+ }
+ },
+ "files": [
+ "src/main.ts",
+ "src/polyfills.ts"
+ ],
+ "include": [
+ "src/**/*.d.ts"
+ ]
+}
diff --git a/projects/ngx-scroll-to-demo/tsconfig.spec.json b/projects/ngx-scroll-to-demo/tsconfig.spec.json
new file mode 100644
index 0000000..a8ce1d3
--- /dev/null
+++ b/projects/ngx-scroll-to-demo/tsconfig.spec.json
@@ -0,0 +1,18 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../out-tsc/spec",
+ "types": [
+ "jasmine",
+ "node"
+ ]
+ },
+ "files": [
+ "src/test.ts",
+ "src/polyfills.ts"
+ ],
+ "include": [
+ "src/**/*.spec.ts",
+ "src/**/*.d.ts"
+ ]
+}
diff --git a/projects/ngx-scroll-to-demo/tslint.json b/projects/ngx-scroll-to-demo/tslint.json
new file mode 100644
index 0000000..19e8161
--- /dev/null
+++ b/projects/ngx-scroll-to-demo/tslint.json
@@ -0,0 +1,17 @@
+{
+ "extends": "../../tslint.json",
+ "rules": {
+ "directive-selector": [
+ true,
+ "attribute",
+ "app",
+ "camelCase"
+ ],
+ "component-selector": [
+ true,
+ "element",
+ "app",
+ "kebab-case"
+ ]
+ }
+}
diff --git a/projects/ngx-scroll-to/karma.conf.js b/projects/ngx-scroll-to/karma.conf.js
index 4c5f8d0..5f56c9f 100644
--- a/projects/ngx-scroll-to/karma.conf.js
+++ b/projects/ngx-scroll-to/karma.conf.js
@@ -16,8 +16,8 @@ module.exports = function (config) {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
- dir: require('path').join(__dirname, '../../coverage'),
- reports: ['html', 'lcovonly'],
+ dir: require('path').join(__dirname, '../../coverage/ngx-scroll-to'),
+ reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
@@ -26,6 +26,7 @@ module.exports = function (config) {
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
- singleRun: false
+ singleRun: false,
+ restartOnFileChange: true
});
};
diff --git a/projects/ngx-scroll-to/ng-package.json b/projects/ngx-scroll-to/ng-package.json
index fcd8948..1cb31c9 100644
--- a/projects/ngx-scroll-to/ng-package.json
+++ b/projects/ngx-scroll-to/ng-package.json
@@ -2,6 +2,6 @@
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ngx-scroll-to",
"lib": {
- "entryFile": "src/public_api.ts"
+ "entryFile": "src/public-api.ts"
}
}
\ No newline at end of file
diff --git a/projects/ngx-scroll-to/package.json b/projects/ngx-scroll-to/package.json
index b33f3bb..b8118ea 100644
--- a/projects/ngx-scroll-to/package.json
+++ b/projects/ngx-scroll-to/package.json
@@ -1,10 +1,7 @@
{
"name": "@nicky-lenaers/ngx-scroll-to",
"description": "A simple Angular 4+ plugin enabling you to smooth scroll to any element on your page and enhance scroll-based features in your app.",
- "version": "3.0.1",
- "scripts": {
- "build": "ng build"
- },
+ "version": "9.0.0",
"license": "MIT",
"private": false,
"keywords": [
@@ -28,7 +25,12 @@
"angular 5",
"angular6",
"angular 6",
- "angular 7"
+ "angular7",
+ "angular 7",
+ "angular8",
+ "angular 8",
+ "angular9",
+ "angular 9"
],
"author": {
"name": "Nicky Lenaers",
@@ -52,7 +54,8 @@
"npm": ">=6.0.0"
},
"peerDependencies": {
- "@angular/common": "^8.0.0",
- "@angular/core": "^8.0.0"
+ "@angular/common": "^8.0.0 || ^9.0.0",
+ "@angular/core": "^8.0.0 || ^9.0.0",
+ "tslib": "^1.10.0"
}
}
diff --git a/projects/ngx-scroll-to/src/lib/scroll-to-animation.ts b/projects/ngx-scroll-to/src/lib/scroll-to-animation.ts
index e9d8f73..3138e90 100644
--- a/projects/ngx-scroll-to/src/lib/scroll-to-animation.ts
+++ b/projects/ngx-scroll-to/src/lib/scroll-to-animation.ts
@@ -1,99 +1,96 @@
import { Observable, ReplaySubject } from 'rxjs';
import { EASING } from './scroll-to-helpers';
-import {
- ScrollToConfigOptions,
- ScrollToListenerTarget
-} from './scroll-to-config.interface';
+import { ScrollToConfigOptions, ScrollToListenerTarget } from './scroll-to-config.interface';
/** Scroll To Animation */
export class ScrollToAnimation {
/** Number of milliseconds for each Tick */
- private _tick: number;
+ private tick: number;
/** Interval */
- private _interval: any;
+ private interval: any;
/** Time Lapsed in milliseconds */
- private _timeLapsed: number;
+ private timeLapsed: number;
/** Percentage of time lapsed */
- private _percentage: number;
+ private percentage: number;
/** Position of the Element */
- private _position: number;
+ private position: number;
/** Last Element Position */
- private _lastPosition: number;
+ private lastPosition: number;
/** Start Position of the Element */
- private _startPosition: number;
+ private startPosition: number;
/** The Distance to scroll */
- private _distance: number;
+ private distance: number;
/** Observable Source */
- private _source$: ReplaySubject;
+ private source$: ReplaySubject;
/** Scroll Top of the Window */
- private _windowScrollTop: number;
+ private windowScrollTop: number;
/** Mapped Offset taken from the active Offset Map */
- private _mappedOffset: number;
+ private mappedOffset: number;
/**
* Class Constructor.
*
- * @param _container The Container
- * @param _listenerTarget The Element that listens for DOM Events
- * @param _isWindow Whether or not the listener is the Window
- * @param _to Position to scroll to
- * @param _options Additional options for scrolling
- * @param _isBrowser Whether or not execution runs in the browser
+ * @param container The Container
+ * @param listenerTarget The Element that listens for DOM Events
+ * @param isWindow Whether or not the listener is the Window
+ * @param to Position to scroll to
+ * @param options Additional options for scrolling
+ * @param isBrowser Whether or not execution runs in the browser
* (as opposed to the server)
*/
constructor(
- private _container: HTMLElement,
- private _listenerTarget: ScrollToListenerTarget,
- private readonly _isWindow: boolean,
- private readonly _to: number,
- private readonly _options: ScrollToConfigOptions,
- private _isBrowser: boolean
+ private container: HTMLElement,
+ private listenerTarget: ScrollToListenerTarget,
+ private readonly isWindow: boolean,
+ private readonly to: number,
+ private readonly options: ScrollToConfigOptions,
+ private isBrowser: boolean
) {
- this._tick = 16;
- this._interval = null;
- this._lastPosition = null;
- this._timeLapsed = 0;
+ this.tick = 16;
+ this.interval = null;
+ this.lastPosition = null;
+ this.timeLapsed = 0;
- this._windowScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+ this.windowScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
- if (!this._container) {
- this._startPosition = this._windowScrollTop;
+ if (!this.container) {
+ this.startPosition = this.windowScrollTop;
} else {
- this._startPosition = this._isWindow ? this._windowScrollTop : this._container.scrollTop;
+ this.startPosition = this.isWindow ? this.windowScrollTop : this.container.scrollTop;
}
// Correction for Starting Position of nested HTML Elements
- if (this._container && !this._isWindow) {
- this._to = this._to - this._container.getBoundingClientRect().top + this._startPosition;
+ if (this.container && !this.isWindow) {
+ this.to = this.to - this.container.getBoundingClientRect().top + this.startPosition;
}
// Set Distance
- const directionalDistance = this._startPosition - this._to;
- this._distance = this._container ? Math.abs(this._startPosition - this._to) : this._to;
+ const directionalDistance = this.startPosition - this.to;
+ this.distance = this.container ? Math.abs(this.startPosition - this.to) : this.to;
- this._mappedOffset = this._options.offset;
+ this.mappedOffset = this.options.offset;
// Set offset from Offset Map
- if (this._isBrowser) {
- this._options
+ if (this.isBrowser) {
+ this.options
.offsetMap
- .forEach((value, key) => this._mappedOffset = window.innerWidth > key ? value : this._mappedOffset);
+ .forEach((value, key) => this.mappedOffset = window.innerWidth > key ? value : this.mappedOffset);
}
- this._distance += this._mappedOffset * (directionalDistance <= 0 ? 1 : -1);
- this._source$ = new ReplaySubject();
+ this.distance += this.mappedOffset * (directionalDistance <= 0 ? 1 : -1);
+ this.source$ = new ReplaySubject();
}
/**
@@ -101,45 +98,45 @@ export class ScrollToAnimation {
*
* @returns Observable containing a number
*/
- public start(): Observable {
- clearInterval(this._interval);
- this._interval = setInterval(this._loop, this._tick);
- return this._source$.asObservable();
+ start(): Observable {
+ clearInterval(this.interval);
+ this.interval = setInterval(this.loop, this.tick);
+ return this.source$.asObservable();
+ }
+
+ /**
+ * Stop the current Scroll Animation Loop.
+ *
+ * @param force Force to stop the Animation Loop
+ * @returns Void
+ */
+ stop(): void {
+ clearInterval(this.interval);
+ this.interval = null;
+ this.source$.complete();
}
/** Recursively loop over the Scroll Animation */
- private _loop = (): void => {
+ private loop = (): void => {
- this._timeLapsed += this._tick;
- this._percentage = (this._timeLapsed / this._options.duration);
- this._percentage = (this._percentage > 1) ? 1 : this._percentage;
+ this.timeLapsed += this.tick;
+ this.percentage = (this.timeLapsed / this.options.duration);
+ this.percentage = (this.percentage > 1) ? 1 : this.percentage;
// Position Update
- this._position = this._startPosition +
- ((this._startPosition - this._to <= 0 ? 1 : -1) *
- this._distance *
- EASING[this._options.easing](this._percentage));
+ this.position = this.startPosition +
+ ((this.startPosition - this.to <= 0 ? 1 : -1) *
+ this.distance *
+ EASING[this.options.easing](this.percentage));
- if (this._lastPosition !== null && this._position === this._lastPosition) {
+ if (this.lastPosition !== null && this.position === this.lastPosition) {
this.stop();
} else {
- this._source$.next(this._position);
- this._isWindow
- ? this._listenerTarget.scrollTo(0, Math.floor(this._position))
- : this._container.scrollTop = Math.floor(this._position);
- this._lastPosition = this._position;
+ this.source$.next(this.position);
+ this.isWindow
+ ? this.listenerTarget.scrollTo(0, Math.floor(this.position))
+ : this.container.scrollTop = Math.floor(this.position);
+ this.lastPosition = this.position;
}
}
-
- /**
- * Stop the current Scroll Animation Loop.
- *
- * @param force Force to stop the Animation Loop
- * @returns Void
- */
- public stop(): void {
- clearInterval(this._interval);
- this._interval = null;
- this._source$.complete();
- }
}
diff --git a/projects/ngx-scroll-to/src/lib/scroll-to.directive.spec.ts b/projects/ngx-scroll-to/src/lib/scroll-to.directive.spec.ts
index 1bb43c6..cb3645d 100644
--- a/projects/ngx-scroll-to/src/lib/scroll-to.directive.spec.ts
+++ b/projects/ngx-scroll-to/src/lib/scroll-to.directive.spec.ts
@@ -1,13 +1,12 @@
-import { async, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
-import { ComponentFixture } from '@angular/core/testing';
import { ScrollToModule } from './scroll-to.module';
import { ScrollToDirective } from './scroll-to.directive';
import { ScrollToService } from './scroll-to.service';
-import { EVENTS, DEFAULTS } from './scroll-to-helpers';
-import { DummyComponent, TARGET, BUTTON_ID } from '../test/test-dummy.component';
+import { DEFAULTS, EVENTS } from './scroll-to-helpers';
+import { BUTTON_ID, DummyComponent, TARGET } from '../test/test-dummy.component';
import { ScrollToServiceMock } from '../test/test-mock.service';
-import { createTestComponent, CompileTemplateConfigOptions } from '../test/test-helpers';
+import { CompileTemplateConfigOptions, createTestComponent } from '../test/test-helpers';
import { ScrollToEvent } from './scroll-to-event.interface';
describe('ScrollToDirective', () => {
@@ -41,7 +40,7 @@ describe('ScrollToDirective', () => {
it('should have default values', fakeAsync(() => {
const fixture: ComponentFixture = TestBed.createComponent(DummyComponent);
- const service: ScrollToService = TestBed.get(ScrollToService);
+ const service: ScrollToService = TestBed.inject(ScrollToService);
const component: DummyComponent = fixture.componentInstance;
component.ngOnInit();
@@ -69,12 +68,12 @@ describe('ScrollToDirective', () => {
it(`should handle a '${event}' event`, fakeAsync(() => {
- const template_config: CompileTemplateConfigOptions = {
+ const templateConfig: CompileTemplateConfigOptions = {
target: TARGET
};
- const fixture: ComponentFixture = createTestComponent(DummyComponent, template_config, event);
- const service: ScrollToService = TestBed.get(ScrollToService);
+ const fixture: ComponentFixture = createTestComponent(DummyComponent, templateConfig, event);
+ const service: ScrollToService = TestBed.inject(ScrollToService);
const component: DummyComponent = fixture.componentInstance;
component.ngOnInit();
diff --git a/projects/ngx-scroll-to/src/lib/scroll-to.directive.ts b/projects/ngx-scroll-to/src/lib/scroll-to.directive.ts
index 224fc75..74cd073 100644
--- a/projects/ngx-scroll-to/src/lib/scroll-to.directive.ts
+++ b/projects/ngx-scroll-to/src/lib/scroll-to.directive.ts
@@ -1,56 +1,41 @@
-import {
- Directive,
- Input,
- ElementRef,
- Renderer2,
- AfterViewInit
-} from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, Input, Renderer2 } from '@angular/core';
-import {
- DEFAULTS,
- EVENTS
-} from './scroll-to-helpers';
-import {
- ScrollToConfigOptions,
- ScrollToOffsetMap,
- ScrollToTarget
-} from './scroll-to-config.interface';
-import {
- ScrollToAnimationEasing
-} from './scroll-to-easing.interface';
+import { DEFAULTS, EVENTS } from './scroll-to-helpers';
+import { ScrollToConfigOptions, ScrollToOffsetMap, ScrollToTarget } from './scroll-to-config.interface';
+import { ScrollToAnimationEasing } from './scroll-to-easing.interface';
import { ScrollToEvent } from './scroll-to-event.interface';
import { ScrollToService } from './scroll-to.service';
-/* tslint:disable */
@Directive({
- selector: '[ngx-scroll-to]'
+ selector: '[ngxScrollTo]'
})
export class ScrollToDirective implements AfterViewInit {
- @Input('ngx-scroll-to')
- public ngxScrollTo: ScrollToTarget = DEFAULTS.target;
+ @Input()
+ ngxScrollTo: ScrollToTarget = DEFAULTS.target;
- @Input('ngx-scroll-to-event')
- public ngxScrollToEvent: ScrollToEvent = DEFAULTS.action;
+ @Input()
+ ngxScrollToEvent: ScrollToEvent = DEFAULTS.action;
- @Input('ngx-scroll-to-duration')
- public ngxScrollToDuration: number = DEFAULTS.duration;
+ @Input()
+ ngxScrollToDuration: number = DEFAULTS.duration;
- @Input('ngx-scroll-to-easing')
- public ngxScrollToEasing: ScrollToAnimationEasing = DEFAULTS.easing;
+ @Input()
+ ngxScrollToEasing: ScrollToAnimationEasing = DEFAULTS.easing;
- @Input('ngx-scroll-to-offset')
- public ngxScrollToOffset: number = DEFAULTS.offset;
+ @Input()
+ ngxScrollToOffset: number = DEFAULTS.offset;
- @Input('ngx-scroll-to-offset-map')
- public ngxScrollToOffsetMap: ScrollToOffsetMap = DEFAULTS.offsetMap;
+ @Input()
+ ngxScrollToOffsetMap: ScrollToOffsetMap = DEFAULTS.offsetMap;
- private _options: ScrollToConfigOptions;
+ private options: ScrollToConfigOptions;
constructor(
- private _elementRef: ElementRef,
- private _scrollToService: ScrollToService,
- private _renderer2: Renderer2) { }
+ private elementRef: ElementRef,
+ private scrollToService: ScrollToService,
+ private renderer2: Renderer2) {
+ }
/**
* Angular Lifecycle Hook - After View Init
@@ -59,16 +44,18 @@ export class ScrollToDirective implements AfterViewInit {
*
* @returns void
*/
- public ngAfterViewInit(): void {
+ ngAfterViewInit(): void {
// Test Event Support
- if (EVENTS.indexOf(this.ngxScrollToEvent) === -1) throw new Error(`Unsupported Event '${this.ngxScrollToEvent}'`);
+ if (EVENTS.indexOf(this.ngxScrollToEvent) === -1) {
+ throw new Error(`Unsupported Event '${this.ngxScrollToEvent}'`);
+ }
// Listen for the trigger...
- this._renderer2.listen(this._elementRef.nativeElement, this.ngxScrollToEvent,
+ this.renderer2.listen(this.elementRef.nativeElement, this.ngxScrollToEvent,
(event: Event) => {
- this._options = {
+ this.options = {
target: this.ngxScrollTo,
duration: this.ngxScrollToDuration,
easing: this.ngxScrollToEasing,
@@ -76,7 +63,7 @@ export class ScrollToDirective implements AfterViewInit {
offsetMap: this.ngxScrollToOffsetMap
};
- this._scrollToService.scrollTo(this._options);
+ this.scrollToService.scrollTo(this.options);
});
}
}
diff --git a/projects/ngx-scroll-to/src/lib/scroll-to.module.ts b/projects/ngx-scroll-to/src/lib/scroll-to.module.ts
index 3b9e32c..9cc44d1 100644
--- a/projects/ngx-scroll-to/src/lib/scroll-to.module.ts
+++ b/projects/ngx-scroll-to/src/lib/scroll-to.module.ts
@@ -18,7 +18,7 @@ export class ScrollToModule {
*
* @return An Angular Module with Providers
*/
- static forRoot(): ModuleWithProviders {
+ static forRoot(): ModuleWithProviders {
return {
ngModule: ScrollToModule,
providers: [
diff --git a/projects/ngx-scroll-to/src/lib/scroll-to.service.spec.ts b/projects/ngx-scroll-to/src/lib/scroll-to.service.spec.ts
index 1f2d72d..154a69e 100644
--- a/projects/ngx-scroll-to/src/lib/scroll-to.service.spec.ts
+++ b/projects/ngx-scroll-to/src/lib/scroll-to.service.spec.ts
@@ -23,7 +23,7 @@ describe('ScrollToService', () => {
]
});
- service = TestBed.get(ScrollToService);
+ service = TestBed.inject(ScrollToService);
}));
it('should be created', () => {
diff --git a/projects/ngx-scroll-to/src/lib/scroll-to.service.ts b/projects/ngx-scroll-to/src/lib/scroll-to.service.ts
index 32f171b..e76b407 100644
--- a/projects/ngx-scroll-to/src/lib/scroll-to.service.ts
+++ b/projects/ngx-scroll-to/src/lib/scroll-to.service.ts
@@ -1,23 +1,9 @@
-import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { isPlatformBrowser } from '@angular/common';
-
-import {
- ScrollToConfigOptions,
- ScrollToTarget,
- ScrollToListenerTarget,
- ScrollToConfigOptionsTarget
-} from './scroll-to-config.interface';
+import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+
+import { ScrollToConfigOptions, ScrollToConfigOptionsTarget, ScrollToListenerTarget, ScrollToTarget } from './scroll-to-config.interface';
import { ScrollToAnimation } from './scroll-to-animation';
-import {
- stripHash,
- isString,
- isNumber,
- isElementRef,
- isWindow,
- DEFAULTS,
- isNativeElement
-} from './scroll-to-helpers';
+import { DEFAULTS, isElementRef, isNativeElement, isNumber, isString, isWindow, stripHash } from './scroll-to-helpers';
import { Observable, ReplaySubject, throwError } from 'rxjs';
/**
@@ -36,26 +22,26 @@ export class ScrollToService {
* allows for usage of e.g. `start` and `stop`
* methods within this Angular Service.
*/
- private _animation: ScrollToAnimation;
+ private animation: ScrollToAnimation;
/**
* Interruptive Events allow to scrolling animation
* to be interrupted before it is finished. The list
* of Interruptive Events represents those.
*/
- private _interruptiveEvents: string[];
+ private interruptiveEvents: string[];
/**
* Construct and setup required paratemeters.
*
- * @param _document A Reference to the Document
- * @param _platformId Angular Platform ID
+ * @param document A Reference to the Document
+ * @param platformId Angular Platform ID
*/
constructor(
- @Inject(DOCUMENT) private _document: any,
- @Inject(PLATFORM_ID) private _platformId: any
+ @Inject(DOCUMENT) private document: any,
+ @Inject(PLATFORM_ID) private platformId: any
) {
- this._interruptiveEvents = ['mousewheel', 'DOMMouseScroll', 'touchstart'];
+ this.interruptiveEvents = ['mousewheel', 'DOMMouseScroll', 'touchstart'];
}
/**
@@ -65,16 +51,18 @@ export class ScrollToService {
* by means of `*ngIf`, but ought to be scrolled to eventually.
*
* @todo type 'any' in Observable should become custom type like 'ScrollToEvent' (base class), see issue comment:
- * - https://github.com/nicky-lenaers/ngx-scroll-to/issues/10#issuecomment-317198481
+ * - https://github.com/nicky-lenaers/ngx-scroll-to/issues/10#issuecomment-317198481
*
* @param options Configuration Object
* @returns Observable
*/
- public scrollTo(options: ScrollToConfigOptions): Observable {
+ scrollTo(options: ScrollToConfigOptions): Observable {
- if (!isPlatformBrowser(this._platformId)) return new ReplaySubject().asObservable();
+ if (!isPlatformBrowser(this.platformId)) {
+ return new ReplaySubject().asObservable();
+ }
- return this._start(options);
+ return this.start(options);
}
/**
@@ -85,7 +73,7 @@ export class ScrollToService {
* @param options Configuration Object
* @returns Observable
*/
- private _start(options: ScrollToConfigOptions): Observable {
+ private start(options: ScrollToConfigOptions): Observable {
// Merge config with default values
const mergedConfigOptions = {
@@ -93,15 +81,21 @@ export class ScrollToService {
...options
} as ScrollToConfigOptionsTarget;
- if (this._animation) this._animation.stop();
+ if (this.animation) {
+ this.animation.stop();
+ }
- const targetNode = this._getNode(mergedConfigOptions.target);
- if (mergedConfigOptions.target && !targetNode) return throwError('Unable to find Target Element');
+ const targetNode = this.getNode(mergedConfigOptions.target);
+ if (mergedConfigOptions.target && !targetNode) {
+ return throwError('Unable to find Target Element');
+ }
- const container: HTMLElement = this._getContainer(mergedConfigOptions, targetNode);
- if (mergedConfigOptions.container && !container) return throwError('Unable to find Container Element');
+ const container: HTMLElement = this.getContainer(mergedConfigOptions, targetNode);
+ if (mergedConfigOptions.container && !container) {
+ return throwError('Unable to find Container Element');
+ }
- const listenerTarget = this._getListenerTarget(container) || window;
+ const listenerTarget = this.getListenerTarget(container) || window;
let to = container ? container.getBoundingClientRect().top : 0;
@@ -112,20 +106,20 @@ export class ScrollToService {
}
// Create Animation
- this._animation = new ScrollToAnimation(
+ this.animation = new ScrollToAnimation(
container,
listenerTarget,
isWindow(listenerTarget),
to,
mergedConfigOptions,
- isPlatformBrowser(this._platformId)
+ isPlatformBrowser(this.platformId)
);
- const onInterrupt = () => this._animation.stop();
- this._addInterruptiveEventListeners(listenerTarget, onInterrupt);
+ const onInterrupt = () => this.animation.stop();
+ this.addInterruptiveEventListeners(listenerTarget, onInterrupt);
// Start Animation
- const animation$ = this._animation.start();
- this._subscribeToAnimation(animation$, listenerTarget, onInterrupt);
+ const animation$ = this.animation.start();
+ this.subscribeToAnimation(animation$, listenerTarget, onInterrupt);
return animation$;
}
@@ -140,17 +134,19 @@ export class ScrollToService {
* @param onInterrupt The handler for Interruptive Events
* @returns Void
*/
- private _subscribeToAnimation(
+ private subscribeToAnimation(
animation$: Observable,
listenerTarget: ScrollToListenerTarget,
onInterrupt: EventListenerOrEventListenerObject
) {
const subscription = animation$
.subscribe(
- () => { },
- () => { },
() => {
- this._removeInterruptiveEventListeners(this._interruptiveEvents, listenerTarget, onInterrupt);
+ },
+ () => {
+ },
+ () => {
+ this.removeInterruptiveEventListeners(this.interruptiveEvents, listenerTarget, onInterrupt);
subscription.unsubscribe();
}
);
@@ -162,16 +158,15 @@ export class ScrollToService {
*
* @param options The Merged Configuration Object
* @param targetNode the targeted HTMLElement
- * @returns
*/
- private _getContainer(options: ScrollToConfigOptions, targetNode: HTMLElement): HTMLElement | null {
+ private getContainer(options: ScrollToConfigOptions, targetNode: HTMLElement): HTMLElement | null {
let container: HTMLElement | null = null;
if (options.container) {
- container = this._getNode(options.container, true);
+ container = this.getNode(options.container, true);
} else if (targetNode) {
- container = this._getFirstScrollableParent(targetNode);
+ container = this.getFirstScrollableParent(targetNode);
}
return container;
@@ -186,15 +181,17 @@ export class ScrollToService {
* @param handler Handler for when the listener fires
* @returns Void
*/
- private _addInterruptiveEventListeners(
+ private addInterruptiveEventListeners(
listenerTarget: ScrollToListenerTarget,
handler: EventListenerOrEventListenerObject): void {
- if (!listenerTarget) listenerTarget = window;
+ if (!listenerTarget) {
+ listenerTarget = window;
+ }
- this._interruptiveEvents
+ this.interruptiveEvents
.forEach(event => listenerTarget
- .addEventListener(event, handler, this._supportPassive() ? { passive: true } : false));
+ .addEventListener(event, handler, this.supportPassive() ? {passive: true} : false));
}
/**
@@ -202,19 +199,20 @@ export class ScrollToService {
*
* @returns Whether or not passive event listeners are supported
*/
- private _supportPassive(): boolean {
+ private supportPassive(): boolean {
let supportsPassive = false;
try {
const opts = Object.defineProperty({}, 'passive', {
- get: function () {
+ get: () => {
supportsPassive = true;
}
});
window.addEventListener('testPassive', null, opts);
window.removeEventListener('testPassive', null, opts);
- } catch (e) { }
+ } catch (e) {
+ }
return supportsPassive;
}
@@ -230,12 +228,14 @@ export class ScrollToService {
* @param handler Handler for when the listener fires
* @returns Void
*/
- private _removeInterruptiveEventListeners(
+ private removeInterruptiveEventListeners(
events: string[],
listenerTarget: ScrollToListenerTarget,
handler: EventListenerOrEventListenerObject): void {
- if (!listenerTarget) listenerTarget = window;
+ if (!listenerTarget) {
+ listenerTarget = window;
+ }
events.forEach(event => listenerTarget.removeEventListener(event, handler));
}
@@ -248,24 +248,31 @@ export class ScrollToService {
* @param nativeElement The Element to search the DOM Tree upwards from
* @returns The first scrollable parent HTML Element
*/
- private _getFirstScrollableParent(nativeElement: HTMLElement): HTMLElement {
+ private getFirstScrollableParent(nativeElement: HTMLElement): HTMLElement {
let style: CSSStyleDeclaration = window.getComputedStyle(nativeElement);
const overflowRegex: RegExp = /(auto|scroll|overlay)/;
- if (style.position === 'fixed') return null;
-
- for (let parent = nativeElement; parent = parent.parentElement; null) {
+ if (style.position === 'fixed') {
+ return null;
+ }
+ let parent = nativeElement;
+ while (parent.parentElement) {
+ parent = parent.parentElement;
style = window.getComputedStyle(parent);
if (style.position === 'absolute'
|| style.overflow === 'hidden'
- || style.overflowY === 'hidden') continue;
+ || style.overflowY === 'hidden') {
+ continue;
+ }
if (overflowRegex.test(style.overflow + style.overflowY)
- || parent.tagName === 'BODY') return parent;
+ || parent.tagName === 'BODY') {
+ return parent;
+ }
}
return null;
@@ -280,18 +287,18 @@ export class ScrollToService {
* considered a valid Target Node
* @returns The Target Node to scroll to
*/
- private _getNode(id: ScrollToTarget, allowBodyTag: boolean = false): HTMLElement {
+ private getNode(id: ScrollToTarget, allowBodyTag: boolean = false): HTMLElement {
let targetNode: HTMLElement;
if (isString(id)) {
if (allowBodyTag && (id === 'body' || id === 'BODY')) {
- targetNode = this._document.body;
+ targetNode = this.document.body;
} else {
- targetNode = this._document.getElementById(stripHash(id));
+ targetNode = this.document.getElementById(stripHash(id));
}
} else if (isNumber(id)) {
- targetNode = this._document.getElementById(String(id));
+ targetNode = this.document.getElementById(String(id));
} else if (isElementRef(id)) {
targetNode = id.nativeElement;
} else if (isNativeElement(id)) {
@@ -310,9 +317,11 @@ export class ScrollToService {
* @param container The HTML Container element
* @returns The Listener Target to attach events on
*/
- private _getListenerTarget(container: HTMLElement): ScrollToListenerTarget {
- if (!container) return null;
- return this._isDocumentBody(container) ? window : container;
+ private getListenerTarget(container: HTMLElement): ScrollToListenerTarget {
+ if (!container) {
+ return null;
+ }
+ return this.isDocumentBody(container) ? window : container;
}
/**
@@ -322,7 +331,7 @@ export class ScrollToService {
* @returns Whether or not the Element is the
* Document Body Element
*/
- private _isDocumentBody(element: HTMLElement): element is HTMLBodyElement {
+ private isDocumentBody(element: HTMLElement): element is HTMLBodyElement {
return element.tagName.toUpperCase() === 'BODY';
}
}
diff --git a/projects/ngx-scroll-to/src/public-api.ts b/projects/ngx-scroll-to/src/public-api.ts
new file mode 100644
index 0000000..ad62c24
--- /dev/null
+++ b/projects/ngx-scroll-to/src/public-api.ts
@@ -0,0 +1,9 @@
+/*
+ * Public API Surface of ngx-scroll-to
+ */
+
+export * from './lib/scroll-to-config.interface';
+export * from './lib/scroll-to-easing.interface';
+export * from './lib/scroll-to.directive';
+export * from './lib/scroll-to.module';
+export * from './lib/scroll-to.service';
diff --git a/projects/ngx-scroll-to/src/public_api.ts b/projects/ngx-scroll-to/src/public_api.ts
deleted file mode 100644
index 4fb83bb..0000000
--- a/projects/ngx-scroll-to/src/public_api.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { ScrollToConfigOptions, ScrollToOffsetMap } from './lib/scroll-to-config.interface';
-export { ScrollToAnimationEasing } from './lib/scroll-to-easing.interface';
-export { ScrollToDirective } from './lib/scroll-to.directive';
-export { ScrollToModule } from './lib/scroll-to.module';
-export { ScrollToService } from './lib/scroll-to.service';
diff --git a/projects/ngx-scroll-to/src/test.ts b/projects/ngx-scroll-to/src/test.ts
index e11ff1c..303b32a 100644
--- a/projects/ngx-scroll-to/src/test.ts
+++ b/projects/ngx-scroll-to/src/test.ts
@@ -1,6 +1,5 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
@@ -9,7 +8,12 @@ import {
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
-declare const require: any;
+declare const require: {
+ context(path: string, deep?: boolean, filter?: RegExp): {
+ keys(): string[];
+ (id: string): T;
+ };
+};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
diff --git a/projects/ngx-scroll-to/src/test/test-dummy.component.ts b/projects/ngx-scroll-to/src/test/test-dummy.component.ts
index 1a270ec..80b4a00 100644
--- a/projects/ngx-scroll-to/src/test/test-dummy.component.ts
+++ b/projects/ngx-scroll-to/src/test/test-dummy.component.ts
@@ -4,7 +4,6 @@ export const TARGET = 'destination';
export const BUTTON_ID = 'btn-1';
/** Dummy Component for testing the Angular Directive */
-/* tslint:disable */
@Component({
selector: 'ngx-scroll-to',
styles: [`
@@ -13,7 +12,7 @@ export const BUTTON_ID = 'btn-1';
}
`],
template: `
- Go to destination
+ Go to destination
You've reached your destination
`
})
@@ -21,5 +20,5 @@ export class DummyComponent implements OnInit {
constructor() { }
- public ngOnInit() { }
+ ngOnInit() { }
}
diff --git a/projects/ngx-scroll-to/src/test/test-helpers.ts b/projects/ngx-scroll-to/src/test/test-helpers.ts
index 96ea6b5..36f3cac 100644
--- a/projects/ngx-scroll-to/src/test/test-helpers.ts
+++ b/projects/ngx-scroll-to/src/test/test-helpers.ts
@@ -15,15 +15,15 @@ export function createTestComponent(
const template = `
Go to destination
You've reached your destination
`;
TestBed.overrideComponent(component, {
set: {
- template: template
+ template
}
});
diff --git a/projects/ngx-scroll-to/src/test/test-mock.service.ts b/projects/ngx-scroll-to/src/test/test-mock.service.ts
index 5c9406f..f62060e 100644
--- a/projects/ngx-scroll-to/src/test/test-mock.service.ts
+++ b/projects/ngx-scroll-to/src/test/test-mock.service.ts
@@ -1,4 +1,4 @@
/** Mocked Service for ScrollToService */
export class ScrollToServiceMock {
- public scrollTo() { }
+ scrollTo() { }
}
diff --git a/projects/ngx-scroll-to/tsconfig.lib.json b/projects/ngx-scroll-to/tsconfig.lib.json
index 3fe337f..4b5d4af 100644
--- a/projects/ngx-scroll-to/tsconfig.lib.json
+++ b/projects/ngx-scroll-to/tsconfig.lib.json
@@ -3,14 +3,8 @@
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"target": "es2015",
- "module": "es2015",
- "moduleResolution": "node",
"declaration": true,
- "sourceMap": true,
"inlineSources": true,
- "emitDecoratorMetadata": true,
- "experimentalDecorators": true,
- "importHelpers": true,
"types": [],
"lib": [
"dom",
@@ -18,11 +12,8 @@
]
},
"angularCompilerOptions": {
- "annotateForClosureCompiler": true,
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
- "fullTemplateTypeCheck": true,
- "strictInjectionParameters": true,
"enableResourceInlining": true
},
"exclude": [
diff --git a/projects/ngx-scroll-to/tsconfig.lib.prod.json b/projects/ngx-scroll-to/tsconfig.lib.prod.json
new file mode 100644
index 0000000..cbae794
--- /dev/null
+++ b/projects/ngx-scroll-to/tsconfig.lib.prod.json
@@ -0,0 +1,6 @@
+{
+ "extends": "./tsconfig.lib.json",
+ "angularCompilerOptions": {
+ "enableIvy": false
+ }
+}
diff --git a/projects/ngx-scroll-to/tslint.json b/projects/ngx-scroll-to/tslint.json
index 124133f..239f078 100644
--- a/projects/ngx-scroll-to/tslint.json
+++ b/projects/ngx-scroll-to/tslint.json
@@ -4,13 +4,13 @@
"directive-selector": [
true,
"attribute",
- "lib",
+ "ngx",
"camelCase"
],
"component-selector": [
true,
"element",
- "lib",
+ "ngx",
"kebab-case"
]
}
diff --git a/src/app/+home/home.component.html b/src/app/+home/home.component.html
deleted file mode 100644
index 6ac3b0d..0000000
--- a/src/app/+home/home.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-Go
-
- You've reached your destination.
-
diff --git a/src/app/app.component.html b/src/app/app.component.html
deleted file mode 100644
index 0a581b7..0000000
--- a/src/app/app.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
-
-