diff --git a/types/bootstrap/bootstrap-tests.ts b/types/bootstrap/bootstrap-tests.ts index 9a80afc654..94de3fcd79 100755 --- a/types/bootstrap/bootstrap-tests.ts +++ b/types/bootstrap/bootstrap-tests.ts @@ -34,12 +34,16 @@ $("#carousel").carousel("pause"); $("#carousel").carousel(100); -$("#carousel").on("slide.bs.carousel", function(ev) { +$("#carousel").on("slide.bs.carousel", function(e) { const that: HTMLElement = this; - const from: number = ev.from; - const to: number = ev.to; - const direction: string = ev.direction; - const data: undefined = ev.data; + + const data: undefined = e.data; + const carousel: HTMLElement = e.target; + + const direction: string = e.direction; + const relatedTarget: HTMLElement = e.relatedTarget; + const from: number = e.from; + const to: number = e.to; }); $("#carousel").carousel({ @@ -101,7 +105,11 @@ $("#dropdown").dropdown(); // $ExpectType JQuery $("#dropdown").dropdown("update"); -$("#dropdown").on("hide.bs.dropdown", () => {}); +$("#dropdown").on("hide.bs.dropdown", (e) => { + const data: undefined = e.data; + const container: HTMLElement = e.target; + const togglingAnchorElement: HTMLElement = e.relatedTarget; +}); $("#dropdown").dropdown({ offset: 10, @@ -141,7 +149,13 @@ $("#modal").modal(); // $ExpectType JQuery $("#modal").modal("show"); -$("#modal").on("hide.bs.modal", () => {}); +$("#modal").on("show.bs.modal", (e) => { + const data: undefined = e.data; + const modal: HTMLElement = e.target; + if (e.relatedTarget) { + const clickedElement: HTMLElement = e.relatedTarget; + } +}); $("#modal").modal({ backdrop: false, @@ -226,8 +240,9 @@ $("#scrollspy").scrollspy({ $("#someListItem").tab("show"); $("a[data-toggle=\"list\"]").on("shown.bs.tab", (e) => { - e.target; // newly activated tab - e.relatedTarget; // previous active tab + const data: undefined = e.data; + const newlyActivatedTab: HTMLElement = e.target; + const previousActiveTab: HTMLElement = e.relatedTarget; }); // -------------------------------------------------------------------------------------- diff --git a/types/bootstrap/index.d.ts b/types/bootstrap/index.d.ts index 0d06677e54..a636ec394e 100755 --- a/types/bootstrap/index.d.ts +++ b/types/bootstrap/index.d.ts @@ -325,12 +325,22 @@ export interface TooltipOption { // Events // -------------------------------------------------------------------------------------- -export interface CarouselEventHandler extends JQuery.TriggeredEvent { +export interface CarouselEventHandler extends JQuery.TriggeredEvent { + /** + * The carousel dom element. + */ + target: HTMLElement; // overridden only for better JsDoc + /** * The direction in which the carousel is sliding. */ direction: "left" | "right"; + /** + * The DOM element that is being slid into place as the active item. + */ + relatedTarget: HTMLElement; + /** * The index of the current item. */ @@ -342,7 +352,44 @@ export interface CarouselEventHandler extends JQuery.TriggeredEvent extends JQuery.TriggeredEvent { +export interface DropdownsEventHandler extends JQuery.TriggeredEvent { + /** + * The the dropdown's toggle and the dropdown menu container (the `.dropdown` element). + */ + target: HTMLElement; // overridden only for better JsDoc + + /** + * The toggling anchor element. + */ + relatedTarget: HTMLElement; +} + +export interface ModalEventHandler extends JQuery.TriggeredEvent { + /** + * The modal dom element. + */ + target: HTMLElement; // overridden only for better JsDoc + + /** + * For `show.bs.modal` and `shown.bs.modal` is the clicked element, when caused by a _click_. + * Otherwise is undefined. + */ + relatedTarget: HTMLElement | undefined; +} + +export interface TapEventHandler extends JQuery.TriggeredEvent { + /** + * * For `show.bs.tab` and `shown.bs.tab`, is the newly activated tab. + * * For `hide.bs.tab`, is the current active tab. + * * For `hidden.bs.tab`, is the previous active tab. + */ + target: HTMLElement; // overridden only for better JsDoc + + /** + * * For `show.bs.tab` and `shown.bs.tab`, is the previous active tab. + * * For `hide.bs.tab`, is the new soon-to-be-active tab. + * * For `hidden.bs.tab`, is the new active tab. + */ relatedTarget: HTMLElement; } @@ -390,10 +437,12 @@ declare global { tooltip(options?: TooltipOption): this; on(events: CarouselEvent, handler: JQuery.EventHandlerBase>): this; + on(events: DropdownEvent, handler: JQuery.EventHandlerBase>): this; + on(events: ModalEvent, handler: JQuery.EventHandlerBase>): this; on(events: TapEvent, handler: JQuery.EventHandlerBase>): this; - on(events: - AlertEvent | CollapseEvent | DropdownEvent | ModalEvent | - PopoverEvent | ScrollspyEvent | TooltipEvent, - handler: JQuery.EventHandler): this; + on( + events: AlertEvent | CollapseEvent | PopoverEvent | ScrollspyEvent | TooltipEvent, + handler: JQuery.EventHandler + ): this; } }