- B + {% include bootstrap-icon.html %}

Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.

Download Bootstrap @@ -29,11 +29,11 @@ layout: home

Bootstrap CDN

-

When you just need to include Bootstrap's compiled CSS and JS, use the Bootstrap CDN, free from the Max CDN folks.

+

When you just need to include Bootstrap's compiled CSS and JS, use the Bootstrap CDN, free from the MaxCDN folks.

{% highlight html %} - + {% endhighlight %}
diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 7a16c52a7..97ffd3161 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -144,7 +144,7 @@ For example, here are two grid layouts that apply to every device and viewport, 1 of 2
- 1 of 2 + 2 of 2
@@ -152,10 +152,10 @@ For example, here are two grid layouts that apply to every device and viewport, 1 of 3
- 1 of 3 + 2 of 3
- 1 of 3 + 3 of 3
diff --git a/docs/migration.md b/docs/migration.md index 2584a22e8..6bbf754cb 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -97,6 +97,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with - `.form-group` no longer applies styles from the `.row` via mixin, so `.row` is now required for horizontal grid layouts (e.g., `
`). - Added new `.form-control-label` class to vertically center labels with `.form-control`s. - Added custom forms support (for checkboxes, radios, selects, and file inputs). +- Renamed `.has-error` to `.has-danger`. ### Buttons @@ -196,14 +197,6 @@ Dropped entirely for the new card component. - `.panel-warning` to `.card-warning` and `.card-inverse` (or use `.bg-warning` on `.card-header`) - `.panel-danger` to `.card-danger` and `.card-inverse` (or use `.bg-danger` on `.card-header`) -### Tooltips - -- Removed support for `auto` placement options. - -### Popovers - -- Removed support for `auto` placement options. - ### Carousel - Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons. diff --git a/js/dist/button.js b/js/dist/button.js index 367e50495..cd82242c1 100644 --- a/js/dist/button.js +++ b/js/dist/button.js @@ -82,6 +82,9 @@ var Button = function ($) { } if (triggerChangeEvent) { + if (input.hasAttribute('disabled') || rootElement.hasAttribute('disabled') || input.classList.contains('disabled') || rootElement.classList.contains('disabled')) { + return; + } input.checked = !$(this._element).hasClass(ClassName.ACTIVE); $(input).trigger('change'); } diff --git a/js/dist/button.js.map b/js/dist/button.js.map index ae41dc503..899bcdaea 100644 Binary files a/js/dist/button.js.map and b/js/dist/button.js.map differ diff --git a/js/dist/collapse.js b/js/dist/collapse.js index d5105f442..0e2bc75e2 100644 --- a/js/dist/collapse.js +++ b/js/dist/collapse.js @@ -58,9 +58,8 @@ var Collapse = function ($) { }; var Selector = { - ACTIVES: '.card > .show, .card > .collapsing', - DATA_TOGGLE: '[data-toggle="collapse"]', - DATA_CHILDREN: 'data-children' + ACTIVES: '.show, .collapsing', + DATA_TOGGLE: '[data-toggle="collapse"]' }; /** @@ -77,20 +76,13 @@ var Collapse = function ($) { this._element = element; this._config = this._getConfig(config); this._triggerArray = $.makeArray($('[data-toggle="collapse"][href="#' + element.id + '"],' + ('[data-toggle="collapse"][data-target="#' + element.id + '"]'))); + this._parent = this._config.parent ? this._getParent() : null; if (!this._config.parent) { this._addAriaAndCollapsedClass(this._element, this._triggerArray); } - this._selectorActives = Selector.ACTIVES; - if (this._parent) { - var childrenSelector = this._parent.hasAttribute(Selector.DATA_CHILDREN) ? this._parent.getAttribute(Selector.DATA_CHILDREN) : null; - if (childrenSelector !== null) { - this._selectorActives = childrenSelector + ' > .show, ' + childrenSelector + ' > .collapsing'; - } - } - if (this._config.toggle) { this.toggle(); } @@ -119,7 +111,7 @@ var Collapse = function ($) { var activesData = void 0; if (this._parent) { - actives = $.makeArray($(this._parent).find(this._selectorActives)); + actives = $.makeArray($(this._parent).children().children(Selector.ACTIVES)); if (!actives.length) { actives = null; } diff --git a/js/dist/collapse.js.map b/js/dist/collapse.js.map index db9d13f6e..5fa9f74fa 100644 Binary files a/js/dist/collapse.js.map and b/js/dist/collapse.js.map differ diff --git a/js/dist/dropdown.js b/js/dist/dropdown.js index 62df3f341..a2593e162 100644 --- a/js/dist/dropdown.js +++ b/js/dist/dropdown.js @@ -1,3 +1,5 @@ +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -11,6 +13,14 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons var Dropdown = function ($) { + /** + * Check for Popper dependency + * Popper - https://popper.js.org + */ + if (typeof Popper === 'undefined') { + throw new Error('Bootstrap dropdown require Popper.js (https://popper.js.org)'); + } + /** * ------------------------------------------------------------------------ * Constants @@ -44,7 +54,10 @@ var Dropdown = function ($) { var ClassName = { DISABLED: 'disabled', - SHOW: 'show' + SHOW: 'show', + DROPUP: 'dropup', + MENURIGHT: 'dropdown-menu-right', + MENULEFT: 'dropdown-menu-left' }; var Selector = { @@ -55,6 +68,25 @@ var Dropdown = function ($) { VISIBLE_ITEMS: '.dropdown-menu .dropdown-item:not(.disabled)' }; + var AttachmentMap = { + TOP: 'top-start', + TOPEND: 'top-end', + BOTTOM: 'bottom-start', + BOTTOMEND: 'bottom-end' + }; + + var Default = { + placement: AttachmentMap.BOTTOM, + offset: 0, + flip: true + }; + + var DefaultType = { + placement: 'string', + offset: '(number|string)', + flip: 'boolean' + }; + /** * ------------------------------------------------------------------------ * Class Definition @@ -62,10 +94,13 @@ var Dropdown = function ($) { */ var Dropdown = function () { - function Dropdown(element) { + function Dropdown(element, config) { _classCallCheck(this, Dropdown); this._element = element; + this._popper = null; + this._config = this._getConfig(config); + this._menu = this._getMenuElement(); this._addEventListeners(); } @@ -75,30 +110,49 @@ var Dropdown = function ($) { // public Dropdown.prototype.toggle = function toggle() { - if (this.disabled || $(this).hasClass(ClassName.DISABLED)) { - return false; + if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED)) { + return; } - var parent = Dropdown._getParentFromElement(this); - var isActive = $(parent).hasClass(ClassName.SHOW); + var parent = Dropdown._getParentFromElement(this._element); + var isActive = $(this._menu).hasClass(ClassName.SHOW); Dropdown._clearMenus(); if (isActive) { - return false; + return; } var relatedTarget = { - relatedTarget: this + relatedTarget: this._element }; var showEvent = $.Event(Event.SHOW, relatedTarget); $(parent).trigger(showEvent); if (showEvent.isDefaultPrevented()) { - return false; + return; } + var element = this._element; + // for dropup with alignment we use the parent as popper container + if ($(parent).hasClass(ClassName.DROPUP)) { + if ($(this._menu).hasClass(ClassName.MENULEFT) || $(this._menu).hasClass(ClassName.MENURIGHT)) { + element = parent; + } + } + this._popper = new Popper(element, this._menu, { + placement: this._getPlacement(), + modifiers: { + offset: { + offset: this._config.offset + }, + flip: { + enabled: this._config.flip + } + } + }); + // if this is a touch-enabled device we add extra // empty mouseover listeners to the body's immediate children; // only needed because of broken event delegation on iOS @@ -107,25 +161,79 @@ var Dropdown = function ($) { $('body').children().on('mouseover', null, $.noop); } - this.focus(); - this.setAttribute('aria-expanded', true); + this._element.focus(); + this._element.setAttribute('aria-expanded', true); - $(parent).toggleClass(ClassName.SHOW); - $(parent).trigger($.Event(Event.SHOWN, relatedTarget)); - - return false; + $(this._menu).toggleClass(ClassName.SHOW); + $(parent).toggleClass(ClassName.SHOW).trigger($.Event(Event.SHOWN, relatedTarget)); }; Dropdown.prototype.dispose = function dispose() { $.removeData(this._element, DATA_KEY); $(this._element).off(EVENT_KEY); this._element = null; + this._menu = null; + if (this._popper !== null) { + this._popper.destroy(); + } + this._popper = null; + }; + + Dropdown.prototype.update = function update() { + if (this._popper !== null) { + this._popper.scheduleUpdate(); + } }; // private Dropdown.prototype._addEventListeners = function _addEventListeners() { - $(this._element).on(Event.CLICK, this.toggle); + var _this = this; + + $(this._element).on(Event.CLICK, function (event) { + event.preventDefault(); + event.stopPropagation(); + _this.toggle(); + }); + }; + + Dropdown.prototype._getConfig = function _getConfig(config) { + var elementData = $(this._element).data(); + if (elementData.placement !== undefined) { + elementData.placement = AttachmentMap[elementData.placement.toUpperCase()]; + } + + config = $.extend({}, this.constructor.Default, $(this._element).data(), config); + + Util.typeCheckConfig(NAME, config, this.constructor.DefaultType); + + return config; + }; + + Dropdown.prototype._getMenuElement = function _getMenuElement() { + if (!this._menu) { + var parent = Dropdown._getParentFromElement(this._element); + this._menu = $(parent).find(Selector.MENU)[0]; + } + return this._menu; + }; + + Dropdown.prototype._getPlacement = function _getPlacement() { + var $parentDropdown = $(this._element).parent(); + var placement = this._config.placement; + + // Handle dropup + if ($parentDropdown.hasClass(ClassName.DROPUP) || this._config.placement === AttachmentMap.TOP) { + placement = AttachmentMap.TOP; + if ($(this._menu).hasClass(ClassName.MENURIGHT)) { + placement = AttachmentMap.TOPEND; + } + } else { + if ($(this._menu).hasClass(ClassName.MENURIGHT)) { + placement = AttachmentMap.BOTTOMEND; + } + } + return placement; }; // static @@ -133,9 +241,10 @@ var Dropdown = function ($) { Dropdown._jQueryInterface = function _jQueryInterface(config) { return this.each(function () { var data = $(this).data(DATA_KEY); + var _config = (typeof config === 'undefined' ? 'undefined' : _typeof(config)) === 'object' ? config : null; if (!data) { - data = new Dropdown(this); + data = new Dropdown(this, _config); $(this).data(DATA_KEY, data); } @@ -143,7 +252,7 @@ var Dropdown = function ($) { if (data[config] === undefined) { throw new Error('No method named "' + config + '"'); } - data[config].call(this); + data[config](); } }); }; @@ -154,13 +263,18 @@ var Dropdown = function ($) { } var toggles = $.makeArray($(Selector.DATA_TOGGLE)); - for (var i = 0; i < toggles.length; i++) { var parent = Dropdown._getParentFromElement(toggles[i]); + var context = $(toggles[i]).data(DATA_KEY); var relatedTarget = { relatedTarget: toggles[i] }; + if (!context) { + continue; + } + + var dropdownMenu = context._menu; if (!$(parent).hasClass(ClassName.SHOW)) { continue; } @@ -183,6 +297,7 @@ var Dropdown = function ($) { toggles[i].setAttribute('aria-expanded', 'false'); + $(dropdownMenu).removeClass(ClassName.SHOW); $(parent).removeClass(ClassName.SHOW).trigger($.Event(Event.HIDDEN, relatedTarget)); } }; @@ -254,6 +369,16 @@ var Dropdown = function ($) { get: function get() { return VERSION; } + }, { + key: 'Default', + get: function get() { + return Default; + } + }, { + key: 'DefaultType', + get: function get() { + return DefaultType; + } }]); return Dropdown; @@ -265,7 +390,11 @@ var Dropdown = function ($) { * ------------------------------------------------------------------------ */ - $(document).on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler).on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler).on(Event.CLICK_DATA_API + ' ' + Event.KEYUP_DATA_API, Dropdown._clearMenus).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, Dropdown.prototype.toggle).on(Event.CLICK_DATA_API, Selector.FORM_CHILD, function (e) { + $(document).on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler).on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler).on(Event.CLICK_DATA_API + ' ' + Event.KEYUP_DATA_API, Dropdown._clearMenus).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { + event.preventDefault(); + event.stopPropagation(); + Dropdown._jQueryInterface.call($(this), 'toggle'); + }).on(Event.CLICK_DATA_API, Selector.FORM_CHILD, function (e) { e.stopPropagation(); }); @@ -283,5 +412,5 @@ var Dropdown = function ($) { }; return Dropdown; -}(jQuery); +}(jQuery); /* global Popper */ //# sourceMappingURL=dropdown.js.map \ No newline at end of file diff --git a/js/dist/dropdown.js.map b/js/dist/dropdown.js.map index c7b189283..bce6f0161 100644 Binary files a/js/dist/dropdown.js.map and b/js/dist/dropdown.js.map differ diff --git a/js/dist/popover.js b/js/dist/popover.js index d570fa372..1e82e8210 100644 --- a/js/dist/popover.js +++ b/js/dist/popover.js @@ -28,12 +28,14 @@ var Popover = function ($) { var DATA_KEY = 'bs.popover'; var EVENT_KEY = '.' + DATA_KEY; var JQUERY_NO_CONFLICT = $.fn[NAME]; + var CLASS_PREFIX = 'bs-popover'; + var BSCLS_PREFIX_REGEX = new RegExp('(^|\\s)' + CLASS_PREFIX + '\\S+', 'g'); var Default = $.extend({}, Tooltip.Default, { placement: 'right', trigger: 'click', content: '', - template: '' + template: '' }); var DefaultType = $.extend({}, Tooltip.DefaultType, { @@ -84,6 +86,10 @@ var Popover = function ($) { return this.getTitle() || this._getContent(); }; + Popover.prototype.addAttachmentClass = function addAttachmentClass(attachment) { + $(this.getTipElement()).addClass(CLASS_PREFIX + '-' + attachment); + }; + Popover.prototype.getTipElement = function getTipElement() { return this.tip = this.tip || $(this.config.template)[0]; }; @@ -96,8 +102,6 @@ var Popover = function ($) { this.setElementContent($tip.find(Selector.CONTENT), this._getContent()); $tip.removeClass(ClassName.FADE + ' ' + ClassName.SHOW); - - this.cleanupTether(); }; // private @@ -106,6 +110,14 @@ var Popover = function ($) { return this.element.getAttribute('data-content') || (typeof this.config.content === 'function' ? this.config.content.call(this.element) : this.config.content); }; + Popover.prototype._cleanTipClass = function _cleanTipClass() { + var $tip = $(this.getTipElement()); + var tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX); + if (tabClass !== null && tabClass.length > 0) { + $tip.removeClass(tabClass.join('')); + } + }; + // static Popover._jQueryInterface = function _jQueryInterface(config) { diff --git a/js/dist/popover.js.map b/js/dist/popover.js.map index e8bf8e9d9..727ee815f 100644 Binary files a/js/dist/popover.js.map and b/js/dist/popover.js.map differ diff --git a/js/dist/tab.js b/js/dist/tab.js index 079f98a63..fb0749ed5 100644 --- a/js/dist/tab.js +++ b/js/dist/tab.js @@ -129,7 +129,7 @@ var Tab = function ($) { }; Tab.prototype.dispose = function dispose() { - $.removeClass(this._element, DATA_KEY); + $.removeData(this._element, DATA_KEY); this._element = null; }; diff --git a/js/dist/tab.js.map b/js/dist/tab.js.map index 80117e026..7e0d8179d 100644 Binary files a/js/dist/tab.js.map and b/js/dist/tab.js.map differ diff --git a/js/dist/tooltip.js b/js/dist/tooltip.js index af385927f..f470481d1 100644 --- a/js/dist/tooltip.js +++ b/js/dist/tooltip.js @@ -14,11 +14,11 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons var Tooltip = function ($) { /** - * Check for Tether dependency - * Tether - http://tether.io/ + * Check for Popper dependency + * Popper - https://popper.js.org */ - if (typeof Tether === 'undefined') { - throw new Error('Bootstrap tooltips require Tether (http://tether.io/)'); + if (typeof Popper === 'undefined') { + throw new Error('Bootstrap tooltips require Popper.js (https://popper.js.org)'); } /** @@ -33,22 +33,8 @@ var Tooltip = function ($) { var EVENT_KEY = '.' + DATA_KEY; var JQUERY_NO_CONFLICT = $.fn[NAME]; var TRANSITION_DURATION = 150; - var CLASS_PREFIX = 'bs-tether'; - var TETHER_PREFIX_REGEX = new RegExp('(^|\\s)' + CLASS_PREFIX + '\\S+', 'g'); - - var Default = { - animation: true, - template: '', - trigger: 'hover focus', - title: '', - delay: 0, - html: false, - selector: false, - placement: 'top', - offset: '0 0', - constraints: [], - container: false - }; + var CLASS_PREFIX = 'bs-tooltip'; + var BSCLS_PREFIX_REGEX = new RegExp('(^|\\s)' + CLASS_PREFIX + '\\S+', 'g'); var DefaultType = { animation: 'boolean', @@ -59,16 +45,31 @@ var Tooltip = function ($) { html: 'boolean', selector: '(string|boolean)', placement: '(string|function)', - offset: 'string', - constraints: 'array', - container: '(string|element|boolean)' + offset: '(number|string)', + container: '(string|element|boolean)', + fallbackPlacement: '(string|array)' }; var AttachmentMap = { - TOP: 'bottom center', - RIGHT: 'middle left', - BOTTOM: 'top center', - LEFT: 'middle right' + AUTO: 'auto', + TOP: 'top', + RIGHT: 'right', + BOTTOM: 'bottom', + LEFT: 'left' + }; + + var Default = { + animation: true, + template: '', + trigger: 'hover focus', + title: '', + delay: 0, + html: false, + selector: false, + placement: 'top', + offset: 0, + container: false, + fallbackPlacement: 'flip' }; var HoverState = { @@ -99,11 +100,6 @@ var Tooltip = function ($) { TOOLTIP_INNER: '.tooltip-inner' }; - var TetherClass = { - element: false, - enabled: false - }; - var Trigger = { HOVER: 'hover', FOCUS: 'focus', @@ -126,7 +122,7 @@ var Tooltip = function ($) { this._timeout = 0; this._hoverState = ''; this._activeTrigger = {}; - this._tether = null; + this._popper = null; // protected this.element = element; @@ -183,8 +179,6 @@ var Tooltip = function ($) { Tooltip.prototype.dispose = function dispose() { clearTimeout(this._timeout); - this.cleanupTether(); - $.removeData(this.element, this.constructor.DATA_KEY); $(this.element).off(this.constructor.EVENT_KEY); @@ -198,7 +192,10 @@ var Tooltip = function ($) { this._timeout = null; this._hoverState = null; this._activeTrigger = null; - this._tether = null; + if (this._popper !== null) { + this._popper.destroy(); + } + this._popper = null; this.element = null; this.config = null; @@ -237,6 +234,7 @@ var Tooltip = function ($) { var placement = typeof this.config.placement === 'function' ? this.config.placement.call(this, tip, this.element) : this.config.placement; var attachment = this._getAttachment(placement); + this.addAttachmentClass(attachment); var container = this.config.container === false ? document.body : $(this.config.container); @@ -248,20 +246,26 @@ var Tooltip = function ($) { $(this.element).trigger(this.constructor.Event.INSERTED); - this._tether = new Tether({ - attachment: attachment, - element: tip, - target: this.element, - classes: TetherClass, - classPrefix: CLASS_PREFIX, - offset: this.config.offset, - constraints: this.config.constraints, - addTargetClasses: false + this._popper = new Popper(this.element, tip, { + placement: attachment, + modifiers: { + offset: { + offset: this.config.offset + }, + flip: { + behavior: this.config.fallbackPlacement + } + }, + onCreate: function onCreate(data) { + if (data.originalPlacement !== data.placement) { + _this._handlePopperPlacementChange(data); + } + }, + onUpdate: function onUpdate(data) { + _this._handlePopperPlacementChange(data); + } }); - Util.reflow(tip); - this._tether.position(); - $(tip).addClass(ClassName.SHOW); // if this is a touch-enabled device we add extra @@ -273,6 +277,9 @@ var Tooltip = function ($) { } var complete = function complete() { + if (_this.config.animation) { + _this._fixTransition(); + } var prevHoverState = _this._hoverState; _this._hoverState = null; @@ -285,10 +292,9 @@ var Tooltip = function ($) { if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) { $(this.tip).one(Util.TRANSITION_END, complete).emulateTransitionEnd(Tooltip._TRANSITION_DURATION); - return; + } else { + complete(); } - - complete(); } }; @@ -305,7 +311,9 @@ var Tooltip = function ($) { _this2._cleanTipClass(); _this2.element.removeAttribute('aria-describedby'); $(_this2.element).trigger(_this2.constructor.Event.HIDDEN); - _this2.cleanupTether(); + if (_this2._popper !== null) { + _this2._popper.destroy(); + } if (callback) { callback(); @@ -340,24 +348,30 @@ var Tooltip = function ($) { this._hoverState = ''; }; + Tooltip.prototype.update = function update() { + if (this._popper !== null) { + this._popper.scheduleUpdate(); + } + }; + // protected Tooltip.prototype.isWithContent = function isWithContent() { return Boolean(this.getTitle()); }; + Tooltip.prototype.addAttachmentClass = function addAttachmentClass(attachment) { + $(this.getTipElement()).addClass(CLASS_PREFIX + '-' + attachment); + }; + Tooltip.prototype.getTipElement = function getTipElement() { return this.tip = this.tip || $(this.config.template)[0]; }; Tooltip.prototype.setContent = function setContent() { var $tip = $(this.getTipElement()); - this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle()); - $tip.removeClass(ClassName.FADE + ' ' + ClassName.SHOW); - - this.cleanupTether(); }; Tooltip.prototype.setElementContent = function setElementContent($element, content) { @@ -386,26 +400,12 @@ var Tooltip = function ($) { return title; }; - Tooltip.prototype.cleanupTether = function cleanupTether() { - if (this._tether) { - this._tether.destroy(); - } - }; - // private Tooltip.prototype._getAttachment = function _getAttachment(placement) { return AttachmentMap[placement.toUpperCase()]; }; - Tooltip.prototype._cleanTipClass = function _cleanTipClass() { - var $tip = $(this.getTipElement()); - var tabClass = $tip.attr('class').match(TETHER_PREFIX_REGEX); - if (tabClass !== null && tabClass.length > 0) { - $tip.removeClass(tabClass.join('')); - } - }; - Tooltip.prototype._setListeners = function _setListeners() { var _this3 = this; @@ -566,6 +566,32 @@ var Tooltip = function ($) { return config; }; + Tooltip.prototype._cleanTipClass = function _cleanTipClass() { + var $tip = $(this.getTipElement()); + var tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX); + if (tabClass !== null && tabClass.length > 0) { + $tip.removeClass(tabClass.join('')); + } + }; + + Tooltip.prototype._handlePopperPlacementChange = function _handlePopperPlacementChange(data) { + this._cleanTipClass(); + this.addAttachmentClass(this._getAttachment(data.placement)); + }; + + Tooltip.prototype._fixTransition = function _fixTransition() { + var tip = this.getTipElement(); + var initConfigAnimation = this.config.animation; + if (tip.getAttribute('x-placement') !== null) { + return; + } + $(tip).removeClass(ClassName.FADE); + this.config.animation = false; + this.hide(); + this.show(); + this.config.animation = initConfigAnimation; + }; + // static Tooltip._jQueryInterface = function _jQueryInterface(config) { @@ -645,5 +671,5 @@ var Tooltip = function ($) { }; return Tooltip; -}(jQuery); /* global Tether */ +}(jQuery); /* global Popper */ //# sourceMappingURL=tooltip.js.map \ No newline at end of file diff --git a/js/dist/tooltip.js.map b/js/dist/tooltip.js.map index f697512d3..ce79d67d1 100644 Binary files a/js/dist/tooltip.js.map and b/js/dist/tooltip.js.map differ diff --git a/js/src/dropdown.js b/js/src/dropdown.js index eb536dc7d..acc3ed453 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -1,3 +1,5 @@ +/* global Popper */ + import Util from './util' @@ -10,6 +12,13 @@ import Util from './util' const Dropdown = (($) => { + /** + * Check for Popper dependency + * Popper - https://popper.js.org + */ + if (typeof Popper === 'undefined') { + throw new Error('Bootstrap dropdown require Popper.js (https://popper.js.org)') + } /** * ------------------------------------------------------------------------ @@ -43,8 +52,11 @@ const Dropdown = (($) => { } const ClassName = { - DISABLED : 'disabled', - SHOW : 'show' + DISABLED : 'disabled', + SHOW : 'show', + DROPUP : 'dropup', + MENURIGHT : 'dropdown-menu-right', + MENULEFT : 'dropdown-menu-left' } const Selector = { @@ -55,6 +67,25 @@ const Dropdown = (($) => { VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled)' } + const AttachmentMap = { + TOP : 'top-start', + TOPEND : 'top-end', + BOTTOM : 'bottom-start', + BOTTOMEND : 'bottom-end' + } + + const Default = { + placement : AttachmentMap.BOTTOM, + offset : 0, + flip : true + } + + const DefaultType = { + placement : 'string', + offset : '(number|string)', + flip : 'boolean' + } + /** * ------------------------------------------------------------------------ @@ -64,8 +95,11 @@ const Dropdown = (($) => { class Dropdown { - constructor(element) { + constructor(element, config) { this._element = element + this._popper = null + this._config = this._getConfig(config) + this._menu = this._getMenuElement() this._addEventListeners() } @@ -77,34 +111,60 @@ const Dropdown = (($) => { return VERSION } + static get Default() { + return Default + } + + static get DefaultType() { + return DefaultType + } // public toggle() { - if (this.disabled || $(this).hasClass(ClassName.DISABLED)) { - return false + if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED)) { + return } - const parent = Dropdown._getParentFromElement(this) - const isActive = $(parent).hasClass(ClassName.SHOW) + const parent = Dropdown._getParentFromElement(this._element) + const isActive = $(this._menu).hasClass(ClassName.SHOW) Dropdown._clearMenus() if (isActive) { - return false + return } const relatedTarget = { - relatedTarget : this + relatedTarget : this._element } - const showEvent = $.Event(Event.SHOW, relatedTarget) + const showEvent = $.Event(Event.SHOW, relatedTarget) $(parent).trigger(showEvent) if (showEvent.isDefaultPrevented()) { - return false + return } + let element = this._element + // for dropup with alignment we use the parent as popper container + if ($(parent).hasClass(ClassName.DROPUP)) { + if ($(this._menu).hasClass(ClassName.MENULEFT) || $(this._menu).hasClass(ClassName.MENURIGHT)) { + element = parent + } + } + this._popper = new Popper(element, this._menu, { + placement : this._getPlacement(), + modifiers : { + offset : { + offset : this._config.offset + }, + flip : { + enabled : this._config.flip + } + } + }) + // if this is a touch-enabled device we add extra // empty mouseover listeners to the body's immediate children; // only needed because of broken event delegation on iOS @@ -114,37 +174,100 @@ const Dropdown = (($) => { $('body').children().on('mouseover', null, $.noop) } - this.focus() - this.setAttribute('aria-expanded', true) + this._element.focus() + this._element.setAttribute('aria-expanded', true) - $(parent).toggleClass(ClassName.SHOW) - $(parent).trigger($.Event(Event.SHOWN, relatedTarget)) - - return false + $(this._menu).toggleClass(ClassName.SHOW) + $(parent) + .toggleClass(ClassName.SHOW) + .trigger($.Event(Event.SHOWN, relatedTarget)) } dispose() { $.removeData(this._element, DATA_KEY) $(this._element).off(EVENT_KEY) this._element = null + this._menu = null + if (this._popper !== null) { + this._popper.destroy() + } + this._popper = null } + update() { + if (this._popper !== null) { + this._popper.scheduleUpdate() + } + } // private _addEventListeners() { - $(this._element).on(Event.CLICK, this.toggle) + $(this._element).on(Event.CLICK, (event) => { + event.preventDefault() + event.stopPropagation() + this.toggle() + }) } + _getConfig(config) { + const elementData = $(this._element).data() + if (elementData.placement !== undefined) { + elementData.placement = AttachmentMap[elementData.placement.toUpperCase()] + } + + config = $.extend( + {}, + this.constructor.Default, + $(this._element).data(), + config + ) + + Util.typeCheckConfig( + NAME, + config, + this.constructor.DefaultType + ) + + return config + } + + _getMenuElement() { + if (!this._menu) { + const parent = Dropdown._getParentFromElement(this._element) + this._menu = $(parent).find(Selector.MENU)[0] + } + return this._menu + } + + _getPlacement() { + const $parentDropdown = $(this._element).parent() + let placement = this._config.placement + + // Handle dropup + if ($parentDropdown.hasClass(ClassName.DROPUP) || this._config.placement === AttachmentMap.TOP) { + placement = AttachmentMap.TOP + if ($(this._menu).hasClass(ClassName.MENURIGHT)) { + placement = AttachmentMap.TOPEND + } + } + else { + if ($(this._menu).hasClass(ClassName.MENURIGHT)) { + placement = AttachmentMap.BOTTOMEND + } + } + return placement + } // static static _jQueryInterface(config) { return this.each(function () { let data = $(this).data(DATA_KEY) + const _config = typeof config === 'object' ? config : null if (!data) { - data = new Dropdown(this) + data = new Dropdown(this, _config) $(this).data(DATA_KEY, data) } @@ -152,7 +275,7 @@ const Dropdown = (($) => { if (data[config] === undefined) { throw new Error(`No method named "${config}"`) } - data[config].call(this) + data[config]() } }) } @@ -164,13 +287,18 @@ const Dropdown = (($) => { } const toggles = $.makeArray($(Selector.DATA_TOGGLE)) - for (let i = 0; i < toggles.length; i++) { const parent = Dropdown._getParentFromElement(toggles[i]) + const context = $(toggles[i]).data(DATA_KEY) const relatedTarget = { relatedTarget : toggles[i] } + if (!context) { + continue + } + + const dropdownMenu = context._menu if (!$(parent).hasClass(ClassName.SHOW)) { continue } @@ -195,6 +323,7 @@ const Dropdown = (($) => { toggles[i].setAttribute('aria-expanded', 'false') + $(dropdownMenu).removeClass(ClassName.SHOW) $(parent) .removeClass(ClassName.SHOW) .trigger($.Event(Event.HIDDEN, relatedTarget)) @@ -276,7 +405,11 @@ const Dropdown = (($) => { .on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler) .on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler) .on(`${Event.CLICK_DATA_API} ${Event.KEYUP_DATA_API}`, Dropdown._clearMenus) - .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, Dropdown.prototype.toggle) + .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { + event.preventDefault() + event.stopPropagation() + Dropdown._jQueryInterface.call($(this), 'toggle') + }) .on(Event.CLICK_DATA_API, Selector.FORM_CHILD, (e) => { e.stopPropagation() }) diff --git a/js/src/popover.js b/js/src/popover.js index b68b47998..a068420d6 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -22,12 +22,15 @@ const Popover = (($) => { const DATA_KEY = 'bs.popover' const EVENT_KEY = `.${DATA_KEY}` const JQUERY_NO_CONFLICT = $.fn[NAME] + const CLASS_PREFIX = 'bs-popover' + const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g') const Default = $.extend({}, Tooltip.Default, { placement : 'right', trigger : 'click', content : '', template : '' }) @@ -106,6 +109,10 @@ const Popover = (($) => { return this.getTitle() || this._getContent() } + addAttachmentClass(attachment) { + $(this.getTipElement()).addClass(`${CLASS_PREFIX}-${attachment}`) + } + getTipElement() { return this.tip = this.tip || $(this.config.template)[0] } @@ -118,8 +125,6 @@ const Popover = (($) => { this.setElementContent($tip.find(Selector.CONTENT), this._getContent()) $tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`) - - this.cleanupTether() } // private @@ -131,6 +136,14 @@ const Popover = (($) => { this.config.content) } + _cleanTipClass() { + const $tip = $(this.getTipElement()) + const tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX) + if (tabClass !== null && tabClass.length > 0) { + $tip.removeClass(tabClass.join('')) + } + } + // static diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 47c3d8d05..1d53b0470 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -1,4 +1,4 @@ -/* global Tether */ +/* global Popper */ import Util from './util' @@ -13,11 +13,11 @@ import Util from './util' const Tooltip = (($) => { /** - * Check for Tether dependency - * Tether - http://tether.io/ + * Check for Popper dependency + * Popper - https://popper.js.org */ - if (typeof Tether === 'undefined') { - throw new Error('Bootstrap tooltips require Tether (http://tether.io/)') + if (typeof Popper === 'undefined') { + throw new Error('Bootstrap tooltips require Popper.js (https://popper.js.org)') } @@ -33,43 +33,45 @@ const Tooltip = (($) => { const EVENT_KEY = `.${DATA_KEY}` const JQUERY_NO_CONFLICT = $.fn[NAME] const TRANSITION_DURATION = 150 - const CLASS_PREFIX = 'bs-tether' - const TETHER_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g') - - const Default = { - animation : true, - template : '', - trigger : 'hover focus', - title : '', - delay : 0, - html : false, - selector : false, - placement : 'top', - offset : '0 0', - constraints : [], - container : false - } + const CLASS_PREFIX = 'bs-tooltip' + const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g') const DefaultType = { - animation : 'boolean', - template : 'string', - title : '(string|element|function)', - trigger : 'string', - delay : '(number|object)', - html : 'boolean', - selector : '(string|boolean)', - placement : '(string|function)', - offset : 'string', - constraints : 'array', - container : '(string|element|boolean)' + animation : 'boolean', + template : 'string', + title : '(string|element|function)', + trigger : 'string', + delay : '(number|object)', + html : 'boolean', + selector : '(string|boolean)', + placement : '(string|function)', + offset : '(number|string)', + container : '(string|element|boolean)', + fallbackPlacement : '(string|array)' } const AttachmentMap = { - TOP : 'bottom center', - RIGHT : 'middle left', - BOTTOM : 'top center', - LEFT : 'middle right' + AUTO : 'auto', + TOP : 'top', + RIGHT : 'right', + BOTTOM : 'bottom', + LEFT : 'left' + } + + const Default = { + animation : true, + template : '', + trigger : 'hover focus', + title : '', + delay : 0, + html : false, + selector : false, + placement : 'top', + offset : 0, + container : false, + fallbackPlacement : 'flip' } const HoverState = { @@ -100,11 +102,6 @@ const Tooltip = (($) => { TOOLTIP_INNER : '.tooltip-inner' } - const TetherClass = { - element : false, - enabled : false - } - const Trigger = { HOVER : 'hover', FOCUS : 'focus', @@ -128,7 +125,7 @@ const Tooltip = (($) => { this._timeout = 0 this._hoverState = '' this._activeTrigger = {} - this._tether = null + this._popper = null // protected this.element = element @@ -220,8 +217,6 @@ const Tooltip = (($) => { dispose() { clearTimeout(this._timeout) - this.cleanupTether() - $.removeData(this.element, this.constructor.DATA_KEY) $(this.element).off(this.constructor.EVENT_KEY) @@ -235,7 +230,10 @@ const Tooltip = (($) => { this._timeout = null this._hoverState = null this._activeTrigger = null - this._tether = null + if (this._popper !== null) { + this._popper.destroy() + } + this._popper = null this.element = null this.config = null @@ -277,6 +275,7 @@ const Tooltip = (($) => { this.config.placement const attachment = this._getAttachment(placement) + this.addAttachmentClass(attachment) const container = this.config.container === false ? document.body : $(this.config.container) @@ -288,20 +287,26 @@ const Tooltip = (($) => { $(this.element).trigger(this.constructor.Event.INSERTED) - this._tether = new Tether({ - attachment, - element : tip, - target : this.element, - classes : TetherClass, - classPrefix : CLASS_PREFIX, - offset : this.config.offset, - constraints : this.config.constraints, - addTargetClasses: false + this._popper = new Popper(this.element, tip, { + placement : attachment, + modifiers : { + offset : { + offset : this.config.offset + }, + flip : { + behavior : this.config.fallbackPlacement + } + }, + onCreate : (data) => { + if (data.originalPlacement !== data.placement) { + this._handlePopperPlacementChange(data) + } + }, + onUpdate : (data) => { + this._handlePopperPlacementChange(data) + } }) - Util.reflow(tip) - this._tether.position() - $(tip).addClass(ClassName.SHOW) // if this is a touch-enabled device we add extra @@ -313,6 +318,9 @@ const Tooltip = (($) => { } const complete = () => { + if (this.config.animation) { + this._fixTransition() + } const prevHoverState = this._hoverState this._hoverState = null @@ -327,10 +335,9 @@ const Tooltip = (($) => { $(this.tip) .one(Util.TRANSITION_END, complete) .emulateTransitionEnd(Tooltip._TRANSITION_DURATION) - return + } else { + complete() } - - complete() } } @@ -345,7 +352,9 @@ const Tooltip = (($) => { this._cleanTipClass() this.element.removeAttribute('aria-describedby') $(this.element).trigger(this.constructor.Event.HIDDEN) - this.cleanupTether() + if (this._popper !== null) { + this._popper.destroy() + } if (callback) { callback() @@ -385,6 +394,11 @@ const Tooltip = (($) => { } + update() { + if (this._popper !== null) { + this._popper.scheduleUpdate() + } + } // protected @@ -392,18 +406,18 @@ const Tooltip = (($) => { return Boolean(this.getTitle()) } + addAttachmentClass(attachment) { + $(this.getTipElement()).addClass(`${CLASS_PREFIX}-${attachment}`) + } + getTipElement() { return this.tip = this.tip || $(this.config.template)[0] } setContent() { const $tip = $(this.getTipElement()) - this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle()) - $tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`) - - this.cleanupTether() } setElementContent($element, content) { @@ -434,12 +448,6 @@ const Tooltip = (($) => { return title } - cleanupTether() { - if (this._tether) { - this._tether.destroy() - } - } - // private @@ -447,14 +455,6 @@ const Tooltip = (($) => { return AttachmentMap[placement.toUpperCase()] } - _cleanTipClass() { - const $tip = $(this.getTipElement()) - const tabClass = $tip.attr('class').match(TETHER_PREFIX_REGEX) - if (tabClass !== null && tabClass.length > 0) { - $tip.removeClass(tabClass.join('')) - } - } - _setListeners() { const triggers = this.config.trigger.split(' ') @@ -651,6 +651,31 @@ const Tooltip = (($) => { return config } + _cleanTipClass() { + const $tip = $(this.getTipElement()) + const tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX) + if (tabClass !== null && tabClass.length > 0) { + $tip.removeClass(tabClass.join('')) + } + } + + _handlePopperPlacementChange(data) { + this._cleanTipClass() + this.addAttachmentClass(this._getAttachment(data.placement)) + } + + _fixTransition() { + const tip = this.getTipElement() + const initConfigAnimation = this.config.animation + if (tip.getAttribute('x-placement') !== null) { + return + } + $(tip).removeClass(ClassName.FADE) + this.config.animation = false + this.hide() + this.show() + this.config.animation = initConfigAnimation + } // static diff --git a/js/tests/index.html b/js/tests/index.html index 81efd5876..d17608e4a 100644 --- a/js/tests/index.html +++ b/js/tests/index.html @@ -7,7 +7,7 @@ - + diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js index a15eb5245..1dd675b0b 100644 --- a/js/tests/unit/dropdown.js +++ b/js/tests/unit/dropdown.js @@ -275,20 +275,20 @@ $(function () { $first.parent('.dropdown') .on('shown.bs.dropdown', function () { assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click') - assert.strictEqual($('#qunit-fixture .show').length, 1, 'only one dropdown is shown') + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown') $(document.body).trigger('click') }).on('hidden.bs.dropdown', function () { - assert.strictEqual($('#qunit-fixture .show').length, 0, '"show" class removed') + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') $last.trigger('click') }) $last.parent('.btn-group') .on('shown.bs.dropdown', function () { assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click') - assert.strictEqual($('#qunit-fixture .show').length, 1, 'only one dropdown is shown') + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown') $(document.body).trigger('click') }).on('hidden.bs.dropdown', function () { - assert.strictEqual($('#qunit-fixture .show').length, 0, '"show" class removed') + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') done() }) $first.trigger('click') @@ -321,24 +321,24 @@ $(function () { $first.parent('.dropdown') .on('shown.bs.dropdown', function () { assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click') - assert.strictEqual($('#qunit-fixture .show').length, 1, 'only one dropdown is shown') + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown') var e = $.Event('keyup') e.which = 9 // Tab $(document.body).trigger(e) }).on('hidden.bs.dropdown', function () { - assert.strictEqual($('#qunit-fixture .show').length, 0, '"show" class removed') + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') $last.trigger('click') }) $last.parent('.btn-group') .on('shown.bs.dropdown', function () { assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click') - assert.strictEqual($('#qunit-fixture .show').length, 1, 'only one dropdown is shown') + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown') var e = $.Event('keyup') e.which = 9 // Tab $(document.body).trigger(e) }).on('hidden.bs.dropdown', function () { - assert.strictEqual($('#qunit-fixture .show').length, 0, '"show" class removed') + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') done() }) $first.trigger('click') @@ -552,7 +552,7 @@ $(function () { }) QUnit.test('should not close the dropdown if the user clicks on a text field', function (assert) { - assert.expect(1) + assert.expect(2) var done = assert.async() var dropdownHTML = '
' + '' @@ -565,23 +565,23 @@ $(function () { .find('[data-toggle="dropdown"]') .bootstrapDropdown() + var $textfield = $('#textField') + $textfield.on('click', function () { + assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') + done() + }) + $dropdown .parent('.dropdown') .on('shown.bs.dropdown', function () { - $('#textField').trigger('click') - assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') - setTimeout(function () { - done() - }, 300) - }) - .on('hidden.bs.dropdown', function () { assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') + $textfield.trigger($.Event('click')) }) $dropdown.trigger('click') }) QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) { - assert.expect(1) + assert.expect(2) var done = assert.async() var dropdownHTML = '
' + '' @@ -594,17 +594,17 @@ $(function () { .find('[data-toggle="dropdown"]') .bootstrapDropdown() + var $textarea = $('#textArea') + $textarea.on('click', function () { + assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') + done() + }) + $dropdown .parent('.dropdown') .on('shown.bs.dropdown', function () { - $('#textArea').trigger('click') - assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') - setTimeout(function () { - done() - }, 300) - }) - .on('hidden.bs.dropdown', function () { assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') + $textarea.trigger($.Event('click')) }) $dropdown.trigger('click') }) diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js index eaa9fa0c0..a7762bfab 100644 --- a/js/tests/unit/popover.js +++ b/js/tests/unit/popover.js @@ -47,13 +47,18 @@ $(function () { QUnit.test('should render popover element', function (assert) { assert.expect(2) - var $popover = $('@mdo') + var done = assert.async() + $('@mdo') .appendTo('#qunit-fixture') + .on('shown.bs.popover', function () { + assert.notEqual($('.popover').length, 0, 'popover was inserted') + $(this).bootstrapPopover('hide') + }) + .on('hidden.bs.popover', function () { + assert.strictEqual($('.popover').length, 0, 'popover removed') + done() + }) .bootstrapPopover('show') - - assert.notEqual($('.popover').length, 0, 'popover was inserted') - $popover.bootstrapPopover('hide') - assert.strictEqual($('.popover').length, 0, 'popover removed') }) QUnit.test('should store popover instance in popover data object', function (assert) { diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index 8cb1a6fdf..c0cafefe5 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -111,7 +111,7 @@ $(function () { assert .ok($('.tooltip') - .is('.fade.bs-tether-element-attached-top.bs-tether-element-attached-center.show'), 'has correct classes applied') + .is('.fade.bs-tooltip-bottom.show'), 'has correct classes applied') $tooltip.bootstrapTooltip('hide') @@ -364,32 +364,29 @@ $(function () { }) QUnit.test('should add position class before positioning so that position-specific styles are taken into account', function (assert) { - assert.expect(1) + assert.expect(2) + var done = assert.async() var styles = '' var $styles = $(styles).appendTo('head') var $container = $('
').appendTo('#qunit-fixture') - var $target = $('') + $('') .appendTo($container) .bootstrapTooltip({ - placement: 'right' + placement: 'right', + trigger: 'manual' + }) + .on('inserted.bs.tooltip', function () { + var $tooltip = $($(this).data('bs.tooltip').tip) + assert.ok($tooltip.hasClass('bs-tooltip-right')) + assert.ok($tooltip.attr('style') === undefined) + $styles.remove() + done() }) .bootstrapTooltip('show') - - var $tooltip = $($target.data('bs.tooltip').tip) - - // this is some dumb hack stuff because sub pixels in firefox - var top = Math.round($target.offset().top + $target[0].offsetHeight / 2 - $tooltip[0].offsetHeight / 2) - var top2 = Math.round($tooltip.offset().top) - var topDiff = top - top2 - assert.ok(topDiff <= 1 && topDiff >= -1) - $target.bootstrapTooltip('hide') - - $container.remove() - $styles.remove() }) QUnit.test('should use title attribute for tooltip text', function (assert) { @@ -459,7 +456,7 @@ $(function () { assert.expect(1) var done = assert.async() - var containerHTML = '
' + var containerHTML = '
' + '

