Skip to content

Commit

Permalink
Merge pull request #533 from vpetrusevici/fix-ssr-error
Browse files Browse the repository at this point in the history 
Fix error on Angular SSR
  • Loading branch information
@MurhafSousli
MurhafSousli authored Apr 1, 2023
2 parents 6bbd76e + 0303fa2 commit 0c0db52
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 136 deletions.
76 changes: 38 additions & 38 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@angular/common": "^15.1.0",
"@angular/compiler": "^15.1.0",
"@angular/core": "^15.1.0",
"@angular/flex-layout": "^14.0.0-beta.41",
"@angular/flex-layout": "^15.0.0-beta.42",
"@angular/forms": "^15.1.0",
"@angular/material": "^15.1.0",
"@angular/platform-browser": "^15.1.0",
Expand Down
13 changes: 8 additions & 5 deletions projects/ng-gallery/src/lib/components/gallery-item.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ import {
AfterViewChecked,
ElementRef,
ChangeDetectorRef,
ChangeDetectionStrategy
ChangeDetectionStrategy,
} from '@angular/core';
import { Platform } from '@angular/cdk/platform';
import { GalleryConfig } from '../models/config.model';
import { LoadingStrategy, GalleryItemType } from '../models/constants';
import { GalleryItemData, ImageItemData, VideoItemData, YoutubeItemData } from './templates/items.model';
Expand Down Expand Up @@ -149,13 +150,15 @@ export class GalleryItemComponent implements AfterViewChecked {
return this.data;
}

