Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dropdown): add optional placement and respect bootstrap classes #1

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat(dropdown): add optional placement and respect bootstrap classes #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 123 additions & 0 deletions src/dropdown/docs/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,129 @@ <h4>append-to vs. append-to-body vs. inline example</h4>
</div>
</div>
</div>
<!-- Placement use case -->
<h4>Inline placement and positioning</h4>
<div class="btn-group dropup" uib-dropdown >
<button id="simple-btn-dropup" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropup <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-dropup">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group" uib-dropdown >
<button id="simple-btn-menu-right" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown-menu-right <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-menu-right">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group" uib-dropdown dropdown-placement="top-left">
<button id="simple-btn-top-left" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button top-left <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-top-left">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group" uib-dropdown dropdown-placement="bottom-right">
<button id="simple-btn-bottom-right" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button bottom-right <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-bottom-right">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group" uib-dropdown dropdown-placement="right-top">
<button id="simple-btn-right-top" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button right-top <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-right-top">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
<h4>append-to-body placement and positioning</h4>
<div class="btn-group dropup" uib-dropdown dropdown-append-to-body>
<button id="simple-btn-dropup-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropup <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-dropup-append-to-body">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group" uib-dropdown dropdown-append-to-body dropdown-append-to-body>
<button id="simple-btn-menu-right-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown-menu-right <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-menu-right-append-to-body">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group" uib-dropdown dropdown-append-to-body dropdown-placement="top-left">
<button id="simple-btn-top-left-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button top-left <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-top-left-append-to-body">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group" uib-dropdown dropdown-append-to-body dropdown-placement="bottom-right">
<button id="simple-btn-bottom-right-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button bottom-right <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-bottom-right-append-to-body">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group" uib-dropdown dropdown-append-to-body dropdown-placement="right-top">
<button id="simple-btn-right-top-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button right-top <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-right-top-append-to-body">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>

<script type="text/ng-template" id="dropdown.html">
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="button-template-url">
Expand Down
19 changes: 19 additions & 0 deletions src/dropdown/docs/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,25 @@ Each of these parts need to be used as attribute directives.
<small class="badge">$</small> -
An optional expression called when the dropdown menu is opened or closed.

* `dropdown-placement`
<small class="badge">C</small>
_(Default: `auto bottom-left`, Config: `placement`)_ -
If specified, bootstrap's dropup and dropdown-menu-right classes will be ignored. Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The dropdown will attempt to position the menu where it fits in the closest scrollable ancestor. Accepts:

* `top` - menu on top, horizontally centered on host element.
* `top-left` - menu on top, left edge aligned with host element left edge.
* `top-right` - menu on top, right edge aligned with host element right edge.
* `bottom` - menu on bottom, horizontally centered on host element.
* `bottom-left` - menu on bottom, left edge aligned with host element left edge.
* `bottom-right` - menu on bottom, right edge aligned with host element right edge.
* `left` - menu on left, vertically centered on host element.
* `left-top` - menu on left, top edge aligned with host element top edge.
* `left-bottom` - menu on left, bottom edge aligned with host element bottom edge.
* `right` - menu on right, vertically centered on host element.
* `right-top` - menu on right, top edge aligned with host element top edge.
* `right-bottom` - menu on right, bottom edge aligned with host element bottom edge.


### uib-dropdown-menu settings

* `template-url`
Expand Down
75 changes: 31 additions & 44 deletions src/dropdown/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.multiMap', 'ui.bootstrap.
setIsOpen = angular.noop,
toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.noop,
appendToBody = false,
appendToBodyPlacement = null,
appendTo = null,
keynavEnabled = false,
selectedOption = null,
Expand Down Expand Up @@ -253,53 +254,34 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.multiMap', 'ui.bootstrap.
}
};

scope.$watch('isOpen', function(isOpen, wasOpen) {
if (appendTo && self.dropdownMenu) {
var pos = $position.positionElements($element, self.dropdownMenu, 'bottom-left', true),
css,
rightalign,
scrollbarPadding,
scrollbarWidth = 0;

css = {
top: pos.top + 'px',
display: isOpen ? 'block' : 'none'
};

rightalign = self.dropdownMenu.hasClass('dropdown-menu-right');
if (!rightalign) {
css.left = pos.left + 'px';
css.right = 'auto';
} else {
css.left = 'auto';
scrollbarPadding = $position.scrollbarPadding(appendTo);

if (scrollbarPadding.heightOverflow && scrollbarPadding.scrollbarWidth) {
scrollbarWidth = scrollbarPadding.scrollbarWidth;
}

css.right = window.innerWidth - scrollbarWidth -
(pos.left + $element.prop('offsetWidth')) + 'px';
function positionDropdownMenu(container) {
if (!self.dropdownMenu) { return; }
var placement = $attrs.dropdownPlacement;
if (!placement) {
var dropUp = container.hasClass('dropup') || $element.hasClass('dropup'),
rightAlign = self.dropdownMenu.hasClass('dropdown-menu-right');
placement = 'auto bottom-left';
if (dropUp && rightAlign) {
placement = 'auto top-right';
} else if (dropUp) {
placement = 'auto top-left';
} else if (rightAlign) {
placement = 'auto bottom-right';
}

// Need to adjust our positioning to be relative to the appendTo container
// if it's not the body element
if (!appendToBody) {
var appendOffset = $position.offset(appendTo);

css.top = pos.top - appendOffset.top + 'px';

if (!rightalign) {
css.left = pos.left - appendOffset.left + 'px';
} else {
css.right = window.innerWidth -
(pos.left - appendOffset.left + $element.prop('offsetWidth')) + 'px';
}
}

self.dropdownMenu.css(css);
}
self.dropdownMenu.css({ display: 'block' });
var pos = $position.positionElements(appendToBody ? $element : container, self.dropdownMenu, placement, appendToBody),
css;

css = {
top: pos.top + 'px',
left: pos.left + 'px',
right: 'auto'
};
self.dropdownMenu.css(css);
}

scope.$watch('isOpen', function(isOpen, wasOpen) {
var openContainer = appendTo ? appendTo : $element;
var dropdownOpenClass = appendTo ? appendToOpenClass : openClass;
var hasOpenClass = openContainer.hasClass(dropdownOpenClass);
Expand Down Expand Up @@ -327,10 +309,12 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.multiMap', 'ui.bootstrap.
var newEl = dropdownElement;
self.dropdownMenu.replaceWith(newEl);
self.dropdownMenu = newEl;
positionDropdownMenu(openContainer);
$document.on('keydown', uibDropdownService.keybindFilter);
});
});
} else {
positionDropdownMenu(openContainer);
$document.on('keydown', uibDropdownService.keybindFilter);
}

Expand All @@ -345,6 +329,9 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.multiMap', 'ui.bootstrap.
self.dropdownMenu.replaceWith(newEl);
self.dropdownMenu = newEl;
}
if (self.dropdownMenu) {
self.dropdownMenu.css({ display: 'none' });
}

self.selectedOption = null;
}
Expand Down
2 changes: 1 addition & 1 deletion src/position/position.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ angular.module('ui.bootstrap.position', [])
offsetParent: function(elem) {
elem = this.getRawNode(elem);

var offsetParent = elem.offsetParent || $document[0].documentElement;
var offsetParent = elem;

function isStaticPositioned(el) {
return ($window.getComputedStyle(el).position || 'static') === 'static';
Expand Down