-
Notifications
You must be signed in to change notification settings - Fork 129
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7cc727f
commit 58f48b1
Showing
40 changed files
with
396 additions
and
461 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import { | ||
| Directive, | ||
| effect, | ||
| inject, | ||
| signal, | ||
| untracked, | ||
| WritableSignal, | ||
| EffectCleanupRegisterFn | ||
| } from '@angular/core'; | ||
| import { | ||
| Observable, | ||
| Subscription, | ||
| of, | ||
| filter, | ||
| fromEvent, | ||
| switchMap, | ||
| tap, | ||
| take, | ||
| debounceTime, | ||
| animationFrameScheduler | ||
| } from 'rxjs'; | ||
| import { ImgManager } from '../utils/img-manager'; | ||
| import { GalleryRef } from '../services/gallery-ref'; | ||
| import { GalleryComponent } from '../components/gallery.component'; | ||
| import { ResizeSensor } from '../services/resize-sensor'; | ||
|
|
||
| /** | ||
| * Auto height feature prerequisites: | ||
| * - autosize should be set to 'false' | ||
| * - if thumbnails exist, it should not be aligned to the right or left | ||
| */ | ||
|
|
||
| @Directive({ | ||
| standalone: true, | ||
| selector: 'gallery[autoHeight]', | ||
| host: { | ||
| '[attr.autoHeight]': 'true', | ||
| '[class.g-resizing]': 'isResizing()', | ||
| '[style.--slider-auto-height.px]': 'height()', | ||
| } | ||
| }) | ||
| export class AutoHeight { | ||
|
|
||
| private readonly gallery: GalleryComponent = inject(GalleryComponent); | ||
|
|
||
| private readonly manager: ImgManager = inject(ImgManager); | ||
|
|
||
| readonly isResizing: WritableSignal<boolean> = signal(false); | ||
|
|
||
| readonly height: WritableSignal<number> = signal(0); | ||
|
|
||
| constructor() { | ||
| let sub$: Subscription; | ||
|
|
||
| let afterHeightChanged$: Observable<any>; | ||
|
|
||
| effect((onCleanup: EffectCleanupRegisterFn) => { | ||
| const resizeSensor: ResizeSensor = this.gallery.slider().resizeSensor(); | ||
| // Check if height has transition for the auto-height feature | ||
| const transitionDuration: string = getComputedStyle(resizeSensor.nativeElement).transitionDuration; | ||
| if (!parseFloat(transitionDuration)) { | ||
| afterHeightChanged$ = of({}); | ||
| } else { | ||
| console.log(transitionDuration) | ||
| afterHeightChanged$ = fromEvent(resizeSensor.nativeElement, 'transitionend'); | ||
| } | ||
| // if (!this.galleryRef.config().autoHeight) return; | ||
| // const currIndex = this.galleryRef.currIndex(); | ||
| untracked(() => { | ||
| sub$ = this.manager.getActiveItem().pipe( | ||
| // Wait for item image to be rendered | ||
| debounceTime(0, animationFrameScheduler), | ||
| // Skip if img height is equal the slider height | ||
| filter((img: HTMLImageElement) => { | ||
| console.log('🦕', resizeSensor.nativeElement.clientHeight, img.height) | ||
| return img.height !== resizeSensor.nativeElement.clientHeight | ||
| }), | ||
| switchMap((img: HTMLImageElement) => { | ||
| console.log('👽 Resize started! --slider-height', resizeSensor.nativeElement.clientHeight, img.height) | ||
| resizeSensor.disabled.set(true); | ||
| this.isResizing.set(true); | ||
|
|
||
| resizeSensor.nativeElement.style.setProperty('--slider-height', `${img.height}px`) | ||
|
|
||
| return afterHeightChanged$.pipe( | ||
| debounceTime(0, animationFrameScheduler), | ||
| tap(() => { | ||
| resizeSensor.disabled.set(false); | ||
| this.isResizing.set(false); | ||
| }), | ||
| take(1) | ||
| ); | ||
| }) | ||
| ).subscribe(); | ||
|
|
||
| onCleanup(() => sub$?.unsubscribe()); | ||
| }); | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.