diff options
Diffstat (limited to 'js/src')
| -rw-r--r-- | js/src/modal.js | 54 | ||||
| -rw-r--r-- | js/src/scrollspy.js | 16 | ||||
| -rw-r--r-- | js/src/tab.js | 21 | ||||
| -rw-r--r-- | js/src/tooltip.js | 8 |
4 files changed, 64 insertions, 35 deletions
diff --git a/js/src/modal.js b/js/src/modal.js index 5e9941444..779b9a402 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -67,7 +67,8 @@ const Modal = (($) => { 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' } @@ -212,7 +213,6 @@ const Modal = (($) => { this._isShown = null this._isBodyOverflowing = null this._ignoreBackdropClick = null - this._originalBodyPadding = null this._scrollbarWidth = null } @@ -429,21 +429,53 @@ const Modal = (($) => { } _setScrollbar() { - const bodyPadding = parseInt( - $(Selector.FIXED_CONTENT).css('padding-right') || 0, - 10 - ) + if (this._isBodyOverflowing) { + // 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((index, element) => { + const actualPadding = $(element)[0].style.paddingRight + const calculatedPadding = $(element).css('padding-right') + $(element).data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`) + }) - this._originalBodyPadding = document.body.style.paddingRight || '' + // Adjust navbar-toggler margin + $(Selector.NAVBAR_TOGGLER).each((index, element) => { + const actualMargin = $(element)[0].style.marginRight + const calculatedMargin = $(element).css('margin-right') + $(element).data('margin-right', actualMargin).css('margin-right', `${parseFloat(calculatedMargin) + this._scrollbarWidth}px`) + }) - if (this._isBodyOverflowing) { - document.body.style.paddingRight = - `${bodyPadding + this._scrollbarWidth}px` + // Adjust body padding + const actualPadding = document.body.style.paddingRight + const calculatedPadding = $('body').css('padding-right') + $('body').data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`) } } _resetScrollbar() { - document.body.style.paddingRight = this._originalBodyPadding + // Restore fixed content padding + $(Selector.FIXED_CONTENT).each((index, element) => { + const 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((index, element) => { + const margin = $(element).data('margin-right') + if (typeof margin !== 'undefined') { + $(element).css('margin-right', margin).removeData('margin-right') + } + }) + + // Restore body padding + const padding = $('body').data('padding-right') + if (typeof padding !== 'undefined') { + $('body').css('padding-right', padding).removeData('padding-right') + } } _getScrollbarWidth() { // thx d.walsh diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 15541b8ff..7ea9f2483 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -45,18 +45,15 @@ const ScrollSpy = (($) => { const ClassName = { DROPDOWN_ITEM : 'dropdown-item', DROPDOWN_MENU : 'dropdown-menu', - NAV_LINK : 'nav-link', - NAV : 'nav', ACTIVE : 'active' } const 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' @@ -81,6 +78,7 @@ const ScrollSpy = (($) => { this._scrollElement = element.tagName === 'BODY' ? window : element this._config = this._getConfig(config) this._selector = `${this._config.target} ${Selector.NAV_LINKS},` + + `${this._config.target} ${Selector.LIST_ITEMS},` + `${this._config.target} ${Selector.DROPDOWN_ITEMS}` this._offsets = [] this._targets = [] @@ -259,9 +257,11 @@ const ScrollSpy = (($) => { $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 <ul> and <nav> markup a parent is the previous sibling of any nav ancestor + $link.parents(Selector.NAV_LIST_GROUP).prev(`${Selector.NAV_LINKS}, ${Selector.LIST_ITEMS}`).addClass(ClassName.ACTIVE) } $(this._scrollElement).trigger(Event.ACTIVATE, { diff --git a/js/src/tab.js b/js/src/tab.js index d5669b7ad..6f8187d17 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -42,14 +42,10 @@ const Tab = (($) => { } const Selector = { - A : 'a', - LI : 'li', DROPDOWN : '.dropdown', - LIST : 'ul:not(.dropdown-menu), ol:not(.dropdown-menu), nav:not(.dropdown-menu), .list-group:not(.dropdown-menu)', - FADE_CHILD : '> .nav-item .fade, > .list-group-item .fade, > .fade', + NAV_LIST_GROUP : '.nav, .list-group', ACTIVE : '.active', - ACTIVE_CHILD : '> .nav-item > .active, > .list-group-item > .active, > .active', - DATA_TOGGLE : '[data-toggle="tab"], [data-toggle="pill"]', + DATA_TOGGLE : '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]', DROPDOWN_TOGGLE : '.dropdown-toggle', DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active' } @@ -87,7 +83,7 @@ const Tab = (($) => { let target let previous - const listElement = $(this._element).closest(Selector.LIST)[0] + const listElement = $(this._element).closest(Selector.NAV_LIST_GROUP)[0] const selector = Util.getSelectorFromElement(this._element) if (listElement) { @@ -152,11 +148,10 @@ const Tab = (($) => { // private _activate(element, container, callback) { - const active = $(container).find(Selector.ACTIVE_CHILD)[0] + const active = $(container).find(Selector.ACTIVE)[0] const isTransitioning = callback && Util.supportsTransitionEnd() - && (active && $(active).hasClass(ClassName.FADE) - || Boolean($(container).find(Selector.FADE_CHILD)[0])) + && (active && $(active).hasClass(ClassName.FADE)) const complete = () => this._transitionComplete( element, @@ -182,9 +177,6 @@ const Tab = (($) => { _transitionComplete(element, active, isTransitioning, callback) { if (active) { $(active).removeClass(ClassName.ACTIVE) - if ($(active).hasClass('list-group-item')) { - $(active).find('a.nav-link').removeClass(ClassName.ACTIVE) - } const dropdownChild = $(active.parentNode).find( Selector.DROPDOWN_ACTIVE_CHILD @@ -198,9 +190,6 @@ const Tab = (($) => { } $(element).addClass(ClassName.ACTIVE) - if ($(element.parentNode).hasClass('list-group-item')) { - $(element.parentNode).addClass(ClassName.ACTIVE) - } element.setAttribute('aria-expanded', true) if (isTransitioning) { diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 5fd4987b9..1ff2c4f6e 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -605,6 +605,14 @@ const Tooltip = (($) => { } } + if (config.title && typeof config.title === 'number') { + config.title = config.title.toString() + } + + if (config.content && typeof config.content === 'number') { + config.content = config.content.toString() + } + Util.typeCheckConfig( NAME, config, |