Skip to content

Commit df8dc1a

Browse files
kballkball
committed
Merge branch 'designerno1-v6.3-drilldown-autoheight' into v6.3
2 parents 8ebbea4 + 992bf6e commit df8dc1a

File tree

4 files changed

+368
-9
lines changed

4 files changed

+368
-9
lines changed

‎docs/pages/drilldown-menu.md

+70
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,76 @@ Any `<a>` without a submenu will function like a normal link.
7373
<li><a href="#Item-4"> Item 4</a></li>
7474
</ul>
7575

76+
## autoHeight
77+
78+
<div class="secondary callout">
79+
<p>If you like to set the height to auto you can also set the autoHeight and animateHeight params</p>
80+
<button class="button expanded" onclick="$('#m3').foundation('destroy');if($('#m3').data('autoHeight')){$('#m3').data('autoHeight',false);$(this).html('autoHeight is Off');}else{$('#m3').data('autoHeight',true);$(this).html('autoHeight is On');}new Foundation.Drilldown($('#m3'));return false;">autoHeight is On</button>
81+
</div>
82+
83+
<ul class="menu" data-drilldown data-auto-height="true" data-animate-height="true" style="width: 200px" id="m3">
84+
<li>
85+
<a href="#">Item 1</a>
86+
<ul class="menu">
87+
<li>
88+
<a href="#">Item 1A</a>
89+
<ul class="menu">
90+
<li><a href="#Item-1Aa">Item 1Aa</a></li>
91+
<li><a href="#Item-1Ba">Item 1Ba</a></li>
92+
</ul>
93+
</li>
94+
<li><a href="#Item-1B">Item 1B</a></li>
95+
<li><a href="#Item-1C">Item 1C</a></li>
96+
<li><a href="#Item-1D">Item 1D</a></li>
97+
<li><a href="#Item-1E">Item 1E</a></li>
98+
</ul>
99+
</li>
100+
<li>
101+
<a href="#">Item 2</a>
102+
<ul class="menu">
103+
<li><a href="#Item-2A">Item 2A</a></li>
104+
<li><a href="#Item-2B">Item 2B</a></li>
105+
<li><a href="#Item-2C">Item 2C</a></li>
106+
<li><a href="#Item-2D">Item 2D</a></li>
107+
<li><a href="#Item-2E">Item 2E</a></li>
108+
</ul>
109+
</li>
110+
<li>
111+
<a href="#">Item 3</a>
112+
<ul class="menu">
113+
<li><a href="#Item-3A">Item 3A</a></li>
114+
<li><a href="#Item-3B">Item 3B</a></li>
115+
<li><a href="#Item-3C">Item 3C</a></li>
116+
<li><a href="#Item-3D">Item 3D</a></li>
117+
<li>
118+
<a href="#Item-3E">Item 3E</a>
119+
<ul class="menu">
120+
<li><a href="#Item-3EA">Item 3EA</a></li>
121+
<li><a href="#Item-3EB">Item 3EB</a></li>
122+
<li><a href="#Item-3EC">Item 3EC</a></li>
123+
<li><a href="#Item-3ED">Item 3ED</a></li>
124+
<li><a href="#Item-3EE">Item 3EE</a></li>
125+
<li><a href="#Item-3EA">Item 3EA</a></li>
126+
<li><a href="#Item-3EB">Item 3EB</a></li>
127+
<li><a href="#Item-3EC">Item 3EC</a></li>
128+
<li><a href="#Item-3ED">Item 3ED</a></li>
129+
<li><a href="#Item-3EE">Item 3EE</a></li>
130+
<li><a href="#Item-3EA">Item 3EA</a></li>
131+
<li><a href="#Item-3EB">Item 3EB</a></li>
132+
<li><a href="#Item-3EC">Item 3EC</a></li>
133+
<li><a href="#Item-3ED">Item 3ED</a></li>
134+
<li><a href="#Item-3EE">Item 3EE</a></li>
135+
</ul>
136+
</li>
137+
</ul>
138+
</li>
139+
<li><a href="#Item-4"> Item 4</a></li>
140+
<li><a href="#Item-5"> Item 5</a></li>
141+
<li><a href="#Item-6"> Item 6</a></li>
142+
<li><a href="#Item-7"> Item 7</a></li>
143+
<li><a href="#Item-8"> Item 8</a></li>
144+
</ul>
145+
76146
## ScrollTop Drilldown
77147

