You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
202 lines
6.2 KiB
202 lines
6.2 KiB
;(function ($, window, document, undefined) {
|
|
'use strict';
|
|
|
|
Foundation.libs.dropdown = {
|
|
name : 'dropdown',
|
|
|
|
version : '5.0.3',
|
|
|
|
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') || self.settings;
|
|
e.preventDefault();
|
|
|
|
self.closeall.call(self);
|
|
|
|
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') || self.settings;
|
|
|
|
if($(e.target).data('dropdown') && settings.is_hover) {
|
|
self.closeall.call(self);
|
|
}
|
|
|
|
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') || self.settings;
|
|
if (settings.is_hover) self.close.call(self, $('#' + $this.data('dropdown')));
|
|
} else {
|
|
var target = $('[data-dropdown="' + $(this).attr('id') + '"]'),
|
|
settings = target.data('dropdown-init') || self.settings;
|
|
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]', function () {
|
|
self.settings.opened.call(this);
|
|
})
|
|
.on('closed.fndtn.dropdown', '[data-dropdown-content]', function () {
|
|
self.settings.closed.call(this);
|
|
});
|
|
|
|
$(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');
|
|
}
|
|
});
|
|
},
|
|
|
|
closeall: function() {
|
|
var self = this;
|
|
$.each($('[data-dropdown-content]'), function() {
|
|
self.close.call(self, $(this))
|
|
});
|
|
},
|
|
|
|
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));
|
|
|