diff --git a/types/bootstrap/bootstrap-tests.ts b/types/bootstrap/bootstrap-tests.ts index 01e5d5352f..df172d9484 100755 --- a/types/bootstrap/bootstrap-tests.ts +++ b/types/bootstrap/bootstrap-tests.ts @@ -364,6 +364,6 @@ $("#tooltip").tooltip({ boundary: aHtmlElement, }); -$("#popover").popover({ +$("#tooltip").tooltip({ sanitizeFn: null, }); diff --git a/types/bootstrap/v3/bootstrap-tests.ts b/types/bootstrap/v3/bootstrap-tests.ts index e834903867..da402468c8 100644 --- a/types/bootstrap/v3/bootstrap-tests.ts +++ b/types/bootstrap/v3/bootstrap-tests.ts @@ -102,6 +102,12 @@ $(".tooltip").tooltip({ title: "", trigger: "hover focus", viewport: { selector: "body", padding: 0 }, + sanitize: false, + whiteList: { + h1: [], + img: ['src', 'alt', 'title', 'width', 'height'], + }, + sanitizeFn: (x: string) => x.replace("<", ""), }); $(".tooltip").tooltip({ @@ -139,6 +145,10 @@ $(".tooltip").tooltip({ viewport: "body", }); +$("#tooltip").tooltip({ + sanitizeFn: null, +}); + $(".tooltip").on("hidden.bs.tooltip", () => { // do something... }); @@ -165,6 +175,12 @@ $(".popover").popover({ title: "", trigger: "hover focus", viewport: { selector: "body", padding: 0 }, + sanitize: false, + whiteList: { + h1: [], + img: ['src', 'alt', 'title', 'width', 'height'], + }, + sanitizeFn: (x: string) => x.replace("<", ""), }); $(".popover").popover({ @@ -198,6 +214,10 @@ $(".popover").popover({ viewport: "body", }); +$(".popover").popover({ + sanitizeFn: null, +}); + $(".popover").on("hidden.bs.popover", () => { // do something... }); @@ -309,7 +329,7 @@ $(".affix").affix({ offset: { top: 100, bottom() { - const that = this as BootstrapOffset; + const that = this as Bootstrap.Offset; return (that.bottom = $(".footer").outerHeight(true)!); }, } @@ -335,4 +355,4 @@ $(".item").emulateTransitionEnd(2000); $.support.transition = false; -console.log(($.support.transition as TransitionEventNames).end === "transitionend"); +console.log(($.support.transition as Bootstrap.TransitionEventNames).end === "transitionend"); diff --git a/types/bootstrap/v3/index.d.ts b/types/bootstrap/v3/index.d.ts index d3b80a0529..433bd3b9e9 100644 --- a/types/bootstrap/v3/index.d.ts +++ b/types/bootstrap/v3/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for Bootstrap 3.3 +// Type definitions for Bootstrap 3.4 // Project: http://twitter.github.com/bootstrap/ // Definitions by: Boris Yankov // denisname @@ -7,6 +7,8 @@ /// +export as namespace Bootstrap; + // -------------------------------------------------------------------------- // For jQuery v1 and v2 backward compatibility // -------------------------------------------------------------------------- @@ -14,37 +16,37 @@ /** * Same as jQuery v3 `JQuery.EventHandlerBase`. */ -type JQueryEventHandlerBase = +export type JQueryEventHandlerBase = (this: TContext, t: T, ...args: any[]) => void | false; // -------------------------------------------------------------------------- // Some Types and Interfaces // -------------------------------------------------------------------------- -type BootstrapPlacement = "auto" | "top" | "bottom" | "left" | "right"; +export type Placement = "auto" | "top" | "bottom" | "left" | "right"; -type BootstrapTrigger = "click" | "hover" | "focus" | "manual" | +export type Trigger = "click" | "hover" | "focus" | "manual" | "click hover" | "click focus" | "hover focus" | "click hover focus"; -type BootstrapDynamicOffset = (elem: JQuery) => number; +export type DynamicOffset = (elem: JQuery) => number; -interface BootstrapDelay { +export interface Delay { show?: number; hide?: number; } -interface BootstrapOffset { - top?: number | BootstrapDynamicOffset; - bottom?: number | BootstrapDynamicOffset; +export interface Offset { + top?: number | DynamicOffset; + bottom?: number | DynamicOffset; } -interface BootstrapViewport { +export interface Viewport { padding?: number; selector: string; } -interface TooltipInstance { +export interface TooltipInstance { options: T; } @@ -52,7 +54,7 @@ interface TooltipInstance { // Options Interfaces // -------------------------------------------------------------------------------------- -interface ModalOptions { +export interface ModalOptions { /** * Includes a modal-backdrop element. * Alternatively, specify `static` for a backdrop which doesn't close the modal on click. @@ -84,7 +86,7 @@ interface ModalOptions { remote?: string; } -interface ScrollSpyOptions { +export interface ScrollSpyOptions { /** * Pixels to offset from top when calculating position of scroll. * @@ -100,7 +102,7 @@ interface ScrollSpyOptions { target?: string; } -interface TooltipOptions { +export interface TooltipOptions { /** * Apply a CSS fade transition to the tooltip or popover. * @@ -125,7 +127,7 @@ interface TooltipOptions { * * @default 0 */ - delay?: number | BootstrapDelay; + delay?: number | Delay; /** * Insert HTML into the tooltip or popover. If false, jQuery's text method will be used to insert content into the DOM. @@ -146,7 +148,7 @@ interface TooltipOptions { * * @default tooltip: "top", popover: "right" */ - placement?: BootstrapPlacement | ((this: TooltipInstance, tooltip: HTMLElement, trigger: Element) => BootstrapPlacement); + placement?: Placement | ((this: TooltipInstance, tooltip: HTMLElement, trigger: Element) => Placement); /** * If a selector is provided, tooltip or popover objects will be delegated to the specified targets. @@ -183,7 +185,7 @@ interface TooltipOptions { * * @default tooltip: "hover focus", popover: "click" */ - trigger?: BootstrapTrigger; + trigger?: Trigger; /** * Keeps the tooltip within the bounds of this element. Example: viewport: `#viewport` or `{"selector": "#viewport", "padding": 0}`. @@ -192,10 +194,29 @@ interface TooltipOptions { * * @default {selector: 'body', padding: 0} */ - viewport?: string | BootstrapViewport; + viewport?: string | Viewport; + + /** + * Enable or disable the sanitization. If activated 'template', 'content' and 'title' options will be sanitized. + * + * @default true + */ + sanitize?: boolean; + + /** + * Object which contains allowed attributes and tags. + */ + whiteList?: {[key: string]: string[]}; + + /** + * Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. + * + * @default null + */ + sanitizeFn?: null | ((input: string) => string); } -interface PopoverOptions extends TooltipOptions { +export 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 @@ -206,7 +227,7 @@ interface PopoverOptions extends TooltipOptions { content?: string | ((this: Element) => string); } -interface CollapseOptions { +export interface CollapseOptions { /** * If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. * @@ -222,7 +243,7 @@ interface CollapseOptions { toggle?: boolean; } -interface CarouselOptions { +export interface CarouselOptions { /** * The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. * @@ -253,7 +274,7 @@ interface CarouselOptions { keyboard?: boolean; } -interface AffixOptions { +export 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}`. @@ -261,7 +282,7 @@ interface AffixOptions { * * @default 10 */ - offset?: number | BootstrapOffset; + offset?: number | Offset; /** * Specifies the target element of the affix. @@ -275,7 +296,7 @@ interface AffixOptions { // Events // -------------------------------------------------------------------------------------- -interface CarouselEventHandler extends JQueryEventObject { +export interface CarouselEventHandler extends JQueryEventObject { /** * The direction in which the carousel is sliding. */ @@ -287,14 +308,14 @@ interface CarouselEventHandler extends JQueryEventObject { relatedTarget: HTMLElement; } -interface DropdownsEventHandler extends JQueryEventObject { +export interface DropdownsEventHandler extends JQueryEventObject { /** * The toggling anchor element. */ relatedTarget: HTMLElement; } -interface TapEventHandler extends JQueryEventObject { +export interface TapEventHandler extends JQueryEventObject { /** * * For `show.bs.tab` and `shown.bs.tab`, is the new active tab. * * For `hide.bs.tab`, is the current active tab. @@ -310,187 +331,186 @@ interface TapEventHandler extends JQueryEventObject { 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"; +export type AffixEvent = "affix.bs.affix" | "affixed.bs.affix" | "affix-top.bs.affix" | "affixed-top.bs.affix" | "affix-bottom.bs.affix" | "affixed-bottom.bs.affix"; +export type AlertEvent = "close.bs.alert" | "closed.bs.alert"; +export type CarouselEvent = "slide.bs.carousel" | "slid.bs.carousel"; +export type CollapseEvent = "show.bs.collapse" | "shown.bs.collapse" | "hide.bs.collapse" | "hidden.bs.collapse"; +export type DropdownEvent = "show.bs.dropdown" | "shown.bs.dropdown" | "hide.bs.dropdown" | "hidden.bs.dropdown"; +export type PopoverEvent = "show.bs.popover" | "shown.bs.popover" | "hide.bs.popover" | "hidden.bs.popover" | "inserted.bs.popover"; +export type ScrollspyEvent = "activate.bs.scrollspy"; +export type TapEvent = "show.bs.tab" | "shown.bs.tab" | "hide.bs.tab" | "hidden.bs.tab"; +export type TooltipEvent = "show.bs.tooltip" | "shown.bs.tooltip" | "hide.bs.tooltip" | "hidden.bs.tooltip" | "inserted.bs.tooltip"; // -------------------------------------------------------------------------------------- // jQuery // -------------------------------------------------------------------------------------- -interface 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"): this; - /** - * Activates a content as a modal. - */ - modal(options?: ModalOptions): this; +declare global { + interface 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"): this; + /** + * Activates a content as a modal. + */ + modal(options?: ModalOptions): this; - /** - * If no _method_ is specified, 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. - * - * When _method_ `toggle` is specified, toggles the dropdown menu of a given navbar or tabbed navigation. - */ - dropdown(action?: "toggle"): this; + /** + * If no _method_ is specified, 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. + * + * When _method_ `toggle` is specified, toggles the dropdown menu of a given navbar or tabbed navigation. + */ + dropdown(action?: "toggle"): this; -// 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 + // 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') + var $spy = $(this).scrollspy('refresh') }) -``` - */ -// tslint:enable:jsdoc-format - scrollspy(action: "refresh"): this; - /** - * Add scrollspy behavior to a topbar navigation. - */ - scrollspy(options?: ScrollSpyOptions): this; + ``` + */ + // tslint:enable:jsdoc-format + scrollspy(action: "refresh"): this; + /** + * Add scrollspy behavior to a topbar navigation. + */ + scrollspy(options?: ScrollSpyOptions): this; - /** - * 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"): this; + /** + * 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"): this; - /** - * 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"): this; - /** - * Attaches a tooltip handler to an element collection. - */ - tooltip(options?: TooltipOptions): this; + /** + * 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"): this; + /** + * Attaches a tooltip handler to an element collection. + */ + tooltip(options?: TooltipOptions): this; - /** - * 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"): this; - /** - * Initializes popovers for an element collection. - */ - popover(options?: PopoverOptions): this; + /** + * 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"): this; + /** + * Initializes popovers for an element collection. + */ + popover(options?: PopoverOptions): this; - /** - * 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"): this; + /** + * 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"): this; - /** - * 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): this; + /** + * 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): this; - /** - * 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"): this; - /** - * Activates a content as a collapsible element. - */ - collapse(options?: CollapseOptions): this; + /** + * 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"): this; + /** + * Activates a content as a collapsible element. + */ + collapse(options?: CollapseOptions): 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. - * - * 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"): this; - /** - * Initializes the carousel and starts cycling through items. - */ - carousel(options?: CarouselOptions): 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. + * + * 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"): this; + /** + * Initializes the carousel and starts cycling through items. + */ + carousel(options?: CarouselOptions): this; - /** - * 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"): this; - /** - * Activates your content as affixed content. - */ - affix(options?: AffixOptions): this; + /** + * 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"): this; + /** + * Activates your content as affixed content. + */ + affix(options?: AffixOptions): this; - on(events: CarouselEvent, handler: JQueryEventHandlerBase): this; - on(events: DropdownEvent, handler: JQueryEventHandlerBase): this; - on(events: TapEvent, handler: JQueryEventHandlerBase): this; - on( - events: AffixEvent | AlertEvent | CollapseEvent | PopoverEvent | ScrollspyEvent | TooltipEvent, - handler: JQueryEventHandlerBase - ): this; + on(events: CarouselEvent, handler: JQueryEventHandlerBase): this; + on(events: DropdownEvent, handler: JQueryEventHandlerBase): this; + on(events: TapEvent, handler: JQueryEventHandlerBase): this; + on( + events: AffixEvent | AlertEvent | CollapseEvent | PopoverEvent | ScrollspyEvent | TooltipEvent, + handler: JQueryEventHandlerBase + ): this; - /** @deprecated */ - emulateTransitionEnd(duration: number): this; + /** @deprecated */ + emulateTransitionEnd(duration: number): this; + } } // -------------------------------------------------------------------------------------- // Other // -------------------------------------------------------------------------------------- -interface TransitionEventNames { +export interface TransitionEventNames { end: string; } -interface JQuerySupport { +export interface JQuerySupport { transition: boolean | TransitionEventNames; } - -declare module "bootstrap" { -} diff --git a/types/bootstrap/v3/tslint.json b/types/bootstrap/v3/tslint.json index 075fa88707..f93cf8562a 100644 --- a/types/bootstrap/v3/tslint.json +++ b/types/bootstrap/v3/tslint.json @@ -1,6 +1,3 @@ { - "extends": "dtslint/dt.json", - "rules": { - "no-single-declare-module": false - } + "extends": "dtslint/dt.json" }