' + 'Hover me' + '

' @@ -476,21 +473,24 @@ $(function () { }) .appendTo('#qunit-fixture') - var $trigger = $container + $container .find('a') .css('margin-top', 200) .bootstrapTooltip({ placement: 'top', animate: false }) + .on('shown.bs.tooltip', function () { + var $tooltip = $($(this).data('bs.tooltip').tip) + if (/iPhone|iPad|iPod/.test(navigator.userAgent)) { + assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($(this).offset().top)) + } + else { + assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) >= Math.round($(this).offset().top)) + } + done() + }) .bootstrapTooltip('show') - - var $tooltip = $($trigger.data('bs.tooltip').tip) - - setTimeout(function () { - assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($trigger.offset().top)) - done() - }, 0) }) QUnit.test('should show tooltip if leave event hasn\'t occurred before delay expires', function (assert) { @@ -629,45 +629,6 @@ $(function () { $tooltip.trigger('mouseenter') }) - QUnit.test('should correctly position tooltips on SVG elements', function (assert) { - if (!window.SVGElement) { - // Skip IE8 since it doesn't support SVG - assert.expect(0) - return - } - assert.expect(2) - - var done = assert.async() - - var styles = '' - var $styles = $(styles).appendTo('head') - - $('#qunit-fixture').append( - '
' - + ' ' - + ' ' - + ' ' - + '
') - var $circle = $('#theCircle') - - $circle - .on('shown.bs.tooltip', function () { - var offset = $('.tooltip').offset() - $styles.remove() - assert.ok(Math.abs(offset.left - 88) <= 1, 'tooltip has correct horizontal location') - $circle.bootstrapTooltip('hide') - assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom') - done() - }) - .bootstrapTooltip({ placement: 'top', trigger: 'manual' }) - - $circle.bootstrapTooltip('show') - }) - QUnit.test('should not reload the tooltip on subsequent mouseenter events', function (assert) { assert.expect(1) var titleHtml = function () { @@ -731,43 +692,6 @@ $(function () { assert.strictEqual(currentUid, $('#tt-content').text()) }) - QUnit.test('should correctly position tooltips on transformed elements', function (assert) { - var styleProps = document.documentElement.style - if (!('transform' in styleProps) && !('webkitTransform' in styleProps) && !('msTransform' in styleProps)) { - assert.expect(0) - return - } - assert.expect(2) - - var done = assert.async() - - var styles = '' - var $styles = $(styles).appendTo('head') - - var $element = $('
').appendTo('#qunit-fixture') - - $element - .on('shown.bs.tooltip', function () { - var offset = $('.tooltip').offset() - $styles.remove() - assert.ok(Math.abs(offset.left - 88) <= 1, 'tooltip has correct horizontal location') - assert.ok(Math.abs(offset.top - 126) <= 1, 'tooltip has correct vertical location') - $element.bootstrapTooltip('hide') - done() - }) - .bootstrapTooltip({ - trigger: 'manual' - }) - - $element.bootstrapTooltip('show') - }) - QUnit.test('should do nothing when an attempt is made to hide an uninitialized tooltip', function (assert) { assert.expect(1) diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html index cc8a6e709..fee096c6c 100644 --- a/js/tests/visual/dropdown.html +++ b/js/tests/visual/dropdown.html @@ -58,9 +58,67 @@
-
+ +
+
+
+ + +
+ Action + Another action + Something else here +
+
+ +
+ +
+ Action + Another action + Something else here +
+
+ +
+ +
+ + + +
+
+
+
+
+ Dropup split align right + +
+ + + +
+
+
+ +
+ + + +
+
+
+
+
+ diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index e999514f7..90b814e67 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -170,7 +170,7 @@
- + diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html index 51b5fe506..2354abf42 100644 --- a/js/tests/visual/popover.html +++ b/js/tests/visual/popover.html @@ -10,7 +10,11 @@

