ngx-flip-flip/fesm2020/ngx-flip-flip.mjs

Angular Flip Flip - Angular full page scrolling components with no dependencies

import * as i0 from '@angular/core';
import { Injectable, Component, EventEmitter, Input, Output, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { fromEvent, merge } from 'rxjs';
import { throttleTime, filter, share, map, pairwise } from 'rxjs/operators';

class NgxFlipFlipSlidesService {
    get slides() {
        return this._slides;
    }
    set slides(slides) {
        this._slides = slides;
    }
    get selectedId() {
        return this._selectedId;
    }
    set selectedId(id) {
        this._selectedId = id;
    }
    isTheFirstSlide() {
        return this._selectedId === 0;
    }
    isTheLastSlide() {
        return this._selectedId === this._slides.length - 1;
    }
}
/** @nocollapse */ /** @nocollapse */ NgxFlipFlipSlidesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxFlipFlipSlidesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
/** @nocollapse */ /** @nocollapse */ NgxFlipFlipSlidesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxFlipFlipSlidesService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxFlipFlipSlidesService, decorators: [{
            type: Injectable
        }] });

var Direction;
(function (Direction) {
    Direction["Up"] = "Up";
    Direction["Down"] = "Down";
})(Direction || (Direction = {}));

var KeyboardEnum;
(function (KeyboardEnum) {
    KeyboardEnum["ArrowDown"] = "ArrowDown";
    KeyboardEnum["ArrowUp"] = "ArrowUp";
})(KeyboardEnum || (KeyboardEnum = {}));

class NgxFlipFlipEventsService {
    constructor(slidesService) {
        this.slidesService = slidesService;
    }
    onResize$() {
        return fromEvent(window, 'resize');
    }
    onSlideChange$() {
        return merge(this.onWheel$(), this.onKeyPress$(), this.onScroll$())
            .pipe(throttleTime(this.fitToSectionDelay), filter(direction => this.filterOnScroll(direction)), share());
    }
    onWheel$() {
        return fromEvent(window, 'wheel', { passive: true }).pipe(map((e) => e.deltaY < 0 ? Direction.Up : Direction.Down));
    }
    onKeyPress$() {
        return fromEvent(window, 'keydown').pipe(filter(() => this.isArrowNavigationActive), filter((e) => e.key === KeyboardEnum.ArrowUp || e.key === KeyboardEnum.ArrowDown), map((e) => e.key === KeyboardEnum.ArrowUp ? Direction.Up : Direction.Down));
    }
    onScroll$() {
        return fromEvent(window, 'scroll').pipe(map((e) => window.pageYOffset), pairwise(), map(([y1, y2]) => y2 < y1 ? Direction.Up : Direction.Down));
    }
    filterOnScroll(direction) {
        return direction === Direction.Up
            ? !this.slidesService.isTheFirstSlide()
            : !this.slidesService.isTheLastSlide();
    }
}
/** @nocollapse */ /** @nocollapse */ NgxFlipFlipEventsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxFlipFlipEventsService, deps: [{ token: NgxFlipFlipSlidesService }], target: i0.ɵɵFactoryTarget.Injectable });
/** @nocollapse */ /** @nocollapse */ NgxFlipFlipEventsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxFlipFlipEventsService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxFlipFlipEventsService, decorators: [{
            type: Injectable
        }], ctorParameters: function () { return [{ type: NgxFlipFlipSlidesService }]; } });

class NgxFlipFlipSlide {
}
/** @nocollapse */ /** @nocollapse */ NgxFlipFlipSlide.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxFlipFlipSlide, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ /** @nocollapse */ NgxFlipFlipSlide.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: NgxFlipFlipSlide, selector: "ngx-flip-flip-slide", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block;position:fixed;width:100%}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxFlipFlipSlide, decorators: [{
            type: Component,
            args: [{
                    selector: 'ngx-flip-flip-slide',
                    template: `<ng-content></ng-content>`,
                    styles: [`
    :host {
      display: block;
      position: fixed;
      width: 100%;
    }
  `],
                }]
        }] });

