Change offset behavior in centered case to make it more intuitive, get tooltips behav...

diff --git a/js/foundation.positionable.js b/js/foundation.positionable.js
index 81dcea57dab21af57f47f25cb28b52e4f7e3cab7..4fde158d0a4a0e908f902d15527c209ecdece1d8 100644 (file)
--- a/js/foundation.positionable.js
+++ b/js/foundation.positionable.js
@@ -101,13 +101,36 @@ class Positionable extends Plugin {
   }
 
 
+  // When we're trying to center, we don't want to apply offset that's going to
+  // take us just off center, so wrap around to return 0 for the appropriate
+  // offset in those alignments.  TODO: Figure out if we want to make this
+  // configurable behavior... it feels more intuitive, especially for tooltips, but
+  // it's possible someone might actually want to start from center and then nudge
+  // slightly off.
+  _getVOffset() {
+    if(this.alignment === 'center' && (this.position === 'left' || this.position === 'right')) {
+      return 0;
+    } else {
+      return this.options.vOffset;
+    }
+  }
+
+  _getHOffset() {
+    if(this.alignment === 'center' && (this.position === 'top' || this.position === 'bottom')) {
+      return 0;
+    } else {
+      return this.options.hOffset;
+    }
+  }
+
+
   _setPosition($anchor, $element, $parent) {
     if($anchor.attr('aria-expanded') === 'false'){ return false; }
     var $eleDims = Box.GetDimensions($element),
         $anchorDims = Box.GetDimensions($anchor);
 
 
-    $element.offset(Box.GetExplicitOffsets($element, $anchor, this.position, this.alignment, this.options.vOffset, this.options.hOffset));
+    $element.offset(Box.GetExplicitOffsets($element, $anchor, this.position, this.alignment, this._getVOffset(), this._getHOffset()));
 
     if(!this.options.allowOverlap) {
       var overlaps = {};
@@ -127,13 +150,13 @@ class Positionable extends Plugin {
 
         this._reposition();
 
-        $element.offset(Box.GetExplicitOffsets($element, $anchor, this.position, this.alignment, this.options.vOffset, this.options.hOffset));
+        $element.offset(Box.GetExplicitOffsets($element, $anchor, this.position, this.alignment, this._getVOffset(), this._getHOffset()));
       }
       // If we get through the entire loop, there was no non-overlapping
       // position available. Pick the version with least overlap.
       this.position = minCoordinates.position;
       this.alignment = minCoordinates.alignment;
-      $element.offset(Box.GetExplicitOffsets($element, $anchor, this.position, this.alignment, this.options.vOffset, this.options.hOffset));
+      $element.offset(Box.GetExplicitOffsets($element, $anchor, this.position, this.alignment, this._getVOffset(), this._getHOffset()));
     }
   }
 

diff --git a/test/visual/dropdown/offsets.html b/test/visual/dropdown/offsets.html
index 25ec2a8e0814759765d4212c6b70823f0307ea2f..cbc3f0a9487e7d63d5241fab7d39a3e8900ea291 100644 (file)
--- a/test/visual/dropdown/offsets.html
+++ b/test/visual/dropdown/offsets.html
@@ -11,7 +11,7 @@
     <div class="row column">
       <h1>Dropdown: Explicit Positioning Content - with offsets</h1>
 
-      <p>These dropdowns test various positioning and alignments WITH OFFSETS. 
+      <p>These dropdowns test various positioning and alignments WITH OFFSETS.
          Valid positions are left/right/top/bottom.  Valid alignments are
          left/right/top/bottom/center. Left align means left sides should line up.
          Right align means right sides should line up. Center align means centers should line up.
@@ -33,7 +33,7 @@
           <p>Bottom Center</p>
           <button class="button" type="button" data-toggle="example-dropdown-bottom-center">Toggle Dropdown</button>
           <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="bottom" data-alignment="center" id="example-dropdown-bottom-center" data-dropdown data-auto-focus="true">
-            <p>This offset should push right and down.</p>
+            <p>This offset should push down and ignore the horizontal offset.</p>
           </div>
         </div>
 
@@ -57,7 +57,7 @@
           <p>Top Center</p>
           <button class="button" type="button" data-toggle="example-dropdown-top-center">Toggle Dropdown</button>
           <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="top" data-alignment="center" id="example-dropdown-top-center" data-dropdown data-auto-focus="true">
-            <p>This offset should push right and up.</p>
+            <p>This offset should push up and ignore the horizontal offset.</p>
           </div>
         </div>
 
@@ -92,14 +92,14 @@
           <p>Right Center</p>
           <button class="button" type="button" data-toggle="example-dropdown-right-center">Toggle Dropdown</button>
           <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="right" data-alignment="center" id="example-dropdown-right-center" data-dropdown data-auto-focus="true">
-            <p>This offset should push right and down.</p>
+            <p>This offset should push right and ignore the vertical offset.</p>
           </div>
         </div>
         <div class="column">
           <p>Left Center</p>
           <button class="button" type="button" data-toggle="example-dropdown-left-center">Toggle Dropdown</button>
           <div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="left" data-alignment="center" id="example-dropdown-left-center" data-dropdown data-auto-focus="true">
-            <p>This offset should push left and down.</p>
+            <p>This offset should push left and ignore the vertical offset.</p>
           </div>
         </div>