ngx-virtual-swiper
Version:
Swiper with virtual scroll.
253 lines (241 loc) • 11.7 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/bidi'), require('@angular/cdk/scrolling'), require('@angular/core'), require('rxjs')) :
typeof define === 'function' && define.amd ? define('ngx-virtual-swiper', ['exports', '@angular/cdk/bidi', '@angular/cdk/scrolling', '@angular/core', 'rxjs'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ngx-virtual-swiper'] = {}, global.ng.cdk.bidi, global.ng.cdk.scrolling, global.ng.core, global.rxjs));
}(this, (function (exports, bidi, scrolling, i0, rxjs) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () {
return e[k];
}
});
}
});
}
n['default'] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var NgxVirtualSwiperOptions = /** @class */ (function () {
function NgxVirtualSwiperOptions() {
/** returns to actual integer index */
this.finalize = true;
/**
* It's required by links, the library should know is it real swipe or fake.
* A value in px. If "touch distance" will be lower than this value then swiper will not move.
*/
this.threshold = 20;
/** prevent all type of clicks (e.g. links, Angular`s click) */
this.preventClicks = true;
}
return NgxVirtualSwiperOptions;
}());
NgxVirtualSwiperOptions.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function NgxVirtualSwiperOptions_Factory() { return new NgxVirtualSwiperOptions(); }, token: NgxVirtualSwiperOptions, providedIn: "root" });
NgxVirtualSwiperOptions.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
NgxVirtualSwiperOptions.ctorParameters = function () { return []; };
var getFirstTouch = function (e, key) { var _a, _b; return (_b = (_a = e === null || e === void 0 ? void 0 : e.touches) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b[key]; };
var ɵ0 = getFirstTouch;
var getClickPositions = function (e) {
var clientX = e.clientX;
var clientY = e.clientY;
return { clientX: clientX, clientY: clientY };
};
var getTouchPositions = function (e) {
var clientX = getFirstTouch(e, 'clientX');
var clientY = getFirstTouch(e, 'clientY');
return { clientX: clientX, clientY: clientY };
};
var isNumber = function (x) { return typeof x === 'number' && !isNaN(x); };
var VERTICAL_ORIENTATION = 'vertical';
var HORIZONTAL_ORIENTATION = 'horizontal';
var RIGHT_TO_LEFT = 'rtl';
var NgxVirtualSwiperDirective = /** @class */ (function () {
function NgxVirtualSwiperDirective(options,
/** to lean more see https://material.angular.io/cdk/scrolling/api */
cdk, dir) {
var _this = this;
this.options = options;
this.cdk = cdk;
this.dir = dir;
this.subscription = new rxjs.Subscription();
// eslint-disable-next-line @typescript-eslint/member-ordering
this.onMousedown = function (e) { return _this.start(getClickPositions(e)); };
this.onTouchstart = function (e) { return _this.start(getTouchPositions(e)); };
this.onMousemove = function (e) { return _this.move(getClickPositions(e)); };
this.onTouchmove = function (e) { return _this.move(getTouchPositions(e)); };
this.onFinish = function () {
if (_this.swiped) {
_this.toggleSwiped(false);
_this.finalize();
}
};
/** the bug-fix to prevent dragging images while swiping */
this.onDragstart = function (e) { return e.preventDefault(); };
this.mousemoveX = function (e) {
if (e) {
var offset = _this.cdk.measureScrollOffset();
var c = _this.rtl ? -1 : 1;
var delta = (_this.clientX - e.clientX) * c;
var value = offset + delta;
if (value >= 0 && value <= _this.scrollSize) {
_this.cdk.scrollToOffset(Math.abs(value));
_this.clientX = e.clientX;
}
}
};
this.mousemoveY = function (e) {
if (e) {
var offset = _this.cdk.measureScrollOffset();
var value = offset - e.clientY + _this.clientY;
if (value >= 0 && value <= _this.scrollSize) {
_this.cdk.scrollToOffset(value);
_this.clientY = e.clientY;
}
}
};
this.start = function (e) {
_this.toggleSwiped(true);
_this.clientX = e.clientX;
_this.clientY = e.clientY;
_this.prevClientX = e.clientX;
_this.prevClientY = e.clientY;
};
this.move = function (e) {
if (_this.swiped) {
if (_this.cdk.orientation === HORIZONTAL_ORIENTATION) {
_this.mousemoveX(e);
}
else if (_this.cdk.orientation === VERTICAL_ORIENTATION) {
_this.mousemoveY(e);
}
}
};
this.toggleSwiped = function (value) {
_this.swiped = value;
};
this.finalize = function () {
if (_this.options.finalize) {
_this.scrollToNearestIndex();
}
};
this.scrollToNearestIndex = function () {
var delta = _this.cdk.orientation === HORIZONTAL_ORIENTATION ? _this.prevClientX - _this.clientX :
_this.cdk.orientation === VERTICAL_ORIENTATION ? _this.prevClientY - _this.clientY :
null;
if (isNumber(delta)) {
var directionDelta = _this.rtl ? delta * -1 : delta;
var index = directionDelta > 0 && Math.abs(directionDelta) >= _this.options.threshold ? _this.index + 1 : _this.index;
_this.cdk.scrollToIndex(index, 'smooth');
}
};
this.addEventListener = function () {
_this.cdk.elementRef.nativeElement.addEventListener('click', _this.preventClicks, true);
};
this.removeEventListener = function () {
_this.cdk.elementRef.nativeElement.removeEventListener('click', _this.preventClicks, true);
};
/** prevent all type of clicks (e.g. click on links, Angular`s click) */
this.preventClicks = function (e) {
if (_this.changed && _this.options.preventClicks) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
}
};
}
NgxVirtualSwiperDirective.prototype.ngOnInit = function () {
var _this = this;
this.addEventListener();
this.subscription.add(this.cdk.scrolledIndexChange.subscribe(function (i) { return _this.index = i; }));
};
NgxVirtualSwiperDirective.prototype.ngOnDestroy = function () {
this.removeEventListener();
this.subscription.unsubscribe();
};
Object.defineProperty(NgxVirtualSwiperDirective.prototype, "changed", {
get: function () {
var result = false;
if (isNumber(this.prevClientX) && isNumber(this.options.threshold)) {
var deltaX = Math.abs(this.prevClientX - this.clientX);
result = deltaX >= this.options.threshold;
}
if (isNumber(this.prevClientY) && isNumber(this.options.threshold)) {
var deltaY = Math.abs(this.prevClientY - this.clientY);
result = result || deltaY >= this.options.threshold;
}
return result;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NgxVirtualSwiperDirective.prototype, "rtl", {
get: function () {
var _a;
return ((_a = this.dir) === null || _a === void 0 ? void 0 : _a.value) === RIGHT_TO_LEFT;
},
enumerable: false,
configurable: true
});
Object.defineProperty(NgxVirtualSwiperDirective.prototype, "scrollSize", {
get: function () {
return this.cdk.getDataLength() * this.itemSize;
},
enumerable: false,
configurable: true
});
return NgxVirtualSwiperDirective;
}());
NgxVirtualSwiperDirective.decorators = [
{ type: i0.Directive, args: [{
selector: '[ngxVirtualSwiper]'
},] }
];
NgxVirtualSwiperDirective.ctorParameters = function () { return [
{ type: NgxVirtualSwiperOptions, decorators: [{ type: i0.Inject, args: [NgxVirtualSwiperOptions,] }] },
{ type: scrolling.CdkVirtualScrollViewport, decorators: [{ type: i0.Inject, args: [scrolling.CdkVirtualScrollViewport,] }] },
{ type: bidi.Directionality, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [bidi.Directionality,] }] }
]; };
NgxVirtualSwiperDirective.propDecorators = {
itemSize: [{ type: i0.Input }],
onMousedown: [{ type: i0.HostListener, args: ['mousedown', ['$event'],] }],
onTouchstart: [{ type: i0.HostListener, args: ['touchstart', ['$event'],] }],
onMousemove: [{ type: i0.HostListener, args: ['mousemove', ['$event'],] }],
onTouchmove: [{ type: i0.HostListener, args: ['touchmove', ['$event'],] }],
onFinish: [{ type: i0.HostListener, args: ['document:mouseup',] }, { type: i0.HostListener, args: ['touchend',] }],
onDragstart: [{ type: i0.HostListener, args: ['document:dragstart', ['$event'],] }]
};
var NgxVirtualSwiperModule = /** @class */ (function () {
function NgxVirtualSwiperModule() {
}
return NgxVirtualSwiperModule;
}());
NgxVirtualSwiperModule.decorators = [
{ type: i0.NgModule, args: [{
imports: [],
declarations: [NgxVirtualSwiperDirective],
exports: [NgxVirtualSwiperDirective]
},] }
];
/*
* Public API Surface of ngx-virtual-swiper
*/
/**
* Generated bundle index. Do not edit.
*/
exports.NgxVirtualSwiperDirective = NgxVirtualSwiperDirective;
exports.NgxVirtualSwiperModule = NgxVirtualSwiperModule;
exports.NgxVirtualSwiperOptions = NgxVirtualSwiperOptions;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-virtual-swiper.umd.js.map