Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit5fa7df2

Browse files
committed
refactor(IntersectionService): change next shape to {isIntersecting: boolean, hostElement: ElementRef}
1 parent6d9de1b commit5fa7df2

File tree

4 files changed

+30
-30
lines changed

4 files changed

+30
-30
lines changed

‎projects/coreui-angular/src/lib/carousel/carousel/carousel.component.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import {
1313
Output
1414
}from'@angular/core';
1515
import{takeUntilDestroyed}from'@angular/core/rxjs-interop';
16-
import{finalize,fromEvent,Subscription,withLatestFrom,zipWith}from'rxjs';
16+
import{fromEvent,Subscription}from'rxjs';
17+
import{filter,finalize,withLatestFrom,zipWith}from'rxjs/operators';
1718

1819
import{IntersectionService}from'../../services/intersection.service';
1920
import{IListenersConfig,ListenersService}from'../../services/listeners.service';
@@ -96,7 +97,7 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
9697
};
9798
}
9899

99-
privatetimerId!:any;
100+
privatetimerId:number|undefined=undefined;
100101
privateactiveItemInterval=0;
101102
privateswipeSubscription?:Subscription;
102103
readonly #destroyRef=inject(DestroyRef);
@@ -117,6 +118,7 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
117118
}
118119

119120
ngOnDestroy():void{
121+
this.resetTimer();
120122
this.clearListeners();
121123
this.swipeSubscribe(false);
122124
}
@@ -169,6 +171,7 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
169171

170172
resetTimer():void{
171173
clearTimeout(this.timerId);
174+
this.timerId=undefined;
172175
}
173176

174177
privatecarouselStateSubscribe():void{
@@ -186,19 +189,20 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
186189
});
187190
}
188191