constructor(private el: ElementRef, private cd: ChangeDetectorRef) {
constructor(private el: ElementRef, private cd: ChangeDetectorRef, private _platform: Platform) {
}

ngAfterViewChecked(): void {
const height = this.getHeight();
this.element.style.setProperty('--g-item-width', `${ this.getWidth() }px`);
this.element.style.setProperty('--g-item-height', `${ height }px`);
const height: number = this.getHeight();
if (this._platform.isBrowser) {
this.element.style.setProperty('--g-item-width', `${ this.getWidth() }px`);
this.element.style.setProperty('--g-item-height', `${ height }px`);
}
if (this.currIndex === this.index) {
// Auto-height feature, only allowed when sliding direction is horizontal
const isThumbPositionHorizontal: boolean = this.config.thumbPosition === 'top' || this.config.thumbPosition === 'bottom';
Expand Down
107 changes: 54 additions & 53 deletions projects/ng-gallery/src/lib/components/gallery-slider.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import { tap, debounceTime, filter, takeUntil, switchMap } from 'rxjs/operators'
import { Gallery } from '../services/gallery.service';
import { GalleryState, GalleryError } from '../models/gallery.model';
import { GalleryConfig } from '../models/config.model';
import { SlidingDirection, ThumbnailsView } from '../models/constants';
import { SlidingDirection } from '../models/constants';
import { SliderAdapter, HorizontalAdapter, VerticalAdapter } from './adapters';
import { SmoothScrollManager } from '../smooth-scroll';
import { resizeObservable } from '../utils/resize-observer';
Expand Down Expand Up @@ -162,89 +162,90 @@ export class GallerySliderComponent implements OnInit, OnChanges, AfterViewInit,
this.adapter = new VerticalAdapter(this.slider, this.config);
break;
}

if (!changes.config.firstChange) {
requestAnimationFrame(() => {
// Keep the correct sliding position when direction changes
this.scrollToIndex(this.state.currIndex, 'auto');
});
if (this._platform.isBrowser) {
if (!changes.config.firstChange) {
requestAnimationFrame(() => {
// Keep the correct sliding position when direction changes
this.scrollToIndex(this.state.currIndex, 'auto');
});
}
// Reactivate gestures
this.enableDisableGestures();
}

// Reactivate gestures
this.enableDisableGestures();
}

if (!changes.config.firstChange) {
if (this._platform.isBrowser && !changes.config.firstChange) {
if (changes.config.currentValue?.mouseSlidingDisabled !== changes.config.previousValue?.mouseSlidingDisabled) {
this.enableDisableGestures();
}
}
}

// Scroll to current index
if (changes.state && changes.state.currentValue?.currIndex !== changes.state.previousValue?.currIndex) {
if (this._platform.isBrowser && changes.state && changes.state.currentValue?.currIndex !== changes.state.previousValue?.currIndex) {
requestAnimationFrame(() => {
this.scrollToIndex(this.state.currIndex, changes.state.firstChange ? 'auto' : this.state.behavior);
});
}
}

ngOnInit(): void {
this._zone.runOutsideAngular(() => {

// We need to set the visibleElements in the viewport using intersection observer
this.createIntersectionObserver(this.slider).pipe(
tap((entry: IntersectionObserverEntry) => {
entry.target.classList.toggle('g-item-visible', entry.isIntersecting);
if (entry.isIntersecting) {
this.visibleElements.set(entry.target, entry);
} else {
this.visibleElements.delete(entry.target);
}
}),
takeUntil(this._destroyed$)
).subscribe();
if (this._platform.isBrowser) {
this._zone.runOutsideAngular(() => {
// We need to set the visibleElements in the viewport using intersection observer
this.createIntersectionObserver(this.slider).pipe(
tap((entry: IntersectionObserverEntry) => {
entry.target.classList.toggle('g-item-visible', entry.isIntersecting);
if (entry.isIntersecting) {
this.visibleElements.set(entry.target, entry);
} else {
this.visibleElements.delete(entry.target);
}
}),
takeUntil(this._destroyed$)
).subscribe();

// Subscribe to slider scroll event
fromEvent(this.slider, 'scroll', { passive: true }).pipe(
debounceTime(50),
filter(() => !this._isPanning),
tap(() => this.onViewportScroll()),
takeUntil(this._destroyed$)
).subscribe();
// Subscribe to slider scroll event
fromEvent(this.slider, 'scroll', { passive: true }).pipe(
debounceTime(50),
filter(() => !this._isPanning),
tap(() => this.onViewportScroll()),
takeUntil(this._destroyed$)
).subscribe();

// Detect if the size of the slider has changed detecting current index on scroll
if (this._platform.isBrowser) {
// Detect if the size of the slider has changed detecting current index on scroll
resizeObservable(this._el.nativeElement).pipe(
debounceTime(this.config.resizeDebounceTime),
tap(([entry]: ResizeObserverEntry[]) => this.onHostResize(entry)),
takeUntil(this._destroyed$)
).subscribe();
}
});
});
}
}

ngAfterViewInit(): void {
this.items.notifyOnChanges();
this.items.changes.pipe(
startWith(null),
tap(() => {
// Disconnect all and reconnect later
this.visibleElements.forEach((item: IntersectionObserverEntry) => {
this.intersectionObserver.unobserve(item.target);
});
if (this._platform.isBrowser) {
this.items.notifyOnChanges();
this.items.changes.pipe(
startWith(null),
tap(() => {
// Disconnect all and reconnect later
this.visibleElements.forEach((item: IntersectionObserverEntry) => {
this.intersectionObserver.unobserve(item.target);
});

// Connect with the new items
this.items.toArray().map((item: GalleryItemComponent) => {
this.intersectionObserver.observe(item.element);
});
}),
takeUntil(this._destroyed$)
).subscribe();
// Connect with the new items
this.items.toArray().map((item: GalleryItemComponent) => {
this.intersectionObserver.observe(item.element);
});
}),
takeUntil(this._destroyed$)
).subscribe();
}
}

ngAfterViewChecked(): void {
if (this.config.itemAutosize) {
if (this.config.itemAutosize && this._platform.isBrowser) {
this.slider.style.setProperty('--slider-centralize-start-size', this.adapter.getCentralizerStartSize() + 'px');
this.slider.style.setProperty('--slider-centralize-end-size', this.adapter.getCentralizerEndSize() + 'px');
}
Expand Down
Loading

0 comments on commit 0c0db52

Please sign in to comment.