From a00936f17ed3800620a01348ce0bfba95ba40087 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Wed, 4 Jan 2023 12:23:00 +0100 Subject: [PATCH] Initialize Bootstrap in TypeScript --- .../retrospring/initializers/_bootstrap.ts | 15 --------------- .../retrospring/initializers/bootstrap.ts | 18 ++++++++++++++++++ 2 files changed, 18 insertions(+), 15 deletions(-) delete mode 100644 app/javascript/retrospring/initializers/_bootstrap.ts create mode 100644 app/javascript/retrospring/initializers/bootstrap.ts diff --git a/app/javascript/retrospring/initializers/_bootstrap.ts b/app/javascript/retrospring/initializers/_bootstrap.ts deleted file mode 100644 index 0fa85b3f..00000000 --- a/app/javascript/retrospring/initializers/_bootstrap.ts +++ /dev/null @@ -1,15 +0,0 @@ -import 'bootstrap'; -import $ from 'jquery'; - -/** - * This module sets up Bootstrap's JavaScript - * - * Inside of the exported function below, initialize Bootstrap - * modules that require explicit initilization, like tooltips - */ -export default function (): void { - $(document).ready(() => { - $('[data-toggle="tooltip"]').tooltip(); - $('.dropdown-toggle').dropdown(); - }); -} diff --git a/app/javascript/retrospring/initializers/bootstrap.ts b/app/javascript/retrospring/initializers/bootstrap.ts new file mode 100644 index 00000000..14c0a705 --- /dev/null +++ b/app/javascript/retrospring/initializers/bootstrap.ts @@ -0,0 +1,18 @@ +import * as Popper from '@popperjs/core'; +import * as bootstrap from 'bootstrap'; + +/** + * This module sets up Bootstrap's JavaScript + * + * Inside of the exported function below, initialize Bootstrap + * modules that require explicit initilization, like tooltips + */ +export default function (): void { + document.addEventListener('turbo:load', () => { + const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]'); + const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); + + const dropdownElementList = document.querySelectorAll('.dropdown-toggle'); + const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl)); + }); +}