189-
privateintersectionServiceSubscribe(subscribe:boolean=true):void{
190-
this.intersectionService.createIntersectionObserver(this.hostElement);
192+
privateintersectionServiceSubscribe():void{
191193
this.intersectionService.intersecting$
192194
.pipe(
195+
filter(next=>next.hostElement===this.hostElement),
193196
finalize(()=>{
194197
this.intersectionService.unobserve(this.hostElement);
195198
}),
196199
takeUntilDestroyed(this.#destroyRef)
197200
)
198-
.subscribe(isIntersecting=>{
199-
this.visible=isIntersecting;
200-
isIntersecting ?this.setTimer() :this.resetTimer();
201+
.subscribe(next=>{
202+
this.visible=next.isIntersecting;
203+
next.isIntersecting ?this.setTimer() :this.resetTimer();
201204
});
205+
this.intersectionService.createIntersectionObserver(this.hostElement);
202206
}
203207

204208
privateswipeSubscribe(subscribe:boolean=true):void{

‎projects/coreui-angular/src/lib/popover/popover.directive.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
}from'@angular/core';
2020
import{takeUntilDestroyed}from'@angular/core/rxjs-interop';
2121
import{DOCUMENT}from'@angular/common';
22-
import{debounceTime,finalize}from'rxjs/operators';
22+
import{debounceTime,filter,finalize}from'rxjs/operators';
2323
import{createPopper,Instance,Options}from'@popperjs/core';
2424

2525
import{Triggers}from'../coreui.types';
@@ -153,18 +153,19 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterView
153153
this.listenersService.clearListeners();
154154
}
155155

156-
privateintersectionServiceSubscribe(subscribe:boolean=true):void{
156+
privateintersectionServiceSubscribe():void{
157157
this.intersectionService.createIntersectionObserver(this.hostElement);
158158
this.intersectionService.intersecting$
159159
.pipe(
160+
filter(next=>next.hostElement===this.hostElement),
160161
debounceTime(100),
161162
finalize(()=>{
162163
this.intersectionService.unobserve(this.hostElement);
163164
}),
164165
takeUntilDestroyed(this.#destroyRef)
165166
)
166-
.subscribe(isIntersecting=>{
167-
this.visible=isIntersecting ?this.visible :false;
167+
.subscribe(next=>{
168+
this.visible=next.isIntersecting ?this.visible :false;
168169
!this.visible&&this.removePopoverElement();
169170
});
170171
}

‎projects/coreui-angular/src/lib/services/intersection.service.ts‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,16 @@ export interface IIntersectionObserverInit {
88
threshold?:number|number[];
99
}
1010

11-
@Injectable(
12-
{providedIn:'root'}
13-
)
11+
@Injectable({
12+
providedIn:'root'
13+
})
1414
exportclassIntersectionServiceimplementsOnDestroy{
1515

1616
platformId=inject(PLATFORM_ID);
1717

18-
readonly #intersecting=newBehaviorSubject<boolean>(false);
18+
readonly #intersecting:BehaviorSubject<any>=newBehaviorSubject({isIntersecting:false});
1919
readonlyintersecting$=this.#intersecting.asObservable();
2020

21-
privateintersectionObserver!:IntersectionObserver;
22-
privatehostElement!:ElementRef;
23-
2421
privatedefaultObserverOptions:IIntersectionObserverInit={
2522
root:null,
2623
rootMargin:'0px',
@@ -32,23 +29,20 @@ export class IntersectionService implements OnDestroy {
3229
createIntersectionObserver(hostElement:ElementRef,observerOptions=this.defaultObserverOptions){
3330

3431
if(isPlatformServer(this.platformId)){
35-
this.#intersecting.next(true);
32+
this.#intersecting.next({isIntersecting:true, hostElement});
3633
return;
3734
}
3835

39-
// this.hostElement = hostElement;
40-
constoptions={ ...this.defaultObserverOptions, ...observerOptions};
36+
constoptions:IIntersectionObserverInit={ ...this.defaultObserverOptions, ...observerOptions};
4137

4238
consthandleIntersect=(entries:IntersectionObserverEntry[],observer:IntersectionObserver)=>{
4339
entries.forEach((entry:any)=>{
44-
this.#intersecting.next(entry.isIntersecting);
40+
this.#intersecting.next({isIntersecting:entry.isIntersecting, hostElement});
4541
});
4642
};
4743

48-
constintersectionObserver:IntersectionObserver=newIntersectionObserver(handleIntersect,options);
49-
intersectionObserver.observe(hostElement.nativeElement);
50-
this.hostElementRefs.set(hostElement,intersectionObserver);
51-
44+
this.hostElementRefs.set(hostElement,newIntersectionObserver(handleIntersect,options));
45+
this.hostElementRefs.get(hostElement)?.observe(hostElement.nativeElement);
5246
}
5347

5448
unobserve(elementRef:ElementRef){

‎projects/coreui-angular/src/lib/tooltip/tooltip.directive.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
}from'@angular/core';
2020
import{takeUntilDestroyed}from'@angular/core/rxjs-interop';
2121
import{DOCUMENT}from'@angular/common';
22-
import{debounceTime,finalize}from'rxjs/operators';
22+
import{debounceTime,filter,finalize}from'rxjs/operators';
2323
import{createPopper,Instance,Options}from'@popperjs/core';
2424

2525
import{Triggers}from'../coreui.types';
@@ -153,18 +153,19 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit, AfterView
153153
this.listenersService.clearListeners();
154154
}
155155

156-
privateintersectionServiceSubscribe(subscribe:boolean=true):void{
156+
privateintersectionServiceSubscribe():void{
157157
this.intersectionService.createIntersectionObserver(this.hostElement);
158158
this.intersectionService.intersecting$
159159
.pipe(
160+
filter(next=>next.hostElement===this.hostElement),
160161
debounceTime(100),
161162
finalize(()=>{
162163
this.intersectionService.unobserve(this.hostElement);
163164
}),
164165
takeUntilDestroyed(this.#destroyRef)
165166
)
166-
.subscribe(isIntersecting=>{
167-
this.visible=isIntersecting ?this.visible :false;
167+
.subscribe(next=>{
168+
this.visible=next.isIntersecting ?this.visible :false;
168169
!this.visible&&this.removeTooltipElement();
169170
});
170171
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp