diff options
Diffstat (limited to 'foundation-default-colours/static/js/foundation/foundation.dropdown.js')
| -rw-r--r-- | foundation-default-colours/static/js/foundation/foundation.dropdown.js | 184 |
1 files changed, 184 insertions, 0 deletions
diff --git a/foundation-default-colours/static/js/foundation/foundation.dropdown.js b/foundation-default-colours/static/js/foundation/foundation.dropdown.js new file mode 100644 index 0000000..622db93 --- /dev/null +++ b/foundation-default-colours/static/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)); |