@exadel/esl
Version:
Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components
60 lines (59 loc) • 2.85 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 { listen } from '../../../esl-utils/decorators/listen';
import { ExportNs } from '../../../esl-utils/environment/export-ns';
import { CSSClassUtils } from '../../../esl-utils/dom/class';
import { ESLCarouselPlugin } from '../esl-carousel.plugin';
import { ESLCarouselSlide } from '../../core/esl-carousel.slide';
import { ESLCarouselSlideEvent } from '../../core/esl-carousel.events';
/**
* Plugin for {@link ESLCarousel} that allows to control the `container-class` feature behavior.
*
* Supports two modes:
* - `default`: do not change default behavior - adds/removes classes on the container element after slides have changed
* - `proactive`: adds/removes classes on the container element proactively as soon as change starts
*/
let ESLCarouselClassBehaviourMixin = class ESLCarouselClassBehaviourMixin extends ESLCarouselPlugin {
onConfigChange() {
super.onConfigChange();
this.$$on(this.onSlideChange);
}
/** Resolves the container classes from given slide element */
getClasses($slide) {
var _a;
return (_a = ESLCarouselSlide.get($slide)) === null || _a === void 0 ? void 0 : _a.containerClass;
}
onSlideChange({ $slidesBefore, $slidesAfter }) {
const { $container } = this.$host;
if (!$container)
return;
for (const $slide of $slidesBefore) {
CSSClassUtils.remove($container, this.getClasses($slide), $slide);
}
for (const $slide of $slidesAfter) {
CSSClassUtils.add($container, this.getClasses($slide), $slide);
}
}
};
ESLCarouselClassBehaviourMixin.is = 'esl-carousel-class-behavior';
ESLCarouselClassBehaviourMixin.DEFAULT_CONFIG = {
mode: 'default'
};
ESLCarouselClassBehaviourMixin.DEFAULT_CONFIG_KEY = 'mode';
__decorate([
listen({ inherit: true })
], ESLCarouselClassBehaviourMixin.prototype, "onConfigChange", null);
__decorate([
listen({
event: ESLCarouselSlideEvent.CHANGE,
condition: ($this) => $this.config.mode === 'proactive',
})
], ESLCarouselClassBehaviourMixin.prototype, "onSlideChange", null);
ESLCarouselClassBehaviourMixin = __decorate([
ExportNs('Carousel.ClassBehaviour')
], ESLCarouselClassBehaviourMixin);
export { ESLCarouselClassBehaviourMixin };