Skip to content

Commit c9fa496

Browse files
kyubisationkyubisation
authored
fix: handle scrolling correctly (#168)
Closes #161
1 parent 2e85d3d commit c9fa496

25 files changed

+247
-64
lines changed

‎angular.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
],
3333
"styles": [
3434
"projects/angular-showcase/src/styles.scss",
35-
"node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
3635
"node_modules/highlight.js/styles/github.css"
3736
],
3837
"scripts": [],

‎projects/angular-showcase/src/app/app.component.html

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,36 @@
1-
<nav class="menu" [class.menu-open]="showMenu" perfectScrollbar>
2-
<ul>
3-
<li>
4-
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"
5-
>Introduction</a
6-
>
7-
</li>
8-
<li class="title">Libraries</li>
9-
<li>
10-
<a routerLink="/public" routerLinkActive="active">@sbb-esta/angular-public</a>
11-
</li>
12-
<li>
13-
<a routerLink="/business" routerLinkActive="active">@sbb-esta/angular-business</a>
14-
</li>
15-
<li>
16-
<a routerLink="/core" routerLinkActive="active">@sbb-esta/angular-core</a>
17-
</li>
18-
<li>
19-
<a routerLink="/icons" routerLinkActive="active">@sbb-esta/angular-icons</a>
20-
</li>
21-
<li>
22-
<a routerLink="/keycloak" routerLinkActive="active">@sbb-esta/angular-keycloak</a>
23-
</li>
24-
<li class="title">About</li>
25-
<li>
26-
<a href="https://angular.io/">Angular {{ angularVersion }}</a>
27-
</li>
28-
<li>
29-
<a routerLink="/">Showcase {{ showcaseVersion }}</a>
30-
</li>
31-
</ul>
1+
<nav class="menu" [class.menu-open]="showMenu">
2+
<perfect-scrollbar>
3+
<ul>
4+
<li>
5+
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"
6+
>Introduction</a
7+
>
8+
</li>
9+
<li class="title">Libraries</li>
10+
<li>
11+
<a routerLink="/public" routerLinkActive="active">@sbb-esta/angular-public</a>
12+
</li>
13+
<li>
14+
<a routerLink="/business" routerLinkActive="active">@sbb-esta/angular-business</a>
15+
</li>
16+
<li>
17+
<a routerLink="/core" routerLinkActive="active">@sbb-esta/angular-core</a>
18+
</li>
19+
<li>
20+
<a routerLink="/icons" routerLinkActive="active">@sbb-esta/angular-icons</a>
21+
</li>
22+
<li>
23+
<a routerLink="/keycloak" routerLinkActive="active">@sbb-esta/angular-keycloak</a>
24+
</li>
25+
<li class="title">About</li>
26+
<li>
27+
<a href="https://angular.io/">Angular {{ angularVersion }}</a>
28+
</li>
29+
<li>
30+
<a routerLink="/">Showcase {{ showcaseVersion }}</a>
31+
</li>
32+
</ul>
33+
</perfect-scrollbar>
3234
</nav>
3335

3436
<div class="container">
@@ -52,7 +54,7 @@
5254
</svg>
5355
</a>
5456
</div>
55-
<div class="content" perfectScrollbar>
57+
<perfect-scrollbar class="content">
5658
<router-outlet></router-outlet>
57-
</div>
59+
</perfect-scrollbar>
5860
</div>

‎projects/angular-showcase/src/app/app.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
33
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
44
import { BrowserModule } from '@angular/platform-browser';
55
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
6+
import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
67
import { ICON_COMPONENT_LIST, IconCollectionModule } from '@sbb-esta/angular-icons';
78
import { MonacoEditorModule } from 'ngx-monaco-editor';
8-
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
99

1010
import { AppRoutingModule } from './app-routing.module';
1111
import { AppComponent } from './app.component';
@@ -24,7 +24,7 @@ import { PublicModule } from './public/public.module';
2424
MonacoEditorModule.forRoot({ baseUrl: './assets' }),
2525
IconCollectionModule,
2626
ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
27-
PerfectScrollbarModule,
27+
ScrollingModule,
2828
HttpClientModule,
2929
BrowserAnimationsModule,
3030
PublicModule,

‎projects/angular-showcase/src/app/business/business.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { PortalModule } from '@angular/cdk/portal';
22
import { CommonModule } from '@angular/common';
33
import { NgModule } from '@angular/core';
4+
import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
45
import { TabsModule } from '@sbb-esta/angular-public/tabs';
5-
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
66

77
import { SharedModule } from '../shared/shared.module';
88

