Bootstrap update to 3.4 (#36208)

* Update Bootstrap to 3.4

* Json comma

* Namespace and export

* Tests fix

* Fix typo JsDoc
This commit is contained in:
denisname 2019-06-17 05:10:13 +02:00 committed by Ron Buckton
parent 997bd7259f
commit 8b00391ab0
4 changed files with 224 additions and 187 deletions

View File

@ -364,6 +364,6 @@ $("#tooltip").tooltip({
boundary: aHtmlElement,
});
$("#popover").popover({
$("#tooltip").tooltip({
sanitizeFn: null,
});

View File

@ -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");

View File

@ -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 <https://github.com/borisyankov>
// denisname <https://github.com/denisname>
@ -7,6 +7,8 @@
/// <reference types="jquery"/>
export as namespace Bootstrap;
// --------------------------------------------------------------------------
// For jQuery v1 and v2 backward compatibility
// --------------------------------------------------------------------------
@ -14,37 +16,37 @@
/**
* Same as jQuery v3 `JQuery.EventHandlerBase`.
*/
type JQueryEventHandlerBase<TContext, T> =
export type JQueryEventHandlerBase<TContext, T> =
(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<T extends TooltipOptions> {
export interface TooltipInstance<T extends TooltipOptions> {
options: T;
}
@ -52,7 +54,7 @@ interface TooltipInstance<T extends TooltipOptions> {
// 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<this>, tooltip: HTMLElement, trigger: Element) => BootstrapPlacement);
placement?: Placement | ((this: TooltipInstance<this>, 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<TElement = HTMLElement> {
/**
* 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<TElement = HTMLElement> {
/**
* 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<HTMLElement, CarouselEventHandler>): this;
on(events: DropdownEvent, handler: JQueryEventHandlerBase<HTMLElement, DropdownsEventHandler>): this;
on(events: TapEvent, handler: JQueryEventHandlerBase<HTMLElement, TapEventHandler>): this;
on(
events: AffixEvent | AlertEvent | CollapseEvent | PopoverEvent | ScrollspyEvent | TooltipEvent,
handler: JQueryEventHandlerBase<HTMLElement, JQueryEventObject>
): this;
on(events: CarouselEvent, handler: JQueryEventHandlerBase<HTMLElement, CarouselEventHandler>): this;
on(events: DropdownEvent, handler: JQueryEventHandlerBase<HTMLElement, DropdownsEventHandler>): this;
on(events: TapEvent, handler: JQueryEventHandlerBase<HTMLElement, TapEventHandler>): this;
on(
events: AffixEvent | AlertEvent | CollapseEvent | PopoverEvent | ScrollspyEvent | TooltipEvent,
handler: JQueryEventHandlerBase<HTMLElement, JQueryEventObject>
): 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" {
}

View File

@ -1,6 +1,3 @@
{
"extends": "dtslint/dt.json",
"rules": {
"no-single-declare-module": false
}
"extends": "dtslint/dt.json"
}