adds improved methods for Foundation.Nest.Feather, new version of DropdownMenu coming...

diff --git a/js/foundation.ddmenu.js b/js/foundation.ddmenu.js
index b06304fb55893c48ad47c7779049e17cee207316..4dd78abe69061555fdf69b6c9ee5b930c54ccd90 100644 (file)
--- a/js/foundation.ddmenu.js
+++ b/js/foundation.ddmenu.js
@@ -38,14 +38,12 @@
     this.$menuItems = this.$element.find('[role="menuitem"]');
     this.$tabs = this.$element.children('[role="menuitem"]');
     this.isVert = this.$element.hasClass(this.options.verticalClass);
+    this.$tabs.find('ul.is-dropdown-submenu').addClass(this.options.verticalClass);
 
-    // console.log(this.$menuItems);
     if(this.$element.hasClass(this.options.rightClass) || this.options.alignment === 'right'){
-
       this.options.alignment = 'right';
       subs.addClass('is-left-arrow opens-left');
     }else{
-      console.log('left');
       subs.addClass('is-right-arrow opens-right');
     }
     if(!this.isVert){
@@ -57,31 +55,111 @@
   DropdownMenu.prototype._events = function(){
     var _this = this,
         hasTouch = window.ontouchstart !== undefined,
-        parClass = 'is-dropdown-submenu-parent';
-    this.$menuItems.on('click.zf.dropdownmenu', function(e){
-      console.log('click');
-      var $elem = $(this),
-          hasSub = $elem.hasClass(parClass);
+        parClass = 'is-dropdown-submenu-parent',
+        delay;
+    if(this.options.clickOpen || hasTouch){
+      this.$menuItems.on('click.zf.dropdownmenu', function(e){
+        // _this._handleEvent(e, this);
+        var $elem = $(this),
+            hasSub = $elem.hasClass(parClass),
+            hasClicked = $elem.data('isClick'),
+            $sub = $elem.children('.is-dropdown-submenu');
 
-      if(hasSub){
-        e.preventDefault();
-        _this._show($elem.children('.is-dropdown-submenu'));
-      }
+        if(hasSub){
+          if(hasClicked){
+            if(hasTouch) return;
+            else _this._hide($sub);
+          }else{
+            e.preventDefault();
+            _this._show($elem.children('.is-dropdown-submenu'));
+          }
+        }
+        $elem.data('isClick', true);
+      });
+    }
+    if(!this.options.disableHover){
+      this.$menuItems.on('mouseenter.zf.dropdownmenu', function(e){
+        // _this._handleEvent(e, this);
+        var $elem = $(this),
+            hasSub = $elem.hasClass(parClass);
+
+        if(hasSub){
+          clearTimeout(delay);
+          delay = setTimeout(function(){
+            _this._show($elem.children('.is-dropdown-submenu'));
+          }, _this.options.hoverDelay);
+        }
+      }).on('mouseleave.zf.dropdownmenu', function(e){
+        var $elem = $(this),
+            hasSub = $elem.hasClass(parClass);
+        if(hasSub && _this.options.autoclose){
+          if($elem.data('isClick') && _this.options.clickOpen) return;
+          clearTimeout(delay);
+          delay = setTimeout(function(){
+            _this._hide();
+          }, _this.options.closingTime);
+        }
+      });
+    }
+  };
+  DropdownMenu.prototype._handleEvent = function(evt, elem){
+    var $elem = $(elem),
+        _this = this,
+        hasSub = $elem.hasClass('is-dropdown-submenu-parent'),
+        funcs = {
+          'click': function(){
+            console.log('click');
+            if(hasSub) evt.preventDefault();
+            if($elem.data('isClick')) _this._hide($elem);
+            else _this._show($elem.children('.is-dropdown-submenu'));
+          },
+          'mouseenter': function(){
+            // console.log('mouseenter');
+          }
+        };
+
+      // console.log(evt.type);
+      funcs[evt.type]();
+    // if(hasSub){
+    //   evt.preventDefault();
+    //   _this._show($elem.children('.is-dropdown-submenu'));
+    // }
 
-    }).on('mouseenter.zf.dropdownmenu', function(e){
-      console.log('hover');
-    });
   };
   DropdownMenu.prototype._show = function($sub){
-    var idx = this.$tabs.index($sub.parentsUntil(this.$element));
+    var idx = this.$tabs.index(this.$tabs.filter(function(i, el){
+      return $(el).find($sub).length > 0;
+    }));
+    var $sibs = $sub.parent('li.is-dropdown-submenu-parent').siblings('li.is-dropdown-submenu-parent');
 
-    this._hide(idx);
+    this._hide($sibs, idx);
     $sub.addClass('js-dropdown-active')
-        .parent('li.is-dropdown-submenu-parent').addClass('is-active');
+        .parent('li.is-dropdown-submenu-parent').addClass('is-active').data('isActive', true);
 
   };
-  DropdownMenu.prototype._hide = function(idx){
+  DropdownMenu.prototype._hide = function($sibs, idx, $elem){
+    var $toClose;
+    if($sibs && $sibs.length){
+      $toClose = $sibs;
+    }else if(idx !== undefined){
+      $toClose = this.$tabs.not(function(i, el){
+        return i === idx;
+      });
+    }else{
+      $toClose = this.$element;
+    }
 
+    if($toClose.length){
+      $toClose.find('.is-active').attr({
+        'aria-selected': false,
+        'aria-expanded': false
+      }).data('isClick', false).removeClass('is-active')
+      .end()
+      .find('.js-dropdown-active').attr({
+        'aria-hidden': true
+      }).removeClass('js-dropdown-active');
+    }
   };
+
   Foundation.plugin(DropdownMenu, 'DropdownMenu');
 }(jQuery, window.Foundation);

diff --git a/js/foundation.util.nest.js b/js/foundation.util.nest.js
index ad9ddfed054b96a6c8a3eda9a9b35df106d2b9b1..06ecb396f27ee6de897b8364f6458ff07f0e0d19 100644 (file)
--- a/js/foundation.util.nest.js
+++ b/js/foundation.util.nest.js
@@ -13,8 +13,19 @@
         var $item = $(this),
             $sub = $item.children('ul');
         if($sub.length){
-          $item.addClass('has-submenu ' + hasSubClass);
-          $sub.addClass('submenu ' + subMenuClass).attr('data-submenu', '');
+          $item.addClass('has-submenu ' + hasSubClass)
+               .attr({
+                 'aria-haspopup': true,
+                 'aria-selected': false,
+                 'aria-expanded': false,
+                 'aria-label': $item.children('a:first').text()
+               });
+          $sub.addClass('submenu ' + subMenuClass)
+              .attr({
+                'data-submenu': '',
+                'aria-hidden': true,
+                'role': 'menu'
+              });
         }
         if($item.parent('[data-submenu]').length){
           $item.addClass('is-submenu-item ' + subItemClass);