@@ -15,7 +15,7 @@ import { ComponentViewerComponent } from './component-viewer/component-viewer.co
1515
declarations: [BusinessComponent, ComponentViewerComponent],
1616
imports: [
1717
CommonModule,
18-
PerfectScrollbarModule,
18+
ScrollingModule,
1919
PortalModule,
2020
BusinessExamplesModule,
2121
SharedModule,

‎projects/angular-showcase/src/app/core/core.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { PortalModule } from '@angular/cdk/portal';
22
import { CommonModule } from '@angular/common';
33
import { NgModule } from '@angular/core';
4+
import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
45
import { TabsModule } from '@sbb-esta/angular-public/tabs';
5-
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
66

77
import { SharedModule } from '../shared/shared.module';
88

@@ -15,7 +15,7 @@ import { ExamplesModule } from './examples/examples.module';
1515
declarations: [CoreComponent, ComponentViewerComponent],
1616
imports: [
1717
CommonModule,
18-
PerfectScrollbarModule,
18+
ScrollingModule,
1919
PortalModule,
2020
ExamplesModule,
2121
SharedModule,

‎projects/angular-showcase/src/app/core/core/core.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import { ExampleProvider } from '../../shared/example-provider';
1212
export class CoreComponent implements ExampleProvider {
1313
modules = {
1414
breakpoints: 'Breakpoints',
15-
datetime: 'Datetime'
15+
datetime: 'Datetime',
16+
scrolling: 'Scrolling'
1617
};
1718
private _examples: { [component: string]: { [name: string]: ComponentPortal<any> } } = {};
1819

‎projects/angular-showcase/src/app/icons/icons.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { PortalModule } from '@angular/cdk/portal';
22
import { CommonModule } from '@angular/common';
33
import { NgModule } from '@angular/core';
44
import { ReactiveFormsModule } from '@angular/forms';
5+
import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
56
import { ICON_COMPONENT_LIST } from '@sbb-esta/angular-icons';
67
import { SearchModule } from '@sbb-esta/angular-public/search';
7-
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
88

99
import { SharedModule } from '../shared/shared.module';
1010

@@ -21,7 +21,7 @@ import { IconsComponent } from './icons/icons.component';
2121
CommonModule,
2222
ReactiveFormsModule,
2323
PortalModule,
24-
PerfectScrollbarModule,
24+
ScrollingModule,
2525
SearchModule,
2626
SharedModule,
2727
IconsRoutingModule

‎projects/angular-showcase/src/app/public/public.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { PortalModule } from '@angular/cdk/portal';
22
import { CommonModule } from '@angular/common';
33
import { NgModule } from '@angular/core';
4+
import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
45
import { TabsModule } from '@sbb-esta/angular-public/tabs';
5-
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
66

77
import { SharedModule } from '../shared/shared.module';
88

@@ -15,8 +15,8 @@ import { PublicComponent } from './public/public.component';
1515
declarations: [PublicComponent, ComponentViewerComponent],
1616
imports: [
1717
CommonModule,
18-
PerfectScrollbarModule,
1918
PortalModule,
19+
ScrollingModule,
2020
PublicExamplesModule,
2121
SharedModule,
2222
TabsModule,

‎projects/angular-showcase/src/app/shared/shared.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { PortalModule } from '@angular/cdk/portal';
22
import { CommonModule } from '@angular/common';
33
import { NgModule } from '@angular/core';
4+
import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
45
import { TabsModule } from '@sbb-esta/angular-public/tabs';
5-
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
66

77
import { ApiViewerComponent } from './api-viewer/api-viewer.component';
88
import { ExampleViewerComponent } from './example-viewer/example-viewer.component';
@@ -16,7 +16,7 @@ import { SubmenuComponent } from './submenu/submenu.component';
1616
ExampleViewerComponent,
1717
ApiViewerComponent
1818
],
19-
imports: [CommonModule, PerfectScrollbarModule, PortalModule, TabsModule],
19+
imports: [CommonModule, ScrollingModule, PortalModule, TabsModule],
2020
exports: [SubmenuComponent, MarkdownViewerComponent, ExampleViewerComponent, ApiViewerComponent]
2121
})
2222
export class SharedModule {}

‎projects/sbb-esta/angular-core/ng-package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
33
"dest": "../../../dist/sbb-esta/angular-core",
4+
"whitelistedNonPeerDependencies": ["tslib", "ngx-perfect-scrollbar"],
45
"lib": {
56
"entryFile": "public-api.ts"
67
}

‎projects/sbb-esta/angular-core/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,8 @@
1717
"@angular/cdk": "^8.0.0",
1818
"@angular/common": "^8.0.0",
1919
"@angular/core": "^8.0.0"
20+
},
21+
"dependencies": {
22+
"ngx-perfect-scrollbar": "^8.0.0"
2023
}
2124
}

