80 lines
3.2 KiB
JavaScript
80 lines
3.2 KiB
JavaScript
;(function ($, window, undefined) {
|
|
'use strict';
|
|
|
|
$.fn.foundationButtons = function (options) {
|
|
var $doc = $(document),
|
|
config = $.extend({
|
|
dropdownAsToggle:true,
|
|
activeClass:'active'
|
|
}, options),
|
|
|
|
// close all dropdowns except for the dropdown passed
|
|
closeDropdowns = function (dropdown) {
|
|
$('.button.dropdown').find('ul').not(dropdown).removeClass('show-dropdown');
|
|
},
|
|
// reset all toggle states except for the button passed
|
|
resetToggles = function (button) {
|
|
var buttons = $('.button.dropdown').not(button);
|
|
buttons.add($('> span.' + config.activeClass, buttons)).removeClass(config.activeClass);
|
|
};
|
|
|
|
// Prevent event propagation on disabled buttons
|
|
$doc.on('click.fndtn', '.button.disabled', function (e) {
|
|
e.preventDefault();
|
|
});
|
|
|
|
$('.button.dropdown > ul', this).addClass('no-hover');
|
|
|
|
// reset other active states
|
|
$doc.on('click.fndtn', '.button.dropdown:not(.split), .button.dropdown.split span', function (e) {
|
|
var $el = $(this),
|
|
button = $el.closest('.button.dropdown'),
|
|
dropdown = $('> ul', button);
|
|
|
|
// If the click is registered on an actual link then do not preventDefault which stops the browser from following the link
|
|
if (e.target.nodeName !== "A"){
|
|
e.preventDefault();
|
|
}
|
|
|
|
// close other dropdowns
|
|
closeDropdowns(config.dropdownAsToggle ? dropdown : '');
|
|
dropdown.toggleClass('show-dropdown');
|
|
|
|
if (config.dropdownAsToggle) {
|
|
resetToggles(button);
|
|
$el.toggleClass(config.activeClass);
|
|
}
|
|
});
|
|
|
|
// close all dropdowns and deactivate all buttons
|
|
$doc.on('click.fndtn', 'body, html', function (e) {
|
|
if (undefined == e.originalEvent) { return; }
|
|
// check original target instead of stopping event propagation to play nice with other events
|
|
if (!$(e.originalEvent.target).is('.button.dropdown:not(.split), .button.dropdown.split span')) {
|
|
closeDropdowns();
|
|
if (config.dropdownAsToggle) {
|
|
resetToggles();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Positioning the Flyout List
|
|
var normalButtonHeight = $('.button.dropdown:not(.large):not(.small):not(.tiny)', this).outerHeight() - 1,
|
|
largeButtonHeight = $('.button.large.dropdown', this).outerHeight() - 1,
|
|
smallButtonHeight = $('.button.small.dropdown', this).outerHeight() - 1,
|
|
tinyButtonHeight = $('.button.tiny.dropdown', this).outerHeight() - 1;
|
|
|
|
$('.button.dropdown:not(.large):not(.small):not(.tiny) > ul', this).css('top', normalButtonHeight);
|
|
$('.button.dropdown.large > ul', this).css('top', largeButtonHeight);
|
|
$('.button.dropdown.small > ul', this).css('top', smallButtonHeight);
|
|
$('.button.dropdown.tiny > ul', this).css('top', tinyButtonHeight);
|
|
|
|
$('.button.dropdown.up:not(.large):not(.small):not(.tiny) > ul', this).css('top', 'auto').css('bottom', normalButtonHeight - 2);
|
|
$('.button.dropdown.up.large > ul', this).css('top', 'auto').css('bottom', largeButtonHeight - 2);
|
|
$('.button.dropdown.up.small > ul', this).css('top', 'auto').css('bottom', smallButtonHeight - 2);
|
|
$('.button.dropdown.up.tiny > ul', this).css('top', 'auto').css('bottom', tinyButtonHeight - 2);
|
|
|
|
};
|
|
|
|
})( jQuery, this );
|