|
442
|
1 |
;(function ($, window, document, undefined) { |
|
|
2 |
'use strict'; |
|
|
3 |
|
|
|
4 |
Foundation.libs.dropdown = { |
|
|
5 |
name : 'dropdown', |
|
|
6 |
|
|
|
7 |
version : '5.5.2', |
|
|
8 |
|
|
|
9 |
settings : { |
|
|
10 |
active_class : 'open', |
|
|
11 |
disabled_class : 'disabled', |
|
|
12 |
mega_class : 'mega', |
|
|
13 |
align : 'bottom', |
|
|
14 |
is_hover : false, |
|
|
15 |
hover_timeout : 150, |
|
|
16 |
opened : function () {}, |
|
|
17 |
closed : function () {} |
|
|
18 |
}, |
|
|
19 |
|
|
|
20 |
init : function (scope, method, options) { |
|
|
21 |
Foundation.inherit(this, 'throttle'); |
|
|
22 |
|
|
|
23 |
$.extend(true, this.settings, method, options); |
|
|
24 |
this.bindings(method, options); |
|
|
25 |
}, |
|
|
26 |
|
|
|
27 |
events : function (scope) { |
|
|
28 |
var self = this, |
|
|
29 |
S = self.S; |
|
|
30 |
|
|
|
31 |
S(this.scope) |
|
|
32 |
.off('.dropdown') |
|
|
33 |
.on('click.fndtn.dropdown', '[' + this.attr_name() + ']', function (e) { |
|
|
34 |
var settings = S(this).data(self.attr_name(true) + '-init') || self.settings; |
|
|
35 |
if (!settings.is_hover || Modernizr.touch) { |
|
|
36 |
e.preventDefault(); |
|
|
37 |
if (S(this).parent('[data-reveal-id]').length) { |
|
|
38 |
e.stopPropagation(); |
|
|
39 |
} |
|
|
40 |
self.toggle($(this)); |
|
|
41 |
} |
|
|
42 |
}) |
|
|
43 |
.on('mouseenter.fndtn.dropdown', '[' + this.attr_name() + '], [' + this.attr_name() + '-content]', function (e) { |
|
|
44 |
var $this = S(this), |
|
|
45 |
dropdown, |
|
|
46 |
target; |
|
|
47 |
|
|
|
48 |
clearTimeout(self.timeout); |
|
|
49 |
|
|
|
50 |
if ($this.data(self.data_attr())) { |
|
|
51 |
dropdown = S('#' + $this.data(self.data_attr())); |
|
|
52 |
target = $this; |
|
|
53 |
} else { |
|
|
54 |
dropdown = $this; |
|
|
55 |
target = S('[' + self.attr_name() + '="' + dropdown.attr('id') + '"]'); |
|
|
56 |
} |
|
|
57 |
|
|
|
58 |
var settings = target.data(self.attr_name(true) + '-init') || self.settings; |
|
|
59 |
|
|
|
60 |
if (S(e.currentTarget).data(self.data_attr()) && settings.is_hover) { |
|
|
61 |
self.closeall.call(self); |
|
|
62 |
} |
|
|
63 |
|
|
|
64 |
if (settings.is_hover) { |
|
|
65 |
self.open.apply(self, [dropdown, target]); |
|
|
66 |
} |
|
|
67 |
}) |
|
|
68 |
.on('mouseleave.fndtn.dropdown', '[' + this.attr_name() + '], [' + this.attr_name() + '-content]', function (e) { |
|
|
69 |
var $this = S(this); |
|
|
70 |
var settings; |
|
|
71 |
|
|
|
72 |
if ($this.data(self.data_attr())) { |
|
|
73 |
settings = $this.data(self.data_attr(true) + '-init') || self.settings; |
|
|
74 |
} else { |
|
|
75 |
var target = S('[' + self.attr_name() + '="' + S(this).attr('id') + '"]'), |
|
|
76 |
settings = target.data(self.attr_name(true) + '-init') || self.settings; |
|
|
77 |
} |
|
|
78 |
|
|
|
79 |
self.timeout = setTimeout(function () { |
|
|
80 |
if ($this.data(self.data_attr())) { |
|
|
81 |
if (settings.is_hover) { |
|
|
82 |
self.close.call(self, S('#' + $this.data(self.data_attr()))); |
|
|
83 |
} |
|
|
84 |
} else { |
|
|
85 |
if (settings.is_hover) { |
|
|
86 |
self.close.call(self, $this); |
|
|
87 |
} |
|
|
88 |
} |
|
|
89 |
}.bind(this), settings.hover_timeout); |
|
|
90 |
}) |
|
|
91 |
.on('click.fndtn.dropdown', function (e) { |
|
|
92 |
var parent = S(e.target).closest('[' + self.attr_name() + '-content]'); |
|
|
93 |
var links = parent.find('a'); |
|
|
94 |
|
|
|
95 |
if (links.length > 0 && parent.attr('aria-autoclose') !== 'false') { |
|
|
96 |
self.close.call(self, S('[' + self.attr_name() + '-content]')); |
|
|
97 |
} |
|
|
98 |
|
|
|
99 |
if (e.target !== document && !$.contains(document.documentElement, e.target)) { |
|
|
100 |
return; |
|
|
101 |
} |
|
|
102 |
|
|
|
103 |
if (S(e.target).closest('[' + self.attr_name() + ']').length > 0) { |
|
|
104 |
return; |
|
|
105 |
} |
|
|
106 |
|
|
|
107 |
if (!(S(e.target).data('revealId')) && |
|
|
108 |
(parent.length > 0 && (S(e.target).is('[' + self.attr_name() + '-content]') || |
|
|
109 |
$.contains(parent.first()[0], e.target)))) { |
|
|
110 |
e.stopPropagation(); |
|
|
111 |
return; |
|
|
112 |
} |
|
|
113 |
|
|
|
114 |
self.close.call(self, S('[' + self.attr_name() + '-content]')); |
|
|
115 |
}) |
|
|
116 |
.on('opened.fndtn.dropdown', '[' + self.attr_name() + '-content]', function () { |
|
|
117 |
self.settings.opened.call(this); |
|
|
118 |
}) |
|
|
119 |
.on('closed.fndtn.dropdown', '[' + self.attr_name() + '-content]', function () { |
|
|
120 |
self.settings.closed.call(this); |
|
|
121 |
}); |
|
|
122 |
|
|
|
123 |
S(window) |
|
|
124 |
.off('.dropdown') |
|
|
125 |
.on('resize.fndtn.dropdown', self.throttle(function () { |
|
|
126 |
self.resize.call(self); |
|
|
127 |
}, 50)); |
|
|
128 |
|
|
|
129 |
this.resize(); |
|
|
130 |
}, |
|
|
131 |
|
|
|
132 |
close : function (dropdown) { |
|
|
133 |
var self = this; |
|
|
134 |
dropdown.each(function (idx) { |
|
|
135 |
var original_target = $('[' + self.attr_name() + '=' + dropdown[idx].id + ']') || $('aria-controls=' + dropdown[idx].id + ']'); |
|
|
136 |
original_target.attr('aria-expanded', 'false'); |
|
|
137 |
if (self.S(this).hasClass(self.settings.active_class)) { |
|
|
138 |
self.S(this) |
|
|
139 |
.css(Foundation.rtl ? 'right' : 'left', '-99999px') |
|
|
140 |
.attr('aria-hidden', 'true') |
|
|
141 |
.removeClass(self.settings.active_class) |
|
|
142 |
.prev('[' + self.attr_name() + ']') |
|
|
143 |
.removeClass(self.settings.active_class) |
|
|
144 |
.removeData('target'); |
|
|
145 |
|
|
|
146 |
self.S(this).trigger('closed.fndtn.dropdown', [dropdown]); |
|
|
147 |
} |
|
|
148 |
}); |
|
|
149 |
dropdown.removeClass('f-open-' + this.attr_name(true)); |
|
|
150 |
}, |
|
|
151 |
|
|
|
152 |
closeall : function () { |
|
|
153 |
var self = this; |
|
|
154 |
$.each(self.S('.f-open-' + this.attr_name(true)), function () { |
|
|
155 |
self.close.call(self, self.S(this)); |
|
|
156 |
}); |
|
|
157 |
}, |
|
|
158 |
|
|
|
159 |
open : function (dropdown, target) { |
|
|
160 |
this |
|
|
161 |
.css(dropdown |
|
|
162 |
.addClass(this.settings.active_class), target); |
|
|
163 |
dropdown.prev('[' + this.attr_name() + ']').addClass(this.settings.active_class); |
|
|
164 |
dropdown.data('target', target.get(0)).trigger('opened.fndtn.dropdown', [dropdown, target]); |
|
|
165 |
dropdown.attr('aria-hidden', 'false'); |
|
|
166 |
target.attr('aria-expanded', 'true'); |
|
|
167 |
dropdown.focus(); |
|
|
168 |
dropdown.addClass('f-open-' + this.attr_name(true)); |
|
|
169 |
}, |
|
|
170 |
|
|
|
171 |
data_attr : function () { |
|
|
172 |
if (this.namespace.length > 0) { |
|
|
173 |
return this.namespace + '-' + this.name; |
|
|
174 |
} |
|
|
175 |
|
|
|
176 |
return this.name; |
|
|
177 |
}, |
|
|
178 |
|
|
|
179 |
toggle : function (target) { |
|
|
180 |
if (target.hasClass(this.settings.disabled_class)) { |
|
|
181 |
return; |
|
|
182 |
} |
|
|
183 |
var dropdown = this.S('#' + target.data(this.data_attr())); |
|
|
184 |
if (dropdown.length === 0) { |
|
|
185 |
// No dropdown found, not continuing |
|
|
186 |
return; |
|
|
187 |
} |
|
|
188 |
|
|
|
189 |
this.close.call(this, this.S('[' + this.attr_name() + '-content]').not(dropdown)); |
|
|
190 |
|
|
|
191 |
if (dropdown.hasClass(this.settings.active_class)) { |
|
|
192 |
this.close.call(this, dropdown); |
|
|
193 |
if (dropdown.data('target') !== target.get(0)) { |
|
|
194 |
this.open.call(this, dropdown, target); |
|
|
195 |
} |
|
|
196 |
} else { |
|
|
197 |
this.open.call(this, dropdown, target); |
|
|
198 |
} |
|
|
199 |
}, |
|
|
200 |
|
|
|
201 |
resize : function () { |
|
|
202 |
var dropdown = this.S('[' + this.attr_name() + '-content].open'); |
|
|
203 |
var target = $(dropdown.data("target")); |
|
|
204 |
|
|
|
205 |
if (dropdown.length && target.length) { |
|
|
206 |
this.css(dropdown, target); |
|
|
207 |
} |
|
|
208 |
}, |
|
|
209 |
|
|
|
210 |
css : function (dropdown, target) { |
|
|
211 |
var left_offset = Math.max((target.width() - dropdown.width()) / 2, 8), |
|
|
212 |
settings = target.data(this.attr_name(true) + '-init') || this.settings, |
|
|
213 |
parentOverflow = dropdown.parent().css('overflow-y') || dropdown.parent().css('overflow'); |
|
|
214 |
|
|
|
215 |
this.clear_idx(); |
|
|
216 |
|
|
|
217 |
|
|
|
218 |
|
|
|
219 |
if (this.small()) { |
|
|
220 |
var p = this.dirs.bottom.call(dropdown, target, settings); |
|
|
221 |
|
|
|
222 |
dropdown.attr('style', '').removeClass('drop-left drop-right drop-top').css({ |
|
|
223 |
position : 'absolute', |
|
|
224 |
width : '95%', |
|
|
225 |
'max-width' : 'none', |
|
|
226 |
top : p.top |
|
|
227 |
}); |
|
|
228 |
|
|
|
229 |
dropdown.css(Foundation.rtl ? 'right' : 'left', left_offset); |
|
|
230 |
} |
|
|
231 |
// detect if dropdown is in an overflow container |
|
|
232 |
else if (parentOverflow !== 'visible') { |
|
|
233 |
var offset = target[0].offsetTop + target[0].offsetHeight; |
|
|
234 |
|
|
|
235 |
dropdown.attr('style', '').css({ |
|
|
236 |
position : 'absolute', |
|
|
237 |
top : offset |
|
|
238 |
}); |
|
|
239 |
|
|
|
240 |
dropdown.css(Foundation.rtl ? 'right' : 'left', left_offset); |
|
|
241 |
} |
|
|
242 |
else { |
|
|
243 |
|
|
|
244 |
this.style(dropdown, target, settings); |
|
|
245 |
} |
|
|
246 |
|
|
|
247 |
return dropdown; |
|
|
248 |
}, |
|
|
249 |
|
|
|
250 |
style : function (dropdown, target, settings) { |
|
|
251 |
var css = $.extend({position : 'absolute'}, |
|
|
252 |
this.dirs[settings.align].call(dropdown, target, settings)); |
|
|
253 |
|
|
|
254 |
dropdown.attr('style', '').css(css); |
|
|
255 |
}, |
|
|
256 |
|
|
|
257 |
// return CSS property object |
|
|
258 |
// `this` is the dropdown |
|
|
259 |
dirs : { |
|
|
260 |
// Calculate target offset |
|
|
261 |
_base : function (t) { |
|
|
262 |
var o_p = this.offsetParent(), |
|
|
263 |
o = o_p.offset(), |
|
|
264 |
p = t.offset(); |
|
|
265 |
|
|
|
266 |
p.top -= o.top; |
|
|
267 |
p.left -= o.left; |
|
|
268 |
|
|
|
269 |
//set some flags on the p object to pass along |
|
|
270 |
p.missRight = false; |
|
|
271 |
p.missTop = false; |
|
|
272 |
p.missLeft = false; |
|
|
273 |
p.leftRightFlag = false; |
|
|
274 |
|
|
|
275 |
//lets see if the panel will be off the screen |
|
|
276 |
//get the actual width of the page and store it |
|
|
277 |
var actualBodyWidth; |
|
|
278 |
if (document.getElementsByClassName('row')[0]) { |
|
|
279 |
actualBodyWidth = document.getElementsByClassName('row')[0].clientWidth; |
|
|
280 |
} else { |
|
|
281 |
actualBodyWidth = window.innerWidth; |
|
|
282 |
} |
|
|
283 |
|
|
|
284 |
var actualMarginWidth = (window.innerWidth - actualBodyWidth) / 2; |
|
|
285 |
var actualBoundary = actualBodyWidth; |
|
|
286 |
|
|
|
287 |
if (!this.hasClass('mega')) { |
|
|
288 |
//miss top |
|
|
289 |
if (t.offset().top <= this.outerHeight()) { |
|
|
290 |
p.missTop = true; |
|
|
291 |
actualBoundary = window.innerWidth - actualMarginWidth; |
|
|
292 |
p.leftRightFlag = true; |
|
|
293 |
} |
|
|
294 |
|
|
|
295 |
//miss right |
|
|
296 |
if (t.offset().left + this.outerWidth() > t.offset().left + actualMarginWidth && t.offset().left - actualMarginWidth > this.outerWidth()) { |
|
|
297 |
p.missRight = true; |
|
|
298 |
p.missLeft = false; |
|
|
299 |
} |
|
|
300 |
|
|
|
301 |
//miss left |
|
|
302 |
if (t.offset().left - this.outerWidth() <= 0) { |
|
|
303 |
p.missLeft = true; |
|
|
304 |
p.missRight = false; |
|
|
305 |
} |
|
|
306 |
} |
|
|
307 |
|
|
|
308 |
return p; |
|
|
309 |
}, |
|
|
310 |
|
|
|
311 |
top : function (t, s) { |
|
|
312 |
var self = Foundation.libs.dropdown, |
|
|
313 |
p = self.dirs._base.call(this, t); |
|
|
314 |
|
|
|
315 |
this.addClass('drop-top'); |
|
|
316 |
|
|
|
317 |
if (p.missTop == true) { |
|
|
318 |
p.top = p.top + t.outerHeight() + this.outerHeight(); |
|
|
319 |
this.removeClass('drop-top'); |
|
|
320 |
} |
|
|
321 |
|
|
|
322 |
if (p.missRight == true) { |
|
|
323 |
p.left = p.left - this.outerWidth() + t.outerWidth(); |
|
|
324 |
} |
|
|
325 |
|
|
|
326 |
if (t.outerWidth() < this.outerWidth() || self.small() || this.hasClass(s.mega_menu)) { |
|
|
327 |
self.adjust_pip(this, t, s, p); |
|
|
328 |
} |
|
|
329 |
|
|
|
330 |
if (Foundation.rtl) { |
|
|
331 |
return {left : p.left - this.outerWidth() + t.outerWidth(), |
|
|
332 |
top : p.top - this.outerHeight()}; |
|
|
333 |
} |
|
|
334 |
|
|
|
335 |
return {left : p.left, top : p.top - this.outerHeight()}; |
|
|
336 |
}, |
|
|
337 |
|
|
|
338 |
bottom : function (t, s) { |
|
|
339 |
var self = Foundation.libs.dropdown, |
|
|
340 |
p = self.dirs._base.call(this, t); |
|
|
341 |
|
|
|
342 |
if (p.missRight == true) { |
|
|
343 |
p.left = p.left - this.outerWidth() + t.outerWidth(); |
|
|
344 |
} |
|
|
345 |
|
|
|
346 |
if (t.outerWidth() < this.outerWidth() || self.small() || this.hasClass(s.mega_menu)) { |
|
|
347 |
self.adjust_pip(this, t, s, p); |
|
|
348 |
} |
|
|
349 |
|
|
|
350 |
if (self.rtl) { |
|
|
351 |
return {left : p.left - this.outerWidth() + t.outerWidth(), top : p.top + t.outerHeight()}; |
|
|
352 |
} |
|
|
353 |
|
|
|
354 |
return {left : p.left, top : p.top + t.outerHeight()}; |
|
|
355 |
}, |
|
|
356 |
|
|
|
357 |
left : function (t, s) { |
|
|
358 |
var p = Foundation.libs.dropdown.dirs._base.call(this, t); |
|
|
359 |
|
|
|
360 |
this.addClass('drop-left'); |
|
|
361 |
|
|
|
362 |
if (p.missLeft == true) { |
|
|
363 |
p.left = p.left + this.outerWidth(); |
|
|
364 |
p.top = p.top + t.outerHeight(); |
|
|
365 |
this.removeClass('drop-left'); |
|
|
366 |
} |
|
|
367 |
|
|
|
368 |
return {left : p.left - this.outerWidth(), top : p.top}; |
|
|
369 |
}, |
|
|
370 |
|
|
|
371 |
right : function (t, s) { |
|
|
372 |
var p = Foundation.libs.dropdown.dirs._base.call(this, t); |
|
|
373 |
|
|
|
374 |
this.addClass('drop-right'); |
|
|
375 |
|
|
|
376 |
if (p.missRight == true) { |
|
|
377 |
p.left = p.left - this.outerWidth(); |
|
|
378 |
p.top = p.top + t.outerHeight(); |
|
|
379 |
this.removeClass('drop-right'); |
|
|
380 |
} else { |
|
|
381 |
p.triggeredRight = true; |
|
|
382 |
} |
|
|
383 |
|
|
|
384 |
var self = Foundation.libs.dropdown; |
|
|
385 |
|
|
|
386 |
if (t.outerWidth() < this.outerWidth() || self.small() || this.hasClass(s.mega_menu)) { |
|
|
387 |
self.adjust_pip(this, t, s, p); |
|
|
388 |
} |
|
|
389 |
|
|
|
390 |
return {left : p.left + t.outerWidth(), top : p.top}; |
|
|
391 |
} |
|
|
392 |
}, |
|
|
393 |
|
|
|
394 |
// Insert rule to style psuedo elements |
|
|
395 |
adjust_pip : function (dropdown, target, settings, position) { |
|
|
396 |
var sheet = Foundation.stylesheet, |
|
|
397 |
pip_offset_base = 8; |
|
|
398 |
|
|
|
399 |
if (dropdown.hasClass(settings.mega_class)) { |
|
|
400 |
pip_offset_base = position.left + (target.outerWidth() / 2) - 8; |
|
|
401 |
} else if (this.small()) { |
|
|
402 |
pip_offset_base += position.left - 8; |
|
|
403 |
} |
|
|
404 |
|
|
|
405 |
this.rule_idx = sheet.cssRules.length; |
|
|
406 |
|
|
|
407 |
//default |
|
|
408 |
var sel_before = '.f-dropdown.open:before', |
|
|
409 |
sel_after = '.f-dropdown.open:after', |
|
|
410 |
css_before = 'left: ' + pip_offset_base + 'px;', |
|
|
411 |
css_after = 'left: ' + (pip_offset_base - 1) + 'px;'; |
|
|
412 |
|
|
|
413 |
if (position.missRight == true) { |
|
|
414 |
pip_offset_base = dropdown.outerWidth() - 23; |
|
|
415 |
sel_before = '.f-dropdown.open:before', |
|
|
416 |
sel_after = '.f-dropdown.open:after', |
|
|
417 |
css_before = 'left: ' + pip_offset_base + 'px;', |
|
|
418 |
css_after = 'left: ' + (pip_offset_base - 1) + 'px;'; |
|
|
419 |
} |
|
|
420 |
|
|
|
421 |
//just a case where right is fired, but its not missing right |
|
|
422 |
if (position.triggeredRight == true) { |
|
|
423 |
sel_before = '.f-dropdown.open:before', |
|
|
424 |
sel_after = '.f-dropdown.open:after', |
|
|
425 |
css_before = 'left:-12px;', |
|
|
426 |
css_after = 'left:-14px;'; |
|
|
427 |
} |
|
|
428 |
|
|
|
429 |
if (sheet.insertRule) { |
|
|
430 |
sheet.insertRule([sel_before, '{', css_before, '}'].join(' '), this.rule_idx); |
|
|
431 |
sheet.insertRule([sel_after, '{', css_after, '}'].join(' '), this.rule_idx + 1); |
|
|
432 |
} else { |
|
|
433 |
sheet.addRule(sel_before, css_before, this.rule_idx); |
|
|
434 |
sheet.addRule(sel_after, css_after, this.rule_idx + 1); |
|
|
435 |
} |
|
|
436 |
}, |
|
|
437 |
|
|
|
438 |
// Remove old dropdown rule index |
|
|
439 |
clear_idx : function () { |
|
|
440 |
var sheet = Foundation.stylesheet; |
|
|
441 |
|
|
|
442 |
if (typeof this.rule_idx !== 'undefined') { |
|
|
443 |
sheet.deleteRule(this.rule_idx); |
|
|
444 |
sheet.deleteRule(this.rule_idx); |
|
|
445 |
delete this.rule_idx; |
|
|
446 |
} |
|
|
447 |
}, |
|
|
448 |
|
|
|
449 |
small : function () { |
|
|
450 |
return matchMedia(Foundation.media_queries.small).matches && |
|
|
451 |
!matchMedia(Foundation.media_queries.medium).matches; |
|
|
452 |
}, |
|
|
453 |
|
|
|
454 |
off : function () { |
|
|
455 |
this.S(this.scope).off('.fndtn.dropdown'); |
|
|
456 |
this.S('html, body').off('.fndtn.dropdown'); |
|
|
457 |
this.S(window).off('.fndtn.dropdown'); |
|
|
458 |
this.S('[data-dropdown-content]').off('.fndtn.dropdown'); |
|
|
459 |
}, |
|
|
460 |
|
|
|
461 |
reflow : function () {} |
|
|
462 |
}; |
|
|
463 |
}(jQuery, window, window.document)); |