Popover Bootstrap Visual Test

- + + @@ -29,7 +33,7 @@
- + diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html index c0c3dc749..0f115e035 100644 --- a/js/tests/visual/scrollspy.html +++ b/js/tests/visual/scrollspy.html @@ -87,6 +87,7 @@
+ diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index f447a533b..172cb29ad 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -5,6 +5,19 @@ Tooltip +
@@ -15,6 +28,9 @@

+ @@ -30,17 +46,25 @@ + + +

+
- + diff --git a/package.json b/package.json index 97bb60381..881a5b806 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "license": "MIT", "dependencies": { "jquery": ">=1.9.1", - "tether": "^1.4.0" + "popper.js": "^1.9.9" }, "devDependencies": { "autoprefixer": "^6.7.7", diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 3c5a5c66e..d9e75b0aa 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -23,6 +23,8 @@ } } +// Allow for dropdowns to go bottom up (aka, dropup-menu) +// Just add .dropup after the standard .dropdown class and you're set. .dropup { .dropdown-toggle { &::after { @@ -100,29 +102,14 @@ // Open state for the dropdown .show { - // Show the menu - > .dropdown-menu { - display: block; - } - // Remove the outline when :focus is triggered > a { outline: 0; } } -// Menu positioning -// -// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown -// menu with the parent. -.dropdown-menu-right { - right: 0; - left: auto; // Reset the default from `.dropdown-menu` -} - -.dropdown-menu-left { - right: auto; - left: 0; +.dropdown-menu.show { + display: block; } // Dropdown section headers @@ -134,16 +121,3 @@ color: $dropdown-header-color; white-space: nowrap; // as with > li > a } - -// Allow for dropdowns to go bottom up (aka, dropup-menu) -// -// Just add .dropup after the standard .dropdown class and you're set. - -.dropup { - // Different positioning for bottom up menu - .dropdown-menu { - top: auto; - bottom: 100%; - margin-bottom: $dropdown-margin-top; - } -} diff --git a/scss/_navbar.scss b/scss/_navbar.scss index c73fc01f6..59cc52d9a 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -75,6 +75,12 @@ padding-right: 0; padding-left: 0; } + + .dropdown-menu { + position: static !important; + float: none; + transform: unset !important; + } } @@ -136,13 +142,6 @@ &#{$infix} { @include media-breakpoint-down($breakpoint) { - .navbar-nav { - .dropdown-menu { - position: static; - float: none; - } - } - > .container, > .container-fluid { padding-right: 0; @@ -159,7 +158,8 @@ flex-direction: row; .dropdown-menu { - position: absolute; + position: absolute !important; + top: 100% !important; } .nav-link { @@ -230,7 +230,7 @@ } .navbar-toggler-icon { - background-image: $navbar-light-toggler-bg; + background-image: $navbar-light-toggler-icon-bg; } .navbar-text { @@ -275,7 +275,7 @@ } .navbar-toggler-icon { - background-image: $navbar-inverse-toggler-bg; + background-image: $navbar-inverse-toggler-icon-bg; } .navbar-text { diff --git a/scss/_popover.scss b/scss/_popover.scss index c259916d7..e3a0d9d6d 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -18,74 +18,105 @@ @include border-radius($border-radius-lg); @include box-shadow($popover-box-shadow); + // Arrows + // + // .arrow is outer, .arrow::after is inner + + .arrow { + position: absolute; + display: block; + width: $popover-arrow-width; + height: $popover-arrow-height; + } + + .arrow::before, + .arrow::after { + position: absolute; + display: block; + border-color: transparent; + border-style: solid; + } + + .arrow::before { + content: ""; + border-width: $popover-arrow-outer-width; + } + .arrow::after { + content: ""; + border-width: $popover-arrow-outer-width; + } // Popover directions - &.popover-top, - &.bs-tether-element-attached-bottom { - margin-top: -$popover-arrow-width; + &.bs-popover-top { + margin-bottom: $popover-arrow-width; - &::before, - &::after { - left: 50%; + .arrow { + bottom: 0; + } + + .arrow::before, + .arrow::after { border-bottom-width: 0; } - &::before { + .arrow::before { bottom: -$popover-arrow-outer-width; - margin-left: -$popover-arrow-outer-width; + margin-left: -($popover-arrow-outer-width - 5); border-top-color: $popover-arrow-outer-color; } - &::after { + .arrow::after { bottom: -($popover-arrow-outer-width - 1); - margin-left: -$popover-arrow-width; + margin-left: -($popover-arrow-outer-width - 5); border-top-color: $popover-arrow-color; } } - &.popover-right, - &.bs-tether-element-attached-left { + &.bs-popover-right { margin-left: $popover-arrow-width; - &::before, - &::after { - top: 50%; + .arrow { + left: 0; + } + + .arrow::before, + .arrow::after { + margin-top: -($popover-arrow-outer-width - 3); border-left-width: 0; } - &::before { + .arrow::before { left: -$popover-arrow-outer-width; - margin-top: -$popover-arrow-outer-width; border-right-color: $popover-arrow-outer-color; } - &::after { + .arrow::after { left: -($popover-arrow-outer-width - 1); - margin-top: -($popover-arrow-outer-width - 1); border-right-color: $popover-arrow-color; } } - &.popover-bottom, - &.bs-tether-element-attached-top { + &.bs-popover-bottom { margin-top: $popover-arrow-width; - &::before, - &::after { - left: 50%; + .arrow { + top: 0; + } + + .arrow::before, + .arrow::after { + margin-left: -($popover-arrow-width - 3); border-top-width: 0; } - &::before { + .arrow::before { top: -$popover-arrow-outer-width; - margin-left: -$popover-arrow-outer-width; border-bottom-color: $popover-arrow-outer-color; } - &::after { + .arrow::after { top: -($popover-arrow-outer-width - 1); - margin-left: -$popover-arrow-width; border-bottom-color: $popover-arrow-color; } @@ -102,28 +133,43 @@ } } - &.popover-left, - &.bs-tether-element-attached-right { - margin-left: -$popover-arrow-width; + &.bs-popover-left { + margin-right: $popover-arrow-width; - &::before, - &::after { - top: 50%; + .arrow { + right: 0; + } + + .arrow::before, + .arrow::after { + margin-top: -($popover-arrow-outer-width - 3); border-right-width: 0; } - &::before { + .arrow::before { right: -$popover-arrow-outer-width; - margin-top: -$popover-arrow-outer-width; border-left-color: $popover-arrow-outer-color; } - &::after { + .arrow::after { right: -($popover-arrow-outer-width - 1); - margin-top: -($popover-arrow-outer-width - 1); border-left-color: $popover-arrow-color; } } + &.bs-popover-auto { + &[x-placement^="top"] { + @extend .bs-popover-top; + } + &[x-placement^="right"] { + @extend .bs-popover-right; + } + &[x-placement^="bottom"] { + @extend .bs-popover-bottom; + } + &[x-placement^="left"] { + @extend .bs-popover-left; + } + } } @@ -147,27 +193,3 @@ padding: $popover-content-padding-y $popover-content-padding-x; color: $popover-content-color; } - - -// Arrows -// -// .popover-arrow is outer, .popover-arrow::after is inner - -.popover::before, -.popover::after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.popover::before { - content: ""; - border-width: $popover-arrow-outer-width; -} -.popover::after { - content: ""; - border-width: $popover-arrow-width; -} diff --git a/scss/_progress.scss b/scss/_progress.scss index 66571843c..f7491a64b 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -11,6 +11,7 @@ text-align: center; background-color: $progress-bg; @include border-radius($progress-border-radius); + @include box-shadow($progress-box-shadow); } .progress-bar { diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 24e198d46..fe97fbbbd 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -3,6 +3,7 @@ position: absolute; z-index: $zindex-tooltip; display: block; + margin: $tooltip-margin; // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); @@ -13,62 +14,86 @@ &.show { opacity: $tooltip-opacity; } - &.tooltip-top, - &.bs-tether-element-attached-bottom { - padding: $tooltip-arrow-width 0; - margin-top: -$tooltip-margin; + .arrow { + position: absolute; + display: block; + width: $tooltip-arrow-width; + height: $tooltip-arrow-height; + } - .tooltip-inner::before { + &.bs-tooltip-top { + padding: $tooltip-arrow-width 0; + .arrow { bottom: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; + } + + .arrow::before { + margin-left: -($tooltip-arrow-width - 2); content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width 0; border-top-color: $tooltip-arrow-color; } } - &.tooltip-right, - &.bs-tether-element-attached-left { + &.bs-tooltip-right { padding: 0 $tooltip-arrow-width; - margin-left: $tooltip-margin; - - .tooltip-inner::before { - top: 50%; + .arrow { left: 0; - margin-top: -$tooltip-arrow-width; + } + + .arrow::before { + margin-top: -($tooltip-arrow-width - 2); content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; border-right-color: $tooltip-arrow-color; } } - &.tooltip-bottom, - &.bs-tether-element-attached-top { + &.bs-tooltip-bottom { padding: $tooltip-arrow-width 0; - margin-top: $tooltip-margin; - - .tooltip-inner::before { + .arrow { top: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; + } + + .arrow::before { + margin-left: -($tooltip-arrow-width - 2); content: ""; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; border-bottom-color: $tooltip-arrow-color; } } - &.tooltip-left, - &.bs-tether-element-attached-right { + &.bs-tooltip-left { padding: 0 $tooltip-arrow-width; - margin-left: -$tooltip-margin; - - .tooltip-inner::before { - top: 50%; + .arrow { right: 0; - margin-top: -$tooltip-arrow-width; + } + + .arrow::before { + right: 0; + margin-top: -($tooltip-arrow-width - 2); content: ""; border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; border-left-color: $tooltip-arrow-color; } } + &.bs-tooltip-auto { + &[x-placement^="top"] { + @extend .bs-tooltip-top; + } + &[x-placement^="right"] { + @extend .bs-tooltip-right; + } + &[x-placement^="bottom"] { + @extend .bs-tooltip-bottom; + } + &[x-placement^="left"] { + @extend .bs-tooltip-left; + } + } + + .arrow::before { + position: absolute; + border-color: transparent; + border-style: solid; + } } // Wrapper for the tooltip content @@ -79,12 +104,4 @@ text-align: center; background-color: $tooltip-bg; @include border-radius($border-radius); - - &::before { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 3ab37f9f5..fc82fca06 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -329,7 +329,6 @@ $table-head-color: $gray !default; $table-inverse-bg: $gray-dark !default; $table-inverse-bg-accent: rgba($white, .05) !default; $table-inverse-bg-hover: rgba($white, .075) !default; -$table-inverse-bg-active: $table-inverse-bg-hover !default; $table-inverse-border-color: lighten($gray-dark, 7.5%) !default; $table-inverse-color: $body-bg !default; @@ -574,11 +573,8 @@ $zindex-tooltip: 1070 !default; // Navs -$nav-item-margin: .2rem !default; -$nav-item-inline-spacer: 1rem !default; $nav-link-padding-y: .5rem !default; $nav-link-padding-x: 1rem !default; -$nav-link-hover-bg: $gray-lighter !default; $nav-disabled-link-color: $gray-light !default; $nav-tabs-border-color: #ddd !default; @@ -588,8 +584,6 @@ $nav-tabs-link-hover-border-color: $gray-lighter !default; $nav-tabs-active-link-color: $gray !default; $nav-tabs-active-link-bg: $body-bg !default; $nav-tabs-active-link-border-color: #ddd !default; -$nav-tabs-justified-link-border-color: #ddd !default; -$nav-tabs-justified-active-link-border-color: $body-bg !default; $nav-pills-border-radius: $border-radius !default; $nav-pills-active-link-color: $component-active-color !default; @@ -615,14 +609,14 @@ $navbar-inverse-color: rgba($white,.5) !default; $navbar-inverse-hover-color: rgba($white,.75) !default; $navbar-inverse-active-color: rgba($white,1) !default; $navbar-inverse-disabled-color: rgba($white,.25) !default; -$navbar-inverse-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-inverse-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; $navbar-inverse-toggler-border-color: rgba($white,.1) !default; $navbar-light-color: rgba($black,.5) !default; $navbar-light-hover-color: rgba($black,.7) !default; $navbar-light-active-color: rgba($black,.9) !default; $navbar-light-disabled-color: rgba($black,.3) !default; -$navbar-light-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; $navbar-light-toggler-border-color: rgba($black,.1) !default; // Pagination @@ -711,9 +705,11 @@ $tooltip-bg: $black !default; $tooltip-opacity: .9 !default; $tooltip-padding-y: 3px !default; $tooltip-padding-x: 8px !default; -$tooltip-margin: 3px !default; +$tooltip-margin: 0 !default; + $tooltip-arrow-width: 5px !default; +$tooltip-arrow-height: 5px !default; $tooltip-arrow-color: $tooltip-bg !default; @@ -736,6 +732,7 @@ $popover-content-padding-y: 9px !default; $popover-content-padding-x: 14px !default; $popover-arrow-width: 10px !default; +$popover-arrow-height: 5px !default; $popover-arrow-color: $popover-bg !default; $popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 87920e284..b6d980577 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -67,7 +67,11 @@ } @mixin make-col($size, $columns: $grid-columns) { - width: percentage($size / $columns); + flex: 0 0 percentage($size / $columns); + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + max-width: percentage($size / $columns); } @mixin make-col-offset($size, $columns: $grid-columns) {