‎projects/sbb-esta/angular-core/public-api.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ export * from '@sbb-esta/angular-core/common-behaviors';
77
export * from '@sbb-esta/angular-core/datetime';
88
export * from '@sbb-esta/angular-core/error';
99
export * from '@sbb-esta/angular-core/models';
10+
export * from '@sbb-esta/angular-core/scrolling';

‎projects/sbb-esta/angular-core/scrolling/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './src/public_api';

‎projects/sbb-esta/angular-core/scrolling/package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"ngPackage": {
3+
"lib": {
4+
"umdModuleIds": {
5+
"@sbb-esta/angular-core": "sbbAngularCore",
6+
"@sbb-esta/angular-core/base": "sbbAngularCoreBase",
7+
"@sbb-esta/angular-core/breakpoints": "sbbAngularCoreBreakpoints",
8+
"@sbb-esta/angular-core/common-behaviors": "sbbAngularCoreCommonBehaviors",
9+
"@sbb-esta/angular-core/datetime": "sbbAngularCoreDatetime",
10+
"@sbb-esta/angular-core/error": "sbbAngularCoreError",
11+
"@sbb-esta/angular-core/forms": "sbbAngularCoreForms",
12+
"@sbb-esta/angular-core/icon-directive": "sbbAngularCoreIconDirective",
13+
"@sbb-esta/angular-core/models": "sbbAngularCoreModels",
14+
"@sbb-esta/angular-icons": "sbbAngularIcons",
15+
"ngx-perfect-scrollbar": "ngxPerfectScrollbar"
16+
}
17+
}
18+
}
19+
}

‎projects/sbb-esta/angular-core/scrolling/scrolling.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
The `scrolling` module wraps the [ngx-perfect-scrollbar](https://www.npmjs.com/package/ngx-perfect-scrollbar)
2+
package. The wrapper fixes an issue with the [CDK Overlay](https://material.angular.io/cdk/overlay/overview)
3+
integration.
4+
5+
### Usage
6+
7+
See the documentation for [ngx-perfect-scrollbar](https://www.npmjs.com/package/ngx-perfect-scrollbar)
8+
on how to use the `perfect-scrollbar`.
9+
10+
```ts
11+
import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
12+
13+
@NgModule({
14+
...
15+
imports: [
16+
...
17+
ScrollingModule,
18+
...
19+
]
20+
})
21+
export class AppModule {}
22+
```
23+
24+
```html
25+
<perfect-scrollbar style="max-width: 600px; max-height: 400px;" [config]="config">
26+
<div>Scrollable content</div>
27+
</perfect-scrollbar>
28+
```

‎projects/sbb-esta/angular-core/scrolling/src/ps-scrollable.directive.spec.ts

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { ElementRef } from '@angular/core';
2+
import { Subject } from 'rxjs';
3+
4+
import { PsComponentScrollable, PsDirectiveScrollable } from './ps-scrollable.directive';
5+
6+
describe('PsDirectiveScrollable', () => {
7+
const perfectScrollbarMock = {
8+
psScrollY: new Subject(),
9+
psScrollX: new Subject()
10+
};
11+
const scrollDispatcherMock = {
12+
register(): void {},
13+
deregister(): void {}
14+
};
15+
16+
it('should emit on inner scroll', () => {
17+
const directive = new PsDirectiveScrollable(
18+
perfectScrollbarMock as any,
19+
new ElementRef(null),
20+
scrollDispatcherMock as any,
21+
null,
22+
null
23+
);
24+
let counter = 0;
25+
directive.elementScrolled().subscribe(() => ++counter);
26+
perfectScrollbarMock.psScrollX.next();
27+
expect(counter).toBe(1);
28+
perfectScrollbarMock.psScrollY.next();
29+
expect(counter).toBe(2);
30+
});
31+
});
32+
33+
describe('PsComponentScrollable', () => {
34+
const perfectScrollbarMock = {
35+
psScrollY: new Subject(),
36+
psScrollX: new Subject()
37+
};
38+
const scrollDispatcherMock = {
39+
register(): void {},
40+
deregister(): void {}
41+
};
42+
43+
it('should emit on inner scroll', () => {
44+
const directive = new PsComponentScrollable(
45+
perfectScrollbarMock as any,
46+
new ElementRef(null),
47+
scrollDispatcherMock as any,
48+
null,
49+
null
50+
);
51+
let counter = 0;
52+
directive.elementScrolled().subscribe(() => ++counter);
53+
perfectScrollbarMock.psScrollX.next();
54+
expect(counter).toBe(1);
55+
perfectScrollbarMock.psScrollY.next();
56+
expect(counter).toBe(2);
57+
});
58+
});

0 commit comments

Comments
 (0)