From 188934fc8ce03ac4ed87fd8707e6509b557cf28b Mon Sep 17 00:00:00 2001 From: Florent Morselli Date: Sat, 11 Nov 2023 12:18:18 +0100 Subject: [PATCH] Convenient methods for getting component type instances --- content/getting-started/javascript.md | 9 +++ src/components/drawer/index.ts | 15 +---- src/components/modal/index.ts | 15 +---- src/dom/instances.ts | 88 +++++++++++++++++++++++++++ 4 files changed, 103 insertions(+), 24 deletions(-) diff --git a/content/getting-started/javascript.md b/content/getting-started/javascript.md index f491d4557..8e8463d45 100644 --- a/content/getting-started/javascript.md +++ b/content/getting-started/javascript.md @@ -221,6 +221,13 @@ If you provide the wrong category or ID then the console will give you a warning If you have provided the correct category and element ID then you can now access the object as if you've created it yourself and work with it programmatically via JavaScript: +Convenient methods exist for getting the instance objects of each component type: + +```javascript +const modal = FlowbiteInstances.getModal('modal-id'); +const tooltip = FlowbiteInstances.getTooltip('tooltip-id'); +``` + ```javascript // show the modal modal.show(); @@ -285,6 +292,8 @@ Alternatively, you can also get all of the instances from one component pool suc ```javascript FlowbiteInstance.getInstances('Modal'); +// or +FlowbiteInstance.getModalList(); ``` ## Instance options diff --git a/src/components/drawer/index.ts b/src/components/drawer/index.ts index 478d8cad9..f034554f8 100644 --- a/src/components/drawer/index.ts +++ b/src/components/drawer/index.ts @@ -342,10 +342,7 @@ export function initDrawers() { const $drawerEl = document.getElementById(drawerId); if ($drawerEl) { - const drawer: DrawerInterface = instances.getInstance( - 'Drawer', - drawerId - ); + const drawer: DrawerInterface = instances.getDrawer(drawerId); if (drawer) { const toggleDrawer = () => { @@ -378,10 +375,7 @@ export function initDrawers() { const $drawerEl = document.getElementById(drawerId); if ($drawerEl) { - const drawer: DrawerInterface = instances.getInstance( - 'Drawer', - drawerId - ); + const drawer: DrawerInterface = instances.getDrawer(drawerId); if (drawer) { const hideDrawer = () => { @@ -410,10 +404,7 @@ export function initDrawers() { const $drawerEl = document.getElementById(drawerId); if ($drawerEl) { - const drawer: DrawerInterface = instances.getInstance( - 'Drawer', - drawerId - ); + const drawer: DrawerInterface = instances.getDrawer(drawerId); if (drawer) { const showDrawer = () => { diff --git a/src/components/modal/index.ts b/src/components/modal/index.ts index a943205bb..f7664eb0a 100644 --- a/src/components/modal/index.ts +++ b/src/components/modal/index.ts @@ -295,10 +295,7 @@ export function initModals() { const $modalEl = document.getElementById(modalId); if ($modalEl) { - const modal: ModalInterface = instances.getInstance( - 'Modal', - modalId - ); + const modal: ModalInterface = instances.getModal(modalId); if (modal) { const toggleModal = () => { @@ -328,10 +325,7 @@ export function initModals() { const $modalEl = document.getElementById(modalId); if ($modalEl) { - const modal: ModalInterface = instances.getInstance( - 'Modal', - modalId - ); + const modal: ModalInterface = instances.getModal(modalId); if (modal) { const showModal = () => { @@ -361,10 +355,7 @@ export function initModals() { const $modalEl = document.getElementById(modalId); if ($modalEl) { - const modal: ModalInterface = instances.getInstance( - 'Modal', - modalId - ); + const modal: ModalInterface = instances.getModal(modalId); if (modal) { const hideModal = () => { diff --git a/src/dom/instances.ts b/src/dom/instances.ts index 1217b28fc..57e5f3eae 100644 --- a/src/dom/instances.ts +++ b/src/dom/instances.ts @@ -77,6 +77,50 @@ class Instances { return this._instances[component]; } + getModalList() { + return this.getInstances('Modal'); + } + + getAccordionList() { + return this.getInstances('Accordion'); + } + + getCarouselList() { + return this.getInstances('Carousel'); + } + + getCollapseList() { + return this.getInstances('Collapse'); + } + + getDialList() { + return this.getInstances('Dial'); + } + + getDismissList() { + return this.getInstances('Dismiss'); + } + + getDrawerList() { + return this.getInstances('Drawer'); + } + + getDropdownList() { + return this.getInstances('Dropdown'); + } + + getPopoverList() { + return this.getInstances('Popover'); + } + + getTabsList() { + return this.getInstances('Tabs'); + } + + getTooltipList() { + return this.getInstances('Tooltip'); + } + getInstance(component: keyof Instances['_instances'], id: string) { if (!this._componentAndInstanceCheck(component, id)) { return; @@ -89,6 +133,50 @@ class Instances { return this._instances[component][id] as any; } + getModal(id: string): undefined|ModalInterface { + return this.getInstance('Modal', id); + } + + getAccordion(id: string): undefined|AccordionInterface { + return this.getInstance('Accordion', id); + } + + getCarousel(id: string): undefined|CarouselInterface { + return this.getInstance('Carousel', id); + } + + getCollapse(id: string): undefined|CollapseInterface { + return this.getInstance('Collapse', id); + } + + getDial(id: string): undefined|DialInterface { + return this.getInstance('Dial', id); + } + + getDismiss(id: string): undefined|DismissInterface { + return this.getInstance('Dismiss', id); + } + + getDrawer(id: string): undefined|DrawerInterface { + return this.getInstance('Drawer', id); + } + + getDropdown(id: string): undefined|DropdownInterface { + return this.getInstance('Dropdown', id); + } + + getPopover(id: string): undefined|PopoverInterface { + return this.getInstance('Popover', id); + } + + getTabs(id: string): undefined|TabsInterface { + return this.getInstance('Tabs', id); + } + + getTooltip(id: string): undefined|TooltipInterface { + return this.getInstance('Tooltip', id); + } + destroyAndRemoveInstance( component: keyof Instances['_instances'], id: string