skeleton for improved ddmenu

diff --git a/js/foundation.ddmenu.js b/js/foundation.ddmenu.js
new file mode 100644 (file)
index 0000000..b06304f
--- /dev/null
+++ b/js/foundation.ddmenu.js
@@ -0,0 +1,87 @@
+!function($, Foundation){
+  'use strict';
+
+  function DropdownMenu(element, options){
+    this.$element = element;
+    this.options = $.extend({}, DropdownMenu.defaults, this.$element.data(), options);
+
+    Foundation.Nest.Feather(this.$element, 'dropdown');
+    this._init();
+
+    Foundation.registerPlugin(this);
+    Foundation.Keyboard.register('DropdownMenu', {
+      'ENTER': 'open',
+      'SPACE': 'open',
+      'ARROW_RIGHT': 'next',
+      'ARROW_UP': 'up',
+      'ARROW_DOWN': 'down',
+      'ARROW_LEFT': 'previous',
+      'ESCAPE': 'close'
+    });
+  }
+
+  DropdownMenu.defaults = {
+    disableHover: false,
+    autoclose: true,
+    hoverDelay: 50,
+    closingTime: 500,
+    alignment: 'left',
+    closeOnClick: false,
+    verticalClass: 'vertical',
+    rightClass: 'align-right'
+  };
+
+  DropdownMenu.prototype._init = function(){
+    var subs = this.$element.find('li.is-dropdown-submenu-parent');
+    this.$element.children('.is-dropdown-submenu-parent').children('.is-dropdown-submenu').addClass('first-sub');
+
+    this.$menuItems = this.$element.find('[role="menuitem"]');
+    this.$tabs = this.$element.children('[role="menuitem"]');
+    this.isVert = this.$element.hasClass(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){
+      this.$tabs.removeClass('is-right-arrow is-left-arrow opens-right opens-left')
+          .addClass('is-down-arrow');
+    }
+    this._events();
+  };
+  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);
+
+      if(hasSub){
+        e.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));
+
+    this._hide(idx);
+    $sub.addClass('js-dropdown-active')
+        .parent('li.is-dropdown-submenu-parent').addClass('is-active');
+
+  };
+  DropdownMenu.prototype._hide = function(idx){
+
+  };
+  Foundation.plugin(DropdownMenu, 'DropdownMenu');
+}(jQuery, window.Foundation);

diff --git a/js/foundation.dropdownMenu.js b/js/foundation.dropdownMenu.js
index 3c1963e3db67ced4347acc5ca85fc5461bb3bb3a..e084a8218527632b1aa592cffba92ab800e96ae9 100644 (file)
--- a/js/foundation.dropdownMenu.js
+++ b/js/foundation.dropdownMenu.js
@@ -462,7 +462,7 @@
     Foundation.unregisterPlugin(this);
   };
 
-  Foundation.plugin(DropdownMenu, 'DropdownMenu');
+  // Foundation.plugin(DropdownMenu, 'DropdownMenu');
 
   var checkClass = function($elem){
     return $elem.hasClass('is-active');

diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
index 10dd040b60db492d4f29f0d7071fcbc5196c54f5..475a569abc751c09bbea6e8131ecc38bc88314ba 100644 (file)
--- a/scss/components/_dropdown-menu.scss
+++ b/scss/components/_dropdown-menu.scss
@@ -24,7 +24,7 @@ $dropdown-border: 1px solid $medium-gray !default;
 
 @mixin foundation-dropdown-menu {
   .dropdown.menu {
-    .has-submenu {
+    .is-dropdown-submenu-parent {
       position: relative;
 
       a::after {
@@ -88,13 +88,13 @@ $dropdown-border: 1px solid $medium-gray !default;
         right: auto;
       }
 
-      &:not(.js-dropdown-nohover) > .has-submenu:hover > &,
+      &:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &,
       &.js-dropdown-active {
         display: block;
       }
     }
 
-    .has-submenu.opens-left .submenu {
+    .is-dropdown-submenu-parent.opens-left .submenu {
       left: auto;
       right: 100%;
     }