@exadel/esl
Version:
Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components
99 lines (98 loc) • 4 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 { bind, ready, memoize, listen, safe } from '../../esl-utils/decorators';
import { parseObjectSafe } from '../../esl-utils/misc/format';
import { ESLMediaRuleList } from '../../esl-media-query/core';
import { ESLCarousel } from '../core/esl-carousel';
/** Base mixin plugin of {@link ESLCarousel} */
export class ESLCarouselPlugin extends ESLMixinElement {
/** Plugin name, also an attribute name in the carousel configuration */
get name() {
return this.constructor.is;
}
/** Plugin configuration attribute value */
get configValue() {
const plugin = this.constructor;
return this.$$attr(plugin.is) || '';
}
set configValue(value) {
const plugin = this.constructor;
this.$$attr(plugin.is, value);
}
/** Plugin configuration query */
get configQuery() {
return ESLMediaRuleList.parse(this.configValue, this.$host.media, this.parseConfig);
}
/** Active plugin configuration object */
get config() {
const base = this.constructor.DEFAULT_CONFIG;
return Object.assign({}, base, this.configQuery.value || {});
}
/**
* Parses plugin media query value term to the config object.
* Provides the capability to pass a config a stringified non-strict JSON or as a string (mapped to single option configuration).
*
* Uses {@link ESLCarouselPlugin.DEFAULT_CONFIG_KEY} to map string value to the config object.
*/
parseConfig(value) {
if (!value)
return null;
const { DEFAULT_CONFIG_KEY } = this.constructor;
return parseObjectSafe(value, { [DEFAULT_CONFIG_KEY]: value });
}
connectedCallback() {
const { $host } = this;
if ($host instanceof ESLCarousel) {
super.connectedCallback();
this.onInit();
}
else {
const { is } = this.constructor;
console.warn('[ESL]: ESLCarousel %s plugin rejected for non correct target %o', is, $host);
this.$host.removeAttribute(is);
}
}
attributeChangedCallback(attrName, oldValue, newValue) {
if (attrName === this.constructor.is) {
memoize.clear(this, 'configQuery');
this.$$on(this.onConfigChange);
this.onConfigChange();
}
}
/** Callback to be executed on plugin initialization */
onInit() {
}
/** Callback to be executed on plugin configuration query change (attribute change) */
onConfigChange() {
memoize.clear(this, 'config');
}
/** Register mixin-plugin in ESLMixinRegistry */
static register() {
ESLCarousel.registered.then(() => super.register());
}
}
/** Default configuration */
ESLCarouselPlugin.DEFAULT_CONFIG = {};
/** Config key to be used if passed non object value */
ESLCarouselPlugin.DEFAULT_CONFIG_KEY = '';
__decorate([
memoize(),
safe(ESLMediaRuleList.empty())
], ESLCarouselPlugin.prototype, "configQuery", null);
__decorate([
memoize()
], ESLCarouselPlugin.prototype, "config", null);
__decorate([
bind
], ESLCarouselPlugin.prototype, "parseConfig", null);
__decorate([
ready
], ESLCarouselPlugin.prototype, "connectedCallback", null);
__decorate([
listen({ event: 'change', target: ($this) => $this.configQuery })
], ESLCarouselPlugin.prototype, "onConfigChange", null);