Skip to content

Commit a7bf98b

Browse files
MurhafSousliMurhafSousli
committed
Update
1 parent 379e87e commit a7bf98b

File tree

10 files changed

+31
-107
lines changed

10 files changed

+31
-107
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Changelog
22

3+
## 16.1.1
4+
5+
- fix: Bug with `visibility="visible"` closes [#674](https://github.com/MurhafSousli/ngx-scrollbar/issues/674).
6+
- refactor: In effects, move `onCleanup` function inside `untracked` function in the `PointerEventsAdapter` class.
7+
- refactor: Use `from` instead of `fromPromise` to convert a promise to observable.
8+
39
## 16.1.0
410

511
- feat: Disable / Suppress the scroll bar during runtime, in [#658](https://github.com/MurhafSousli/ngx-scrollbar/issues/658).

‎projects/ngx-scrollbar-demo/src/app/example-scrollto-element/overview-content/overview-content.component.ts‎

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,16 @@ import {
22
Component,
33
inject,
44
signal,
5-
effect,
6-
PLATFORM_ID,
75
AfterViewInit,
86
OnDestroy,
9-
NgZone,
107
WritableSignal,
118
ChangeDetectionStrategy
129
} from '@angular/core';
13-
import { isPlatformBrowser } from '@angular/common';
1410
import { ActivatedRoute } from '@angular/router';
1511
import { Subscription, tap } from 'rxjs';
1612
import { NgScrollbar } from 'ngx-scrollbar';
1713
import { AnchorLinkComponent } from '../anchor-link/anchor-link.component';
1814
import { ScrollContent } from '../scroll-content.directive';
19-
import { ScrollAnchor } from '../scroll-anchor.directive';
2015

2116
@Component({
2217
standalone: true,
@@ -32,44 +27,14 @@ export class OverviewContentComponent implements AfterViewInit, OnDestroy {
3227

3328
private fragmentSub$: Subscription;
3429

35-
// readonly isBrowser: boolean = isPlatformBrowser(inject(PLATFORM_ID));
36-
3730
private activatedRoute: ActivatedRoute = inject(ActivatedRoute);
3831

39-
// private zone: NgZone = inject(NgZone);
40-
4132
private scrollbar: NgScrollbar = inject(NgScrollbar, { skipSelf: true });
4233

4334
scrollContent: ScrollContent = inject(ScrollContent, { skipSelf: true });
4435

4536
activeLinkId: WritableSignal<string> = signal<string>('');
4637

47-
constructor() {
48-
// if (this.isBrowser) {
49-
// this.zone.runOutsideAngular(() => {
50-
// const intersectionObserver: IntersectionObserver = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
51-
// entries.forEach((entry: IntersectionObserverEntry) => {
52-
// if (entry.intersectionRatio > 0) {
53-
// this.zone.run(() => {
54-
// this.activeLinkId.set(entry.target.id);
55-
// });
56-
// }
57-
// });
58-
// }, {
59-
// root: this.scrollbar.viewport.nativeElement,
60-
// rootMargin: '0px 0px 0px -10%',
61-
// threshold: 1.0
62-
// });
63-
//
64-
// effect(() => {
65-
// this.scrollContent.anchors().forEach((group: ScrollAnchor) => {
66-
// intersectionObserver.observe(group.nativeElement);
67-
// });
68-
// });
69-
// });
70-
// }
71-
}
72-
7338
private goToAnchor(id: string): void {
7439
this.scrollbar.scrollToElement(`#${ id }`, { top: -75, duration: 700 });
7540
}

‎projects/ngx-scrollbar-demo/src/app/example-scrollto-element/scroll-content.directive.ts‎

Lines changed: 1 addition & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,4 @@
1-
import {
2-
computed, contentChildren, ContentChildren, Directive,
3-
effect,
4-
ElementRef,
5-
inject,
6-
NgZone,
7-
PLATFORM_ID,
8-
QueryList,
9-
signal,
10-
Signal,
11-
WritableSignal
12-
} from '@angular/core';
13-
import { isPlatformBrowser } from '@angular/common';
14-
import { ActivatedRoute } from '@angular/router';
15-
import { Subscription } from 'rxjs';
1+
import { Directive, computed, contentChildren, Signal } from '@angular/core';
162
import { ScrollAnchor } from './scroll-anchor.directive';
173

184
@Directive({
@@ -21,51 +7,10 @@ import { ScrollAnchor } from './scroll-anchor.directive';
217
})
228
export class ScrollContent {
239

24-
// readonly isBrowser: boolean = isPlatformBrowser(inject(PLATFORM_ID));
25-
26-
readonly nativeElement: HTMLElement = inject(ElementRef).nativeElement;
27-
28-
// private activatedRoute: ActivatedRoute = inject(ActivatedRoute);
29-
30-
// private zone: NgZone = inject(NgZone);
31-
32-
// private fragmentSub$: Subscription;
33-
34-
// activeId: WritableSignal<string> = signal('');
35-
3610
anchors: Signal<readonly ScrollAnchor[]> = contentChildren<ScrollAnchor>(ScrollAnchor, { descendants: true });
3711

3812
anchorsTree: Signal<ScrollAnchor[]> = computed(() => {
3913
return this.anchors().filter((anchor: ScrollAnchor) => anchor.children.length);
4014
});
4115

42-
// constructor() {
43-
// if (this.isBrowser) {
44-
// this.zone.runOutsideAngular(() => {
45-
// const intersectionObserver: IntersectionObserver = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
46-
// console.log(entries)
47-
// entries.forEach((entry: IntersectionObserverEntry) => {
48-
// if (entry.intersectionRatio > 0) {
49-
// this.zone.run(() => {
50-
// this.activeId.set(entry.target.id);
51-
// })
52-
// }
53-
// });
54-
// }, {
55-
// root: this.nativeElement,
56-
// rootMargin: '-10% 0px -50% 0px',
57-
// });
58-
59-
// effect(() => {
60-
// this.anchors().forEach((group: Group) => {
61-
// console.log(group)
62-
// intersectionObserver.observe(group.element);
63-
// group.sections.forEach((section: Element) => {
64-
// intersectionObserver.observe(section);
65-
// });
66-
// });
67-
// });
68-
// });
69-
// }
70-
// }
7116
}

‎projects/ngx-scrollbar/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-scrollbar",
3-
"version": "16.1.0",
3+
"version": "16.1.1",
44
"license": "MIT",
55
"homepage": "https://ngx-scrollbar.netlify.app/",
66
"author": {

‎projects/ngx-scrollbar/src/lib/button/scrollbar-button.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, effect, untracked, input, InputSignal, ChangeDetectionStrategy, } from '@angular/core';
1+
import { Component, effect, untracked, input, InputSignal, ChangeDetectionStrategy } from '@angular/core';
22
import { Direction } from '@angular/cdk/bidi';
33
import {
44
Observable,

‎projects/ngx-scrollbar/src/lib/scrollbar/scrollbar.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Component, effect, inject, ChangeDetectionStrategy } from '@angular/core';
2-
import { Observable } from 'rxjs';
3-
import { fromPromise } from 'rxjs/internal/observable/innerFrom';
2+
import { from, Observable } from 'rxjs';
43
import { TrackXDirective, TrackYDirective } from '../track/track';
54
import { ThumbXDirective, ThumbYDirective } from '../thumb/thumb';
65
import { SCROLLBAR_CONTROL, ScrollbarAdapter } from './scrollbar-adapter';
@@ -62,7 +61,7 @@ export class ScrollbarY extends ScrollbarAdapter {
6261
}
6362

6463
scrollTo(top: number, duration: number): Observable<void> {
65-
return fromPromise(this.cmp.scrollTo({ top, duration }));
64+
return from(this.cmp.scrollTo({ top, duration }));
6665
}
6766

6867
instantScrollTo(value: number): void {
@@ -143,7 +142,7 @@ export class ScrollbarX extends ScrollbarAdapter {
143142
}
144143

145144
scrollTo(left: number, duration: number): Observable<void> {
146-
return fromPromise(this.cmp.scrollTo({ left, duration }));
145+
return from(this.cmp.scrollTo({ left, duration }));
147146
}
148147

149148
instantScrollTo(value: number, scrollMax?: number): void {

‎projects/ngx-scrollbar/src/lib/sync-spacer.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export class SyncSpacer {
6363
});
6464
});
6565
}
66-
onCleanup(() => sub$?.unsubscribe())
66+
onCleanup(() => sub$?.unsubscribe());
6767
});
6868
});
6969
}

