/app/scripts/vendor/foundation/jquery.foundation.buttons.js
JavaScript | 74 lines | 53 code | 13 blank | 8 comment | 3 complexity | 7b4debddf16ffad788ccf97f2f8f2604 MD5 | raw file
1;(function ($, window, undefined) {
2 'use strict';
3
4 $.fn.foundationButtons = function (options) {
5 var $doc = $(document),
6 config = $.extend({
7 dropdownAsToggle:true,
8 activeClass:'active'
9 }, options),
10
11 // close all dropdowns except for the dropdown passed
12 closeDropdowns = function (dropdown) {
13 $('.button.dropdown').find('ul').not(dropdown).removeClass('show-dropdown');
14 },
15 // reset all toggle states except for the button passed
16 resetToggles = function (button) {
17 var buttons = $('.button.dropdown').not(button);
18 buttons.add($('> span.' + config.activeClass, buttons)).removeClass(config.activeClass);
19 };
20
21 // Prevent event propagation on disabled buttons
22 $doc.on('click.fndtn', '.button.disabled', function (e) {
23 e.preventDefault();
24 });
25
26 $('.button.dropdown > ul', this).addClass('no-hover');
27
28 // reset other active states
29 $doc.on('click.fndtn', '.button.dropdown:not(.split), .button.dropdown.split span', function (e) {
30 var $el = $(this),
31 button = $el.closest('.button.dropdown'),
32 dropdown = $('> ul', button);
33 e.preventDefault();
34
35 // close other dropdowns
36 closeDropdowns(config.dropdownAsToggle ? dropdown : '');
37 dropdown.toggleClass('show-dropdown');
38
39 if (config.dropdownAsToggle) {
40 resetToggles(button);
41 $el.toggleClass(config.activeClass);
42 }
43 });
44
45 // close all dropdowns and deactivate all buttons
46 $doc.on('click.fndtn', 'body, html', function (e) {
47 // check original target instead of stopping event propagation to play nice with other events
48 if (!$(e.originalEvent.target).is('.button.dropdown:not(.split), .button.dropdown.split span')) {
49 closeDropdowns();
50 if (config.dropdownAsToggle) {
51 resetToggles();
52 }
53 }
54 });
55
56 // Positioning the Flyout List
57 var normalButtonHeight = $('.button.dropdown:not(.large):not(.small):not(.tiny)', this).outerHeight() - 1,
58 largeButtonHeight = $('.button.large.dropdown', this).outerHeight() - 1,
59 smallButtonHeight = $('.button.small.dropdown', this).outerHeight() - 1,
60 tinyButtonHeight = $('.button.tiny.dropdown', this).outerHeight() - 1;
61
62 $('.button.dropdown:not(.large):not(.small):not(.tiny) > ul', this).css('top', normalButtonHeight);
63 $('.button.dropdown.large > ul', this).css('top', largeButtonHeight);
64 $('.button.dropdown.small > ul', this).css('top', smallButtonHeight);
65 $('.button.dropdown.tiny > ul', this).css('top', tinyButtonHeight);
66
67 $('.button.dropdown.up:not(.large):not(.small):not(.tiny) > ul', this).css('top', 'auto').css('bottom', normalButtonHeight - 2);
68 $('.button.dropdown.up.large > ul', this).css('top', 'auto').css('bottom', largeButtonHeight - 2);
69 $('.button.dropdown.up.small > ul', this).css('top', 'auto').css('bottom', smallButtonHeight - 2);
70 $('.button.dropdown.up.tiny > ul', this).css('top', 'auto').css('bottom', tinyButtonHeight - 2);
71
72 };
73
74})( jQuery, this );