Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix focus for menu with dataview

Browse source
This commit is contained in:
Julia Radzhabova 2021-09-17 23:30:46 +03:00
parent 97f607afa9
commit 9be440c3b3
3 changed files with 62 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
apps/common/main/lib/component/DataView.js
View file

@ -262,6 +262,7 @@ define([
me.multiSelect = me.options.multiSelect; me.multiSelect = me.options.multiSelect;
me.handleSelect = me.options.handleSelect; me.handleSelect = me.options.handleSelect;
me.parentMenu = me.options.parentMenu; me.parentMenu = me.options.parentMenu;
me.outerMenu = me.options.outerMenu;
me.enableKeyEvents= me.options.enableKeyEvents; me.enableKeyEvents= me.options.enableKeyEvents;
me.useBSKeydown = me.options.useBSKeydown; // only with enableKeyEvents && parentMenu me.useBSKeydown = me.options.useBSKeydown; // only with enableKeyEvents && parentMenu
me.showLast = me.options.showLast; me.showLast = me.options.showLast;
@ -698,17 +699,25 @@ define([
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx]; idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
} }
} else if (data.keyCode==Common.UI.Keys.UP) { } else if (data.keyCode==Common.UI.Keys.UP) {
while (idx===undefined) { if (topIdx==0 && this.outerMenu && this.outerMenu.menu) {
topIdx--; this.deselectAll(true);
if (topIdx<0) topIdx = this._layoutParams.rows-1; this.outerMenu.menu.focusOuter(data, this.outerMenu.index);
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx]; } else
} while (idx===undefined) {
topIdx--;
if (topIdx<0) topIdx = this._layoutParams.rows-1;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} else { } else {
while (idx===undefined) { if (topIdx==this._layoutParams.rows-1 && this.outerMenu && this.outerMenu.menu) {
topIdx++; this.deselectAll(true);
if (topIdx>this._layoutParams.rows-1) topIdx = 0; this.outerMenu.menu.focusOuter(data, this.outerMenu.index);
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx]; } else
} while (idx===undefined) {
topIdx++;
if (topIdx>this._layoutParams.rows-1) topIdx = 0;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} }
} else { } else {
idx = (data.keyCode==Common.UI.Keys.UP || data.keyCode==Common.UI.Keys.LEFT) idx = (data.keyCode==Common.UI.Keys.UP || data.keyCode==Common.UI.Keys.LEFT)
@ -820,8 +829,22 @@ define([
this._layoutParams = undefined; this._layoutParams = undefined;
}, },
focus: function() { focus: function(index) {
this.cmpEl && this.cmpEl.find('.dataview').focus(); this.cmpEl && this.cmpEl.find('.dataview').focus();
if (typeof index == 'string') {
if (index == 'first') {
this.selectByIndex(0, true);
} else if (index == 'last') {
if (this._layoutParams === undefined)
this.fillIndexesArray();
this.selectByIndex(this._layoutParams.itemsIndexes[this._layoutParams.rows-1][0], true);
}
} else if (index !== undefined)
this.selectByIndex(index, true);
},
focusInner: function(e) {
this.focus(e.keyCode == Common.UI.Keys.DOWN ? 'first' : 'last');
} }
}); });
@ -1146,17 +1169,25 @@ define([
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx]; idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
} }
} else if (data.keyCode==Common.UI.Keys.UP) { } else if (data.keyCode==Common.UI.Keys.UP) {
while (idx===undefined) { if (topIdx==0 && this.outerMenu && this.outerMenu.menu) {
topIdx--; this.deselectAll(true);
if (topIdx<0) topIdx = this._layoutParams.rows-1; this.outerMenu.menu.focusOuter(data, this.outerMenu.index);
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx]; } else
} while (idx===undefined) {
topIdx--;
if (topIdx<0) topIdx = this._layoutParams.rows-1;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} else { } else {
while (idx===undefined) { if (topIdx==this._layoutParams.rows-1 && this.outerMenu && this.outerMenu.menu) {
topIdx++; this.deselectAll(true);
if (topIdx>this._layoutParams.rows-1) topIdx = 0; this.outerMenu.menu.focusOuter(data, this.outerMenu.index);
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx]; } else
} while (idx===undefined) {
topIdx++;
if (topIdx>this._layoutParams.rows-1) topIdx = 0;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} }
} else { } else {
idx = (data.keyCode==Common.UI.Keys.UP || data.keyCode==Common.UI.Keys.LEFT) idx = (data.keyCode==Common.UI.Keys.UP || data.keyCode==Common.UI.Keys.LEFT)

6
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -2017,6 +2017,7 @@ define([
this.mnuMarkersPicker = new Common.UI.DataView({ this.mnuMarkersPicker = new Common.UI.DataView({
el: $('#id-toolbar-menu-markers'), el: $('#id-toolbar-menu-markers'),
parentMenu: this.btnMarkers.menu, parentMenu: this.btnMarkers.menu,
outerMenu: {menu: this.btnMarkers.menu, index: 0},
restoreHeight: 138, restoreHeight: 138,
allowScrollbar: false, allowScrollbar: false,
store: new Common.UI.DataViewStore([ store: new Common.UI.DataViewStore([
@ -2032,12 +2033,14 @@ define([
]), ]),
itemTemplate: _.template('<div id="<%= id %>" class="item-markerlist"></div>') itemTemplate: _.template('<div id="<%= id %>" class="item-markerlist"></div>')
}); });
this.btnMarkers.menu.setInnerMenu([{menu: this.mnuMarkersPicker, index: 0}]);
_conf && this.mnuMarkersPicker.selectByIndex(_conf.index, true); _conf && this.mnuMarkersPicker.selectByIndex(_conf.index, true);
_conf = this.mnuNumbersPicker.conf; _conf = this.mnuNumbersPicker.conf;
this.mnuNumbersPicker = new Common.UI.DataView({ this.mnuNumbersPicker = new Common.UI.DataView({
el: $('#id-toolbar-menu-numbering'), el: $('#id-toolbar-menu-numbering'),
parentMenu: this.btnNumbers.menu, parentMenu: this.btnNumbers.menu,
outerMenu: {menu: this.btnNumbers.menu, index: 0},
restoreHeight: 92, restoreHeight: 92,
allowScrollbar: false, allowScrollbar: false,
store: new Common.UI.DataViewStore([ store: new Common.UI.DataViewStore([
@ -2052,12 +2055,14 @@ define([
]), ]),
itemTemplate: _.template('<div id="<%= id %>" class="item-multilevellist"></div>') itemTemplate: _.template('<div id="<%= id %>" class="item-multilevellist"></div>')
}); });
this.btnNumbers.menu.setInnerMenu([{menu: this.mnuNumbersPicker, index: 0}]);
_conf && this.mnuNumbersPicker.selectByIndex(_conf.index, true); _conf && this.mnuNumbersPicker.selectByIndex(_conf.index, true);
_conf = this.mnuMultilevelPicker.conf; _conf = this.mnuMultilevelPicker.conf;
this.mnuMultilevelPicker = new Common.UI.DataView({ this.mnuMultilevelPicker = new Common.UI.DataView({
el: $('#id-toolbar-menu-multilevels'), el: $('#id-toolbar-menu-multilevels'),
parentMenu: this.btnMultilevels.menu, parentMenu: this.btnMultilevels.menu,
outerMenu: {menu: this.btnMultilevels.menu, index: 0},
restoreHeight: 92, restoreHeight: 92,
allowScrollbar: false, allowScrollbar: false,
store: new Common.UI.DataViewStore([ store: new Common.UI.DataViewStore([
@ -2068,6 +2073,7 @@ define([
]), ]),
itemTemplate: _.template('<div id="<%= id %>" class="item-multilevellist"></div>') itemTemplate: _.template('<div id="<%= id %>" class="item-multilevellist"></div>')
}); });
this.btnMultilevels.menu.setInnerMenu([{menu: this.mnuMultilevelPicker, index: 0}]);
_conf && this.mnuMultilevelPicker.selectByIndex(_conf.index, true); _conf && this.mnuMultilevelPicker.selectByIndex(_conf.index, true);
_conf = this.mnuPageNumberPosPicker ? this.mnuPageNumberPosPicker.conf : undefined; _conf = this.mnuPageNumberPosPicker ? this.mnuPageNumberPosPicker.conf : undefined;

4
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -1408,6 +1408,7 @@ define([
this.mnuMarkersPicker = new Common.UI.DataView({ this.mnuMarkersPicker = new Common.UI.DataView({
el: $('#id-toolbar-menu-markers'), el: $('#id-toolbar-menu-markers'),
parentMenu: this.btnMarkers.menu, parentMenu: this.btnMarkers.menu,
outerMenu: {menu: this.btnMarkers.menu, index: 0},
restoreHeight: 138, restoreHeight: 138,
allowScrollbar: false, allowScrollbar: false,
store: new Common.UI.DataViewStore([ store: new Common.UI.DataViewStore([
@ -1423,12 +1424,14 @@ define([
]), ]),
itemTemplate: _.template('<div id="<%= id %>" class="item-markerlist"></div>') itemTemplate: _.template('<div id="<%= id %>" class="item-markerlist"></div>')
}); });
this.btnMarkers.menu.setInnerMenu([{menu: this.mnuMarkersPicker, index: 0}]);
_conf && this.mnuMarkersPicker.selectByIndex(_conf.index, true); _conf && this.mnuMarkersPicker.selectByIndex(_conf.index, true);
_conf = this.mnuNumbersPicker.conf; _conf = this.mnuNumbersPicker.conf;
this.mnuNumbersPicker = new Common.UI.DataView({ this.mnuNumbersPicker = new Common.UI.DataView({
el: $('#id-toolbar-menu-numbering'), el: $('#id-toolbar-menu-numbering'),
parentMenu: this.btnNumbers.menu, parentMenu: this.btnNumbers.menu,
outerMenu: {menu: this.btnNumbers.menu, index: 0},
restoreHeight: 92, restoreHeight: 92,
allowScrollbar: false, allowScrollbar: false,
store: new Common.UI.DataViewStore([ store: new Common.UI.DataViewStore([
@ -1443,6 +1446,7 @@ define([
]), ]),
itemTemplate: _.template('<div id="<%= id %>" class="item-multilevellist"></div>') itemTemplate: _.template('<div id="<%= id %>" class="item-multilevellist"></div>')
}); });
this.btnNumbers.menu.setInnerMenu([{menu: this.mnuNumbersPicker, index: 0}]);
_conf && this.mnuNumbersPicker.selectByIndex(_conf.index, true); _conf && this.mnuNumbersPicker.selectByIndex(_conf.index, true);
this.mnuTablePicker = new Common.UI.DimensionPicker({ this.mnuTablePicker = new Common.UI.DimensionPicker({