‎projects/ngx-scrollbar/src/lib/track/track-adapter.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Directive, effect, untracked } from '@angular/core';
1+
import { Directive, effect, inject, PLATFORM_ID, untracked } from '@angular/core';
2+
import { isPlatformBrowser } from '@angular/common';
23
import {
34
Observable,
45
delay,
@@ -18,6 +19,8 @@ import { PointerEventsAdapter } from '../utils/pointer-events-adapter';
1819
@Directive()
1920
export abstract class TrackAdapter extends PointerEventsAdapter {
2021

22+
private readonly isBrowser: boolean = isPlatformBrowser(inject(PLATFORM_ID));
23+
2124
// The current position of the mouse during track dragging
2225
private currMousePosition: number;
2326

@@ -116,7 +119,14 @@ export abstract class TrackAdapter extends PointerEventsAdapter {
116119
effect(() => {
117120
this.cmp.viewportDimension();
118121
this.cmp.contentDimension();
119-
untracked(() => this.control.trackSize.set(this.size));
122+
123+
// Avoid SSR error because we're using `requestAnimationFrame`
124+
if (!this.isBrowser) return;
125+
126+
untracked(() => {
127+
// Use animation frame to give the track element time to render (avoid size 0)
128+
requestAnimationFrame(() => this.control.trackSize.set(this.size));
129+
});
120130
});
121131
super();
122132
}

‎projects/ngx-scrollbar/src/lib/track/track.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Directive, effect } from '@angular/core';
2-
import { Observable } from 'rxjs';
3-
import { fromPromise } from 'rxjs/internal/observable/innerFrom';
2+
import { from, Observable } from 'rxjs';
43
import { TrackAdapter } from './track-adapter';
54

65
@Directive({
@@ -41,7 +40,7 @@ export class TrackXDirective extends TrackAdapter {
4140
}
4241

4342
protected scrollTo(start: number): Observable<void> {
44-
return fromPromise(this.cmp.scrollTo({ start, duration: this.cmp.trackScrollDuration() }));
43+
return from(this.cmp.scrollTo({ start, duration: this.cmp.trackScrollDuration() }));
4544
}
4645

4746
protected getScrollForwardStep(): number {
@@ -73,7 +72,7 @@ export class TrackYDirective extends TrackAdapter {
7372
}
7473

7574
protected scrollTo(top: number): Observable<void> {
76-
return fromPromise(this.cmp.scrollTo({ top, duration: this.cmp.trackScrollDuration() }));
75+
return from(this.cmp.scrollTo({ top, duration: this.cmp.trackScrollDuration() }));
7776
}
7877

7978
protected getScrollForwardStep(): number {

‎projects/ngx-scrollbar/src/lib/utils/pointer-events-adapter.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export abstract class PointerEventsAdapter {
2727

2828
abstract get pointerEvents(): Observable<PointerEvent>;
2929

30-
constructor() {
30+
protected constructor() {
3131
effect((onCleanup: EffectCleanupRegisterFn) => {
3232
const disableInteraction: boolean = this.cmp.disableInteraction();
3333

@@ -37,9 +37,9 @@ export abstract class PointerEventsAdapter {
3737
this._pointerEventsSub = this.pointerEvents.subscribe();
3838
});
3939
}
40-
});
4140

42-
onCleanup(() => this._pointerEventsSub?.unsubscribe());
41+
onCleanup(() => this._pointerEventsSub?.unsubscribe());
42+
});
4343
});
4444
}
4545
}

0 commit comments

Comments
 (0)