/
foundation.dropdown.js
130 lines (106 loc) · 3.42 KB
/
foundation.dropdown.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/*jslint unparam: true, browser: true, indent: 2 */
;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.dropdown = {
name : 'dropdown',
version : '4.0.9',
settings : {
activeClass: 'open'
},
init : function (scope, method, options) {
this.scope = scope || this.scope;
Foundation.inherit(this, 'throttle');
if (typeof method === 'object') {
$.extend(true, this.settings, method);
}
if (typeof method != 'string') {
if (!this.settings.init) {
this.events();
}
return this.settings.init;
} else {
return this[method].call(this, options);
}
},
events : function () {
var self = this;
$(this.scope).on('click.fndtn.dropdown', '[data-dropdown]', function (e) {
e.preventDefault();
e.stopPropagation();
self.toggle($(this));
});
$('*, html, body').on('click.fndtn.dropdown', function (e) {
if (!$(e.target).data('dropdown')) {
$('[data-dropdown-content]')
.css('left', '-99999px')
.removeClass(self.settings.activeClass);
}
});
$(window).on('resize.fndtn.dropdown', self.throttle(function () {
self.resize.call(self);
}, 50)).trigger('resize');
this.settings.init = true;
},
toggle : function (target, resize) {
var dropdown = $('#' + target.data('dropdown'));
$('[data-dropdown-content]').not(dropdown).css('left', '-99999px').removeClass(this.settings.activeClass);
if (dropdown.hasClass(this.settings.activeClass)) {
dropdown
.css('left', '-99999px')
.removeClass(this.settings.activeClass);
} else {
this
.css(dropdown
.addClass(this.settings.activeClass), 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) {
if (dropdown.parent()[0] === $('body')[0]) {
var position = target.offset();
} else {
var position = target.position();
}
if (this.small()) {
dropdown.css({
position : 'absolute',
width: '95%',
left: '2.5%',
'max-width': 'none',
top: position.top + this.outerHeight(target)
});
} else {
if ($(window).width() > this.outerWidth(dropdown) + target.offset().left) {
var left = position.left;
} else {
if (!dropdown.hasClass('right')) {
dropdown.addClass('right');
}
var left = position.left - (this.outerWidth(dropdown) - this.outerWidth(target));
}
dropdown.attr('style', '').css({
position : 'absolute',
top: position.top + this.outerHeight(target),
left: left
});
}
return dropdown;
},
small : function () {
return $(window).width() < 768 || $('html').hasClass('lt-ie9');
},
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;
}
};
}(Foundation.zj, this, this.document));