@exadel/esl
Version:
Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components
167 lines (166 loc) • 6.51 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;
};
var __awaiter = (this && this.__awaiter) || function (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());
});
};
import { ExportNs } from '../../../esl-utils/environment/export-ns';
import { listen, memoize } from '../../../esl-utils/decorators';
import { parseTime } from '../../../esl-utils/misc/format';
import { CSSClassUtils } from '../../../esl-utils/dom/class';
import { ESLTraversingQuery } from '../../../esl-traversing-query/core';
import { ESLCarouselPlugin } from '../esl-carousel.plugin';
import { ESLCarouselSlideEvent } from '../../core/esl-carousel.events';
import { ESLCarouselAutoplayEvent } from './esl-carousel.autoplay.event';
/**
* {@link ESLCarousel} autoplay (auto-advance) plugin mixin
* Automatically switch slides by timeout
*
* @author Alexey Stsefanovich (ala'n)
*/
let ESLCarouselAutoplayMixin = class ESLCarouselAutoplayMixin extends ESLCarouselPlugin {
constructor() {
super(...arguments);
this._enabled = true;
this._duration = null;
}
/** True if the autoplay timer is currently active */
get active() {
return !!this._duration;
}
/** True if the autoplay plugin is enabled */
get enabled() {
return this._enabled;
}
set enabled(value) {
this._enabled = value;
CSSClassUtils.toggle(this.$controls, this.config.controlCls, this._enabled);
const { $container } = this.$host;
$container && CSSClassUtils.toggle($container, this.config.containerCls, this._enabled);
}
/** The duration of the autoplay timer in milliseconds */
get duration() {
return parseTime(this.config.duration);
}
/** A list of control elements to toggle plugin state */
get $controls() {
const sel = this.config.control;
return sel ? ESLTraversingQuery.all(sel, this.$host) : [];
}
onInit() {
this.start();
}
disconnectedCallback() {
super.disconnectedCallback();
this.stop();
}
onConfigChange() {
super.onConfigChange();
memoize.clear(this, ['$controls', 'duration']);
this.$$on({ auto: true });
// Full restart during config change
this.stop();
this.start();
}
/** Activates and restarts the autoplay carousel timer */
start() {
const { duration } = this;
this.enabled = +duration > 0;
if (this.enabled)
this._onCycle();
}
/**
* Deactivates the autoplay carousel timer.
* @param system - If true, the plugin will be suspended but not disabled.
*/
stop(system = false) {
if (!this.active && !this.enabled)
return;
if (!system)
this.enabled = false;
this._duration && window.clearTimeout(this._duration);
this._duration = null;
ESLCarouselAutoplayEvent.dispatch(this);
}
/**
* Starts a new autoplay cycle.
* Produces cycle self call after a timeout with enabled command execution.
*/
_onCycle(exec) {
return __awaiter(this, void 0, void 0, function* () {
var _a;
this._duration && window.clearTimeout(this._duration);
this._duration = null;
if (exec)
yield ((_a = this.$host) === null || _a === void 0 ? void 0 : _a.goTo(this.config.command).catch(console.debug));
if (!this.enabled || this.active)
return;
const { duration } = this;
this._duration = window.setTimeout(() => this._onCycle(true), duration);
ESLCarouselAutoplayEvent.dispatch(this);
});
}
/** Handles click on control element to toggle plugin state */
_onToggle(e) {
this.enabled ? this.stop() : this.start();
e.preventDefault();
}
/** Handles auxiliary events that represent user interaction to pause/resume timer */
_onInteract(e) {
if (!this.enabled)
return;
if (['mouseenter', 'focusin'].includes(e.type)) {
this.stop(true);
}
else {
this.start();
}
}
/** Handles carousel slide change event to restart the timer */
_onSlideChange() {
if (this.active)
this.start();
}
};
ESLCarouselAutoplayMixin.is = 'esl-carousel-autoplay';
ESLCarouselAutoplayMixin.DEFAULT_CONFIG = {
duration: 10000,
command: 'slide:next',
trackInteraction: true
};
ESLCarouselAutoplayMixin.DEFAULT_CONFIG_KEY = 'duration';
__decorate([
memoize()
], ESLCarouselAutoplayMixin.prototype, "$controls", null);
__decorate([
listen({ inherit: true })
], ESLCarouselAutoplayMixin.prototype, "onConfigChange", null);
__decorate([
listen({
event: 'click',
target: ($this) => $this.$controls,
condition: ($this) => !!$this.$controls.length
})
], ESLCarouselAutoplayMixin.prototype, "_onToggle", null);
__decorate([
listen({
event: 'mouseleave mouseenter focusin focusout',
condition: ($this) => $this.config.trackInteraction
})
], ESLCarouselAutoplayMixin.prototype, "_onInteract", null);
__decorate([
listen(ESLCarouselSlideEvent.AFTER)
], ESLCarouselAutoplayMixin.prototype, "_onSlideChange", null);
ESLCarouselAutoplayMixin = __decorate([
ExportNs('Carousel.Autoplay')
], ESLCarouselAutoplayMixin);
export { ESLCarouselAutoplayMixin };