From 96aa4cbfd68a0c7874376725a4041d59441eb3c4 Mon Sep 17 00:00:00 2001 From: Junaid Bhura Date: Wed, 3 Apr 2024 10:11:05 +1100 Subject: [PATCH 1/6] move accordion events to constructor --- src/accordion/tp-accordion-collapse-all.ts | 5 +++-- src/accordion/tp-accordion-expand-all.ts | 5 +++-- src/accordion/tp-accordion-handle.ts | 5 +++-- src/accordion/tp-accordion-item.ts | 6 ++++-- 4 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/accordion/tp-accordion-collapse-all.ts b/src/accordion/tp-accordion-collapse-all.ts index 9266a9e..6a20c01 100644 --- a/src/accordion/tp-accordion-collapse-all.ts +++ b/src/accordion/tp-accordion-collapse-all.ts @@ -8,9 +8,10 @@ import { TPAccordionElement } from './tp-accordion'; */ export class TPAccordionCollapseAllElement extends HTMLElement { /** - * Connected callback. + * Constructor. */ - connectedCallback(): void { + constructor() { + super(); this.querySelector( 'button' )?.addEventListener( 'click', () => this.collapseAll() ); } diff --git a/src/accordion/tp-accordion-expand-all.ts b/src/accordion/tp-accordion-expand-all.ts index 8f7004a..6ebe7ed 100644 --- a/src/accordion/tp-accordion-expand-all.ts +++ b/src/accordion/tp-accordion-expand-all.ts @@ -8,9 +8,10 @@ import { TPAccordionElement } from './tp-accordion'; */ export class TPAccordionExpandAllElement extends HTMLElement { /** - * Connected callback. + * Constructor. */ - connectedCallback(): void { + constructor() { + super(); this.querySelector( 'button' )?.addEventListener( 'click', this.expandAll.bind( this ) ); } diff --git a/src/accordion/tp-accordion-handle.ts b/src/accordion/tp-accordion-handle.ts index f81a144..c30a16c 100644 --- a/src/accordion/tp-accordion-handle.ts +++ b/src/accordion/tp-accordion-handle.ts @@ -8,9 +8,10 @@ import { TPAccordionItemElement } from './tp-accordion-item'; */ export class TPAccordionHandleElement extends HTMLElement { /** - * Connected callback. + * Constructor. */ - connectedCallback(): void { + constructor() { + super(); this.querySelector( 'button' )?.addEventListener( 'click', this.toggle.bind( this ) ); } diff --git a/src/accordion/tp-accordion-item.ts b/src/accordion/tp-accordion-item.ts index f49113c..dd97b83 100644 --- a/src/accordion/tp-accordion-item.ts +++ b/src/accordion/tp-accordion-item.ts @@ -9,9 +9,11 @@ import { slideElementDown, slideElementUp } from '../utility'; */ export class TPAccordionItemElement extends HTMLElement { /** - * Connected callbacl. + * Constructor. */ - connectedCallback(): void { + constructor() { + super(); + if ( 'yes' === this.getAttribute( 'open-by-default' ) ) { this.setAttribute( 'open', 'yes' ); } From d866acac13d8cfd5af2404e449ebf04b96c1c7fc Mon Sep 17 00:00:00 2001 From: Junaid Bhura Date: Wed, 3 Apr 2024 10:12:35 +1100 Subject: [PATCH 2/6] move form events to constructor --- src/form/tp-form-field.ts | 5 +++-- src/form/tp-form.ts | 6 ------ 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/form/tp-form-field.ts b/src/form/tp-form-field.ts index afbad51..d6b9f4a 100644 --- a/src/form/tp-form-field.ts +++ b/src/form/tp-form-field.ts @@ -8,9 +8,10 @@ import { TPFormErrorElement } from './tp-form-error'; */ export class TPFormFieldElement extends HTMLElement { /** - * Connected callback. + * Constructor. */ - connectedCallback(): void { + constructor() { + super(); const field = this.getField(); field?.addEventListener( 'keyup', this.handleFieldChanged.bind( this ) ); field?.addEventListener( 'change', this.handleFieldChanged.bind( this ) ); diff --git a/src/form/tp-form.ts b/src/form/tp-form.ts index 8a658bc..23149ff 100644 --- a/src/form/tp-form.ts +++ b/src/form/tp-form.ts @@ -19,12 +19,6 @@ export class TPFormElement extends HTMLElement { constructor() { super(); this.form = this.querySelector( 'form' ); - } - - /** - * Connected callback. - */ - connectedCallback(): void { this.form?.addEventListener( 'submit', this.handleFormSubmit.bind( this ) ); } From fc338e2ae8b23373275fe04c02255e32c731994d Mon Sep 17 00:00:00 2001 From: Junaid Bhura Date: Wed, 3 Apr 2024 10:14:47 +1100 Subject: [PATCH 3/6] move modal events to constructor --- src/modal/tp-modal-close.ts | 5 +++-- src/modal/tp-modal.ts | 8 +++----- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/modal/tp-modal-close.ts b/src/modal/tp-modal-close.ts index 4351a90..7ad977d 100644 --- a/src/modal/tp-modal-close.ts +++ b/src/modal/tp-modal-close.ts @@ -8,9 +8,10 @@ import { TPModalElement } from './tp-modal'; */ export class TPModalCloseElement extends HTMLElement { /** - * Connected callback. + * Constructor. */ - connectedCallback(): void { + constructor() { + super(); const button: HTMLButtonElement | null = this.querySelector( 'button' ); button?.addEventListener( 'click', this.closeModal.bind( this ) ); } diff --git a/src/modal/tp-modal.ts b/src/modal/tp-modal.ts index e59fadb..bc19863 100644 --- a/src/modal/tp-modal.ts +++ b/src/modal/tp-modal.ts @@ -7,13 +7,11 @@ export class TPModalElement extends HTMLElement { */ constructor() { super(); + + // Move modal as a direct descendent of body to avoid z-index issues. document.querySelector( 'body' )?.appendChild( this ); - } - /** - * Connected callback. - */ - connectedCallback(): void { + // Event listeners. this.addEventListener( 'click', this.handleClick.bind( this ) ); } From ea71538876ae46bd4debab3af1849caf99e16d95 Mon Sep 17 00:00:00 2001 From: Junaid Bhura Date: Wed, 3 Apr 2024 10:20:42 +1100 Subject: [PATCH 4/6] move multi-select events to constructor --- src/multi-select/tp-multi-select-field.ts | 18 +++--------------- src/multi-select/tp-multi-select-option.ts | 18 +++--------------- src/multi-select/tp-multi-select-pill.ts | 6 ++++-- src/multi-select/tp-multi-select-pills.ts | 6 ++++-- src/multi-select/tp-multi-select-search.ts | 6 ++++-- src/multi-select/tp-multi-select-select-all.ts | 6 ++++-- src/multi-select/tp-multi-select.ts | 7 +------ 7 files changed, 23 insertions(+), 44 deletions(-) diff --git a/src/multi-select/tp-multi-select-field.ts b/src/multi-select/tp-multi-select-field.ts index 52f3a5e..4dc2f22 100644 --- a/src/multi-select/tp-multi-select-field.ts +++ b/src/multi-select/tp-multi-select-field.ts @@ -8,22 +8,10 @@ import { TPMultiSelectElement } from './tp-multi-select'; */ export class TPMultiSelectFieldElement extends HTMLElement { /** - * Properties. + * Constructor. */ - private initialized: boolean = false; - - /** - * Connected callback. - */ - connectedCallback(): void { - // Return early if already initialized. - if ( true === this.initialized ) { - return; - } - - // Set initialized flag to true. - this.initialized = true; - + constructor() { + super(); this.addEventListener( 'click', this.toggleOpen.bind( this ) ); } diff --git a/src/multi-select/tp-multi-select-option.ts b/src/multi-select/tp-multi-select-option.ts index f6e6b8b..a5a8f92 100644 --- a/src/multi-select/tp-multi-select-option.ts +++ b/src/multi-select/tp-multi-select-option.ts @@ -8,22 +8,10 @@ import { TPMultiSelectElement } from './tp-multi-select'; */ export class TPMultiSelectOptionElement extends HTMLElement { /** - * Properties. + * Constructor. */ - private initialized: boolean = false; - - /** - * Connected callback. - */ - connectedCallback(): void { - // Return early if already initialized. - if ( true === this.initialized ) { - return; - } - - // Set initialized flag to true. - this.initialized = true; - + constructor() { + super(); this.addEventListener( 'click', this.toggle.bind( this ) ); } diff --git a/src/multi-select/tp-multi-select-pill.ts b/src/multi-select/tp-multi-select-pill.ts index 6c98035..aed06bf 100644 --- a/src/multi-select/tp-multi-select-pill.ts +++ b/src/multi-select/tp-multi-select-pill.ts @@ -8,11 +8,13 @@ import { TPMultiSelectElement } from './tp-multi-select'; */ export class TPMultiSelectPillElement extends HTMLElement { /** - * Connected callback. + * Constructor. */ - connectedCallback(): void { + constructor() { + super(); this.querySelector( 'button' )?.addEventListener( 'click', this.handleButtonClick.bind( this ) ); } + /** * Handle button click. * diff --git a/src/multi-select/tp-multi-select-pills.ts b/src/multi-select/tp-multi-select-pills.ts index 1bc9b99..acc1622 100644 --- a/src/multi-select/tp-multi-select-pills.ts +++ b/src/multi-select/tp-multi-select-pills.ts @@ -10,9 +10,11 @@ import { TPMultiSelectOptionElement } from './tp-multi-select-option'; */ export class TPMultiSelectPillsElement extends HTMLElement { /** - * Connected callback. + * Constructor. */ - connectedCallback(): void { + constructor() { + super(); + // Events. this.closest( 'tp-multi-select' )?.addEventListener( 'change', this.update.bind( this ) ); this.closest( 'tp-multi-select' )?.querySelector( 'select' )?.addEventListener( 'change', ( () => this.update() ) as EventListener ); diff --git a/src/multi-select/tp-multi-select-search.ts b/src/multi-select/tp-multi-select-search.ts index 08919dc..2f79fd5 100644 --- a/src/multi-select/tp-multi-select-search.ts +++ b/src/multi-select/tp-multi-select-search.ts @@ -10,9 +10,11 @@ import { TPMultiSelectPillElement } from './tp-multi-select-pill'; */ export class TPMultiSelectSearchElement extends HTMLElement { /** - * Connected callback. + * Constructor. */ - connectedCallback(): void { + constructor() { + super(); + const input: HTMLInputElement | null = this.querySelector( 'input' ); if ( ! input ) { return; diff --git a/src/multi-select/tp-multi-select-select-all.ts b/src/multi-select/tp-multi-select-select-all.ts index 2fe02e0..9cf4946 100644 --- a/src/multi-select/tp-multi-select-select-all.ts +++ b/src/multi-select/tp-multi-select-select-all.ts @@ -9,9 +9,11 @@ import { TPMultiSelectOptionElement } from './tp-multi-select-option'; */ export class TPMultiSelectSelectAllElement extends HTMLElement { /** - * Connected callback. + * Constructor. */ - connectedCallback(): void { + constructor() { + super(); + this.closest( 'tp-multi-select' )?.addEventListener( 'change', this.handleValueChanged.bind( this ) ); this.addEventListener( 'click', this.toggleSelectAll.bind( this ) ); } diff --git a/src/multi-select/tp-multi-select.ts b/src/multi-select/tp-multi-select.ts index c67b0f4..0ec0610 100644 --- a/src/multi-select/tp-multi-select.ts +++ b/src/multi-select/tp-multi-select.ts @@ -21,14 +21,9 @@ export class TPMultiSelectElement extends HTMLElement { */ constructor() { super(); - this.keyboardEventListener = this.handleKeyboardInputs.bind( this ) as EventListener; - } - /** - * Connected callback. - */ - connectedCallback(): void { // Events. + this.keyboardEventListener = this.handleKeyboardInputs.bind( this ) as EventListener; document.addEventListener( 'click', this.handleDocumentClick.bind( this ) ); this.addEventListener( 'change', this.update.bind( this ) ); From aad1329dbdad5661fa8eff97737389e43536bad2 Mon Sep 17 00:00:00 2001 From: Junaid Bhura Date: Wed, 3 Apr 2024 10:23:05 +1100 Subject: [PATCH 5/6] move slider events to constructor --- src/slider/tp-slider-arrow.ts | 5 +++-- src/slider/tp-slider-nav-item.ts | 5 +++-- src/slider/tp-slider-slide.ts | 6 ++++-- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/slider/tp-slider-arrow.ts b/src/slider/tp-slider-arrow.ts index 0a805ea..a3eed3f 100644 --- a/src/slider/tp-slider-arrow.ts +++ b/src/slider/tp-slider-arrow.ts @@ -8,9 +8,10 @@ import { TPSliderElement } from './tp-slider'; */ export class TPSliderArrowElement extends HTMLElement { /** - * Connected callback. + * Constructor. */ - connectedCallback(): void { + constructor() { + super(); this.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) ); } diff --git a/src/slider/tp-slider-nav-item.ts b/src/slider/tp-slider-nav-item.ts index 457a51f..ce7bc18 100644 --- a/src/slider/tp-slider-nav-item.ts +++ b/src/slider/tp-slider-nav-item.ts @@ -9,9 +9,10 @@ import { TPSliderNavElement } from './tp-slider-nav'; */ export class TPSliderNavItemElement extends HTMLElement { /** - * Connected callback. + * Constructor. */ - connectedCallback(): void { + constructor() { + super(); this.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) ); } diff --git a/src/slider/tp-slider-slide.ts b/src/slider/tp-slider-slide.ts index ef78565..3150ab2 100644 --- a/src/slider/tp-slider-slide.ts +++ b/src/slider/tp-slider-slide.ts @@ -8,9 +8,11 @@ import { TPSliderElement } from './tp-slider'; */ export class TPSliderSlideElement extends HTMLElement { /** - * Connected callback. + * Constructor. */ - connectedCallback(): void { + constructor() { + super(); + // Resize observer. if ( 'ResizeObserver' in window ) { new ResizeObserver( this.handleHeightChange.bind( this ) ).observe( this ); From aa0cbe854102004453bf22559ee42cbf1d57c4b0 Mon Sep 17 00:00:00 2001 From: Junaid Bhura Date: Wed, 3 Apr 2024 10:24:03 +1100 Subject: [PATCH 6/6] move tabs events to constructor --- src/tabs/tp-tabs-nav-item.ts | 6 ++++-- src/tabs/tp-tabs.ts | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/tabs/tp-tabs-nav-item.ts b/src/tabs/tp-tabs-nav-item.ts index 514c9fe..18ec854 100644 --- a/src/tabs/tp-tabs-nav-item.ts +++ b/src/tabs/tp-tabs-nav-item.ts @@ -8,9 +8,11 @@ import { TPTabsElement } from './tp-tabs'; */ export class TPTabsNavItemElement extends HTMLElement { /** - * Connected callback. + * Constructor. */ - connectedCallback(): void { + constructor() { + super(); + const link: HTMLAnchorElement | null = this.querySelector( 'a' ); link?.addEventListener( 'click', this.handleLinkClick.bind( this ) ); } diff --git a/src/tabs/tp-tabs.ts b/src/tabs/tp-tabs.ts index 8e5e1ef..882a6a0 100644 --- a/src/tabs/tp-tabs.ts +++ b/src/tabs/tp-tabs.ts @@ -10,9 +10,11 @@ import { TPTabsTabElement } from './tp-tabs-tab'; */ export class TPTabsElement extends HTMLElement { /** - * Connected callback. + * Constructor. */ - connectedCallback(): void { + constructor() { + super(); + this.updateTabFromUrlHash(); window.addEventListener( 'hashchange', this.updateTabFromUrlHash.bind( this ) ); }