@exadel/esl
Version:
Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components
105 lines (104 loc) • 4.22 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 { throttle } from '../../../esl-utils/async/throttle';
import { isElement } from '../../../esl-utils/dom/api';
import { bind, decorate, listen } from '../../../esl-utils/decorators';
import { ESLWheelEvent, ESLWheelTarget } from '../../../esl-event-listener/core';
import { dir } from '../../core/esl-carousel.utils';
import { ESLCarouselPlugin } from '../esl-carousel.plugin';
/**
* {@link ESLCarousel} wheel control plugin mixin
* Switch slides by mouse wheel
*
* @author Alexey Stsefanovich (ala'n)
*/
let ESLCarouselWheelMixin = class ESLCarouselWheelMixin extends ESLCarouselPlugin {
/** @returns true if the plugin should track vertical wheel */
get isVertical() {
switch (this.config.direction) {
case 'x': return false;
case 'y': return true;
default: return this.$host.state.vertical;
}
}
/** Resubscribes according new config */
onConfigChange() {
super.onConfigChange();
this.$$on(this._onLongWheel);
this.$$on(this._onWheel);
}
/** @returns true if the plugin should track passed event */
isEventIgnored(e) {
if (e.shiftKey === this.isVertical)
return true;
if (!isElement(e.target))
return false;
const { ignore } = this.config;
return !!ignore && !!e.target.closest(ignore);
}
/** Handles auxiliary events to pause/resume timer */
_onLongWheel(e) {
var _a;
if (!this.$host || this.$host.animating)
return;
const delta = this.isVertical ? e.deltaY : e.deltaX;
if (!delta)
return;
(_a = this.$host) === null || _a === void 0 ? void 0 : _a.goTo(`${this.config.type}:${dir(delta)}`, { activator: this }).catch(console.debug);
}
/** Handles auxiliary events to move the carousel */
_onWheel(e) {
var _a;
if (!this.$host || this.$host.animating || this.isEventIgnored(e))
return;
const delta = ESLWheelTarget.normalizeDelta(e, this.isVertical);
if (!delta)
return; // Ignore zero delta
// Prevent default action if configured
if (this.config.preventDefault)
e.preventDefault();
(_a = this.$host) === null || _a === void 0 ? void 0 : _a.move(this.$host.offset + delta, this.$host.activeIndex, { activator: this });
}
};
ESLCarouselWheelMixin.is = 'esl-carousel-wheel';
ESLCarouselWheelMixin.DEFAULT_CONFIG_KEY = 'type';
ESLCarouselWheelMixin.DEFAULT_CONFIG = {
type: 'slide',
ignore: '[contenteditable]',
direction: 'auto',
preventDefault: true
};
__decorate([
listen({ inherit: true })
], ESLCarouselWheelMixin.prototype, "onConfigChange", null);
__decorate([
bind
], ESLCarouselWheelMixin.prototype, "isEventIgnored", null);
__decorate([
listen({
event: ESLWheelEvent.TYPE,
target: (plugin) => ESLWheelTarget.for(plugin.$host, {
distance: 10,
preventDefault: plugin.config.preventDefault,
ignore: plugin.isEventIgnored
}),
condition: (plugin) => ['slide', 'group'].includes(plugin.config.type)
}),
decorate(throttle, 400)
], ESLCarouselWheelMixin.prototype, "_onLongWheel", null);
__decorate([
listen({
event: 'wheel',
passive: false,
condition: (plugin) => plugin.config.type === 'move'
})
], ESLCarouselWheelMixin.prototype, "_onWheel", null);
ESLCarouselWheelMixin = __decorate([
ExportNs('Carousel.Wheel')
], ESLCarouselWheelMixin);
export { ESLCarouselWheelMixin };