@exadel/esl
Version:
Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components
51 lines (50 loc) • 2.58 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 { ESLMixinElement } from '../../../esl-mixin-element/core';
import { attr, boolAttr, listen } from '../../../esl-utils/decorators';
import { afterNextRender } from '../../../esl-utils/async/raf';
import { ESLCarouselAutoplayEvent } from './esl-carousel.autoplay.event';
/**
* A mixin (custom attribute) element that manages the progress animation for the autoplay functionality
* of an ESL Carousel. It listens for `ESLCarouselAutoplayEvent` events and updates
* the animation state and autoplay status accordingly.
* Uses three markers to represent the autoplay progress:
* - `animate` attribute - appears on each cycle of active autoplay;
* drops one frame before the next cycle to activate CSS animation
* - `autoplay-enabled` attribute - indicates whether the autoplay plugin is enabled
* - `--esl-autoplay-timeout` CSS variable - indicates the current autoplay cycle duration
*/
export class ESLCarouselAutoplayProgressMixin extends ESLMixinElement {
attributeChangedCallback(name, oldValue, newValue) {
this.$$on(this._onChange);
}
_onChange(e) {
this.autoplayEnabled = e.enabled;
this.$host.style.setProperty('--esl-autoplay-timeout', `${e.duration}ms`);
requestAnimationFrame(() => this.animate = false);
e.active && afterNextRender(() => this.animate = true);
}
}
ESLCarouselAutoplayProgressMixin.is = 'esl-carousel-autoplay-progress';
__decorate([
attr({
name: 'target',
defaultValue: '::parent(.esl-carousel-nav-container)::find(esl-carousel)'
})
], ESLCarouselAutoplayProgressMixin.prototype, "carousel", void 0);
__decorate([
boolAttr()
], ESLCarouselAutoplayProgressMixin.prototype, "animate", void 0);
__decorate([
boolAttr()
], ESLCarouselAutoplayProgressMixin.prototype, "autoplayEnabled", void 0);
__decorate([
listen({
event: ESLCarouselAutoplayEvent.NAME,
target: ($this) => $this.carousel
})
], ESLCarouselAutoplayProgressMixin.prototype, "_onChange", null);