78148
<div class="callout">Scroll to the top of the menu when selecting a submenu/navigating back using the menu back button. Can be useful with a longer menu to provide a better user experience.</div>

‎js/foundation.drilldown.js

+27-9
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ class Drilldown {
9191
});
9292
if(!this.$element.parent().hasClass('is-drilldown')){
9393
this.$wrapper = $(this.options.wrapper).addClass('is-drilldown');
94+
if(this.options.animateHeight) this.$wrapper.addClass('animate-height');
9495
this.$wrapper = this.$element.wrap(this.$wrapper).parent().css(this._getMaxDims());
9596
}
9697
}
@@ -219,7 +220,7 @@ class Drilldown {
219220
$element.parent('li').parent('ul').parent('li').children('a').first().focus();
220221
}, 1);
221222
});
222-
return true;
223+
return true;
223224
} else if ($element.is(_this.$submenuAnchors)) {
224225
_this._show($element.parent('li'));
225226
$element.parent('li').one(Foundation.transitionend($element), function(){
@@ -245,6 +246,7 @@ class Drilldown {
245246
*/
246247
_hideAll() {
247248
var $elem = this.$element.find('.is-drilldown-submenu.is-active').addClass('is-closing');
249+
if(this.options.autoHeight) this.$wrapper.css({height:$elem.parent().closest('ul').data('calcHeight')});
248250
$elem.one(Foundation.transitionend($elem), function(e){
249251
$elem.removeClass('is-active is-closing');
250252
});
@@ -296,6 +298,7 @@ class Drilldown {
296298
* @param {jQuery} $elem - the current element with a submenu to open, i.e. the `li` tag.
297299
*/
298300
_show($elem) {
301+
if(this.options.autoHeight) this.$wrapper.css({height:$elem.children('[data-submenu]').data('calcHeight')});
299302
$elem.children('[data-submenu]').addClass('is-active');
300303
/**
301304
* Fires when the submenu has opened.
@@ -311,7 +314,7 @@ class Drilldown {
311314
* @param {jQuery} $elem - the current sub-menu to hide, i.e. the `ul` tag.
312315
*/
313316
_hide($elem) {
314-
var _this = this;
317+
if(this.options.autoHeight) this.$wrapper.css({height:$elem.parent().closest('ul').data('calcHeight')});
315318
$elem.addClass('is-closing')
316319
.one(Foundation.transitionend($elem), function(){
317320
$elem.removeClass('is-active is-closing');
@@ -331,15 +334,18 @@ class Drilldown {
331334
* @private
332335
*/
333336
_getMaxDims() {
334-
var biggest = 0
335-
var result = {};
336-
337-
this.$submenus.add(this.$element).each((i, elem) => {
338-
var height = elem.getBoundingClientRect().height;
339-
if (height > biggest) biggest = height;
337+
var max = 0, result = {}, oneHeight = this.$menuItems[0].getBoundingClientRect().height,_this = this;
338+
this.$submenus.add(this.$element).each(function(){
339+
var numOfElems = $(this).children('li').length;
340+
max = numOfElems > max ? numOfElems : max;
341+
if(_this.options.autoHeight) {
342+
$(this).data('calcHeight',numOfElems * oneHeight);
343+
if (!$(this).hasClass('is-drilldown-submenu')) result['height'] = numOfElems * oneHeight;
344+
}
340345
});
341346

342-
result['min-height'] = `${biggest}px`;
347+
if(!this.options.autoHeight) result['min-height'] = `${max * oneHeight}px`;
348+
343349
result['max-width'] = `${this.$element[0].getBoundingClientRect().width}px`;
344350

345351
return result;
@@ -396,6 +402,18 @@ Drilldown.defaults = {
396402
* @example false
397403
*/
398404
closeOnClick: false,
405+
/**
406+
* Allow the menu to auto adjust height.
407+
* @option
408+
* @example false
409+
*/
410+
autoHeight: false,
411+
/**
412+
* Animate the auto adjust height.
413+
* @option
414+
* @example false
415+
*/
416+
animateHeight: false,
399417
/**
400418
* Scroll to the top of the menu after opening a submenu or navigating back using the menu back button
401419
* @option

‎scss/components/_drilldown.scss

+4
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ $drilldown-background: $white !default;
3131
li {
3232
display: block !important;
3333
}
34+
35+
&.animate-height {
36+
transition: height 0.5s;
37+
}
3438
}
3539

3640
// Applied to nested <ul>s

0 commit comments

Comments
 (0)