Fix scroll in combobox, listview.

This commit is contained in:
Julia Radzhabova 2021-02-18 20:38:46 +03:00
parent 166b54f728
commit e543142c26
5 changed files with 67 additions and 21 deletions

View file

@ -671,8 +671,8 @@ define([
if (rec) {
this._fromKeyDown = true;
this.selectRecord(rec);
this._fromKeyDown = false;
this.scrollToRecord(rec);
this._fromKeyDown = false;
}
}
} else {
@ -1119,8 +1119,8 @@ define([
if (rec) {
this._fromKeyDown = true;
this.selectRecord(rec);
this._fromKeyDown = false;
this.scrollToRecord(rec);
this._fromKeyDown = false;
}
}
} else {

View file

@ -119,6 +119,37 @@ define([
focus: function() {
this.cmpEl && this.cmpEl.find('.listview').focus();
},
scrollToRecord: function (record, force) {
if (!this._fromKeyDown) {
Common.UI.DataView.prototype.scrollToRecord.call(this, record, force);
return;
}
if (!record) return;
var innerEl = $(this.el).find('.inner'),
innerHeight = innerEl.innerHeight(),
idx = _.indexOf(this.store.models, record),
div = (idx>=0 && this.dataViewItems.length>idx) ? $(this.dataViewItems[idx].el) : innerEl.find('#' + record.get('id'));
if (div.length<=0) return;
var div_top = div.position().top,
div_height = div.outerHeight(),
newpos;
if (force || div_top<0)
newpos = innerEl.scrollTop() + div_top;
else if (div_top+div_height>innerHeight)
newpos = innerEl.scrollTop() + div_top + div_height - innerHeight;
if (newpos!==undefined) {
if (this.scroller && this.allowScrollbar) {
this.scroller.scrollTop(newpos, 0);
} else {
innerEl.scrollTop(newpos);
}
}
}
}
})());

View file

@ -65,6 +65,17 @@ function onDropDownKeyDown(e) {
$parent.trigger(afterEvent);
}
function checkFocusedItem(cmp, item) {
var innerHeight = cmp.innerHeight(),
padding = (innerHeight - cmp.height())/2,
pos = item.position().top,
itemHeight = item.outerHeight();
if (pos<0)
cmp.scrollTop(cmp.scrollTop() + pos - padding);
else if (pos+itemHeight>innerHeight)
cmp.scrollTop(cmp.scrollTop() + pos + itemHeight - innerHeight + padding);
}
function patchDropDownKeyDown(e) {
if (!/(38|40|27|37|39)/.test(e.keyCode)) return;
@ -128,6 +139,8 @@ function patchDropDownKeyDown(e) {
if ($parent.hasClass('dropdown-submenu') && $parent.hasClass('over'))
$parent.addClass('focused-submenu'); // for Safari. When focus go from parent menuItem to it's submenu don't hide this submenu
checkFocusedItem($this, $items.eq(index));
$items.eq(index).focus();
}
}

View file

@ -2280,16 +2280,18 @@ define([
li = menuContainer.find('a.focus').closest('li');
else if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) {
var innerEl = menu.cmpEl,
inner_top = innerEl.offset().top,
li_focused = menuContainer.find('a.focus').closest('li');
var li_top = li_focused.offset().top;
if (li_top < inner_top || li_top+li_focused.outerHeight() > inner_top + innerEl.height()) {
if (menu.scroller) {
menu.scroller.scrollTop(innerEl.scrollTop() + li_top - inner_top, 0);
} else {
innerEl.scrollTop(innerEl.scrollTop() + li_top - inner_top);
}
li_focused = menuContainer.find('a.focus').closest('li'),
innerHeight = innerEl.innerHeight(),
padding = (innerHeight - innerEl.height())/2,
pos = li_focused.position().top,
itemHeight = li_focused.outerHeight(),
newpos;
if (pos<0)
newpos = innerEl.scrollTop() + pos - padding;
else if (pos+itemHeight>innerHeight)
newpos = innerEl.scrollTop() + pos + itemHeight - innerHeight + padding;
if (newpos!==undefined) {
menu.scroller ? menu.scroller.scrollTop(newpos, 0) : innerEl.scrollTop(newpos);
}
}
}

View file

@ -277,8 +277,7 @@ define([
this.cmbListFunctions.on('item:select', _.bind(this.onSelectFunction, this));
this.cmbListFunctions.on('item:dblclick', _.bind(this.onDblClickFunction, this));
this.cmbListFunctions.on('entervalue', _.bind(this.onPrimary, this));
this.cmbListFunctions.onKeyDown = _.bind(this.onKeyDown, this.cmbListFunctions);
this.cmbListFunctions.scrollToRecord = _.bind(this.onScrollToRecordCustom, this.cmbListFunctions);
this.cmbListFunctions.onKeyDown = _.bind(this.onKeyDown, this);
this.onUpdateFocus();
}
@ -353,7 +352,8 @@ define([
onKeyDown: function (e, event) {
var i = 0, record = null,
me = this,
parent = this,
me = this.cmbListFunctions,
charVal = '',
value = '',
firstRecord = null,
@ -363,12 +363,12 @@ define([
selectRecord = null,
needNextRecord = false;
if (this.disabled) return;
if (me.disabled) return;
if (_.isUndefined(undefined)) event = e;
function selectItem (item) {
me.selectRecord(item);
me.scrollToRecord(item);
parent.onScrollToRecordCustom.call(me, item);
innerEl = $(me.el).find('.inner');
me.scroller.scrollTop(innerEl.scrollTop(), 0);
@ -380,14 +380,14 @@ define([
charVal = e.key;
if (e.keyCode > 64 && e.keyCode < 91 && charVal && charVal.length) {
charVal = charVal.toLocaleLowerCase();
selectRecord = this.store.findWhere({selected: true});
selectRecord = me.store.findWhere({selected: true});
if (selectRecord) {
value = selectRecord.get('value');
isEqualSelectRecord = (value && value.length && value[0].toLocaleLowerCase() === charVal)
}
for (i = 0; i < this.store.length; ++i) {
record = this.store.at(i);
for (i = 0; i < me.store.length; ++i) {
record = me.store.at(i);
value = record.get('value');
if (value[0].toLocaleLowerCase() === charVal) {
@ -416,7 +416,7 @@ define([
}
}
Common.UI.DataView.prototype.onKeyDown.call(this, e, event);
Common.UI.DataView.prototype.onKeyDown.call(me, e, event);
},
onScrollToRecordCustom: function (record) {