From 5e0627690d1889b1f2706de2d3497577dfbef972 Mon Sep 17 00:00:00 2001 From: denis Date: Tue, 22 Jan 2019 22:54:43 +0100 Subject: [PATCH 1/2] Add events typing Add tests for tab --- types/bootstrap/v3/bootstrap-tests.ts | 84 ++++++++++++++++++++------- types/bootstrap/v3/index.d.ts | 57 ++++++++++++++++++ 2 files changed, 121 insertions(+), 20 deletions(-) diff --git a/types/bootstrap/v3/bootstrap-tests.ts b/types/bootstrap/v3/bootstrap-tests.ts index 00a8fa44fd..16e1b512c0 100644 --- a/types/bootstrap/v3/bootstrap-tests.ts +++ b/types/bootstrap/v3/bootstrap-tests.ts @@ -1,3 +1,5 @@ +declare let aHtmlElement: HTMLElement; + // -------------------------------------------------------------------------------------- // Modal // -------------------------------------------------------------------------------------- @@ -29,6 +31,10 @@ $(".dropdown").dropdown(); $(".dropdown").dropdown("toggle"); +$(".dropdown").on("show.bs.dropdown", (e) => { + aHtmlElement = e.relatedTarget; +}); + // -------------------------------------------------------------------------------------- // Scrollspy // -------------------------------------------------------------------------------------- @@ -42,15 +48,32 @@ $(".navbar").scrollspy({ offset: 10, }); +$('.navbar').on("activate.bs.scrollspy", () => { + // do something... +}); + +// -------------------------------------------------------------------------------------- +// Togglable tabs +// -------------------------------------------------------------------------------------- + +$(".tab").tab(); + +$(".tab").tab("show"); + +$(".tab").on("shown.bs.tab", (e) => { + aHtmlElement = e.target; // newly activated tab + aHtmlElement = e.relatedTarget; // previous active tab +}); + // -------------------------------------------------------------------------------------- // Tooltip // -------------------------------------------------------------------------------------- -$("#element").tooltip(); +$(".tooltip").tooltip(); -$("#element").tooltip("show"); +$(".tooltip").tooltip("show"); -$("#element").tooltip({ +$(".tooltip").tooltip({ animation: true, container: false, delay: 0, @@ -63,26 +86,26 @@ $("#element").tooltip({ viewport: { selector: "body", padding: 0 }, }); -$("#element").tooltip({ +$(".tooltip").tooltip({ container: "body", }); -$("#element").tooltip({ +$(".tooltip").tooltip({ delay: { show: 500, hide: 100 }, }); -$("#element").tooltip({ +$(".tooltip").tooltip({ placement() { return "top"; }, }); -$("#element").tooltip({ +$(".tooltip").tooltip({ placement(tooltip: HTMLElement, trigger: Element) { console.log(this.options.delay); return "top"; }, }); -$("#element").tooltip({ +$(".tooltip").tooltip({ placement(tooltip: HTMLElement, trigger: Element) { // $ExpectError console.log(this.options.content); // only for PopoverOption, not TooltipOption @@ -90,23 +113,27 @@ $("#element").tooltip({ }, }); -$("#element").tooltip({ +$(".tooltip").tooltip({ title() { return this.id; }, }); -$("#element").tooltip({ +$(".tooltip").tooltip({ viewport: "body", }); +$(".tooltip").on("hidden.bs.tooltip", () => { + // do something... +}); + // -------------------------------------------------------------------------------------- // Popover // -------------------------------------------------------------------------------------- -$("#element").popover(); +$(".popover").popover(); -$("#element").popover("show"); +$(".popover").popover("show"); -$("#element").popover({ +$(".popover").popover({ animation: true, container: false, content: "content", @@ -120,37 +147,41 @@ $("#element").popover({ viewport: { selector: "body", padding: 0 }, }); -$("#element").popover({ +$(".popover").popover({ container: "body", }); -$("#element").popover({ +$(".popover").popover({ content() { return `Elem id: ${this.id}`; }, }); -$("#element").popover({ +$(".popover").popover({ delay: { show: 500, hide: 100 }, }); -$("#element").popover({ +$(".popover").popover({ placement() { return "top"; }, }); -$("#element").popover({ +$(".popover").popover({ placement(tooltip: HTMLElement, trigger: Element) { console.log(this.options.content); return "top"; }, }); -$("#element").popover({ +$(".popover").popover({ title() { return `Elem id: ${this.id}`; }, }); -$("#element").popover({ +$(".popover").popover({ viewport: "body", }); +$(".popover").on("hidden.bs.popover", () => { + // do something... +}); + // -------------------------------------------------------------------------------------- // Alert // -------------------------------------------------------------------------------------- @@ -159,6 +190,10 @@ $(".alert").alert(); $(".alert").alert("close"); +$(".alert").on("closed.bs.alert", () => { + // do something... +}); + // -------------------------------------------------------------------------------------- // Button // -------------------------------------------------------------------------------------- @@ -184,6 +219,10 @@ $(".collapse").collapse({ toggle: false, }); +$(".collapse").on("hidden.bs.collapse", () => { + // do something... +}); + // -------------------------------------------------------------------------------------- // Carousel // -------------------------------------------------------------------------------------- @@ -209,6 +248,11 @@ $(".carousel").carousel({ pause: null, }); +$('#myCarousel').on('slide.bs.carousel', (e) => { + const dir: "left" | "right" = e.direction; + aHtmlElement = e.relatedTarget; +}); + // -------------------------------------------------------------------------------------- // Affix // -------------------------------------------------------------------------------------- diff --git a/types/bootstrap/v3/index.d.ts b/types/bootstrap/v3/index.d.ts index a6ddbeb1f8..5160e26fdc 100644 --- a/types/bootstrap/v3/index.d.ts +++ b/types/bootstrap/v3/index.d.ts @@ -88,6 +88,55 @@ interface AffixOptions { target?: string | Node | JQuery | Window; } +// -------------------------------------------------------------------------------------- +// Events +// -------------------------------------------------------------------------------------- + +interface CarouselEventHandler extends JQuery.TriggeredEvent { + /** + * 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; +} + +interface DropdownsEventHandler extends JQuery.TriggeredEvent { + /** + * The toggling anchor element. + */ + relatedTarget: HTMLElement; +} + +interface TapEventHandler extends JQuery.TriggeredEvent { + /** + * * For `show.bs.tab` and `shown.bs.tab`, is the new active 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, if available. + * * For `hide.bs.tab`, is the new soon-to-be-active tab. + * * For `hidden.bs.tab`, is the new active tab. + */ + relatedTarget: HTMLElement; +} + +type AffixEvent = "affix.bs.affix" | "affixed.bs.affix" | "affix-top.bs.affix" | "affixed-top.bs.affix" | "affix-bottom.bs.affix" | "affixed-bottom.bs.affix"; +type AlertEvent = "close.bs.alert" | "closed.bs.alert"; +type CarouselEvent = "slide.bs.carousel" | "slid.bs.carousel"; +type CollapseEvent = "show.bs.collapse" | "shown.bs.collapse" | "hide.bs.collapse" | "hidden.bs.collapse"; +type DropdownEvent = "show.bs.dropdown" | "shown.bs.dropdown" | "hide.bs.dropdown" | "hidden.bs.dropdown"; +type PopoverEvent = "show.bs.popover" | "shown.bs.popover" | "hide.bs.popover" | "hidden.bs.popover" | "inserted.bs.popover"; +type ScrollspyEvent = "activate.bs.scrollspy"; +type TapEvent = "show.bs.tab" | "shown.bs.tab" | "hide.bs.tab" | "hidden.bs.tab"; +type TooltipEvent = "show.bs.tooltip" | "shown.bs.tooltip" | "hide.bs.tooltip" | "hidden.bs.tooltip" | "inserted.bs.tooltip"; + // -------------------------------------------------------------------------------------- // jQuery // -------------------------------------------------------------------------------------- @@ -122,6 +171,14 @@ interface JQuery { affix(action?: "checkPosition"): JQuery; affix(options: AffixOptions): JQuery; + on(events: CarouselEvent, handler: JQuery.EventHandlerBase>): this; + on(events: DropdownEvent, handler: JQuery.EventHandlerBase>): this; + on(events: TapEvent, handler: JQuery.EventHandlerBase>): this; + on( + events: AffixEvent | AlertEvent | CollapseEvent | PopoverEvent | ScrollspyEvent | TooltipEvent, + handler: JQuery.EventHandler + ): this; + emulateTransitionEnd(duration: number): JQuery; } From d08ed79e6e209b71d6a3a259bc9849dd7b23f1ec Mon Sep 17 00:00:00 2001 From: denis Date: Wed, 23 Jan 2019 17:48:52 +0100 Subject: [PATCH 2/2] Add JsDoc Remove .button() without parameter --- types/bootstrap/index.d.ts | 46 ++-- types/bootstrap/v3/bootstrap-tests.ts | 2 - types/bootstrap/v3/index.d.ts | 323 ++++++++++++++++++++++++-- 3 files changed, 331 insertions(+), 40 deletions(-) diff --git a/types/bootstrap/index.d.ts b/types/bootstrap/index.d.ts index e8cea54f58..d42cf5c524 100755 --- a/types/bootstrap/index.d.ts +++ b/types/bootstrap/index.d.ts @@ -152,7 +152,7 @@ export interface DropdownOption { export interface ModalOption { /** * Includes a modal-backdrop element. - * Alternatively, specify static for a backdrop which doesn't close the modal on click. + * Alternatively, specify `static` for a backdrop which doesn't close the modal on click. * * @default true */ @@ -182,8 +182,8 @@ export interface ModalOption { export interface PopoverOption extends TooltipOption { /** - * Default content value if data-content attribute isn't present. - * If a function is given, it will be called with its this reference + * Default content value if `data-content` attribute isn't present. + * If a function is given, it will be called with its `this` reference * set to the element that the popover is attached to. * * @default "" @@ -280,10 +280,11 @@ export interface TooltipOption { /** * How to position the tooltip or popover - auto | top | bottom | left | right. - * When auto is specified, it will dynamically reorient the tooltip or popover. + * When "auto" is specified, it will dynamically reorient the tooltip or popover. + * * When a function is used to determine the placement, it is called with * the tooltip or popover DOM node as its first argument and the triggering element DOM node as its second. - * The this context is set to the tooltip or popover instance. + * The `this` context is set to the tooltip or popover instance. * * @default tooltip: "top", popover: "right" */ @@ -298,8 +299,9 @@ export interface TooltipOption { selector?: string | false; /** - * Base HTML to use when creating the tooltip or popover. The tooltip's (resp., popover's) title will be injected into - * the `.tooltip-inner` (resp., `.popover-header`). The `.arrow` will become the tooltip's (resp., popover's) arrow. + * Base HTML to use when creating the tooltip or popover. + * The tooltip's (resp., popover's) title will be injected into the `.tooltip-inner` (resp., `.popover-header`). + * The `.arrow` will become the tooltip's (resp., popover's) arrow. * The outermost wrapper element should have the `.tooltip` (resp., .popover) class and `role="tooltip"`. * * @default '' @@ -309,7 +311,7 @@ export interface TooltipOption { /** * Default title value if title attribute isn't present. - * If a function is given, it will be called with its this reference set to the element + * If a function is given, it will be called with its `this` reference set to the element * that the tooltip or popover is attached to. * * @default "" @@ -445,26 +447,26 @@ declare global { * If no _method_ is specified, makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. * (Not necessary when using the data-api's auto-initialization.) * Otherwise, call the method on the alert element: - * * `close` — Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. - * * `dispose` — Destroys an element's alert. + * * `close` – Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. + * * `dispose` – Destroys an element's alert. */ alert(action?: "close" | "dispose"): this; /** * Call a method on the button element: - * * `toggle` — Toggles push state. Gives the button the appearance that it has been activated. - * * `dispose` — Destroys an element's button. + * * `toggle` – Toggles push state. Gives the button the appearance that it has been activated. + * * `dispose` – Destroys an element's button. */ button(action: "toggle" | "dispose"): this; /** * Call a method on the carousel element: - * * `cycle` — Cycles through the carousel items from left to right. - * * `pause` — Stops the carousel from cycling through items. - * * _number_ — Cycles the carousel to a particular frame (0 based, similar to an array). - * * `prev` — Cycles to the previous item. - * * `next` — Cycles to the next item. - * * `dispose` — Destroys an element's carousel. + * * `cycle` – Cycles through the carousel items from left to right. + * * `pause` – Stops the carousel from cycling through items. + * * _number_ – Cycles the carousel to a particular frame (0 based, similar to an array). + * * `prev` – Cycles to the previous item. + * * `next` – Cycles to the next item. + * * `dispose` – Destroys an element's carousel. * * Returns to the caller before the target item has been shown (i.e. before the `slid.bs.carousel` event occurs). */ @@ -493,7 +495,7 @@ declare global { * Call a method on the dropdown element: * * `toggle` – Toggles the dropdown menu of a given navbar or tabbed navigation. * * `update` – Updates the position of an element's dropdown. - * * `dispose` — Destroys an element's dropdown. + * * `dispose` – Destroys an element's dropdown. */ dropdown(action: "toggle" | "update" | "dispose"): this; /** @@ -521,7 +523,7 @@ declare global { /** * Call a method on the popover element: - * * `show` – Reveals an element's popover. + * * `show` – Reveals an element's popover. Popovers whose both title and content are zero-length are never displayed. * * `hide` – Hides an element's popover. * * `toggle` – Toggles an element's popover. * * `dispose` – Hides and destroys an element's popover. @@ -532,7 +534,7 @@ declare global { * * `update` – Updates the position of an element's popover. * * Returns to the caller before the popover has actually been shown or hidden (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). - * This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed. + * This is considered a "manual" triggering of the popover. */ popover(action: "show" | "hide" | "toggle" | "dispose" | "enable" | "disable" | "toggleEnabled" | "update"): this; /** @@ -586,7 +588,7 @@ $('[data-spy="scroll"]').each(function () { /** * Call a method on the tooltip element: - * * `show` – Reveals an element's tooltip. + * * `show` – Reveals an element's tooltip. Tooltips with zero-length titles are never displayed. * * `hide` – Hides an element's tooltip. * * `toggle` – Toggles an element's tooltip. * * `dispose` – Hides and destroys an element's tooltip. diff --git a/types/bootstrap/v3/bootstrap-tests.ts b/types/bootstrap/v3/bootstrap-tests.ts index 16e1b512c0..7711b5792d 100644 --- a/types/bootstrap/v3/bootstrap-tests.ts +++ b/types/bootstrap/v3/bootstrap-tests.ts @@ -198,8 +198,6 @@ $(".alert").on("closed.bs.alert", () => { // Button // -------------------------------------------------------------------------------------- -$(".btn").button(); - $(".btn").button("toggle"); $(".btn").button("reset"); diff --git a/types/bootstrap/v3/index.d.ts b/types/bootstrap/v3/index.d.ts index 5160e26fdc..45dee67370 100644 --- a/types/bootstrap/v3/index.d.ts +++ b/types/bootstrap/v3/index.d.ts @@ -43,48 +43,221 @@ interface TooltipInstance { // -------------------------------------------------------------------------------------- interface ModalOptions { + /** + * Includes a modal-backdrop element. + * Alternatively, specify `static` for a backdrop which doesn't close the modal on click. + * + * @default true + */ backdrop?: boolean | "static"; + + /** + * Closes the modal when escape key is pressed. + * + * @default true + */ keyboard?: boolean; + + /** + * Shows the modal when initialized. + * + * @default true + */ show?: boolean; + + /** + * If a remote URL is provided, **content will be loaded one time** via jQuery's `load` method and injected into the `.modal-content` div. + * + * @default false + * @deprecated Use client-side templating or a data binding framework instead, or call `jQuery.load` yourself. + */ remote?: string; } interface ScrollSpyOptions { + /** + * Pixels to offset from top when calculating position of scroll. + * + * @default 10 + */ offset?: number; + + /** + * The ID or class of the parent element of any Bootstrap `.nav` component. + * + * @default "" + */ target?: string; } interface TooltipOptions { + /** + * Apply a CSS fade transition to the tooltip or popover. + * + * @default true + */ animation?: boolean; + + /** + * Appends the tooltip or popover to a specific element. Example: `container: 'body'`. + * This option is particularly useful in that it allows you to position the tooltip or popover + * in the flow of the document near the triggering element - which will prevent + * it from floating away from the triggering element during a window resize. + * + * @default false + */ container?: string | false; + + /** + * Delay showing and hiding the tooltip or popover (ms) - does not apply to manual trigger type. + * If a number is supplied, delay is applied to both hide/show. + * Object structure is: `delay: { "show": 500, "hide": 100 }`. + * + * @default 0 + */ delay?: number | BootstrapDelay; + + /** + * Insert HTML into the tooltip or popover. If false, jQuery's text method will be used to insert content into the DOM. + * Use text if you're worried about XSS attacks. + * + * @default false + */ html?: boolean; + + /** + * How to position the tooltip or popover - top | bottom | left | right | auto. + * When "auto" is specified, it will dynamically reorient the tooltip or popover. + * For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right. + * + * When a function is used to determine the placement, it is called with + * the tooltip or popover DOM node as its first argument and the triggering element DOM node as its second. + * The `this` context is set to the tooltip or popover instance. + * + * @default tooltip: "top", popover: "right" + */ placement?: BootstrapPlacement | ((this: TooltipInstance, tooltip: HTMLElement, trigger: Element) => BootstrapPlacement); + + /** + * If a selector is provided, tooltip or popover objects will be delegated to the specified targets. + * In practice, this is used to enable dynamic HTML content to have popovers added. + * + * @default false + */ selector?: string; + + /** + * Base HTML to use when creating the tooltip or popover. + * The tooltip's (resp., popover's) title will be injected into the `.tooltip-inner` (resp., `.popover-title`). + * The popover's content will be injected into the `.popover-content`. + * The `.tooltip-arrow` (resp., `.arrow`) will become the tooltip's (resp., popover's) arrow. + * The outermost wrapper element should have the `.tooltip` (resp., `.popover`) class. + * + * @default '' + * @default '' + */ template?: string; + + /** + * Default title value if title attribute isn't present. + * If a function is given, it will be called with its `this` reference set to the element + * that the tooltip or popover is attached to. + * + * @default "" + */ title?: string | ((this: Element) => string); + + /** + * How tooltip or popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. + * "manual" cannot be combined with any other trigger. + * + * @default tooltip: "hover focus", popover: "click" + */ trigger?: BootstrapTrigger; + + /** + * Keeps the tooltip within the bounds of this element. Example: viewport: `#viewport` or `{"selector": "#viewport", "padding": 0}`. + * If a function is given in the object, it is called with the triggering element DOM node as its only argument. + * The `this` context is set to the tooltip instance. + * + * @default {selector: 'body', padding: 0} + */ viewport?: string | BootstrapViewport; } interface PopoverOptions extends TooltipOptions { + /** + * Default content value if `data-content` attribute isn't present. + * If a function is given, it will be called with its `this` reference + * set to the element that the popover is attached to. + * + * @default "" + */ content?: string | ((this: Element) => string); } interface CollapseOptions { + /** + * If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. + * + * @default false + */ parent?: string | false; + + /** + * Toggles the collapsible element on invocation. + * + * @default true + */ toggle?: boolean; } interface CarouselOptions { + /** + * The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. + * + * @default 5000 + */ interval?: number | false; + + /** + * If set to "hover", pauses the cycling of the carousel on `mouseenter` and resumes the cycling of the carousel on `mouseleave`. + * If set to null, hovering over the carousel won't pause it. + * + * @default "hover" + */ pause?: "hover" | null; + + /** + * Whether the carousel should cycle continuously or have hard stops. + * + * @default true + */ wrap?: boolean; + + /** + * Whether the carousel should react to keyboard events. + * + * @default true + */ keyboard?: boolean; } interface AffixOptions { + /** + * Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. + * To provide a unique, bottom and top offset just provide an object offset: `{top: 7, bottom: 5}`. + * Use a function in the object when you need to dynamically calculate an offset. + * + * @default 10 + */ offset?: number | BootstrapOffset; + + /** + * Specifies the target element of the affix. + * + * @default window + */ target?: string | Node | JQuery | Window; } @@ -142,34 +315,151 @@ type TooltipEvent = "show.bs.tooltip" | "shown.bs.tooltip" | "hide.bs.tooltip" | // -------------------------------------------------------------------------------------- interface JQuery { - modal(action?: "toggle" | "show" | "hide" | "handleUpdate"): JQuery; - modal(options: ModalOptions): JQuery; + /** + * Call a method on the modal element: + * * `toggle` – Manually toggles a modal. + * * `show` – Manually opens a modal. + * * `hide` – Manually hides a modal. + * * `handleUpdate` – Readjusts the modal's positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left. + * Only needed when the height of the modal changes while it is open. + * + * Returns to the caller before the modal has actually been shown or hidden (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). + */ + modal(action: "toggle" | "show" | "hide" | "handleUpdate"): JQuery; + /** + * Activates a content as a modal. + */ + modal(options?: ModalOptions): JQuery; - dropdown(action?: "toggle"): JQuery; + /** + * Toggles the dropdown menu of a given navbar or tabbed navigation. + */ + dropdown(action: "toggle"): JQuery; + /** + * Toggle contextual overlays for displaying lists of links. + * + * The data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element. + */ + dropdown(): this; - scrollspy(action?: "refresh"): JQuery; - scrollspy(options: ScrollSpyOptions): JQuery; +// tslint:disable:jsdoc-format + /** + * When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh, see example. + * @example +```javascript +$('[data-spy="scroll"]').each(function () { + var $spy = $(this).scrollspy('refresh') +}) +``` + */ +// tslint:enable:jsdoc-format + scrollspy(action: "refresh"): JQuery; + /** + * Add scrollspy behavior to a topbar navigation. + */ + scrollspy(options?: ScrollSpyOptions): JQuery; + /** + * If no _method_ is specified, activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM. + * + * When _method_ `show` is specified, selects the given tab and shows its associated content. + * Any other tab that was previously selected becomes unselected and its associated content is hidden. + * + * Returns to the caller before the tab pane has actually been shown (i.e. before the `shown.bs.tab` event occurs). + */ tab(action?: "show"): JQuery; - tooltip(action?: "show" | "hide" | "toggle" | "destroy"): JQuery; - tooltip(options: TooltipOptions): JQuery; + /** + * Call a method on the tooltip element: + * * `show` – Reveals an element's tooltip. Tooltips with zero-length titles are never displayed. + * * `hide` – Hides an element's tooltip. + * * `toggle` – Toggles an element's tooltip. + * * `destroy` – Hides and destroys an element's tooltip. + * Tooltips that use delegation (which are created using `selector` option) cannot be individually destroyed on descendant trigger elements. + * + * Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). + * This is considered a "manual" triggering of the tooltip. + */ + tooltip(action: "show" | "hide" | "toggle" | "destroy"): JQuery; + /** + * Attaches a tooltip handler to an element collection. + */ + tooltip(options?: TooltipOptions): JQuery; - popover(action?: "show" | "hide" | "toggle" | "destroy"): JQuery; - popover(options: PopoverOptions): JQuery; + /** + * Call a method on the popover element: + * * `show` – Reveals an element's popover. Popovers whose both title and content are zero-length are never displayed. + * * `hide` – Hides an element's popover. + * * `toggle` – Toggles an element's popover. + * * `destroy` – Hides and destroys an element's popover. + * Popovers that use delegation (which are created using the `selector` option) cannot be individually destroyed on descendant trigger elements. + * + * Returns to the caller before the popover has actually been shown or hidden (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). + * This is considered a "manual" triggering of the popover. + */ + popover(action: "show" | "hide" | "toggle" | "destroy"): JQuery; + /** + * Initializes popovers for an element collection. + */ + popover(options?: PopoverOptions): JQuery; + /** + * If no _method_ is specified, makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. + * (Not necessary when using the data-api's auto-initialization.) + * + * When _method_ `close` is specified, closes an alert by removing it from the DOM. If the `.fade` and `.in` classes are present on the element, + * the alert will fade out before it is removed. + */ alert(action?: "close"): JQuery; - button(action?: "toggle" | "reset" | string): JQuery; + /** + * Call a method on the button element: + * * `toggle` – Toggles push state. Gives the button the appearance that it has been activated. + * * `reset` – Resets button state: swaps text to original text. This method is asynchronous and returns before the resetting has actually completed. + * * _string_ – Swaps text to any data defined text state. + */ + button(action: "toggle" | "reset" | string): JQuery; - collapse(action?: "toggle" | "show" | "hide"): JQuery; - collapse(options: CollapseOptions): JQuery; + /** + * Call a method on the collapsible element: + * * `toggle` – Toggles a collapsible element to shown or hidden. + * * `show` – Shows a collapsible element. + * * `hide` – Hides a collapsible element. + * + * Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). + */ + collapse(action: "toggle" | "show" | "hide"): JQuery; + /** + * Activates a content as a collapsible element. + */ + collapse(options?: CollapseOptions): JQuery; - carousel(action?: "cycle" | "pause" | number | "prev" | "next"): JQuery; - carousel(options: CarouselOptions): JQuery; + /** + * Call a method on the carousel element: + * * `cycle` – Cycles through the carousel items from left to right. + * * `pause` – Stops the carousel from cycling through items. + * * _number_ – Cycles the carousel to a particular frame (0 based, similar to an array). + * * `prev` – Cycles to the previous item. + * * `next` – Cycles to the next item. + * + * Returns to the caller before the target item has been shown (i.e. before the `slid.bs.carousel` event occurs). + */ + carousel(action: "cycle" | "pause" | number | "prev" | "next"): JQuery; + /** + * Initializes the carousel and starts cycling through items. + */ + carousel(options?: CarouselOptions): JQuery; - affix(action?: "checkPosition"): JQuery; - affix(options: AffixOptions): JQuery; + /** + * Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. + * The `.affix`, `.affix-top`, and `.affix-bottom` classes are added to or removed from the affixed content according to the new state. + * This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content. + */ + affix(action: "checkPosition"): JQuery; + /** + * Activates your content as affixed content. + */ + affix(options?: AffixOptions): JQuery; on(events: CarouselEvent, handler: JQuery.EventHandlerBase>): this; on(events: DropdownEvent, handler: JQuery.EventHandlerBase>): this; @@ -179,6 +469,7 @@ interface JQuery { handler: JQuery.EventHandler ): this; + /** @deprecated */ emulateTransitionEnd(duration: number): JQuery; }