First commut

theme/js/foundation/foundation.dropdown.js

@@ -0,0 +1,184 @@
+;(function ($, window, document, undefined) {
+  'use strict';
+
+  Foundation.libs.dropdown = {
+    name : 'dropdown',
+
+    version : '5.0.0',
+
+    settings : {
+      active_class: 'open',
+      is_hover: false,
+      opened: function(){},
+      closed: function(){}
+    },
+
+    init : function (scope, method, options) {
+      Foundation.inherit(this, 'throttle');
+
+      this.bindings(method, options);
+    },
+
+    events : function (scope) {
+      var self = this;
+
+      $(this.scope)
+        .off('.dropdown')
+        .on('click.fndtn.dropdown', '[data-dropdown]', function (e) {
+          var settings = $(this).data('dropdown-init');
+          e.preventDefault();
+
+          if (!settings.is_hover || Modernizr.touch) self.toggle($(this));
+        })
+        .on('mouseenter.fndtn.dropdown', '[data-dropdown], [data-dropdown-content]', function (e) {
+          var $this = $(this);
+          clearTimeout(self.timeout);
+
+          if ($this.data('dropdown')) {
+            var dropdown = $('#' + $this.data('dropdown')),
+                target = $this;
+          } else {
+            var dropdown = $this;
+                target = $("[data-dropdown='" + dropdown.attr('id') + "']");
+          }
+
+          var settings = target.data('dropdown-init');
+          if (settings.is_hover) self.open.apply(self, [dropdown, target]);
+        })
+        .on('mouseleave.fndtn.dropdown', '[data-dropdown], [data-dropdown-content]', function (e) {
+          var $this = $(this);
+          self.timeout = setTimeout(function () {
+            if ($this.data('dropdown')) {
+              var settings = $this.data('dropdown-init');
+              if (settings.is_hover) self.close.call(self, $('#' + $this.data('dropdown')));
+            } else {
+              var target = $('[data-dropdown="' + $(this).attr('id') + '"]'),
+                  settings = target.data('dropdown-init');
+              if (settings.is_hover) self.close.call(self, $this);
+            }
+          }.bind(this), 150);
+        })
+        .on('click.fndtn.dropdown', function (e) {
+          var parent = $(e.target).closest('[data-dropdown-content]');
+
+          if ($(e.target).data('dropdown') || $(e.target).parent().data('dropdown')) {
+            return;
+          }
+          if (!($(e.target).data('revealId')) && 
+            (parent.length > 0 && ($(e.target).is('[data-dropdown-content]') || 
+              $.contains(parent.first()[0], e.target)))) {
+            e.stopPropagation();
+            return;
+          }
+
+          self.close.call(self, $('[data-dropdown-content]'));
+        })
+        .on('opened.fndtn.dropdown', '[data-dropdown-content]', this.settings.opened)
+        .on('closed.fndtn.dropdown', '[data-dropdown-content]', this.settings.closed);
+
+      $(window)
+        .off('.dropdown')
+        .on('resize.fndtn.dropdown', self.throttle(function () {
+          self.resize.call(self);
+        }, 50)).trigger('resize');
+    },
+
+    close: function (dropdown) {
+      var self = this;
+      dropdown.each(function () {
+        if ($(this).hasClass(self.settings.active_class)) {
+          $(this)
+            .css(Foundation.rtl ? 'right':'left', '-99999px')
+            .removeClass(self.settings.active_class);
+          $(this).trigger('closed');
+        }
+      });
+    },
+
+    open: function (dropdown, target) {
+        this
+          .css(dropdown
+            .addClass(this.settings.active_class), target);
+        dropdown.trigger('opened');
+    },
+
+    toggle : function (target) {
+      var dropdown = $('#' + target.data('dropdown'));
+      if (dropdown.length === 0) {
+        // No dropdown found, not continuing
+        return;
+      }
+
+      this.close.call(this, $('[data-dropdown-content]').not(dropdown));
+
+      if (dropdown.hasClass(this.settings.active_class)) {
+        this.close.call(this, dropdown);
+      } else {
+        this.close.call(this, $('[data-dropdown-content]'))
+        this.open.call(this, dropdown, target);
+      }
+    },
+
+    resize : function () {
+      var dropdown = $('[data-dropdown-content].open'),
+          target = $("[data-dropdown='" + dropdown.attr('id') + "']");
+
+      if (dropdown.length && target.length) {
+        this.css(dropdown, target);
+      }
+    },
+
+    css : function (dropdown, target) {
+      var offset_parent = dropdown.offsetParent(),
+          position = target.offset();
+
+      position.top -= offset_parent.offset().top;
+      position.left -= offset_parent.offset().left;
+
+      if (this.small()) {
+        dropdown.css({
+          position : 'absolute',
+          width: '95%',
+          'max-width': 'none',
+          top: position.top + target.outerHeight()
+        });
+        dropdown.css(Foundation.rtl ? 'right':'left', '2.5%');
+      } else {
+        if (!Foundation.rtl && $(window).width() > dropdown.outerWidth() + target.offset().left) {
+          var left = position.left;
+          if (dropdown.hasClass('right')) {
+            dropdown.removeClass('right');
+          }
+        } else {
+          if (!dropdown.hasClass('right')) {
+            dropdown.addClass('right');
+          }
+          var left = position.left - (dropdown.outerWidth() - target.outerWidth());
+        }
+
+        dropdown.attr('style', '').css({
+          position : 'absolute',
+          top: position.top + target.outerHeight(),
+          left: left
+        });
+      }
+
+      return dropdown;
+    },
+
+    small : function () {
+      return matchMedia(Foundation.media_queries.small).matches &&
+        !matchMedia(Foundation.media_queries.medium).matches;
+    },
+
+    off: function () {
+      $(this.scope).off('.fndtn.dropdown');
+      $('html, body').off('.fndtn.dropdown');
+      $(window).off('.fndtn.dropdown');
+      $('[data-dropdown-content]').off('.fndtn.dropdown');
+      this.settings.init = false;
+    },
+
+    reflow : function () {}
+  };
+}(jQuery, this, this.document));