ads features to drilldown

data-auto-adjust-height and data-animate-height foundation#8607 foundation#7821
designerno1 · Apr 27, 2016 · 6511dd6 · 6511dd6
1 parent f3b72b5
commit 6511dd6
Show file tree

Hide file tree

Showing 4 changed files with 351 additions and 3 deletions.
diff --git a/docs/pages/drilldown-menu.md b/docs/pages/drilldown-menu.md
@@ -73,6 +73,75 @@ Any `<a>` without a submenu will function like a normal link.
   <li><a href="#Item-4"> Item 4</a></li>
 </ul>
 
+## autoAdjustHeight
+
+<div class="secondary callout">
+  <p>If you like to set the height to auto you can also set the autoAdjustHeight and animateHeight params</p>
+</div>
+
+<ul class="menu" data-drilldown data-auto-adjust-height="true" data-animate-height="true" style="width: 200px" id="m2">
+  <li>
+    <a href="#">Item 1</a>
+    <ul class="menu">
+      <li>
+        <a href="#">Item 1A</a>
+        <ul class="menu">
+          <li><a href="#Item-1Aa">Item 1Aa</a></li>
+          <li><a href="#Item-1Ba">Item 1Ba</a></li>
+        </ul>
+      </li>
+      <li><a href="#Item-1B">Item 1B</a></li>
+      <li><a href="#Item-1C">Item 1C</a></li>
+      <li><a href="#Item-1D">Item 1D</a></li>
+      <li><a href="#Item-1E">Item 1E</a></li>
+    </ul>
+  </li>
+  <li>
+    <a href="#">Item 2</a>
+    <ul class="menu">
+      <li><a href="#Item-2A">Item 2A</a></li>
+      <li><a href="#Item-2B">Item 2B</a></li>
+      <li><a href="#Item-2C">Item 2C</a></li>
+      <li><a href="#Item-2D">Item 2D</a></li>
+      <li><a href="#Item-2E">Item 2E</a></li>
+    </ul>
+  </li>
+  <li>
+    <a href="#">Item 3</a>
+    <ul class="menu">
+      <li><a href="#Item-3A">Item 3A</a></li>
+      <li><a href="#Item-3B">Item 3B</a></li>
+      <li><a href="#Item-3C">Item 3C</a></li>
+      <li><a href="#Item-3D">Item 3D</a></li>
+      <li>
+        <a href="#Item-3E">Item 3E</a>
+        <ul class="menu">
+          <li><a href="#Item-3EA">Item 3EA</a></li>
+          <li><a href="#Item-3EB">Item 3EB</a></li>
+          <li><a href="#Item-3EC">Item 3EC</a></li>
+          <li><a href="#Item-3ED">Item 3ED</a></li>
+          <li><a href="#Item-3EE">Item 3EE</a></li>
+          <li><a href="#Item-3EA">Item 3EA</a></li>
+          <li><a href="#Item-3EB">Item 3EB</a></li>
+          <li><a href="#Item-3EC">Item 3EC</a></li>
+          <li><a href="#Item-3ED">Item 3ED</a></li>
+          <li><a href="#Item-3EE">Item 3EE</a></li>
+          <li><a href="#Item-3EA">Item 3EA</a></li>
+          <li><a href="#Item-3EB">Item 3EB</a></li>
+          <li><a href="#Item-3EC">Item 3EC</a></li>
+          <li><a href="#Item-3ED">Item 3ED</a></li>
+          <li><a href="#Item-3EE">Item 3EE</a></li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+  <li><a href="#Item-4"> Item 4</a></li>
+  <li><a href="#Item-5"> Item 5</a></li>
+  <li><a href="#Item-6"> Item 6</a></li>
+  <li><a href="#Item-7"> Item 7</a></li>
+  <li><a href="#Item-8"> Item 8</a></li>
+</ul>
+
 ---
 
 ## Custom Styling

diff --git a/js/foundation.drilldown.js b/js/foundation.drilldown.js
@@ -90,6 +90,7 @@ class Drilldown {
     });
     if(!this.$element.parent().hasClass('is-drilldown')){
       this.$wrapper = $(this.options.wrapper).addClass('is-drilldown');
+      if(this.options.animateHeight) this.$wrapper.addClass('animate-height');
       this.$wrapper = this.$element.wrap(this.$wrapper).parent().css(this._getMaxDims());
     }
   }
@@ -213,6 +214,7 @@ class Drilldown {
    */
   _hideAll() {
     var $elem = this.$element.find('.is-drilldown-submenu.is-active').addClass('is-closing');
+    if(this.options.autoAdjustHeight) this.$wrapper.css({height:$elem.parent().closest('ul').data('calcHeight')});
     $elem.one(Foundation.transitionend($elem), function(e){
       $elem.removeClass('is-active is-closing');
     });
@@ -264,6 +266,7 @@ class Drilldown {
    * @param {jQuery} $elem - the current element with a submenu to open, i.e. the `li` tag.
    */
   _show($elem) {
+    if(this.options.autoAdjustHeight) this.$wrapper.css({height:$elem.children('[data-submenu]').data('calcHeight')});
     $elem.children('[data-submenu]').addClass('is-active');
     /**
      * Fires when the submenu has opened.
@@ -279,7 +282,7 @@ class Drilldown {
    * @param {jQuery} $elem - the current sub-menu to hide, i.e. the `ul` tag.
    */
   _hide($elem) {
-    var _this = this;
+    if(this.options.autoAdjustHeight) this.$wrapper.css({height:$elem.parent().closest('ul').data('calcHeight')});
     $elem.addClass('is-closing')
          .one(Foundation.transitionend($elem), function(){
            $elem.removeClass('is-active is-closing');
@@ -299,13 +302,18 @@ class Drilldown {
    * @private
    */
   _getMaxDims() {
-    var max = 0, result = {};
+    var max = 0, result = {}, oneHeight = this.$menuItems[0].getBoundingClientRect().height,_this = this;
     this.$submenus.add(this.$element).each(function(){
       var numOfElems = $(this).children('li').length;
       max = numOfElems > max ? numOfElems : max;
+      if(_this.options.autoAdjustHeight) {
+        $(this).data('calcHeight',numOfElems * oneHeight);
+        if (!$(this).hasClass('is-drilldown-submenu')) result['height'] = numOfElems * oneHeight;
+      }
     });
 
-    result['min-height'] = `${max * this.$menuItems[0].getBoundingClientRect().height}px`;
+    if(!this.options.autoAdjustHeight) result['min-height'] = `${max * oneHeight}px`;
+
     result['max-width'] = `${this.$element[0].getBoundingClientRect().width}px`;
 
     return result;

diff --git a/scss/components/_drilldown.scss b/scss/components/_drilldown.scss
@@ -31,6 +31,10 @@ $drilldown-background: $white !default;
     li {
       display: block !important;
     }
+
+    &.animate-height {
+      transition: height 0.5s;
+    }
   }
 
   // Applied to nested <ul>s