mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-23 05:33:02 +02:00
Dropdown: support dynamic popper on navbar
This commit is contained in:
@@ -55,7 +55,6 @@ const CLASS_NAME_DROPDOWN_CENTER = 'dropdown-center'
|
|||||||
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)'
|
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)'
|
||||||
const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`
|
const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`
|
||||||
const SELECTOR_MENU = '.dropdown-menu'
|
const SELECTOR_MENU = '.dropdown-menu'
|
||||||
const SELECTOR_NAVBAR = '.navbar'
|
|
||||||
const SELECTOR_NAVBAR_NAV = '.navbar-nav'
|
const SELECTOR_NAVBAR_NAV = '.navbar-nav'
|
||||||
const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'
|
const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'
|
||||||
|
|
||||||
@@ -136,7 +135,7 @@ class Dropdown extends BaseComponent {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
this._createPopper()
|
this._popper = this._createPopper()
|
||||||
|
|
||||||
// If this is a touch-enabled device we add extra
|
// If this is a touch-enabled device we add extra
|
||||||
// empty mouseover listeners to the body's immediate children;
|
// empty mouseover listeners to the body's immediate children;
|
||||||
@@ -177,7 +176,6 @@ class Dropdown extends BaseComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
update() {
|
update() {
|
||||||
this._inNavbar = this._detectNavbar()
|
|
||||||
if (this._popper) {
|
if (this._popper) {
|
||||||
this._popper.update()
|
this._popper.update()
|
||||||
}
|
}
|
||||||
@@ -238,7 +236,7 @@ class Dropdown extends BaseComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const popperConfig = this._getPopperConfig()
|
const popperConfig = this._getPopperConfig()
|
||||||
this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
|
return Popper.createPopper(referenceElement, this._menu, popperConfig)
|
||||||
}
|
}
|
||||||
|
|
||||||
_isShown() {
|
_isShown() {
|
||||||
@@ -274,10 +272,6 @@ class Dropdown extends BaseComponent {
|
|||||||
return isEnd ? PLACEMENT_BOTTOMEND : PLACEMENT_BOTTOM
|
return isEnd ? PLACEMENT_BOTTOMEND : PLACEMENT_BOTTOM
|
||||||
}
|
}
|
||||||
|
|
||||||
_detectNavbar() {
|
|
||||||
return this._element.closest(SELECTOR_NAVBAR) !== null
|
|
||||||
}
|
|
||||||
|
|
||||||
_getOffset() {
|
_getOffset() {
|
||||||
const { offset } = this._config
|
const { offset } = this._config
|
||||||
|
|
||||||
@@ -306,15 +300,21 @@ class Dropdown extends BaseComponent {
|
|||||||
options: {
|
options: {
|
||||||
offset: this._getOffset()
|
offset: this._getOffset()
|
||||||
}
|
}
|
||||||
}]
|
},
|
||||||
}
|
{
|
||||||
|
name: 'applyCustomStyles',
|
||||||
// Disable Popper if we have a static display or Dropdown is in Navbar
|
enabled: true,
|
||||||
if (this._inNavbar || this._config.display === 'static') {
|
phase: 'afterWrite',
|
||||||
Manipulator.setDataAttribute(this._menu, 'popper', 'static') // todo:v6 remove
|
fn: () => {
|
||||||
defaultBsPopperConfig.modifiers = [{
|
this._menu.style.removeProperty('position')
|
||||||
name: 'applyStyles',
|
const initialPosition = getComputedStyle(this._menu).position
|
||||||
enabled: false
|
if (this._config.display === 'static' || initialPosition === 'static') {
|
||||||
|
// this._menu.style.position = 'static'
|
||||||
|
this._menu.style.removeProperty('margin')
|
||||||
|
this._menu.style.removeProperty('transform')
|
||||||
|
Manipulator.setDataAttribute(this._menu, 'popper', 'static') // todo:v6 remove?
|
||||||
|
}
|
||||||
|
}
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user