@exadel/esl
Version:
Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components
74 lines (73 loc) • 3.23 kB
JavaScript
var __decorate = (this && this.__decorate) || function (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;
};
import { ExportNs } from '../../../esl-utils/environment/export-ns';
import { listen, memoize } from '../../../esl-utils/decorators';
import { ESLCarousel } from '../../core/esl-carousel';
import { ESLCarouselPlugin } from '../esl-carousel.plugin';
import { ESLCarouselSlideEvent } from '../../core/esl-carousel.events';
/**
* Slide Carousel Link plugin mixin to bind carousel positions
*/
let ESLCarouselRelateToMixin = class ESLCarouselRelateToMixin extends ESLCarouselPlugin {
/** @returns event name(s) to listen for carousel state changes */
get event() {
return [this.config.proactive ? ESLCarouselSlideEvent.CHANGE : null, ESLCarouselSlideEvent.AFTER].filter(Boolean).join(' ');
}
/** @returns ESLCarousel target to share state changes */
get $target() {
const { target } = this.config;
if (!target || target === 'none')
return null;
const $target = this.$$find(target);
// Prevent cyclic reference - target should not be the host itself
if (!($target instanceof ESLCarousel) || $target === this.$host)
return null;
return $target;
}
onInit() {
if (!this.$target)
return;
// Sync host carousel to target's current position
this.$host.goTo(this.$target.activeIndex, { activator: this }).catch(console.debug);
}
onConfigChange() {
// Listener event change is not handled by resubscribe automatically
this.$$off(this._onSlideChange);
super.onConfigChange();
memoize.clear(this, '$target');
this.$$on(this._onSlideChange);
}
/** Handles event that fires when the target carousel slides state is changed. */
_onSlideChange(e) {
if (!this.$target || e.activator === this)
return;
// Make host carousel follow the target carousel
this.$host.goTo(e.indexAfter, { activator: this }).catch(console.debug);
}
};
ESLCarouselRelateToMixin.is = 'esl-carousel-relate-to';
ESLCarouselRelateToMixin.DEFAULT_CONFIG = {
target: 'none',
proactive: false
};
ESLCarouselRelateToMixin.DEFAULT_CONFIG_KEY = 'target';
__decorate([
memoize()
], ESLCarouselRelateToMixin.prototype, "$target", null);
__decorate([
listen({ inherit: true })
], ESLCarouselRelateToMixin.prototype, "onConfigChange", null);
__decorate([
listen({
event: ($this) => $this.event,
target: ($this) => $this.$target
})
], ESLCarouselRelateToMixin.prototype, "_onSlideChange", null);
ESLCarouselRelateToMixin = __decorate([
ExportNs('Carousel.RelateTo')
], ESLCarouselRelateToMixin);
export { ESLCarouselRelateToMixin };