adds disable mouse outline to ddmenu, adds keyboard handler to ddmenu, improves util...

diff --git a/js/foundation.ddmenu.js b/js/foundation.ddmenu.js
index 07bdb0fe4029b1c506364405170e6b7e3e354a0d..076a1bae71c4187008e704ac7b4eff6e0bc131a6 100644 (file)
--- a/js/foundation.ddmenu.js
+++ b/js/foundation.ddmenu.js
@@ -64,7 +64,7 @@
 
         var $elem = $(e.target).parentsUntil('ul', '.' + parClass),
             hasSub = $elem.hasClass(parClass),
-            isOpen = $elem.attr('aria-expanded') === 'true',
+            // isOpen = $elem.attr('aria-expanded') === 'true',
             hasClicked = $elem.attr('data-is-click') === 'true',
             $sub = $elem.children('.is-dropdown-submenu');
             console.log('1-click', $elem, $elem.attr('aria-expanded'));
@@ -111,77 +111,169 @@
           clearTimeout(delay);
           delay = setTimeout(function(){
             console.log('7-closing anyway...');
-            _this._hide();
+            _this._hide($elem);
           }, _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');
-          }
-        };
+    this.$menuItems.on('keydown.zf.dropdownmenu', function(e){
+      var $element = $(e.target).parentsUntil('ul', '[role="menuitem"]'),
+          isTab = _this.$tabs.index($element) > -1,
+          $elements = isTab ? _this.$tabs : $element.siblings('li').add($element),
+          $prevElement,
+          $nextElement;
+          console.log(isTab);
+      $elements.each(function(i) {
+        if ($(this).is($element)) {
+          $prevElement = $elements.eq(i-1);
+          $nextElement = $elements.eq(i+1);
+          return;
+        }
+      });
 
-      // console.log(evt.type);
-      funcs[evt.type]();
-    // if(hasSub){
-    //   evt.preventDefault();
-    //   _this._show($elem.children('.is-dropdown-submenu'));
-    // }
+      var nextSibling = function() {
+        console.log('should focus next sibling', $nextElement);
+        if (!$element.is(':last-child')) $nextElement.children('a:first').focus();
+      }, prevSibling = function() {
+        console.log('should focus prev sibling', $prevElement.children('a'));
+        $prevElement.children('a:first').focus();
+      }, openSub = function() {
+        var $sub = $element.children('ul.is-dropdown-submenu');
+          console.log('should show');
+        if($sub.length){
+          _this._show($sub);
+          $element.find('li > a:first').focus();
+        }else{ return; }
+      }, closeSub = function() {
+        //if ($element.is(':first-child')) {
+        var close = $element.parent('ul').parent('li');
+        console.log('should close a submenu',$element, close);
+          close.children('a:first').focus();
+          _this._hide(close);
+        //}
+      };
+      var functions = {
+        open: openSub,
+        close: function() {
+          _this._hide(_this.$element);
+          _this.$menuItems.find('a:first').focus(); // focus to first element
+        },
+        handled: function() {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+        }
+      };
+
+      if (isTab) {
+        if (_this.vertical) { // vertical menu
+          if (_this.options.alignment === 'left') { // left aligned
+            $.extend(functions, {
+              down: nextSibling,
+              up: prevSibling,
+              next: openSub,
+              previous: closeSub,
+            });
+          } else { // right aligned
+            $.extend(functions, {
+              down: nextSibling,
+              up: prevSibling,
+              next: closeSub,
+              previous: openSub,
+            });
+          }
+        } else { // horizontal menu
+          $.extend(functions, {
+            next: nextSibling,
+            previous: prevSibling,
+            down: openSub,
+            up: closeSub,
+          });
+        }
+      } else { // not tabs -> one sub
+        if (_this.options.alignment === 'left') { // left aligned
+          $.extend(functions, {
+            next: openSub,
+            previous: closeSub,
+            down: nextSibling,
+            up: prevSibling
+          });
+        } else { // right aligned
+          $.extend(functions, {
+            next: closeSub,
+            previous: openSub,
+            down: nextSibling,
+            up: prevSibling
+          });
+        }
+      }
+      Foundation.Keyboard.handleKey(e, _this, functions);
 
+    });
   };
   DropdownMenu.prototype._show = function($sub){
     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');
-
+    console.log($sibs, $sibs.length);
     this._hide($sibs, idx);
     $sub.addClass('js-dropdown-active').attr({'aria-hidden': false})
         .parent('li.is-dropdown-submenu-parent').addClass('is-active')
-        .attr({'aria-selected': true, 'aria-expanded': true})//.data('isActive', true);
+        .attr({'aria-selected': true, 'aria-expanded': true});
 
   };
-  DropdownMenu.prototype._hide = function($sibs, idx, $elem){
+  DropdownMenu.prototype._hide = function($elem, idx){
     var $toClose;
-    if($sibs && $sibs.length){
-      $toClose = $sibs;
+    if($elem && $elem.length){
+      $toClose = $elem;
     }else if(idx !== undefined){
       $toClose = this.$tabs.not(function(i, el){
         return i === idx;
       });
-    }else if($elem && $elem.length){
-      $toClose = $elem;
     }
     else{
       $toClose = this.$element;
     }
-    if($toClose.length){
-    // console.log('toclose');
-      $toClose.find('.is-active').add($toClose).data('isClick', false).attr({
+    var somethingToClose = $toClose.hasClass('is-active') || $toClose.find('.is-active').length > 0;
+    console.log('toclose', somethingToClose);
+    if(somethingToClose){
+      $toClose.find('li.is-active').add($toClose).attr({
         'aria-selected': false,
         'aria-expanded': false,
         'data-is-click': false
-      }).removeClass('is-active')
-      // .end()
+      }).removeClass('is-active');
+
       // console.log('close',$toClose.data());
 
-      $toClose.find('.js-dropdown-active').attr({
+      $toClose.find('ul.js-dropdown-active').attr({
         'aria-hidden': true
       }).removeClass('js-dropdown-active');
     }
   };
+  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'));
+    // }
+
+  };
 
   Foundation.plugin(DropdownMenu, 'DropdownMenu');
 }(jQuery, window.Foundation);

diff --git a/js/foundation.util.nest.js b/js/foundation.util.nest.js
index 06ecb396f27ee6de897b8364f6458ff07f0e0d19..5bd855be8a3ef3d5985aab00590d6e369e274463 100644 (file)
--- a/js/foundation.util.nest.js
+++ b/js/foundation.util.nest.js
@@ -8,7 +8,7 @@
           subMenuClass = 'is-' + type + '-submenu',
           subItemClass = subMenuClass + '-item',
           hasSubClass = 'is-' + type + '-submenu-parent';
-
+      menu.find('a:first').attr('tabindex', 0);
       items.each(function(){
         var $item = $(this),
             $sub = $item.children('ul');

diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
index 475a569abc751c09bbea6e8131ecc38bc88314ba..dcaf1e6a1c6a5a1b0f361f1ab02168aa61014fb9 100644 (file)
--- a/scss/components/_dropdown-menu.scss
+++ b/scss/components/_dropdown-menu.scss
@@ -24,6 +24,9 @@ $dropdown-border: 1px solid $medium-gray !default;
 
 @mixin foundation-dropdown-menu {
   .dropdown.menu {
+    a {
+      @include disable-mouse-outline;
+    }
     .is-dropdown-submenu-parent {
       position: relative;