From c10fc6da0547658220693979c32d566ccea1637b Mon Sep 17 00:00:00 2001 From: "ala'n (Alexey Stsefanovich)" Date: Wed, 15 Mar 2023 02:31:21 +0100 Subject: [PATCH] feat(esl-base-element): `ESLBaseElement.prototype.baseTagName` shortcut --- src/modules/esl-alert/core/esl-alert.ts | 3 +-- src/modules/esl-base-element/core/esl-base-element.ts | 7 ++++++- src/modules/esl-base-element/test/element.listener.test.ts | 2 +- src/modules/esl-footnotes/core/esl-note.ts | 3 +-- .../esl-forms/esl-select-list/core/esl-select-item.ts | 2 +- .../esl-forms/esl-select-list/core/esl-select-list.ts | 4 ++-- src/modules/esl-mixin-element/ui/esl-mixin-element.ts | 6 +++--- src/modules/esl-toggleable/core/esl-toggleable.ts | 3 +-- src/modules/esl-toggleable/test/toggleable.request.test.ts | 6 +++--- 9 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/modules/esl-alert/core/esl-alert.ts b/src/modules/esl-alert/core/esl-alert.ts index 4395ed68b..e709f3b45 100644 --- a/src/modules/esl-alert/core/esl-alert.ts +++ b/src/modules/esl-alert/core/esl-alert.ts @@ -62,8 +62,7 @@ export class ESLAlert extends ESLToggleable { public static init(options?: Partial): ESLAlert { let alert: ESLAlert = document.querySelector(`body > ${ESLAlert.is}`)!; if (!alert) { - alert = document.createElement(ESLAlert.is) as ESLAlert; - options && Object.assign(alert, options); + alert = Object.assign(ESLAlert.create(), options || {}); document.body.appendChild(alert); } return alert; diff --git a/src/modules/esl-base-element/core/esl-base-element.ts b/src/modules/esl-base-element/core/esl-base-element.ts index bc0acf15b..a22ad8c23 100644 --- a/src/modules/esl-base-element/core/esl-base-element.ts +++ b/src/modules/esl-base-element/core/esl-base-element.ts @@ -24,9 +24,14 @@ export abstract class ESLBaseElement extends HTMLElement { protected _connected: boolean = false; + /** @returns custom element tag name */ + public get baseTagName(): string { + return (this.constructor as typeof ESLBaseElement).is; + } + protected connectedCallback(): void { this._connected = true; - this.classList.add((this.constructor as typeof ESLBaseElement).is); + this.classList.add(this.baseTagName); ESLEventUtils.subscribe(this); } diff --git a/src/modules/esl-base-element/test/element.listener.test.ts b/src/modules/esl-base-element/test/element.listener.test.ts index a4d4384da..3daa05818 100644 --- a/src/modules/esl-base-element/test/element.listener.test.ts +++ b/src/modules/esl-base-element/test/element.listener.test.ts @@ -15,7 +15,7 @@ describe('ESLBaseElement: listeners', () => { } TestElement.register(); - const el = document.createElement(TestElement.is); + const el = TestElement.create(); beforeAll(() => document.body.appendChild(el)); diff --git a/src/modules/esl-footnotes/core/esl-note.ts b/src/modules/esl-footnotes/core/esl-note.ts index 873fae023..336ed466b 100644 --- a/src/modules/esl-footnotes/core/esl-note.ts +++ b/src/modules/esl-footnotes/core/esl-note.ts @@ -127,8 +127,7 @@ export class ESLNote extends ESLBaseElement { /** Gets attribute value from the closest element with group behavior settings */ protected getClosestRelatedAttr(attrName: string): string | null { - const tagName = (this.constructor as typeof ESLBaseElement).is; - const relatedAttrName = `${tagName}-${attrName}`; + const relatedAttrName = `${this.baseTagName}-${attrName}`; const $closest = this.closest(`[${relatedAttrName}]`); return $closest ? $closest.getAttribute(relatedAttrName) : null; } diff --git a/src/modules/esl-forms/esl-select-list/core/esl-select-item.ts b/src/modules/esl-forms/esl-select-list/core/esl-select-item.ts index ed7da4068..105565575 100644 --- a/src/modules/esl-forms/esl-select-list/core/esl-select-item.ts +++ b/src/modules/esl-forms/esl-select-list/core/esl-select-item.ts @@ -51,7 +51,7 @@ export class ESLSelectItem extends ESLBaseElement { /** Helper to create an option item */ public static build(option: ESLSelectOption): ESLSelectItem { - const item = document.createElement(ESLSelectItem.is) as ESLSelectItem; + const item = ESLSelectItem.create(); item.update(option); return item; } diff --git a/src/modules/esl-forms/esl-select-list/core/esl-select-list.ts b/src/modules/esl-forms/esl-select-list/core/esl-select-list.ts index 8f165f918..8fe0e9d67 100644 --- a/src/modules/esl-forms/esl-select-list/core/esl-select-list.ts +++ b/src/modules/esl-forms/esl-select-list/core/esl-select-list.ts @@ -40,9 +40,9 @@ export class ESLSelectList extends ESLSelectWrapper { this.$list.setAttribute('role', 'list'); this.$list.classList.add('esl-scrollable-content'); this.$list.classList.add('esl-select-list-container'); - this.$scroll = document.createElement(ESLScrollbar.is) as ESLScrollbar; + this.$scroll = ESLScrollbar.create(); this.$scroll.target = '::prev'; - this.$selectAll = document.createElement(ESLSelectItem.is) as ESLSelectItem; + this.$selectAll = ESLSelectItem.create(); this.$selectAll.classList.add('esl-select-all-item'); } diff --git a/src/modules/esl-mixin-element/ui/esl-mixin-element.ts b/src/modules/esl-mixin-element/ui/esl-mixin-element.ts index 401269323..95efa7c5b 100644 --- a/src/modules/esl-mixin-element/ui/esl-mixin-element.ts +++ b/src/modules/esl-mixin-element/ui/esl-mixin-element.ts @@ -36,12 +36,12 @@ export class ESLMixinElement implements ESLDomElementRelated { /** Callback of mixin instance initialization */ public connectedCallback(): void { - const constructor = this.constructor as typeof ESLMixinElement; - if (constructor.observedAttributes.length) { + const {observedAttributes} = this.constructor as typeof ESLMixinElement; + if (observedAttributes.length) { this._attr$$ = new MutationObserver(this._onAttrMutation.bind(this)); this._attr$$.observe(this.$host, { attributes: true, - attributeFilter: constructor.observedAttributes, + attributeFilter: observedAttributes, attributeOldValue: true }); } diff --git a/src/modules/esl-toggleable/core/esl-toggleable.ts b/src/modules/esl-toggleable/core/esl-toggleable.ts index 19f1b15ed..5d3f1fd55 100644 --- a/src/modules/esl-toggleable/core/esl-toggleable.ts +++ b/src/modules/esl-toggleable/core/esl-toggleable.ts @@ -121,8 +121,7 @@ export class ESLToggleable extends ESLBaseElement { protected override connectedCallback(): void { super.connectedCallback(); if (!this.id && !this.noAutoId) { - const tag = (this.constructor as typeof ESLToggleable).is; - this.id = sequentialUID(tag, tag + '-'); + this.id = sequentialUID(this.baseTagName, this.baseTagName + '-'); } this.initiallyOpened = this.hasAttribute('open'); this.setInitialState(); diff --git a/src/modules/esl-toggleable/test/toggleable.request.test.ts b/src/modules/esl-toggleable/test/toggleable.request.test.ts index a98d1300a..2ae48a3b4 100644 --- a/src/modules/esl-toggleable/test/toggleable.request.test.ts +++ b/src/modules/esl-toggleable/test/toggleable.request.test.ts @@ -6,7 +6,7 @@ describe('ESLToggleable: show/hide-request events', () => { beforeAll(() => ESLToggleable.register()); describe('Direct events correctly caught by toggleable', () => { - const $el = document.createElement(ESLToggleable.is) as ESLToggleable; + const $el = ESLToggleable.create(); jest.useFakeTimers(); beforeAll(() => document.body.appendChild($el)); afterAll(() => ($el.parentElement === document.body) && document.body.removeChild($el)); @@ -29,8 +29,8 @@ describe('ESLToggleable: show/hide-request events', () => { }); describe('ESLToggleables catch and filtering bubbling events', () => { - const $root = document.createElement(ESLToggleable.is) as ESLToggleable; - const $childTbl = document.createElement(ESLToggleable.is) as ESLToggleable; + const $root = ESLToggleable.create(); + const $childTbl = ESLToggleable.create(); const $button = document.createElement('button'); $root.classList.add('root'); $root.appendChild($childTbl);