Enabling dropdown alignment as requested in https://github.com/zurb/foundation-sites...

Basically my former solution merged into the current state of development.

diff --git a/docs/pages/dropdown.md b/docs/pages/dropdown.md
index 6c93a64c801097da02b6cef396c76228a1123170..244d1f2dab5121eafbabbf0e7298cf1adba8492f 100644 (file)
--- 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 07d7c4556ebb5c8ed320ef8432ad47969385a9d7..3f9dc90a6d18ac2839478761ffb9b3405fb16b3e 100644 (file)
--- 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 71ca289661d26576890cee9d3f74995983ed20c4..ef56d0877b5ac141bfe0bf45abeb4e5adf40f849 100644 (file)
--- 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),