adds feature ScrollTop to Drilldown Menu scrollTop scrollTopElement scrollTopOffset...

diff --git a/docs/pages/drilldown-menu.md b/docs/pages/drilldown-menu.md
index 0e223dbbae65036856bee9cd3c5a5765b56db880..55dce7a24ac149eeb0aa93c966d9ac8ff4df5566 100644 (file)
--- a/docs/pages/drilldown-menu.md
+++ b/docs/pages/drilldown-menu.md
@@ -73,6 +73,62 @@ Any `<a>` without a submenu will function like a normal link.
   <li><a href="#Item-4"> Item 4</a></li>
 </ul>
 
+## ScrollTop Drilldown
+
+<div class="callout">Scroll to the top on change the menu - Option scrollTop</div>
+
+<ul class="menu" data-drilldown data-scroll-top="true" style="width: 200px" id="m2">
+  <li><a href="#">Item</a></li>
+  <li><a href="#">Item</a></li>
+  <li><a href="#">Item</a></li>
+  <li><a href="#">Item</a></li>
+  <li><a href="#">Item</a></li>
+  <li><a href="#">Item</a></li>
+  <li><a href="#">Item</a></li>
+  <li><a href="#">Item</a></li>
+  <li><a href="#">Item</a></li>
+  <li><a href="#">Item</a></li>
+  <li> <a href="#">Item</a>
+    <ul class="vertical menu">
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li><a href="#">Item</a></li>
+      <li> <a href="#">Item</a>
+        <ul class="vertical menu">
+          <li><a href="#">Item</a></li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+  <li><a href="#">Item</a></li>
+</ul>
+
 ---
 
 ## Custom Styling

diff --git a/js/foundation.drilldown.js b/js/foundation.drilldown.js
index ca209de50246c0259b544fc636ee34a5a43645a5..8dcf1eb89c892043c9b2d0f7d640de45ea0b392a 100644 (file)
--- a/js/foundation.drilldown.js
+++ b/js/foundation.drilldown.js
@@ -49,6 +49,7 @@ class Drilldown {
     this.$menuItems = this.$element.find('li').not('.js-drilldown-back').attr('role', 'menuitem').find('a');
 
     this._prepareMenu();
+    this._registerEvents();
 
     this._keyboardEvents();
   }
@@ -127,6 +128,36 @@ class Drilldown {
     });
   }
 
