]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 866189b)
Start some visual tests and lay things out more explicitly feature/dropdown-positioning-and-offsets
authorKevin Ball <kmball11@gmail.com>
Sat, 12 Nov 2016 00:50:38 +0000 (16:50 -0800)
committerKevin Ball <kmball11@gmail.com>
Sat, 12 Nov 2016 00:50:38 +0000 (16:50 -0800)
js/foundation.dropdown.js patch | blob | blame | history
test/visual/dropdown/offsets.html [new file with mode: 0644] patch | blob

diff --git a/js/foundation.dropdown.js b/js/foundation.dropdown.js
index 33451240f66deaa0124455bf99b7ab8f99b802f2..fac5ccb385e49f6613ea83fa7510e49100b6b4a8 100644 (file)
--- a/js/foundation.dropdown.js
+++ b/js/foundation.dropdown.js
@@ -60,8 +60,11 @@ class Dropdown {
     // no context inferring on vertical right now
     this.verticalPositionClass = this.originalVerticalPosition = this.getVerticalPositionClass(this.options.positionClass);
     this.originalHorizontalPosition = this.getHorizontalPositionClass(this.options.positionClass);
+    this.checkForCenterClass(this.options.positionClass);
     this.horizontalPositionClass = this.originalHorizontalPosition.length ? this.originalHorizontalPosition : this.inferHorizontalPositionClass();
+
     this.positionClass = [this.horizontalPositionClass, this.verticalPositionClass].join(' ').trim();
+    this.fixedExhausted = false;
     this.counter = 6;
     this.usedPositions = [];
     this.$element.attr({
@@ -104,11 +107,40 @@ class Dropdown {
     return horizontalPosition;
   }
 
+  checkForCenterClass(className) {
+    if(typeof(className) === 'undefined' || !className.length) {
+      className = this.$element[0].className;
+    }
+
+    var hasCenterClass = className.match(/center/);
+    if(hasCenterClass) {
+      if(this.originalHorizontalPosition) {
+        this.verticalPosition = this.originalVerticalPosition = 'center';
+      } else {
+        this.originalHorizontalPosition = 'center';
+      }
+    }
+  }
+
   getNextClass(current, array) {
     var index = array.indexOf(current);
     return array[(index + 1) % array.length];
   }
 
+  // We want to always respect explicitly set positioning,
+  // so this method checks if we've exhausted the possibilities.
+  checkFixedExhausted() {
+    if(this.originalHorizontalPosition.length && this.originalVerticalPosition.length) {
+      return true;
+    }
+
+    if(this.originalHorizontalPosition.length || this.originalVerticalPosition.length) {
+      return this.usedPositions.length > 4;
+    }
+
+    return false;
+  }
+
   /**
    * Adjusts the dropdown panes orientation by adding/removing positioning classes.
    * @function
@@ -140,6 +172,7 @@ class Dropdown {
     this.$element.removeClass(position);
     this.$element.addClass(newPosition);
     this.classChanged = true;
+    this.fixedExhausted = this.checkFixedExhausted();
     this.counter--;
   }
 
@@ -155,7 +188,7 @@ class Dropdown {
         $eleDims = Foundation.Box.GetDimensions(this.$element),
         $anchorDims = Foundation.Box.GetDimensions(this.$anchor);
 
-
+    debugger;
 
     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({
@@ -167,7 +200,7 @@ class Dropdown {
     }
     this.$element.offset(Foundation.Box.GetOffsets(this.$element, this.$anchor, position, this.options.vOffset, this.options.hOffset));
 
-    while(!Foundation.Box.ImNotTouchingYou(this.$element, false, true) && this.counter){
+    while(!Foundation.Box.ImNotTouchingYou(this.$element, false, true) && this.counter && !this.fixedExhausted) {
       this._reposition(position);
       this._setPosition();
     }
diff --git a/test/visual/dropdown/offsets.html b/test/visual/dropdown/offsets.html
new file mode 100644 (file)
index 0000000..aed8c67
--- /dev/null
+++ b/test/visual/dropdown/offsets.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Foundation for Sites Testing</title>
+    <link href="../assets/css/foundation.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="row column">
+      <h1>Dropdown: Positioning Content</h1>
+
+      <p>These dropdowns test various positioning and position offsets</p>
+
+      <p>This dropdown should be offset by 10 down and 30 to the right</p>
+      <button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
+      <div class="dropdown-pane" id="example-dropdown" data-dropdown data-v-offset="10" data-h-offset="30" data-auto-focus="true">
+        <p>This dropdown should be offset by 10 down and 30 to the right</p>
+      </div>
+      <p>This dropdown should go off the screen left because it is 100% explicitly positioned.</p>
+      <button class="button" type="button" data-toggle="example-dropdown2">Toggle Dropdown</button>
+      <div class="dropdown-pane center left" id="example-dropdown2" data-dropdown data-auto-focus="true">
+        <p>This dropdown should go off the screen left because it is 100% explicitly positioned.</p>
+      </div>
+      <p>This dropdown should go off the screen left because it is 100% explicitly positioned.</p>
+      <button class="button" type="button" data-toggle="example-dropdown3">Toggle Dropdown</button>
+      <div class="dropdown-pane left" id="example-dropdown3" data-dropdown data-auto-focus="true">
+        <p>This dropdown should go left if there is room and otherwise below</p>
+      </div>
+    </div>
+
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>
Mirror of https://github.com/foundation/foundation-sites.git