From 096ade49a5ceff46c2db7f1b2aa5399853a2cb4a Mon Sep 17 00:00:00 2001 From: Gleb Mazovetskiy Date: Mon, 29 May 2017 14:41:20 +0100 Subject: rake update[v4-dev] --- assets/javascripts/bootstrap.js | 794 ++++++++++++++------- assets/javascripts/bootstrap.min.js | 281 +++++++- assets/javascripts/bootstrap/alert.js | 1 + assets/javascripts/bootstrap/button.js | 10 +- assets/javascripts/bootstrap/carousel.js | 54 +- assets/javascripts/bootstrap/collapse.js | 28 +- assets/javascripts/bootstrap/dropdown.js | 220 ++++-- assets/javascripts/bootstrap/modal.js | 85 ++- assets/javascripts/bootstrap/popover.js | 19 +- assets/javascripts/bootstrap/scrollspy.js | 29 +- assets/javascripts/bootstrap/tab.js | 17 +- assets/javascripts/bootstrap/tooltip.js | 201 ++++-- assets/javascripts/bootstrap/util.js | 12 +- assets/stylesheets/_bootstrap-grid.scss | 10 +- assets/stylesheets/_bootstrap-reboot.scss | 3 +- assets/stylesheets/_bootstrap.scss | 4 +- assets/stylesheets/bootstrap/_alert.scss | 8 +- assets/stylesheets/bootstrap/_badge.scss | 1 - assets/stylesheets/bootstrap/_breadcrumb.scss | 2 +- assets/stylesheets/bootstrap/_button-group.scss | 24 +- assets/stylesheets/bootstrap/_buttons.scss | 35 +- assets/stylesheets/bootstrap/_card.scss | 34 +- assets/stylesheets/bootstrap/_carousel.scss | 35 +- assets/stylesheets/bootstrap/_close.scss | 2 - assets/stylesheets/bootstrap/_custom-forms.scss | 16 +- assets/stylesheets/bootstrap/_dropdown.scss | 52 +- assets/stylesheets/bootstrap/_forms.scss | 48 +- assets/stylesheets/bootstrap/_grid.scss | 5 +- assets/stylesheets/bootstrap/_images.scss | 2 +- assets/stylesheets/bootstrap/_input-group.scss | 14 +- assets/stylesheets/bootstrap/_jumbotron.scss | 4 - assets/stylesheets/bootstrap/_list-group.scss | 30 +- assets/stylesheets/bootstrap/_mixins.scss | 19 +- assets/stylesheets/bootstrap/_nav.scss | 27 +- assets/stylesheets/bootstrap/_navbar.scss | 108 +-- assets/stylesheets/bootstrap/_normalize.scss | 461 ------------ assets/stylesheets/bootstrap/_pagination.scss | 7 +- assets/stylesheets/bootstrap/_popover.scss | 150 ++-- assets/stylesheets/bootstrap/_progress.scss | 8 +- assets/stylesheets/bootstrap/_reboot.scss | 282 +++++--- assets/stylesheets/bootstrap/_tables.scss | 36 +- assets/stylesheets/bootstrap/_tooltip.scss | 87 ++- assets/stylesheets/bootstrap/_type.scss | 4 +- assets/stylesheets/bootstrap/_variables.scss | 307 ++++---- assets/stylesheets/bootstrap/mixins/_alert.scss | 2 +- .../bootstrap/mixins/_border-radius.scss | 6 +- .../stylesheets/bootstrap/mixins/_box-shadow.scss | 5 + .../stylesheets/bootstrap/mixins/_breakpoints.scss | 28 +- assets/stylesheets/bootstrap/mixins/_buttons.scss | 5 +- assets/stylesheets/bootstrap/mixins/_cards.scss | 6 + assets/stylesheets/bootstrap/mixins/_clearfix.scss | 2 +- assets/stylesheets/bootstrap/mixins/_forms.scss | 36 +- .../stylesheets/bootstrap/mixins/_gradients.scss | 2 +- .../bootstrap/mixins/_grid-framework.scss | 4 +- assets/stylesheets/bootstrap/mixins/_grid.scss | 4 +- assets/stylesheets/bootstrap/mixins/_hover.scss | 12 +- .../stylesheets/bootstrap/mixins/_list-group.scss | 6 +- .../stylesheets/bootstrap/mixins/_nav-divider.scss | 6 +- .../stylesheets/bootstrap/mixins/_reset-text.scss | 7 +- assets/stylesheets/bootstrap/mixins/_resize.scss | 2 +- .../bootstrap/mixins/_screen-reader.scss | 7 +- .../bootstrap/mixins/_text-truncate.scss | 2 +- .../stylesheets/bootstrap/mixins/_transforms.scss | 14 - .../stylesheets/bootstrap/mixins/_transition.scss | 9 + .../stylesheets/bootstrap/mixins/_visibility.scss | 4 +- .../stylesheets/bootstrap/utilities/_display.scss | 37 +- assets/stylesheets/bootstrap/utilities/_flex.scss | 6 +- .../stylesheets/bootstrap/utilities/_spacing.scss | 22 +- .../bootstrap/utilities/_visibility.scss | 52 +- 69 files changed, 2097 insertions(+), 1765 deletions(-) delete mode 100644 assets/stylesheets/bootstrap/_normalize.scss create mode 100644 assets/stylesheets/bootstrap/mixins/_box-shadow.scss delete mode 100644 assets/stylesheets/bootstrap/mixins/_transforms.scss create mode 100644 assets/stylesheets/bootstrap/mixins/_transition.scss (limited to 'assets') diff --git a/assets/javascripts/bootstrap.js b/assets/javascripts/bootstrap.js index 2568773..3b5aff5 100644 --- a/assets/javascripts/bootstrap.js +++ b/assets/javascripts/bootstrap.js @@ -8,16 +8,14 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\'s JavaScript.') } -+function ($) { +(function ($) { var version = $.fn.jquery.split(' ')[0].split('.') if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] >= 4)) { throw new Error('Bootstrap\'s JavaScript requires at least jQuery v1.9.1 but less than v4.0.0') } -}(jQuery); - - -+function () { +})(jQuery); +(function () { 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; }; }(); @@ -141,13 +139,16 @@ var Util = function ($) { }, getSelectorFromElement: function getSelectorFromElement(element) { var selector = element.getAttribute('data-target'); - - if (!selector) { + if (!selector || selector === '#') { selector = element.getAttribute('href') || ''; - selector = /^#[a-z]/i.test(selector) ? selector : null; } - return selector; + try { + var $selector = $(selector); + return $selector.length > 0 ? selector : null; + } catch (error) { + return null; + } }, reflow: function reflow(element) { return element.offsetHeight; @@ -417,6 +418,7 @@ var Button = function ($) { Button.prototype.toggle = function toggle() { var triggerChangeEvent = true; + var addAriaPressed = true; var rootElement = $(this._element).closest(Selector.DATA_TOGGLE)[0]; if (rootElement) { @@ -436,15 +438,21 @@ 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'); } input.focus(); + addAriaPressed = false; } } - this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE)); + if (addAriaPressed) { + this._element.setAttribute('aria-pressed', !$(this._element).hasClass(ClassName.ACTIVE)); + } if (triggerChangeEvent) { $(this._element).toggleClass(ClassName.ACTIVE); @@ -544,6 +552,7 @@ var Carousel = function ($) { var TRANSITION_DURATION = 600; var ARROW_LEFT_KEYCODE = 37; // KeyboardEvent.which value for left arrow key var ARROW_RIGHT_KEYCODE = 39; // KeyboardEvent.which value for right arrow key + var TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch var Default = { interval: 5000, @@ -574,6 +583,7 @@ var Carousel = function ($) { KEYDOWN: 'keydown' + EVENT_KEY, MOUSEENTER: 'mouseenter' + EVENT_KEY, MOUSELEAVE: 'mouseleave' + EVENT_KEY, + TOUCHEND: 'touchend' + EVENT_KEY, LOAD_DATA_API: 'load' + EVENT_KEY + DATA_API_KEY, CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY }; @@ -616,6 +626,8 @@ var Carousel = function ($) { this._isPaused = false; this._isSliding = false; + this.touchTimeout = null; + this._config = this._getConfig(config); this._element = $(element)[0]; this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0]; @@ -628,10 +640,9 @@ var Carousel = function ($) { // public Carousel.prototype.next = function next() { - if (this._isSliding) { - throw new Error('Carousel is sliding'); + if (!this._isSliding) { + this._slide(Direction.NEXT); } - this._slide(Direction.NEXT); }; Carousel.prototype.nextWhenVisible = function nextWhenVisible() { @@ -642,10 +653,9 @@ var Carousel = function ($) { }; Carousel.prototype.prev = function prev() { - if (this._isSliding) { - throw new Error('Carousel is sliding'); + if (!this._isSliding) { + this._slide(Direction.PREV); } - this._slide(Direction.PREVIOUS); }; Carousel.prototype.pause = function pause(event) { @@ -701,7 +711,7 @@ var Carousel = function ($) { return; } - var direction = index > activeIndex ? Direction.NEXT : Direction.PREVIOUS; + var direction = index > activeIndex ? Direction.NEXT : Direction.PREV; this._slide(direction, this._items[index]); }; @@ -737,12 +747,30 @@ var Carousel = function ($) { }); } - if (this._config.pause === 'hover' && !('ontouchstart' in document.documentElement)) { + if (this._config.pause === 'hover') { $(this._element).on(Event.MOUSEENTER, function (event) { return _this4.pause(event); }).on(Event.MOUSELEAVE, function (event) { return _this4.cycle(event); }); + if ('ontouchstart' in document.documentElement) { + // if it's a touch-enabled device, mouseenter/leave are fired as + // part of the mouse compatibility events on first tap - the carousel + // would stop cycling until user tapped out of it; + // here, we listen for touchend, explicitly pause the carousel + // (as if it's the second time we tap on it, mouseenter compat event + // is NOT fired) and after a timeout (to allow for mouse compatibility + // events to fire) we explicitly restart cycling + $(this._element).on(Event.TOUCHEND, function () { + _this4.pause(); + if (_this4.touchTimeout) { + clearTimeout(_this4.touchTimeout); + } + _this4.touchTimeout = setTimeout(function (event) { + return _this4.cycle(event); + }, TOUCHEVENT_COMPAT_WAIT + _this4._config.interval); + }); + } } }; @@ -772,7 +800,7 @@ var Carousel = function ($) { Carousel.prototype._getItemByDirection = function _getItemByDirection(direction, activeElement) { var isNextDirection = direction === Direction.NEXT; - var isPrevDirection = direction === Direction.PREVIOUS; + var isPrevDirection = direction === Direction.PREV; var activeIndex = this._getItemIndex(activeElement); var lastItemIndex = this._items.length - 1; var isGoingToWrap = isPrevDirection && activeIndex === 0 || isNextDirection && activeIndex === lastItemIndex; @@ -781,16 +809,20 @@ var Carousel = function ($) { return activeElement; } - var delta = direction === Direction.PREVIOUS ? -1 : 1; + var delta = direction === Direction.PREV ? -1 : 1; var itemIndex = (activeIndex + delta) % this._items.length; return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex]; }; Carousel.prototype._triggerSlideEvent = function _triggerSlideEvent(relatedTarget, eventDirectionName) { + var targetIndex = this._getItemIndex(relatedTarget); + var fromIndex = this._getItemIndex($(this._element).find(Selector.ACTIVE_ITEM)[0]); var slideEvent = $.Event(Event.SLIDE, { relatedTarget: relatedTarget, - direction: eventDirectionName + direction: eventDirectionName, + from: fromIndex, + to: targetIndex }); $(this._element).trigger(slideEvent); @@ -814,8 +846,9 @@ var Carousel = function ($) { var _this5 = this; var activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0]; + var activeElementIndex = this._getItemIndex(activeElement); var nextElement = element || activeElement && this._getItemByDirection(direction, activeElement); - + var nextElementIndex = this._getItemIndex(nextElement); var isCycling = Boolean(this._interval); var directionalClassName = void 0; @@ -857,7 +890,9 @@ var Carousel = function ($) { var slidEvent = $.Event(Event.SLID, { relatedTarget: nextElement, - direction: eventDirectionName + direction: eventDirectionName, + from: activeElementIndex, + to: nextElementIndex }); if (Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.SLIDE)) { @@ -1054,7 +1089,7 @@ var Collapse = function ($) { }; var Selector = { - ACTIVES: '.card > .show, .card > .collapsing', + ACTIVES: '.show, .collapsing', DATA_TOGGLE: '[data-toggle="collapse"]' }; @@ -1099,11 +1134,7 @@ var Collapse = function ($) { Collapse.prototype.show = function show() { var _this6 = this; - if (this._isTransitioning) { - throw new Error('Collapse is transitioning'); - } - - if ($(this._element).hasClass(ClassName.SHOW)) { + if (this._isTransitioning || $(this._element).hasClass(ClassName.SHOW)) { return; } @@ -1111,7 +1142,7 @@ var Collapse = function ($) { var activesData = void 0; if (this._parent) { - actives = $.makeArray($(this._parent).find(Selector.ACTIVES)); + actives = $.makeArray($(this._parent).children().children(Selector.ACTIVES)); if (!actives.length) { actives = null; } @@ -1142,7 +1173,6 @@ var Collapse = function ($) { $(this._element).removeClass(ClassName.COLLAPSE).addClass(ClassName.COLLAPSING); this._element.style[dimension] = 0; - this._element.setAttribute('aria-expanded', true); if (this._triggerArray.length) { $(this._triggerArray).removeClass(ClassName.COLLAPSED).attr('aria-expanded', true); @@ -1176,11 +1206,7 @@ var Collapse = function ($) { Collapse.prototype.hide = function hide() { var _this7 = this; - if (this._isTransitioning) { - throw new Error('Collapse is transitioning'); - } - - if (!$(this._element).hasClass(ClassName.SHOW)) { + if (this._isTransitioning || !$(this._element).hasClass(ClassName.SHOW)) { return; } @@ -1191,16 +1217,13 @@ var Collapse = function ($) { } var dimension = this._getDimension(); - var offsetDimension = dimension === Dimension.WIDTH ? 'offsetWidth' : 'offsetHeight'; - this._element.style[dimension] = this._element[offsetDimension] + 'px'; + this._element.style[dimension] = this._element.getBoundingClientRect()[dimension] + 'px'; Util.reflow(this._element); $(this._element).addClass(ClassName.COLLAPSING).removeClass(ClassName.COLLAPSE).removeClass(ClassName.SHOW); - this._element.setAttribute('aria-expanded', false); - if (this._triggerArray.length) { $(this._triggerArray).addClass(ClassName.COLLAPSED).attr('aria-expanded', false); } @@ -1266,7 +1289,6 @@ var Collapse = function ($) { Collapse.prototype._addAriaAndCollapsedClass = function _addAriaAndCollapsedClass(element, triggerArray) { if (element) { var isOpen = $(element).hasClass(ClassName.SHOW); - element.setAttribute('aria-expanded', isOpen); if (triggerArray.length) { $(triggerArray).toggleClass(ClassName.COLLAPSED, !isOpen).attr('aria-expanded', isOpen); @@ -1327,7 +1349,9 @@ var Collapse = function ($) { */ $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { - event.preventDefault(); + if (!/input|textarea/i.test(event.target.tagName)) { + event.preventDefault(); + } var target = Collapse._getTargetFromElement(this); var data = $(target).data(DATA_KEY); @@ -1352,6 +1376,8 @@ var Collapse = function ($) { return Collapse; }(jQuery); +/* global Popper */ + /** * -------------------------------------------------------------------------- * Bootstrap (v4.0.0-alpha.6): dropdown.js @@ -1361,6 +1387,14 @@ var Collapse = function ($) { 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 @@ -1374,9 +1408,12 @@ var Dropdown = function ($) { var DATA_API_KEY = '.data-api'; var JQUERY_NO_CONFLICT = $.fn[NAME]; var ESCAPE_KEYCODE = 27; // KeyboardEvent.which value for Escape (Esc) key + var SPACE_KEYCODE = 32; // KeyboardEvent.which value for space key + var TAB_KEYCODE = 9; // KeyboardEvent.which value for tab key var ARROW_UP_KEYCODE = 38; // KeyboardEvent.which value for up arrow key var ARROW_DOWN_KEYCODE = 40; // KeyboardEvent.which value for down arrow key var RIGHT_MOUSE_BUTTON_WHICH = 3; // MouseEvent.which value for the right button (assuming a right-handed mouse) + var REGEXP_KEYDOWN = new RegExp(ARROW_UP_KEYCODE + '|' + ARROW_DOWN_KEYCODE + '|' + ESCAPE_KEYCODE); var Event = { HIDE: 'hide' + EVENT_KEY, @@ -1385,24 +1422,43 @@ var Dropdown = function ($) { SHOWN: 'shown' + EVENT_KEY, CLICK: 'click' + EVENT_KEY, CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY, - FOCUSIN_DATA_API: 'focusin' + EVENT_KEY + DATA_API_KEY, - KEYDOWN_DATA_API: 'keydown' + EVENT_KEY + DATA_API_KEY + KEYDOWN_DATA_API: 'keydown' + EVENT_KEY + DATA_API_KEY, + KEYUP_DATA_API: 'keyup' + EVENT_KEY + DATA_API_KEY }; var ClassName = { - BACKDROP: 'dropdown-backdrop', DISABLED: 'disabled', - SHOW: 'show' + SHOW: 'show', + DROPUP: 'dropup', + MENURIGHT: 'dropdown-menu-right', + MENULEFT: 'dropdown-menu-left' }; var Selector = { - BACKDROP: '.dropdown-backdrop', DATA_TOGGLE: '[data-toggle="dropdown"]', FORM_CHILD: '.dropdown form', - ROLE_MENU: '[role="menu"]', - ROLE_LISTBOX: '[role="listbox"]', + MENU: '.dropdown-menu', NAVBAR_NAV: '.navbar-nav', - VISIBLE_ITEMS: '[role="menu"] li:not(.disabled) a, ' + '[role="listbox"] li:not(.disabled) a' + 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' }; /** @@ -1412,10 +1468,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(); } @@ -1425,58 +1484,130 @@ 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; - } - - if ('ontouchstart' in document.documentElement && !$(parent).closest(Selector.NAVBAR_NAV).length) { - - // if mobile we use a backdrop because click events don't delegate - var dropdown = document.createElement('div'); - dropdown.className = ClassName.BACKDROP; - $(dropdown).insertBefore(this); - $(dropdown).on('click', Dropdown._clearMenus); + return; } var relatedTarget = { - relatedTarget: this + relatedTarget: this._element }; var showEvent = $.Event(Event.SHOW, relatedTarget); $(parent).trigger(showEvent); if (showEvent.isDefaultPrevented()) { - return false; + return; } - this.focus(); - this.setAttribute('aria-expanded', true); + 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 + // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html + if ('ontouchstart' in document.documentElement && !$(parent).closest(Selector.NAVBAR_NAV).length) { + $('body').children().on('mouseover', null, $.noop); + } - $(parent).toggleClass(ClassName.SHOW); - $(parent).trigger($.Event(Event.SHOWN, relatedTarget)); + this._element.focus(); + this._element.setAttribute('aria-expanded', true); - 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 _this9 = this; + + $(this._element).on(Event.CLICK, function (event) { + event.preventDefault(); + event.stopPropagation(); + _this9.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 @@ -1484,9 +1615,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); } @@ -1494,34 +1626,34 @@ var Dropdown = function ($) { if (data[config] === undefined) { throw new Error('No method named "' + config + '"'); } - data[config].call(this); + data[config](); } }); }; Dropdown._clearMenus = function _clearMenus(event) { - if (event && event.which === RIGHT_MOUSE_BUTTON_WHICH) { + if (event && (event.which === RIGHT_MOUSE_BUTTON_WHICH || event.type === 'keyup' && event.which !== TAB_KEYCODE)) { return; } - var backdrop = $(Selector.BACKDROP)[0]; - if (backdrop) { - backdrop.parentNode.removeChild(backdrop); - } - 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; } - if (event && (event.type === 'click' && /input|textarea/i.test(event.target.tagName) || event.type === 'focusin') && $.contains(parent, event.target)) { + if (event && (event.type === 'click' && /input|textarea/i.test(event.target.tagName) || event.type === 'keyup' && event.which === TAB_KEYCODE) && $.contains(parent, event.target)) { continue; } @@ -1531,8 +1663,15 @@ var Dropdown = function ($) { continue; } + // if this is a touch-enabled device we remove the extra + // empty mouseover listeners we added for iOS support + if ('ontouchstart' in document.documentElement) { + $('body').children().off('mouseover', null, $.noop); + } + toggles[i].setAttribute('aria-expanded', 'false'); + $(dropdownMenu).removeClass(ClassName.SHOW); $(parent).removeClass(ClassName.SHOW).trigger($.Event(Event.HIDDEN, relatedTarget)); } }; @@ -1549,7 +1688,7 @@ var Dropdown = function ($) { }; Dropdown._dataApiKeydownHandler = function _dataApiKeydownHandler(event) { - if (!/(38|40|27|32)/.test(event.which) || /input|textarea/i.test(event.target.tagName)) { + if (!REGEXP_KEYDOWN.test(event.which) || /button/i.test(event.target.tagName) && event.which === SPACE_KEYCODE || /input|textarea/i.test(event.target.tagName)) { return; } @@ -1563,7 +1702,7 @@ var Dropdown = function ($) { var parent = Dropdown._getParentFromElement(this); var isActive = $(parent).hasClass(ClassName.SHOW); - if (!isActive && event.which !== ESCAPE_KEYCODE || isActive && event.which === ESCAPE_KEYCODE) { + if (!isActive && (event.which !== ESCAPE_KEYCODE || event.which !== SPACE_KEYCODE) || isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE)) { if (event.which === ESCAPE_KEYCODE) { var toggle = $(parent).find(Selector.DATA_TOGGLE)[0]; @@ -1604,6 +1743,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; @@ -1615,7 +1764,11 @@ var Dropdown = function ($) { * ------------------------------------------------------------------------ */ - $(document).on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler).on(Event.KEYDOWN_DATA_API, Selector.ROLE_MENU, Dropdown._dataApiKeydownHandler).on(Event.KEYDOWN_DATA_API, Selector.ROLE_LISTBOX, Dropdown._dataApiKeydownHandler).on(Event.CLICK_DATA_API + ' ' + Event.FOCUSIN_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(); }); @@ -1700,7 +1853,8 @@ var Modal = function ($) { DIALOG: '.modal-dialog', DATA_TOGGLE: '[data-toggle="modal"]', DATA_DISMISS: '[data-dismiss="modal"]', - FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top' + FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top', + NAVBAR_TOGGLER: '.navbar-toggler' }; /** @@ -1720,7 +1874,6 @@ var Modal = function ($) { this._isShown = false; this._isBodyOverflowing = false; this._ignoreBackdropClick = false; - this._isTransitioning = false; this._originalBodyPadding = 0; this._scrollbarWidth = 0; } @@ -1734,15 +1887,16 @@ var Modal = function ($) { }; Modal.prototype.show = function show(relatedTarget) { - var _this9 = this; + var _this10 = this; if (this._isTransitioning) { - throw new Error('Modal is transitioning'); + return; } if (Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)) { this._isTransitioning = true; } + var showEvent = $.Event(Event.SHOW, { relatedTarget: relatedTarget }); @@ -1764,39 +1918,41 @@ var Modal = function ($) { this._setResizeEvent(); $(this._element).on(Event.CLICK_DISMISS, Selector.DATA_DISMISS, function (event) { - return _this9.hide(event); + return _this10.hide(event); }); $(this._dialog).on(Event.MOUSEDOWN_DISMISS, function () { - $(_this9._element).one(Event.MOUSEUP_DISMISS, function (event) { - if ($(event.target).is(_this9._element)) { - _this9._ignoreBackdropClick = true; + $(_this10._element).one(Event.MOUSEUP_DISMISS, function (event) { + if ($(event.target).is(_this10._element)) { + _this10._ignoreBackdropClick = true; } }); }); this._showBackdrop(function () { - return _this9._showElement(relatedTarget); + return _this10._showElement(relatedTarget); }); }; Modal.prototype.hide = function hide(event) { - var _this10 = this; + var _this11 = this; if (event) { event.preventDefault(); } - if (this._isTransitioning) { - throw new Error('Modal is transitioning'); + if (this._isTransitioning || !this._isShown) { + return; } var transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE); + if (transition) { this._isTransitioning = true; } var hideEvent = $.Event(Event.HIDE); + $(this._element).trigger(hideEvent); if (!this._isShown || hideEvent.isDefaultPrevented()) { @@ -1816,8 +1972,9 @@ var Modal = function ($) { $(this._dialog).off(Event.MOUSEDOWN_DISMISS); if (transition) { + $(this._element).one(Util.TRANSITION_END, function (event) { - return _this10._hideModal(event); + return _this11._hideModal(event); }).emulateTransitionEnd(TRANSITION_DURATION); } else { this._hideModal(); @@ -1836,10 +1993,13 @@ var Modal = function ($) { this._isShown = null; this._isBodyOverflowing = null; this._ignoreBackdropClick = null; - this._originalBodyPadding = null; this._scrollbarWidth = null; }; + Modal.prototype.handleUpdate = function handleUpdate() { + this._adjustDialog(); + }; + // private Modal.prototype._getConfig = function _getConfig(config) { @@ -1849,7 +2009,7 @@ var Modal = function ($) { }; Modal.prototype._showElement = function _showElement(relatedTarget) { - var _this11 = this; + var _this12 = this; var transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE); @@ -1877,11 +2037,11 @@ var Modal = function ($) { }); var transitionComplete = function transitionComplete() { - if (_this11._config.focus) { - _this11._element.focus(); + if (_this12._config.focus) { + _this12._element.focus(); } - _this11._isTransitioning = false; - $(_this11._element).trigger(shownEvent); + _this12._isTransitioning = false; + $(_this12._element).trigger(shownEvent); }; if (transition) { @@ -1892,23 +2052,24 @@ var Modal = function ($) { }; Modal.prototype._enforceFocus = function _enforceFocus() { - var _this12 = this; + var _this13 = this; $(document).off(Event.FOCUSIN) // guard against infinite focus loop .on(Event.FOCUSIN, function (event) { - if (document !== event.target && _this12._element !== event.target && !$(_this12._element).has(event.target).length) { - _this12._element.focus(); + if (document !== event.target && _this13._element !== event.target && !$(_this13._element).has(event.target).length) { + _this13._element.focus(); } }); }; Modal.prototype._setEscapeEvent = function _setEscapeEvent() { - var _this13 = this; + var _this14 = this; if (this._isShown && this._config.keyboard) { $(this._element).on(Event.KEYDOWN_DISMISS, function (event) { if (event.which === ESCAPE_KEYCODE) { - _this13.hide(); + event.preventDefault(); + _this14.hide(); } }); } else if (!this._isShown) { @@ -1917,11 +2078,11 @@ var Modal = function ($) { }; Modal.prototype._setResizeEvent = function _setResizeEvent() { - var _this14 = this; + var _this15 = this; if (this._isShown) { $(window).on(Event.RESIZE, function (event) { - return _this14._handleUpdate(event); + return _this15.handleUpdate(event); }); } else { $(window).off(Event.RESIZE); @@ -1929,16 +2090,16 @@ var Modal = function ($) { }; Modal.prototype._hideModal = function _hideModal() { - var _this15 = this; + var _this16 = this; this._element.style.display = 'none'; - this._element.setAttribute('aria-hidden', 'true'); + this._element.setAttribute('aria-hidden', true); this._isTransitioning = false; this._showBackdrop(function () { $(document.body).removeClass(ClassName.OPEN); - _this15._resetAdjustments(); - _this15._resetScrollbar(); - $(_this15._element).trigger(Event.HIDDEN); + _this16._resetAdjustments(); + _this16._resetScrollbar(); + $(_this16._element).trigger(Event.HIDDEN); }); }; @@ -1950,7 +2111,7 @@ var Modal = function ($) { }; Modal.prototype._showBackdrop = function _showBackdrop(callback) { - var _this16 = this; + var _this17 = this; var animate = $(this._element).hasClass(ClassName.FADE) ? ClassName.FADE : ''; @@ -1967,17 +2128,17 @@ var Modal = function ($) { $(this._backdrop).appendTo(document.body); $(this._element).on(Event.CLICK_DISMISS, function (event) { - if (_this16._ignoreBackdropClick) { - _this16._ignoreBackdropClick = false; + if (_this17._ignoreBackdropClick) { + _this17._ignoreBackdropClick = false; return; } if (event.target !== event.currentTarget) { return; } - if (_this16._config.backdrop === 'static') { - _this16._element.focus(); + if (_this17._config.backdrop === 'static') { + _this17._element.focus(); } else { - _this16.hide(); + _this17.hide(); } }); @@ -2001,7 +2162,7 @@ var Modal = function ($) { $(this._backdrop).removeClass(ClassName.SHOW); var callbackRemove = function callbackRemove() { - _this16._removeBackdrop(); + _this17._removeBackdrop(); if (callback) { callback(); } @@ -2022,10 +2183,6 @@ var Modal = function ($) { // todo (fat): these should probably be refactored out of modal.js // ---------------------------------------------------------------------- - Modal.prototype._handleUpdate = function _handleUpdate() { - this._adjustDialog(); - }; - Modal.prototype._adjustDialog = function _adjustDialog() { var isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight; @@ -2049,17 +2206,55 @@ var Modal = function ($) { }; Modal.prototype._setScrollbar = function _setScrollbar() { - var bodyPadding = parseInt($(Selector.FIXED_CONTENT).css('padding-right') || 0, 10); - - this._originalBodyPadding = document.body.style.paddingRight || ''; + var _this18 = this; if (this._isBodyOverflowing) { - document.body.style.paddingRight = bodyPadding + this._scrollbarWidth + 'px'; + // Note: DOMNode.style.paddingRight returns the actual value or '' if not set + // while $(DOMNode).css('padding-right') returns the calculated value or 0 if not set + + // Adjust fixed content padding + $(Selector.FIXED_CONTENT).each(function (index, element) { + var actualPadding = $(element)[0].style.paddingRight; + var calculatedPadding = $(element).css('padding-right'); + $(element).data('padding-right', actualPadding).css('padding-right', parseFloat(calculatedPadding) + _this18._scrollbarWidth + 'px'); + }); + + // Adjust navbar-toggler margin + $(Selector.NAVBAR_TOGGLER).each(function (index, element) { + var actualMargin = $(element)[0].style.marginRight; + var calculatedMargin = $(element).css('margin-right'); + $(element).data('margin-right', actualMargin).css('margin-right', parseFloat(calculatedMargin) + _this18._scrollbarWidth + 'px'); + }); + + // Adjust body padding + var actualPadding = document.body.style.paddingRight; + var calculatedPadding = $('body').css('padding-right'); + $('body').data('padding-right', actualPadding).css('padding-right', parseFloat(calculatedPadding) + this._scrollbarWidth + 'px'); } }; Modal.prototype._resetScrollbar = function _resetScrollbar() { - document.body.style.paddingRight = this._originalBodyPadding; + // Restore fixed content padding + $(Selector.FIXED_CONTENT).each(function (index, element) { + var padding = $(element).data('padding-right'); + if (typeof padding !== 'undefined') { + $(element).css('padding-right', padding).removeData('padding-right'); + } + }); + + // Restore navbar-toggler margin + $(Selector.NAVBAR_TOGGLER).each(function (index, element) { + var margin = $(element).data('margin-right'); + if (typeof margin !== 'undefined') { + $(element).css('margin-right', margin).removeData('margin-right'); + } + }); + + // Restore body padding + var padding = $('body').data('padding-right'); + if (typeof padding !== 'undefined') { + $('body').css('padding-right', padding).removeData('padding-right'); + } }; Modal.prototype._getScrollbarWidth = function _getScrollbarWidth() { @@ -2067,7 +2262,7 @@ var Modal = function ($) { var scrollDiv = document.createElement('div'); scrollDiv.className = ClassName.SCROLLBAR_MEASURER; document.body.appendChild(scrollDiv); - var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; + var scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth; document.body.removeChild(scrollDiv); return scrollbarWidth; }; @@ -2117,7 +2312,7 @@ var Modal = function ($) { */ $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { - var _this17 = this; + var _this19 = this; var target = void 0; var selector = Util.getSelectorFromElement(this); @@ -2139,8 +2334,8 @@ var Modal = function ($) { } $target.one(Event.HIDDEN, function () { - if ($(_this17).is(':visible')) { - _this17.focus(); + if ($(_this19).is(':visible')) { + _this19.focus(); } }); }); @@ -2207,18 +2402,15 @@ var ScrollSpy = function ($) { var ClassName = { DROPDOWN_ITEM: 'dropdown-item', DROPDOWN_MENU: 'dropdown-menu', - NAV_LINK: 'nav-link', - NAV: 'nav', ACTIVE: 'active' }; var Selector = { DATA_SPY: '[data-spy="scroll"]', ACTIVE: '.active', - LIST_ITEM: '.list-item', - LI: 'li', - LI_DROPDOWN: 'li.dropdown', + NAV_LIST_GROUP: '.nav, .list-group', NAV_LINKS: '.nav-link', + LIST_ITEMS: '.list-group-item', DROPDOWN: '.dropdown', DROPDOWN_ITEMS: '.dropdown-item', DROPDOWN_TOGGLE: '.dropdown-toggle' @@ -2237,21 +2429,21 @@ var ScrollSpy = function ($) { var ScrollSpy = function () { function ScrollSpy(element, config) { - var _this18 = this; + var _this20 = this; _classCallCheck(this, ScrollSpy); this._element = element; this._scrollElement = element.tagName === 'BODY' ? window : element; this._config = this._getConfig(config); - this._selector = this._config.target + ' ' + Selector.NAV_LINKS + ',' + (this._config.target + ' ' + Selector.DROPDOWN_ITEMS); + this._selector = this._config.target + ' ' + Selector.NAV_LINKS + ',' + (this._config.target + ' ' + Selector.LIST_ITEMS + ',') + (this._config.target + ' ' + Selector.DROPDOWN_ITEMS); this._offsets = []; this._targets = []; this._activeTarget = null; this._scrollHeight = 0; $(this._scrollElement).on(Event.SCROLL, function (event) { - return _this18._process(event); + return _this20._process(event); }); this.refresh(); @@ -2263,7 +2455,7 @@ var ScrollSpy = function ($) { // public ScrollSpy.prototype.refresh = function refresh() { - var _this19 = this; + var _this21 = this; var autoMethod = this._scrollElement !== this._scrollElement.window ? OffsetMethod.POSITION : OffsetMethod.OFFSET; @@ -2286,9 +2478,12 @@ var ScrollSpy = function ($) { target = $(targetSelector)[0]; } - if (target && (target.offsetWidth || target.offsetHeight)) { - // todo (fat): remove sketch reliance on jQuery position/offset - return [$(target)[offsetMethod]().top + offsetBase, targetSelector]; + if (target) { + var targetBCR = target.getBoundingClientRect(); + if (targetBCR.width || targetBCR.height) { + // todo (fat): remove sketch reliance on jQuery position/offset + return [$(target)[offsetMethod]().top + offsetBase, targetSelector]; + } } return null; }).filter(function (item) { @@ -2296,8 +2491,8 @@ var ScrollSpy = function ($) { }).sort(function (a, b) { return a[0] - b[0]; }).forEach(function (item) { - _this19._offsets.push(item[0]); - _this19._targets.push(item[1]); + _this21._offsets.push(item[0]); + _this21._targets.push(item[1]); }); }; @@ -2343,7 +2538,7 @@ var ScrollSpy = function ($) { }; ScrollSpy.prototype._getOffsetHeight = function _getOffsetHeight() { - return this._scrollElement === window ? window.innerHeight : this._scrollElement.offsetHeight; + return this._scrollElement === window ? window.innerHeight : this._scrollElement.getBoundingClientRect().height; }; ScrollSpy.prototype._process = function _process() { @@ -2395,9 +2590,11 @@ var ScrollSpy = function ($) { $link.closest(Selector.DROPDOWN).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE); $link.addClass(ClassName.ACTIVE); } else { - // todo (fat) this is kinda sus... - // recursively add actives to tested nav-links - $link.parents(Selector.LI).find('> ' + Selector.NAV_LINKS).addClass(ClassName.ACTIVE); + // Set triggered link as active + $link.addClass(ClassName.ACTIVE); + // Set triggered links parents as active + // With both