class NgxFlipFlipWrapper {
    constructor(renderer, elementRef, slidesService, eventsService, _zone) {
        this.renderer = renderer;
        this.elementRef = elementRef;
        this.slidesService = slidesService;
        this.eventsService = eventsService;
        this._zone = _zone;
        this.options = {
            scrollingSpeed: 700,
            easing: 'ease',
            fitToSectionDelay: 500,
            startFromSlide: 0,
            keyboardScrolling: true,
        };
        this.onSlideChange = new EventEmitter();
        this.changeSlidesDimensions = () => {
            this.slidesService.slides.forEach((slide, index) => {
                this.renderer.setStyle(slide, 'height', `${window.innerHeight}px`);
                this.renderer.setStyle(slide, 'top', `${window.innerHeight * index}px`);
            });
        };
    }
    ngOnInit() {
        this.slidesService.slides = document.querySelectorAll('ngx-flip-flip-slide');
        this.eventsService.fitToSectionDelay = this.options.fitToSectionDelay + this.options.scrollingSpeed;
        this.eventsService.isArrowNavigationActive = this.options.keyboardScrolling;
        this.slidesService.selectedId = this.options.startFromSlide;
        this.changeSlide();
        this._zone.runOutsideAngular(() => {
            this._onScrollSubscription = this.eventsService.onSlideChange$().subscribe(direction => {
                this._zone.run(() => {
                    this.slidesService.selectedId = this.getSelectedSlideId(direction);
                    this.changeSlide();
                    this.onSlideChange.emit(direction);
                });
            });
            this._resizeSubscription = this.eventsService.onResize$().subscribe(() => {
                this._zone.run(() => {
                    this.changeSlidesDimensions();
                    this.changeSlide();
                });
            });
        });
        this.changeSlidesDimensions();
        this.addStyles();
    }
    ngOnDestroy() {
        this._resizeSubscription.unsubscribe();
        this._onScrollSubscription.unsubscribe();
    }
    changeSlide() {
        const offset = -window.innerHeight * this.slidesService.selectedId;
        this.moveTo(offset);
    }
    moveTo(offset) {
        this.renderer.setStyle(this.elementRef.nativeElement, 'transform', `translateY(${offset}px)`);
    }
    addStyles() {
        this.renderer.setStyle(this.elementRef.nativeElement, 'transition', `transform ${this.options.scrollingSpeed}ms ${this.options.easing}`);
        this.renderer.setStyle(document.body, 'margin', 0);
        this.renderer.setStyle(document.body, 'overflow', 'hidden');
    }
    getSelectedSlideId(direction) {
        return direction === Direction.Down ? this.slidesService.selectedId + 1 : this.slidesService.selectedId - 1;
    }
}
/** @nocollapse */ /** @nocollapse */ NgxFlipFlipWrapper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxFlipFlipWrapper, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: NgxFlipFlipSlidesService }, { token: NgxFlipFlipEventsService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ /** @nocollapse */ NgxFlipFlipWrapper.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: NgxFlipFlipWrapper, selector: "ngx-flip-flip-wrapper", inputs: { options: "options" }, outputs: { onSlideChange: "onSlideChange" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxFlipFlipWrapper, decorators: [{
            type: Component,
            args: [{
                    selector: 'ngx-flip-flip-wrapper',
                    template: `<ng-content></ng-content>`,
                    styles: [`
    :host {
      display: block;
    }
  `],
                }]
        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: NgxFlipFlipSlidesService }, { type: NgxFlipFlipEventsService }, { type: i0.NgZone }]; }, propDecorators: { options: [{
                type: Input
            }], onSlideChange: [{
                type: Output
            }] } });

class NgxFlipFlipModule {
    static forRoot() {
        return {
            ngModule: NgxFlipFlipModule,
            providers: [],
        };
    }
}
/** @nocollapse */ /** @nocollapse */ NgxFlipFlipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxFlipFlipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
/** @nocollapse */ /** @nocollapse */ NgxFlipFlipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxFlipFlipModule, declarations: [NgxFlipFlipWrapper,
        NgxFlipFlipSlide], imports: [CommonModule], exports: [NgxFlipFlipWrapper,
        NgxFlipFlipSlide] });
/** @nocollapse */ /** @nocollapse */ NgxFlipFlipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxFlipFlipModule, providers: [
        NgxFlipFlipEventsService,
        NgxFlipFlipSlidesService,
    ], imports: [[
            CommonModule,
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxFlipFlipModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        NgxFlipFlipWrapper,
                        NgxFlipFlipSlide,
                    ],
                    imports: [
                        CommonModule,
                    ],
                    exports: [
                        NgxFlipFlipWrapper,
                        NgxFlipFlipSlide,
                    ],
                    providers: [
                        NgxFlipFlipEventsService,
                        NgxFlipFlipSlidesService,
                    ],
                }]
        }] });

/*
 * Public API Surface of ngx-flip-flip
 */

/**
 * Generated bundle index. Do not edit.
 */

export { Direction, NgxFlipFlipModule, NgxFlipFlipSlide, NgxFlipFlipWrapper };
//# sourceMappingURL=ngx-flip-flip.mjs.map