From 79407c473aac8b6e37e28159ef57f949285a4b31 Mon Sep 17 00:00:00 2001
From: Umer Farooq <umer@umerfarooq.ca>
Date: Sun, 11 Dec 2016 20:33:25 -0500
Subject: [PATCH] feat(dropdown): add optional placement and respect bootstrap
 classes

Add an optional dropdown-placement attribute setting much like the
tooltips'. If it is specified then bootstrap's dropup and
dropdown-menu-right classes will be ignored. Updated positioning of the
dropdown menu to always use the position service. Ensured that dropup
and dropdown-menu-right will be respected for append-to and
append-to-body dropdowns. Updated positioning service to return the
element when looking for the offsetParent if the element is not
statically positioned.
---
 src/dropdown/docs/demo.html | 123 ++++++++++++++++++++++++++++++++++++
 src/dropdown/docs/readme.md |  19 ++++++
 src/dropdown/dropdown.js    |  75 +++++++++-------------
 src/position/position.js    |   2 +-
 4 files changed, 174 insertions(+), 45 deletions(-)

diff --git a/src/dropdown/docs/demo.html b/src/dropdown/docs/demo.html
index 0bb9586689..35d21b1ece 100644
--- a/src/dropdown/docs/demo.html
+++ b/src/dropdown/docs/demo.html
@@ -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">
diff --git a/src/dropdown/docs/readme.md b/src/dropdown/docs/readme.md
index 09b646d072..4232ff3fa1 100644
--- a/src/dropdown/docs/readme.md
+++ b/src/dropdown/docs/readme.md
@@ -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`
diff --git a/src/dropdown/dropdown.js b/src/dropdown/dropdown.js
index 7c5f805419..1b6b6676c4 100644
--- a/src/dropdown/dropdown.js
+++ b/src/dropdown/dropdown.js
@@ -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,
@@ -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);
@@ -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);
       }
 
@@ -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;
     }
diff --git a/src/position/position.js b/src/position/position.js
index 3ab066abb5..fd0e5c9c24 100644
--- a/src/position/position.js
+++ b/src/position/position.js
@@ -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';