From 2d0eedb7bad561a6e778415e9ff07012347d10d0 Mon Sep 17 00:00:00 2001
From: Marius Olbertz <marius.olbertz@gmail.com>
Date: Mon, 28 Mar 2016 13:25:43 +0200
Subject: [PATCH] Enabling dropdown alignment as requested in
 https://github.com/zurb/foundation-sites/issues/7392.

Basically my former solution merged into the current state of development.
---
 docs/pages/dropdown.md    | 12 ++++++++++++
 js/foundation.dropdown.js |  9 +++++++--
 js/foundation.util.box.js | 12 ++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/docs/pages/dropdown.md b/docs/pages/dropdown.md
index 6c93a64c8..244d1f2da 100644
--- a/docs/pages/dropdown.md
+++ b/docs/pages/dropdown.md
@@ -65,3 +65,15 @@ By default, a dropdown anchors below the button that opened it. Add the class `.
 <div class="dropdown-pane right" id="example-dropdown4" data-dropdown>
   Just some junk that needs to be said. Or not. Your choice.
 </div>
+
+
+Adding `.float-right` or `.float-left` to the anchor will change the direction of the dropdown as well.
+<button class="button float-right" type="button" data-toggle="example-dropdown5">Bottom-right Aligned</button>
+<div class="dropdown-pane bottom" id="example-dropdown5" data-dropdown>
+  Just some junk that needs to be said. Or not. Your choice.
+</div>
+
+<button class="button float-left" type="button" data-toggle="example-dropdown6">Bottom-left Aligned</button>
+<div class="dropdown-pane bottom" id="example-dropdown6" data-dropdown>
+  Just some junk that needs to be said. Or not. Your choice.
+</div>
\ No newline at end of file
diff --git a/js/foundation.dropdown.js b/js/foundation.dropdown.js
index 07d7c4556..3f9dc90a6 100644
--- a/js/foundation.dropdown.js
+++ b/js/foundation.dropdown.js
@@ -69,8 +69,11 @@ class Dropdown {
    * @returns {String} position - string value of a position class.
    */
   getPositionClass() {
-    var position = this.$element[0].className.match(/\b(top|left|right)\b/g);
-        position = position ? position[0] : '';
+    var verticalPosition = this.$element[0].className.match(/(top|left|right|bottom)/g);
+        verticalPosition = verticalPosition ? verticalPosition[0] : '';
+    var horizontalPosition = /float-(.+)\s/.exec(this.$anchor[0].className);
+        horizontalPosition = horizontalPosition ? horizontalPosition[1] : '';
+    var position = horizontalPosition ? horizontalPosition + ' ' + verticalPosition : verticalPosition;
     return position;
   }
 
@@ -130,6 +133,8 @@ class Dropdown {
         param = (direction === 'top') ? 'height' : 'width',
         offset = (param === 'height') ? this.options.vOffset : this.options.hOffset;
 
+
+
     if(($eleDims.width >= $eleDims.windowDims.width) || (!this.counter && !Foundation.Box.ImNotTouchingYou(this.$element))){
       this.$element.offset(Foundation.Box.GetOffsets(this.$element, this.$anchor, 'center bottom', this.options.vOffset, this.options.hOffset, true)).css({
         'width': $eleDims.windowDims.width - (this.options.hOffset * 2),
diff --git a/js/foundation.util.box.js b/js/foundation.util.box.js
index 71ca28966..ef56d0877 100644
--- a/js/foundation.util.box.js
+++ b/js/foundation.util.box.js
@@ -172,6 +172,18 @@ function GetOffsets(element, anchor, position, vOffset, hOffset, isOverflow) {
         top: $eleDims.windowDims.offset.top
       }
       break;
+    case 'left bottom':
+      return {
+        left: $anchorDims.offset.left - ($eleDims.width + hOffset),
+        top: $anchorDims.offset.top + $anchorDims.height
+      };
+      break;
+    case 'right bottom':
+      return {
+        left: $anchorDims.offset.left + $anchorDims.width + hOffset - $eleDims.width,
+        top: $anchorDims.offset.top + $anchorDims.height
+      };
+      break;
     default:
       return {
         left: (Foundation.rtl() ? $anchorDims.offset.left - $eleDims.width + $anchorDims.width : $anchorDims.offset.left),
-- 
2.47.2