summaryrefslogtreecommitdiffhomepage
path: root/modules/luci-base/htdocs/luci-static/resources/ui.js
diff options
context:
space:
mode:
authorJo-Philipp Wich <jo@mein.io>2019-05-28 15:28:53 +0200
committerJo-Philipp Wich <jo@mein.io>2019-07-07 15:36:25 +0200
commitc2f8bc90ffb8f187b5be83c0581a501f6d2879ca (patch)
tree1ade914e1abf6273c521f16d93fad2ecbc2252e0 /modules/luci-base/htdocs/luci-static/resources/ui.js
parenta96bec68a03884939d268374a5fb8b2bf1b96ae4 (diff)
luci-base: ui.js: improve dropdown behaviour
- 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>
Diffstat (limited to 'modules/luci-base/htdocs/luci-static/resources/ui.js')
-rw-r--r--modules/luci-base/htdocs/luci-static/resources/ui.js33
1 files changed, 28 insertions, 5 deletions
diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index 7d04d7807c..f530016936 100644
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -350,7 +350,7 @@ var UIDropdown = UIElement.extend({
select_placeholder: _('-- Please choose --'),
custom_placeholder: _('-- custom --'),
display_items: 3,
- dropdown_items: 5,
+ dropdown_items: -1,
create: false,
create_query: '.create-item-input',
create_template: 'script[type="item-template"]'
@@ -577,11 +577,32 @@ var UIDropdown = UIElement.extend({
ul.style.top = ul.style.bottom = '';
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.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);
else if (li && li.parentNode.classList.contains('preview'))
this.closeDropdown(sb);
+ else if (matchesElem(ev.target, 'span.open, span.more'))
+ this.closeDropdown(sb);
}
ev.preventDefault();
@@ -1090,7 +1113,7 @@ var UICombobox = UIDropdown.extend({
this.super('__init__', [ value, choices, Object.assign({
select_placeholder: _('-- Please choose --'),
custom_placeholder: _('-- custom --'),
- dropdown_items: 5,
+ dropdown_items: -1,
sort: true
}, options, {
multi: false,