ngx-glide
Version:
Angular wrapper component of Glide carousel library
415 lines (408 loc) • 20.1 kB
JavaScript
import { isPlatformBrowser, NgIf, NgForOf, NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, PLATFORM_ID, Component, ChangeDetectionStrategy, Inject, Input, Output, ViewChild, NgModule } from '@angular/core';
import Glide from '@glidejs/glide';
const defaultExtraSettings = {
showArrows: true,
showBullets: true,
arrowLeftLabel: 'left',
arrowRightLabel: 'right',
listenToEvents: false,
};
const defaultSettings = {
type: 'slider',
startAt: 0,
perView: 1,
focusAt: 0,
gap: 10,
autoplay: false,
hoverpause: true,
keyboard: true,
bound: false,
swipeThreshold: 80,
dragThreshold: 120,
perTouch: false,
touchRatio: 0.5,
touchAngle: 45,
animationDuration: 400,
rewind: true,
rewindDuration: 800,
animationTimingFunc: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
direction: 'ltr',
peek: 0,
breakpoints: {},
classes: {
direction: {
ltr: 'glide--ltr',
rtl: 'glide--rtl',
},
slider: 'glide--slider',
carousel: 'glide--carousel',
swipeable: 'glide--swipeable',
dragging: 'glide--dragging',
cloneSlide: 'glide__slide--clone',
activeNav: 'glide__bullet--active',
activeSlide: 'glide__slide--active',
disabledArrow: 'glide__arrow--disabled',
},
throttle: 25,
};
// noinspection TypeScriptFieldCanBeMadeReadonly,DuplicatedCode
class NgxGlideComponent {
constructor(changeDetectorRef, platformId) {
this.changeDetectorRef = changeDetectorRef;
this.platformId = platformId;
this.showArrows = defaultExtraSettings.showArrows;
this.showBullets = defaultExtraSettings.showBullets;
this.arrowLeftLabel = defaultExtraSettings.arrowLeftLabel;
this.arrowLeftTemplate = null;
this.arrowRightLabel = defaultExtraSettings.arrowRightLabel;
this.arrowRightTemplate = null;
this.listenToEvents = defaultExtraSettings.listenToEvents;
this.glideBullets = [];
this.type = defaultSettings.type;
this.startAt = defaultSettings.startAt;
this.perView = defaultSettings.perView;
this.focusAt = defaultSettings.focusAt;
this.gap = defaultSettings.gap;
this.autoplay = defaultSettings.autoplay;
this.hoverpause = defaultSettings.hoverpause;
this.keyboard = defaultSettings.keyboard;
this.bound = defaultSettings.bound;
this.swipeThreshold = defaultSettings.swipeThreshold;
this.dragThreshold = defaultSettings.dragThreshold;
this.perTouch = defaultSettings.perTouch;
this.touchRatio = defaultSettings.touchRatio;
this.touchAngle = defaultSettings.touchAngle;
this.animationDuration = defaultSettings.animationDuration;
this.rewind = defaultSettings.rewind;
this.rewindDuration = defaultSettings.rewindDuration;
this.animationTimingFunc = defaultSettings.animationTimingFunc;
this.direction = defaultSettings.direction;
this.peek = defaultSettings.peek;
this.breakpoints = defaultSettings.breakpoints;
this.classes = defaultSettings.classes;
this.throttle = defaultSettings.throttle;
this.mountedBefore = new EventEmitter();
this.mountedAfter = new EventEmitter();
this.updated = new EventEmitter();
this.played = new EventEmitter();
this.paused = new EventEmitter();
this.buildedBefore = new EventEmitter();
this.buildedAfter = new EventEmitter();
this.ranBefore = new EventEmitter();
this.ran = new EventEmitter();
this.ranAfter = new EventEmitter();
this.ranOffset = new EventEmitter();
this.runStarted = new EventEmitter();
this.runEnded = new EventEmitter();
this.moved = new EventEmitter();
this.movedAfter = new EventEmitter();
this.resized = new EventEmitter();
this.swipeStarted = new EventEmitter();
this.swipeMoved = new EventEmitter();
this.swipeEnded = new EventEmitter();
this.translateJumped = new EventEmitter();
}
static getGlideUpdateSettings(changes) {
const settings = {};
for (const key in changes) {
if (!Object.prototype.hasOwnProperty.call(changes, key)) {
continue;
}
if (!Object.prototype.hasOwnProperty.call(defaultSettings, key)) {
continue;
}
const change = changes[key];
if (change.previousValue !== change.currentValue) {
settings[key] = change.currentValue;
}
}
return settings;
}
ngOnChanges(changes) {
if (isPlatformBrowser(this.platformId) && changes && this.glide) {
this.update(NgxGlideComponent.getGlideUpdateSettings(changes));
}
}
ngAfterViewInit() {
if (isPlatformBrowser(this.platformId) && Glide) {
this.create();
}
}
ngOnDestroy() {
this.destroy();
}
getStyleDisplay(condition) {
return condition ? 'block' : 'none';
}
getIndex() {
return this.glide && this.glide.index;
}
// noinspection JSUnusedGlobalSymbols
getSettings() {
return this.glide && this.glide.settings;
}
// noinspection JSUnusedGlobalSymbols
getType() {
return this.glide && this.glide.type;
}
// noinspection JSUnusedGlobalSymbols
isDisabled() {
return this.glide && this.glide.disabled;
}
mount() {
if (this.glide) {
this.glide.mount();
}
}
update(settings) {
if (this.glide) {
this.glide.update(settings);
this.changeDetectorRef.detectChanges();
}
}
destroy() {
if (this.glide) {
this.glide.destroy();
}
}
// noinspection JSUnusedGlobalSymbols
go(pattern) {
if (this.glide) {
this.glide.go(pattern);
}
}
pause() {
if (this.glide) {
this.glide.pause();
}
}
play(force) {
if (this.glide) {
if (typeof force === 'number') {
this.glide.play(force);
}
else {
this.glide.play();
}
}
}
// noinspection JSUnusedGlobalSymbols
disable() {
if (this.glide) {
this.glide.disable();
}
}
enable() {
if (this.glide) {
this.glide.enable();
}
}
isType(type) {
return this.glide && this.glide.isType(type);
}
recreate() {
if (this.glide) {
this.destroy();
}
this.create();
}
create() {
this.initGlideBullets();
this.glide = new Glide(this.glideEl?.nativeElement, this.getGlideInitSettings());
this.initGlideEvents();
this.mount();
this.changeDetectorRef.detectChanges();
}
initGlideBullets() {
const glideSlidesNativeElement = this.glideSlidesEl?.nativeElement;
const childrenLength = glideSlidesNativeElement.children.length;
this.glideBullets = [...new Array(childrenLength).keys()];
this.changeDetectorRef.detectChanges();
}
initGlideEvents() {
if (!this.glide || !this.listenToEvents) {
return;
}
this.glide.on('mount.before', () => this.mountedBefore.emit());
this.glide.on('mount.after', () => this.mountedAfter.emit());
this.glide.on('update', () => this.updated.emit());
this.glide.on('play', () => this.played.emit());
this.glide.on('pause', () => this.paused.emit());
this.glide.on('build.before', () => this.buildedBefore.emit());
this.glide.on('build.after', () => this.buildedAfter.emit());
this.glide.on('run.before', (move) => this.ranBefore.emit(move));
this.glide.on('run', (move) => this.ran.emit(move));
this.glide.on('run.after', (move) => this.ranAfter.emit(move));
this.glide.on('run.offset', (move) => this.ranOffset.emit(move));
this.glide.on('run.start', (move) => this.runStarted.emit(move));
this.glide.on('run.end', (move) => this.runEnded.emit(move));
this.glide.on('move', (movement) => this.moved.emit(movement));
this.glide.on('move.after', (movement) => this.movedAfter.emit(movement));
this.glide.on('resize', () => this.resized.emit());
this.glide.on('swipe.start', () => this.swipeStarted.emit());
this.glide.on('swipe.move', () => this.swipeMoved.emit());
this.glide.on('swipe.end', () => this.swipeEnded.emit());
this.glide.on('translate.jump', (movement) => this.translateJumped.emit(movement));
}
getGlideInitSettings() {
return {
type: this.type,
startAt: this.startAt,
perView: this.perView,
focusAt: this.focusAt,
gap: this.gap,
autoplay: this.autoplay,
hoverpause: this.hoverpause,
keyboard: this.keyboard,
bound: this.bound,
swipeThreshold: this.swipeThreshold,
dragThreshold: this.dragThreshold,
perTouch: this.perTouch,
touchRatio: this.touchRatio,
touchAngle: this.touchAngle,
animationDuration: this.animationDuration,
rewind: this.rewind,
rewindDuration: this.rewindDuration,
animationTimingFunc: this.animationTimingFunc,
direction: this.direction,
peek: this.peek,
breakpoints: this.breakpoints,
classes: this.classes,
throttle: this.throttle,
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NgxGlideComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: NgxGlideComponent, isStandalone: true, selector: "ngx-glide", inputs: { showArrows: "showArrows", showBullets: "showBullets", arrowLeftLabel: "arrowLeftLabel", arrowLeftTemplate: "arrowLeftTemplate", arrowRightLabel: "arrowRightLabel", arrowRightTemplate: "arrowRightTemplate", listenToEvents: "listenToEvents", type: "type", startAt: "startAt", perView: "perView", focusAt: "focusAt", gap: "gap", autoplay: "autoplay", hoverpause: "hoverpause", keyboard: "keyboard", bound: "bound", swipeThreshold: "swipeThreshold", dragThreshold: "dragThreshold", perTouch: "perTouch", touchRatio: "touchRatio", touchAngle: "touchAngle", animationDuration: "animationDuration", rewind: "rewind", rewindDuration: "rewindDuration", animationTimingFunc: "animationTimingFunc", direction: "direction", peek: "peek", breakpoints: "breakpoints", classes: "classes", throttle: "throttle" }, outputs: { mountedBefore: "mountedBefore", mountedAfter: "mountedAfter", updated: "updated", played: "played", paused: "paused", buildedBefore: "buildedBefore", buildedAfter: "buildedAfter", ranBefore: "ranBefore", ran: "ran", ranAfter: "ranAfter", ranOffset: "ranOffset", runStarted: "runStarted", runEnded: "runEnded", moved: "moved", movedAfter: "movedAfter", resized: "resized", swipeStarted: "swipeStarted", swipeMoved: "swipeMoved", swipeEnded: "swipeEnded", translateJumped: "translateJumped" }, viewQueries: [{ propertyName: "glideEl", first: true, predicate: ["glideEl"], descendants: true }, { propertyName: "glideSlidesEl", first: true, predicate: ["glideSlidesEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #glideEl class=\"glide\">\n <div class=\"glide__track\" data-glide-el=\"track\">\n <div #glideSlidesEl class=\"glide__slides\">\n <ng-content></ng-content>\n </div>\n </div>\n <div\n class=\"glide__arrows\"\n data-glide-el=\"controls\"\n [style.display]=\"showArrows ? 'block' : 'none'\"\n >\n <button\n class=\"glide__arrow glide__arrow--left\"\n data-glide-dir=\"<\"\n [style.display]=\"getStyleDisplay(!arrowLeftTemplate)\"\n >\n {{ arrowLeftLabel }}\n </button>\n <button\n class=\"glide__arrow glide__arrow--right\"\n data-glide-dir=\">\"\n [style.display]=\"getStyleDisplay(!arrowRightTemplate)\"\n >\n {{ arrowRightLabel }}\n </button>\n <div\n data-glide-dir=\"<\"\n [style.display]=\"getStyleDisplay(!!arrowLeftTemplate)\"\n >\n <ng-container *ngTemplateOutlet=\"arrowLeftTemplate\"></ng-container>\n </div>\n <div\n data-glide-dir=\">\"\n [style.display]=\"getStyleDisplay(!!arrowRightTemplate)\"\n >\n <ng-container *ngTemplateOutlet=\"arrowRightTemplate\"></ng-container>\n </div>\n </div>\n <div\n class=\"glide__bullets\"\n data-glide-el=\"controls[nav]\"\n [style.display]=\"showBullets ? 'block' : 'none'\"\n >\n <ng-container *ngIf=\"glideBullets\">\n <button\n *ngFor=\"let glideBullet of glideBullets\"\n class=\"glide__bullet\"\n [attr.data-glide-dir]=\"'=' + glideBullet\"\n ></button>\n </ng-container>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NgxGlideComponent, decorators: [{
type: Component,
args: [{ standalone: true, imports: [NgIf, NgForOf, NgTemplateOutlet], selector: 'ngx-glide', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #glideEl class=\"glide\">\n <div class=\"glide__track\" data-glide-el=\"track\">\n <div #glideSlidesEl class=\"glide__slides\">\n <ng-content></ng-content>\n </div>\n </div>\n <div\n class=\"glide__arrows\"\n data-glide-el=\"controls\"\n [style.display]=\"showArrows ? 'block' : 'none'\"\n >\n <button\n class=\"glide__arrow glide__arrow--left\"\n data-glide-dir=\"<\"\n [style.display]=\"getStyleDisplay(!arrowLeftTemplate)\"\n >\n {{ arrowLeftLabel }}\n </button>\n <button\n class=\"glide__arrow glide__arrow--right\"\n data-glide-dir=\">\"\n [style.display]=\"getStyleDisplay(!arrowRightTemplate)\"\n >\n {{ arrowRightLabel }}\n </button>\n <div\n data-glide-dir=\"<\"\n [style.display]=\"getStyleDisplay(!!arrowLeftTemplate)\"\n >\n <ng-container *ngTemplateOutlet=\"arrowLeftTemplate\"></ng-container>\n </div>\n <div\n data-glide-dir=\">\"\n [style.display]=\"getStyleDisplay(!!arrowRightTemplate)\"\n >\n <ng-container *ngTemplateOutlet=\"arrowRightTemplate\"></ng-container>\n </div>\n </div>\n <div\n class=\"glide__bullets\"\n data-glide-el=\"controls[nav]\"\n [style.display]=\"showBullets ? 'block' : 'none'\"\n >\n <ng-container *ngIf=\"glideBullets\">\n <button\n *ngFor=\"let glideBullet of glideBullets\"\n class=\"glide__bullet\"\n [attr.data-glide-dir]=\"'=' + glideBullet\"\n ></button>\n </ng-container>\n </div>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }]; }, propDecorators: { showArrows: [{
type: Input
}], showBullets: [{
type: Input
}], arrowLeftLabel: [{
type: Input
}], arrowLeftTemplate: [{
type: Input
}], arrowRightLabel: [{
type: Input
}], arrowRightTemplate: [{
type: Input
}], listenToEvents: [{
type: Input
}], type: [{
type: Input
}], startAt: [{
type: Input
}], perView: [{
type: Input
}], focusAt: [{
type: Input
}], gap: [{
type: Input
}], autoplay: [{
type: Input
}], hoverpause: [{
type: Input
}], keyboard: [{
type: Input
}], bound: [{
type: Input
}], swipeThreshold: [{
type: Input
}], dragThreshold: [{
type: Input
}], perTouch: [{
type: Input
}], touchRatio: [{
type: Input
}], touchAngle: [{
type: Input
}], animationDuration: [{
type: Input
}], rewind: [{
type: Input
}], rewindDuration: [{
type: Input
}], animationTimingFunc: [{
type: Input
}], direction: [{
type: Input
}], peek: [{
type: Input
}], breakpoints: [{
type: Input
}], classes: [{
type: Input
}], throttle: [{
type: Input
}], mountedBefore: [{
type: Output
}], mountedAfter: [{
type: Output
}], updated: [{
type: Output
}], played: [{
type: Output
}], paused: [{
type: Output
}], buildedBefore: [{
type: Output
}], buildedAfter: [{
type: Output
}], ranBefore: [{
type: Output
}], ran: [{
type: Output
}], ranAfter: [{
type: Output
}], ranOffset: [{
type: Output
}], runStarted: [{
type: Output
}], runEnded: [{
type: Output
}], moved: [{
type: Output
}], movedAfter: [{
type: Output
}], resized: [{
type: Output
}], swipeStarted: [{
type: Output
}], swipeMoved: [{
type: Output
}], swipeEnded: [{
type: Output
}], translateJumped: [{
type: Output
}], glideEl: [{
type: ViewChild,
args: ['glideEl', { static: false }]
}], glideSlidesEl: [{
type: ViewChild,
args: ['glideSlidesEl', { static: false }]
}] } });
class NgxGlideModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NgxGlideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: NgxGlideModule, imports: [NgxGlideComponent], exports: [NgxGlideComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NgxGlideModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NgxGlideModule, decorators: [{
type: NgModule,
args: [{
imports: [NgxGlideComponent],
exports: [NgxGlideComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NgxGlideComponent, NgxGlideModule };
//# sourceMappingURL=ngx-glide.mjs.map