Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-base: ui.js: improve dropdown behaviour

Browse source 
- Do not artificially cutoff dropdown items, use all available space
 - Close open dropdown when clicking into the preview area

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2019-05-28 15:28:53 +02:00
parent a96bec68a0
commit c2f8bc90ff
1 changed files with 28 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
modules/luci-base/htdocs/luci-static/resources/ui.js
View file

@ -350,7 +350,7 @@ var UIDropdown = UIElement.extend({
select_placeholder: _('-- Please choose --'), select_placeholder: _('-- Please choose --'),
custom_placeholder: _('-- custom --'), custom_placeholder: _('-- custom --'),
display_items: 3, display_items: 3,
dropdown_items: 5, dropdown_items: -1,
create: false, create: false,
create_query: '.create-item-input', create_query: '.create-item-input',
create_template: 'script[type="item-template"]' create_template: 'script[type="item-template"]'
@ -577,11 +577,32 @@ var UIDropdown = UIElement.extend({
ul.style.top = ul.style.bottom = ''; ul.style.top = ul.style.bottom = '';
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
var height = items * li[Math.max(0, li.length - 2)].offsetHeight; var itemHeight = li[Math.max(0, li.length - 2)].getBoundingClientRect().height,
fullHeight = 0,
spaceAbove = rect.top,
spaceBelow = window.innerHeight - rect.height - rect.top;
for (var i = 0; i < (items == -1 ? li.length : items); i++)
fullHeight += li[i].getBoundingClientRect().height;
if (fullHeight <= spaceBelow) {
ul.style.top = rect.height + 'px';
ul.style.maxHeight = spaceBelow + 'px';
}
else if (fullHeight <= spaceAbove) {
ul.style.bottom = rect.height + 'px';
ul.style.maxHeight = spaceAbove + 'px';
}
else if (spaceBelow >= spaceAbove) {
ul.style.top = rect.height + 'px';
ul.style.maxHeight = (spaceBelow - (spaceBelow % itemHeight)) + 'px';
}
else {
ul.style.bottom = rect.height + 'px';
ul.style.maxHeight = (spaceAbove - (spaceAbove % itemHeight)) + 'px';
}
ul.scrollTop = sel ? Math.max(sel.offsetTop - sel.offsetHeight, 0) : 0; ul.scrollTop = sel ? Math.max(sel.offsetTop - sel.offsetHeight, 0) : 0;
ul.style[((rect.top + rect.height + height) > window.innerHeight) ? 'bottom' : 'top'] = rect.height + 'px';
ul.style.maxHeight = height + 'px';
}); });
} }
@ -898,6 +919,8 @@ var UIDropdown = UIElement.extend({
this.toggleItem(sb, li); this.toggleItem(sb, li);
else if (li && li.parentNode.classList.contains('preview')) else if (li && li.parentNode.classList.contains('preview'))
this.closeDropdown(sb); this.closeDropdown(sb);
else if (matchesElem(ev.target, 'span.open, span.more'))
this.closeDropdown(sb);
} }
ev.preventDefault(); ev.preventDefault();
@ -1090,7 +1113,7 @@ var UICombobox = UIDropdown.extend({
this.super('__init__', [ value, choices, Object.assign({ this.super('__init__', [ value, choices, Object.assign({
select_placeholder: _('-- Please choose --'), select_placeholder: _('-- Please choose --'),
custom_placeholder: _('-- custom --'), custom_placeholder: _('-- custom --'),
dropdown_items: 5, dropdown_items: -1,
sort: true sort: true
}, options, { }, options, {
multi: false, multi: false,