Skip to content

Commit

Permalink
Better management of dropdown/dropup with alignment
Browse files Browse the repository at this point in the history
  • Loading branch information
@Johann-S
Johann-S authored May 22, 2017
1 parent b36d8ae commit 70f4a30
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 32 deletions.
48 changes: 26 additions & 22 deletions js/src/dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,10 @@ const Dropdown = (($) => {
}

const AttachmentMap = {
TOP : 'top-start',
BOTTOM : 'bottom-start'
TOP : 'top-start',
TOPEND : 'top-end',
BOTTOM : 'bottom-start',
BOTTOMEND : 'bottom-end'
}

const Default = {
Expand Down Expand Up @@ -144,21 +146,21 @@ const Dropdown = (($) => {
return
}

// Handle dropup
const dropdownPlacement = $(this._element).parent().hasClass(ClassName.DROPUP) ? AttachmentMap.TOP : this._config.placement
this._popper = new Popper(this._element, this._menu, {
placement : dropdownPlacement,
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
},
beforeApplyStyle: {
order: 899, // 900 is the order of applyStyle
enabled: true,
fn: this._beforePopperApplyStyle
}
}
})
Expand Down Expand Up @@ -238,21 +240,23 @@ const Dropdown = (($) => {
return this._menu
}

_beforePopperApplyStyle(data) {
if ($(data.instance.popper).hasClass(ClassName.MENURIGHT)) {
data.styles = {
right: 0,
left: 'auto'
_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
}
}

if ($(data.instance.popper).hasClass(ClassName.MENULEFT)) {
data.styles = {
right: 'auto',
left: 0
else {
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
placement = AttachmentMap.BOTTOMEND
}
}
return data
return placement
}

// static
Expand Down
38 changes: 28 additions & 10 deletions js/tests/visual/dropdown.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,10 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>

<div class="row">
<div class="col-sm-12 mt-4">
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">Dropup</button>
<button type="button" class="btn btn-secondary">Dropup split</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="sr-only">Dropup split</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
Expand All @@ -74,6 +73,15 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
</div>
</div>

<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This dropdown's menu is right-aligned
Expand All @@ -84,20 +92,30 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This dropdown's menu is left-aligned
</div>
<div class="col-sm-12 mt-4">
<div class="btn-group dropup" role="group">
<a href="#" class="btn btn-secondary">Dropup split align right</a>
<button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Product actions</span>
</button>
<div class="dropdown-menu dropdown-menu-left">
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
<button class="dropdown-item" type="button">Something else here with a long text</button>
</div>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup align right</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here with a long text</button>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../docs/assets/js/vendor/popper.min.js"></script>
Expand Down

0 comments on commit 70f4a30

Please sign in to comment.