@ciri/ngx-carousel
Version:
A simple angular carousel component.
1,135 lines (1,097 loc) • 43.7 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('rxjs/internal/scheduler/animationFrame'), require('@angular/platform-browser'), require('resize-observer-polyfill'), require('@angular/common'), require('hammerjs')) :
typeof define === 'function' && define.amd ? define('@ciri/ngx-carousel', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', 'rxjs/internal/scheduler/animationFrame', '@angular/platform-browser', 'resize-observer-polyfill', '@angular/common', 'hammerjs'], factory) :
(global = global || self, factory((global.ciri = global.ciri || {}, global.ciri['ngx-carousel'] = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.rxjs['internal/scheduler/animationFrame'], global.ng.platformBrowser, global.ResizeObserver, global.ng.common));
}(this, (function (exports, core, rxjs, operators, animationFrame, platformBrowser, ResizeObserver, common) { 'use strict';
ResizeObserver = ResizeObserver && ResizeObserver.hasOwnProperty('default') ? ResizeObserver['default'] : ResizeObserver;
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __createBinding(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}
function __exportStar(m, exports) {
for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) exports[p] = m[p];
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
function __importStar(mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result.default = mod;
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/lazy-render.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var LazyRenderDirective = /** @class */ (function () {
function LazyRenderDirective(content) {
this.content = content;
}
LazyRenderDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[lazyRender]'
},] }
];
/** @nocollapse */
LazyRenderDirective.ctorParameters = function () { return [
{ type: core.TemplateRef }
]; };
return LazyRenderDirective;
}());
if (false) {
/** @type {?} */
LazyRenderDirective.prototype.content;
}
/**
* @fileoverview added by tsickle
* Generated from: utils.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* 监听元素大小变动
* \@param target 被监听元素
* @type {?}
*/
var resize = (/**
* @param {?} target
* @return {?}
*/
function (target) {
return new rxjs.Observable((/**
* @param {?} observer
* @return {?}
*/
function (observer) {
/** @type {?} */
var ro = new ResizeObserver((/**
* @param {?} entries
* @return {?}
*/
function (entries) {
observer.next(entries);
}));
ro.observe(target);
return (/**
* @return {?}
*/
function () {
ro.disconnect();
});
}));
});
/**
* @param {?} value
* @param {?} min
* @param {?} max
* @return {?}
*/
function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
}
/**
* @param {?} number
* @param {?} start
* @param {?} end
* @return {?}
*/
function inRange(number, start, end) {
return number >= start && number <= end;
}
/** @type {?} */
var CAROUSEL = new core.InjectionToken('CarouselToken');
/**
* @fileoverview added by tsickle
* Generated from: lib/carousel-item/carousel-item.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CarouselItemComponent = /** @class */ (function () {
function CarouselItemComponent(elRef, cdr, sanitizer, parent // 之所以不声明具体类型是因为会警告循环引用，虽然它并未发生
) {
this.elRef = elRef;
this.cdr = cdr;
this.sanitizer = sanitizer;
this.parent = parent;
this.rendered = false;
this.destroy$ = new rxjs.Subject();
}
Object.defineProperty(CarouselItemComponent.prototype, "isLazyRender", {
// 这种方式不兼容 ie11，废弃掉此方案
// @HostBinding('style')
// get style() {
// return this.sanitizer.bypassSecurityTrustStyle(`
// width: ${this.parent.width}px;
// `)
// }
get:
// 这种方式不兼容 ie11，废弃掉此方案
// @HostBinding('style')
// get style() {
// return this.sanitizer.bypassSecurityTrustStyle(`
// width: ${this.parent.width}px;
// `)
// }
/**
* @return {?}
*/
function () {
return !!this.lazyContent;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CarouselItemComponent.prototype, "shouldRender", {
get: /**
* @return {?}
*/
function () {
return !this.isLazyRender || this.rendered;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
CarouselItemComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
CarouselItemComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
var _a = (/** @type {?} */ (this.parent)), active$ = _a.active$, cache = _a.cache, offset = _a.lazyRenderOffset;
active$.pipe(operators.takeUntil(this.destroy$)).subscribe((/**
* @param {?} index
* @return {?}
*/
function (index) {
_this.rendered =
(cache && _this.rendered) || inRange(_this.index, index - offset, index + offset);
_this.cdr.markForCheck();
}));
};
/**
* @return {?}
*/
CarouselItemComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy$.next();
this.destroy$.complete();
};
CarouselItemComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-carousel-item',
template: "<ng-container *ngIf=\"shouldRender\" [ngTemplateOutlet]=\"lazyContent && lazyContent.content\">\n <ng-content></ng-content>\n</ng-container>\n",
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush,
host: {
'[class.ngx-carousel__item]': "true"
},
styles: [".ngx-carousel__item{display:inline-block;vertical-align:top}.ngx-carousel__item.pre-mirror-node{position:absolute;left:0;transform:translateX(-100%)}.ngx-carousel__item.post-mirror-node{position:absolute;right:0;transform:translateX(100%)}"]
}] }
];
/** @nocollapse */
CarouselItemComponent.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: core.ChangeDetectorRef },
{ type: platformBrowser.DomSanitizer },
{ type: undefined, decorators: [{ type: core.Inject, args: [CAROUSEL,] }] }
]; };
CarouselItemComponent.propDecorators = {
lazyContent: [{ type: core.ContentChild, args: [LazyRenderDirective, { static: false },] }]
};
return CarouselItemComponent;
}());
if (false) {
/** @type {?} */
CarouselItemComponent.prototype.lazyContent;
/** @type {?} */
CarouselItemComponent.prototype.index;
/** @type {?} */
CarouselItemComponent.prototype.rendered;
/**
* @type {?}
* @private
*/
CarouselItemComponent.prototype.destroy$;
/** @type {?} */
CarouselItemComponent.prototype.elRef;
/**
* @type {?}
* @private
*/
CarouselItemComponent.prototype.cdr;
/**
* @type {?}
* @private
*/
CarouselItemComponent.prototype.sanitizer;
/**
* @type {?}
* @private
*/
CarouselItemComponent.prototype.parent;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/carousel/carousel.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CarouselComponent = /** @class */ (function () {
function CarouselComponent(renderer, hostElRef, cdr) {
this.renderer = renderer;
this.hostElRef = hostElRef;
this.cdr = cdr;
/**
* 是否开启无缝模式
*/
this.loop = false;
/**
* 切换速度（ms）
*/
this.speed = 300;
/**
* 自动轮播时间间隔，0 代表关闭自动轮播
*/
this.autoplay = 0;
/**
* 是否跟随手指滑动，设为 false 代表只在松手后进行移动判断
*/
this.followFinger = true;
/**
* 是否允许手动滑动，设为 false 代表只能通过 api 翻页
*/
this.allowTouchMove = true;
/**
* 默认激活项
*/
this.initialIndex = 0;
/**
* lazyRender 模式下预渲染个数，1 代表左右多渲染一个，2 代表左右多渲染两个，...
*/
this.lazyRenderOffset = 0;
/**
* 是否缓存 lazyRender 模式下渲染过的 item，不从 dom 树中删除
*/
this.cache = false;
/**
* 索引变动时触发
*/
this.indexChange = new core.EventEmitter();
this.active$ = new rxjs.BehaviorSubject(null);
this.destroy$ = new rxjs.Subject();
this.percent = 0; // 手指滑动距离所占宽度总和百分比
// 手指滑动距离所占宽度总和百分比
this.offset = 0; // 偏移量（%）
// 偏移量（%）
this.animating = false; // 是否处于过渡效果中
}
Object.defineProperty(CarouselComponent.prototype, "active", {
get: /**
* @return {?}
*/
function () {
return this.active$.value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CarouselComponent.prototype, "count", {
get: /**
* @return {?}
*/
function () {
return (this.items || []).length;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CarouselComponent.prototype, "viewport", {
get: /**
* @return {?}
*/
function () {
return this.hostElRef.nativeElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CarouselComponent.prototype, "width", {
get: /**
* @return {?}
*/
function () {
return this.viewport.offsetWidth;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CarouselComponent.prototype, "canMove", {
get: /**
* @return {?}
*/
function () {
return this.allowTouchMove && !this.animating;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CarouselComponent.prototype, "data", {
get: /**
* @return {?}
*/
function () {
return {
active: this.active,
count: this.count,
offset: this.offset,
animating: this.animating,
atFirst: this.active === 0,
atLast: this.active === this.count - 1
};
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
CarouselComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
CarouselComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
this.items.changes
.pipe(operators.takeUntil(this.destroy$), operators.startWith(null), operators.debounceTime(0, animationFrame.animationFrame))
.subscribe((/**
* @return {?}
*/
function () {
_this.init();
}));
this.active$
.pipe(operators.takeUntil(this.destroy$), operators.skip(1), operators.filter((/**
* @param {?} v
* @return {?}
*/
function (v) { return v !== null && inRange(v, 0, _this.count - 1); })), operators.distinctUntilChanged())
.subscribe((/**
* @param {?} res
* @return {?}
*/
function (res) {
_this.indexChange.emit(res);
_this.cdr.markForCheck();
}));
// resize 功能待开发
// resize(this.viewport)
// .pipe(takeUntil(this.destroy$), debounceTime(0, animationFrame))
// .subscribe(() => {
// // this.updateWidth()
// // this.goTo(this.active, true)
// })
};
/**
* @return {?}
*/
CarouselComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy$.next();
this.destroy$.complete();
};
/**
* @param {?} e
* @return {?}
*/
CarouselComponent.prototype.onPanStart = /**
* @param {?} e
* @return {?}
*/
function (e) {
this.stopAutoplay();
};
/**
* @param {?} e
* @return {?}
*/
CarouselComponent.prototype.onPanMove = /**
* @param {?} e
* @return {?}
*/
function (e) {
if (!this.canMove) {
return;
}
/** @type {?} */
var deltaX = this.getSafeDeltaX(e.deltaX);
this.percent = ((100 / this.count) * deltaX) / this.width;
if (this.followFinger) {
/** @type {?} */
var offset = this.percent - (100 / this.count) * this.active;
this.move(offset, true);
}
};
/**
* @param {?} e
* @return {?}
*/
CarouselComponent.prototype.onPanEnd = /**
* @param {?} e
* @return {?}
*/
function (e) {
if (!this.canMove) {
return;
}
// 轻拂或者滑动距离大于等于一个节点宽度的 50% 才进行跳转
/** @type {?} */
var newActive = this.active;
/** @type {?} */
var isSwipeLeft = e.direction === Hammer.DIRECTION_LEFT && e.velocityX < -0.3;
/** @type {?} */
var isSwipeRight = e.direction === Hammer.DIRECTION_RIGHT && e.velocityX > 0.3;
if (isSwipeLeft || this.percent <= -50 / this.count) {
newActive++;
}
else if (isSwipeRight || this.percent >= 50 / this.count) {
newActive--;
}
this.goTo(newActive);
this.startAutoplay();
};
/**
* @param {?=} target
* @param {?=} immediate
* @return {?}
*/
CarouselComponent.prototype.goTo = /**
* @param {?=} target
* @param {?=} immediate
* @return {?}
*/
function (target, immediate) {
var _this = this;
if (target === void 0) { target = 0; }
if (immediate === void 0) { immediate = false; }
if (this.animating) {
return;
}
/** @type {?} */
var active = this.getSafeActive(target);
/** @type {?} */
var realActive = this.getRealActive(active);
this.active$.next(realActive);
// 到达第一个或最后一个时更新镜像节点
if (this.loop && (realActive === 0 || realActive === this.count - 1)) {
this.handleMirrorNodes();
}
this.animating = true;
this.move(-(100 / this.count) * active, immediate).subscribe((/**
* @return {?}
*/
function () {
_this.animating = false;
if (active === -1 || active === _this.count) {
_this.goTo(realActive, true);
}
}));
};
/**
* @return {?}
*/
CarouselComponent.prototype.prev = /**
* @return {?}
*/
function () {
this.goTo(this.active - 1);
};
/**
* @return {?}
*/
CarouselComponent.prototype.next = /**
* @return {?}
*/
function () {
this.goTo(this.active + 1);
};
/**
* @private
* @return {?}
*/
CarouselComponent.prototype.init = /**
* @private
* @return {?}
*/
function () {
var _this = this;
if (this.items.length === 0) {
return;
}
this.items.forEach((/**
* @param {?} el
* @param {?} index
* @return {?}
*/
function (el, index) {
el.index = index;
_this.renderer.setStyle(el.elRef.nativeElement, 'width', _this.width + "px");
}));
this.goTo(this.getSafeActive(this.initialIndex, true), true);
this.startAutoplay();
};
/**
* @private
* @param {?} deltaX
* @return {?}
*/
CarouselComponent.prototype.getSafeDeltaX = /**
* @private
* @param {?} deltaX
* @return {?}
*/
function (deltaX) {
/** @type {?} */
var w = this.width;
return clamp(deltaX, -w, w);
};
/**
* @private
* @param {?} active
* @param {?=} strict
* @return {?}
*/
CarouselComponent.prototype.getSafeActive = /**
* @private
* @param {?} active
* @param {?=} strict
* @return {?}
*/
function (active, strict) {
if (strict === void 0) { strict = false; }
/** @type {?} */
var min = this.loop && !strict ? -1 : 0;
/** @type {?} */
var max = this.loop && !strict ? this.count : this.count - 1;
return clamp(active, min, max);
};
// 计算真实索引
// 由于 loop 模式下拷贝了俩节点，所以 active 有误差
// 假设有三个节点，那么 active 非 loop 模式下为 0 ～ 2，loop 模式下为 -1 ～ 3
// 计算真实索引
// 由于 loop 模式下拷贝了俩节点，所以 active 有误差
// 假设有三个节点，那么 active 非 loop 模式下为 0 ～ 2，loop 模式下为 -1 ～ 3
/**
* @private
* @param {?} active
* @return {?}
*/
CarouselComponent.prototype.getRealActive =
// 计算真实索引
// 由于 loop 模式下拷贝了俩节点，所以 active 有误差
// 假设有三个节点，那么 active 非 loop 模式下为 0 ～ 2，loop 模式下为 -1 ～ 3
/**
* @private
* @param {?} active
* @return {?}
*/
function (active) {
return (active + this.count) % this.count;
};
// loop 模式下首尾拷贝一个节点，模拟无缝轮播
// 0 1 2 => 2 0 1 2 0
// TODO: 也许能找到一个不用手动复制 dom，并且可以自动更新内容的方式
// loop 模式下首尾拷贝一个节点，模拟无缝轮播
// 0 1 2 => 2 0 1 2 0
// TODO: 也许能找到一个不用手动复制 dom，并且可以自动更新内容的方式
/**
* @private
* @return {?}
*/
CarouselComponent.prototype.handleMirrorNodes =
// loop 模式下首尾拷贝一个节点，模拟无缝轮播
// 0 1 2 => 2 0 1 2 0
// TODO: 也许能找到一个不用手动复制 dom，并且可以自动更新内容的方式
/**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var trackEl = this.track.nativeElement
// 清理镜像节点
;
// 清理镜像节点
try {
this.renderer.removeChild(trackEl, this.preMirrorNode);
this.renderer.removeChild(trackEl, this.postMirrorNode);
}
catch (e) { }
var _a = this.items, first = _a.first, last = _a.last;
this.preMirrorNode = last.elRef.nativeElement.cloneNode(true);
this.postMirrorNode = first.elRef.nativeElement.cloneNode(true);
this.renderer.addClass(this.preMirrorNode, 'pre-mirror-node');
this.renderer.addClass(this.postMirrorNode, 'post-mirror-node');
this.renderer.insertBefore(trackEl, this.preMirrorNode, first.elRef.nativeElement);
this.renderer.appendChild(trackEl, this.postMirrorNode);
};
/**
* @private
* @param {?} offset
* @param {?=} immediate
* @return {?}
*/
CarouselComponent.prototype.move = /**
* @private
* @param {?} offset
* @param {?=} immediate
* @return {?}
*/
function (offset, immediate) {
if (immediate === void 0) { immediate = false; }
/** @type {?} */
var el = this.track.nativeElement;
/** @type {?} */
var oldOffset = this.offset;
/** @type {?} */
var newOffset = (this.offset = offset);
this.renderer.setStyle(el, 'transition', immediate ? 'none' : "transform " + this.speed + "ms");
this.renderer.setStyle(el, 'transform', "translate3d(" + offset + "%, 0, 0)");
return rxjs.timer(immediate || newOffset === oldOffset ? 0 : this.speed).pipe(operators.takeUntil(this.destroy$));
};
/**
* @private
* @return {?}
*/
CarouselComponent.prototype.startAutoplay = /**
* @private
* @return {?}
*/
function () {
var _this = this;
if (!this.autoplay || this.count <= 1) {
return;
}
this.stopAutoplay();
this.intervalSub = rxjs.interval(this.autoplay + this.speed)
.pipe(operators.takeUntil(this.destroy$))
.subscribe((/**
* @return {?}
*/
function () {
/** @type {?} */
var oldActive = _this.active;
/** @type {?} */
var newActive = _this.loop ? oldActive + 1 : _this.getRealActive(oldActive + 1);
_this.goTo(newActive);
}));
};
/**
* @private
* @return {?}
*/
CarouselComponent.prototype.stopAutoplay = /**
* @private
* @return {?}
*/
function () {
this.intervalSub && this.intervalSub.unsubscribe();
};
CarouselComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-carousel',
template: "<div\n class=\"ngx-carousel__track\"\n #track\n (dragstart)=\"$event.preventDefault()\"\n (panstart)=\"onPanStart($event)\"\n (panmove)=\"onPanMove($event)\"\n (panend)=\"onPanEnd($event)\"\n (pancancel)=\"onPanEnd($event)\"\n>\n <ng-content></ng-content>\n</div>\n\n<div class=\"ngx-carousel__indicator\" *ngIf=\"!indicator\">\n <div\n *ngFor=\"let item of items; let i = index\"\n [class.active]=\"i === active\"\n ></div>\n</div>\n\n<ng-container *ngTemplateOutlet=\"indicator; context: { $implicit: data }\"></ng-container>\n",
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush,
host: {
'[class.ngx-carousel]': "true"
},
providers: [
{
provide: CAROUSEL,
useExisting: core.forwardRef((/**
* @return {?}
*/
function () { return CarouselComponent; }))
}
],
styles: [".ngx-carousel{position:relative;display:block;overflow:hidden}.ngx-carousel__track{position:relative;display:inline-block;white-space:nowrap}.ngx-carousel__indicator{position:absolute;bottom:10px;width:100%;text-align:center;white-space:nowrap;font-size:0;pointer-events:none}.ngx-carousel__indicator div{display:inline-block;width:6px;height:6px;margin:0 3px;border-radius:50%;background:rgba(0,0,0,.25);pointer-events:auto}.ngx-carousel__indicator div.active{background:rgba(0,0,0,.75)}"]
}] }
];
/** @nocollapse */
CarouselComponent.ctorParameters = function () { return [
{ type: core.Renderer2 },
{ type: core.ElementRef },
{ type: core.ChangeDetectorRef }
]; };
CarouselComponent.propDecorators = {
loop: [{ type: core.Input }],
speed: [{ type: core.Input }],
autoplay: [{ type: core.Input }],
followFinger: [{ type: core.Input }],
allowTouchMove: [{ type: core.Input }],
indicator: [{ type: core.Input }],
initialIndex: [{ type: core.Input }],
lazyRenderOffset: [{ type: core.Input }],
cache: [{ type: core.Input }],
indexChange: [{ type: core.Output }],
track: [{ type: core.ViewChild, args: ['track', { static: false },] }],
items: [{ type: core.ContentChildren, args: [CarouselItemComponent,] }]
};
return CarouselComponent;
}());
if (false) {
/**
* 是否开启无缝模式
* @type {?}
*/
CarouselComponent.prototype.loop;
/**
* 切换速度（ms）
* @type {?}
*/
CarouselComponent.prototype.speed;
/**
* 自动轮播时间间隔，0 代表关闭自动轮播
* @type {?}
*/
CarouselComponent.prototype.autoplay;
/**
* 是否跟随手指滑动，设为 false 代表只在松手后进行移动判断
* @type {?}
*/
CarouselComponent.prototype.followFinger;
/**
* 是否允许手动滑动，设为 false 代表只能通过 api 翻页
* @type {?}
*/
CarouselComponent.prototype.allowTouchMove;
/**
* 自定义指示器
* @type {?}
*/
CarouselComponent.prototype.indicator;
/**
* 默认激活项
* @type {?}
*/
CarouselComponent.prototype.initialIndex;
/**
* lazyRender 模式下预渲染个数，1 代表左右多渲染一个，2 代表左右多渲染两个，...
* @type {?}
*/
CarouselComponent.prototype.lazyRenderOffset;
/**
* 是否缓存 lazyRender 模式下渲染过的 item，不从 dom 树中删除
* @type {?}
*/
CarouselComponent.prototype.cache;
/**
* 索引变动时触发
* @type {?}
*/
CarouselComponent.prototype.indexChange;
/** @type {?} */
CarouselComponent.prototype.track;
/** @type {?} */
CarouselComponent.prototype.items;
/** @type {?} */
CarouselComponent.prototype.active$;
/**
* @type {?}
* @private
*/
CarouselComponent.prototype.destroy$;
/**
* @type {?}
* @private
*/
CarouselComponent.prototype.intervalSub;
/**
* @type {?}
* @private
*/
CarouselComponent.prototype.percent;
/**
* @type {?}
* @private
*/
CarouselComponent.prototype.offset;
/**
* @type {?}
* @private
*/
CarouselComponent.prototype.animating;
/**
* @type {?}
* @private
*/
CarouselComponent.prototype.preMirrorNode;
/**
* @type {?}
* @private
*/
CarouselComponent.prototype.postMirrorNode;
/**
* @type {?}
* @private
*/
CarouselComponent.prototype.renderer;
/**
* @type {?}
* @private
*/
CarouselComponent.prototype.hostElRef;
/**
* @type {?}
* @private
*/
CarouselComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/hammer.config.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var HammerConfig = /** @class */ (function (_super) {
__extends(HammerConfig, _super);
function HammerConfig() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* @param {?} element
* @return {?}
*/
HammerConfig.prototype.buildHammer = /**
* @param {?} element
* @return {?}
*/
function (element) {
/** @type {?} */
var mc = new Hammer(element, {
inputClass: Hammer.TouchMouseInput
});
return mc;
};
return HammerConfig;
}(platformBrowser.HammerGestureConfig));
/**
* @fileoverview added by tsickle
* Generated from: lib/carousel.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CarouselModule = /** @class */ (function () {
function CarouselModule() {
}
CarouselModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [CarouselComponent, CarouselItemComponent, LazyRenderDirective],
imports: [common.CommonModule],
exports: [CarouselComponent, CarouselItemComponent, LazyRenderDirective],
providers: [{ provide: platformBrowser.HAMMER_GESTURE_CONFIG, useClass: HammerConfig }]
},] }
];
return CarouselModule;
}());
exports.CarouselComponent = CarouselComponent;
exports.CarouselItemComponent = CarouselItemComponent;
exports.CarouselModule = CarouselModule;
exports.LazyRenderDirective = LazyRenderDirective;
exports.ɵa = CAROUSEL;
exports.ɵb = HammerConfig;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ciri-ngx-carousel.umd.js.map