+  /**
+   * Adds event handlers to the menu element.
+   * @function
+   * @private
+   */
+  _registerEvents() {
+    if(this.options.scrollTop){
+      this._bindHandler = this._scrollTop.bind(this);
+      this.$element.on('open.zf.drilldown hide.zf.drilldown closed.zf.drilldown',this._bindHandler);
+    }
+  }
+
+  /**
+   * Scroll to Top of Element or data-scroll-top-element
+   * @function
+   * @fires Drilldown#scrollme
+   */
+  _scrollTop() {
+    var _this = this;
+    var $scrollTopElement = _this.options.scrollTopElement!=''?$(_this.options.scrollTopElement):_this.$element,
+        scrollPos = parseInt($scrollTopElement.offset().top+_this.options.scrollTopOffset);
+    $('html, body').stop(true).animate({ scrollTop: scrollPos }, _this.options.animationDuration, _this.options.animationEasing,function(){
+      /**
+        * Fires after the menu has scrolled
+        * @event Drilldown#scrollme
+        */
+      if(this===$('html')[0])_this.$element.trigger('scrollme.zf.drilldown');
+    });
+  }
+
   /**
    * Adds keydown event listener to `li`'s in the menu.
    * @private
@@ -316,6 +347,7 @@ class Drilldown {
    * @function
    */
   destroy() {
+    if(this.options.scrollTop) this.$element.off('.zf.drilldown',this._bindHandler);
     this._hideAll();
     Foundation.Nest.Burn(this.$element, 'drilldown');
     this.$element.unwrap()
@@ -359,7 +391,37 @@ Drilldown.defaults = {
    * @option
    * @example false
    */
-  closeOnClick: false
+  closeOnClick: false,
+  /**
+   * Scroll the menu after open,hide,closed
+   * @option
+   * @example false
+   */
+  scrollTop: false,
+  /**
+   * String jquery selector (for example 'body') of element to take offset().top from, if empty string the drilldown menu offset().top is taken
+   * @option
+   * @example ''
+   */
+  scrollTopElement: '',
+  /**
+   * ScrollTop offset
+   * @option
+   * @example 100
+   */
+  scrollTopOffset: 0,
+  /**
+   * Scroll animation duration
+   * @option
+   * @example 500
+   */
+  animationDuration: 500,
+  /**
+   * Scroll animation easing
+   * @option
+   * @example 'swing'
+   */
+  animationEasing: 'swing'
   // holdOpen: false
 };
 

diff --git a/test/visual/drilldown/drilldown-menu-scroll-top.html b/test/visual/drilldown/drilldown-menu-scroll-top.html
new file mode 100644 (file)
index 0000000..5b12c5d
--- /dev/null
+++ b/test/visual/drilldown/drilldown-menu-scroll-top.html
@@ -0,0 +1,196 @@
+<!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" />
+    <style>
+
+    </style>
+  </head>
+  <body>
+<div class="row column small-12 medium-6">
+  <h4>I scroll to top Position of drilldown element</h4>
+  <div class="callout">
+    <ul class="vertical menu" data-drilldown data-scroll-top="true" data-scroll-top-offset="0" data-scroll-top-element="">
+      <li> <a href="#">Item</a>
+        <ul class="vertical menu">
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li> <a href="#">Item</a>
+            <ul class="vertical menu">
+              <li><a href="#">Item</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li> <a href="#">Item</a>
+            <ul class="vertical menu">
+              <li><a href="#">Item</a></li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li><a href="#">Item</a></li>
+      <li> <a href="#">Item</a>
+        <ul class="vertical menu">
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li> <a href="#">Item</a>
+            <ul class="vertical menu">
+              <li><a href="#">Item</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Item</a></li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+  <h4>I scroll to top Position of drilldown element with a -30px offset also have a close on click</h4>
+  <div class="callout">
+    <ul class="vertical menu" data-drilldown data-scroll-top="true" data-scroll-top-offset="-30" data-scroll-top-element="" data-close-on-click="true">
+      <li> <a href="#">Item</a>
+        <ul class="vertical menu">
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li> <a href="#">Item</a>
+            <ul class="vertical menu">
+              <li><a href="#">Item</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li> <a href="#">Item</a>
+            <ul class="vertical menu">
+              <li><a href="#">Item</a></li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li><a href="#">Item</a></li>
+      <li> <a href="#">Item</a>
+        <ul class="vertical menu">
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li> <a href="#">Item</a>
+            <ul class="vertical menu">
+              <li><a href="#">Item</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Item</a></li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+  <h4>I am responsive and scroll to top Position of drilldown element with a -30px offset</h4>
+  <div class="callout">
+    <ul id="mainMenuLeft" class="drilldown menu" data-responsive-menu="drilldown medium-dropdown" data-scroll-top="true" data-scroll-top-offset="-30">
+      <li> <a href="#">Item</a>
+        <ul class="vertical menu">
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li> <a href="#">Item</a>
+            <ul class="vertical menu">
+              <li><a href="#">Item</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li> <a href="#">Item</a>
+            <ul class="vertical menu">
+              <li><a href="#">Item</a></li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li><a href="#">Item</a></li>
+      <li> <a href="#">Item</a>
+        <ul class="vertical menu">
+          <li><a href="#">Item</a></li>
+          <li><a href="#">Item</a></li>
+          <li> <a href="#">Item</a>
+            <ul class="vertical menu">
+              <li><a href="#">Item</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Item</a></li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</div>
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>