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

[SSE] Add focus manager for modal dialogs

Browse source
This commit is contained in:
Julia Radzhabova 2020-09-26 17:01:53 +03:00
parent 35b2061855
commit 666e737fa8
5 changed files with 88 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
apps/spreadsheeteditor/main/app/view/AutoFilterDialog.js
View file

@ -61,7 +61,8 @@ define([
cls : 'filter-dlg', cls : 'filter-dlg',
contentTemplate : '', contentTemplate : '',
title : t.txtTitle, title : t.txtTitle,
items : [] items : [],
focusManager: true
}, options); }, options);
this.template = options.template || [ this.template = options.template || [
@ -123,7 +124,8 @@ define([
cls : 'input-group-nr', cls : 'input-group-nr',
data : this.conditions, data : this.conditions,
scrollAlwaysVisible: true, scrollAlwaysVisible: true,
editable : false editable : false,
takeFocusOnClose: true
}); });
this.cmbCondition1.setValue(Asc.c_oAscCustomAutoFilter.equals); this.cmbCondition1.setValue(Asc.c_oAscCustomAutoFilter.equals);
@ -135,7 +137,8 @@ define([
cls : 'input-group-nr', cls : 'input-group-nr',
data : this.conditions, data : this.conditions,
scrollAlwaysVisible: true, scrollAlwaysVisible: true,
editable : false editable : false,
takeFocusOnClose: true
}); });
this.cmbCondition2.setValue(0); this.cmbCondition2.setValue(0);
@ -157,7 +160,8 @@ define([
cls : 'input-group-nr', cls : 'input-group-nr',
menuStyle : 'min-width: 225px;max-height: 135px;', menuStyle : 'min-width: 225px;max-height: 135px;',
scrollAlwaysVisible: true, scrollAlwaysVisible: true,
data : [] data : [],
takeFocusOnClose: true
}); });
this.cmbValue2 = new Common.UI.ComboBox({ this.cmbValue2 = new Common.UI.ComboBox({
@ -165,7 +169,8 @@ define([
cls : 'input-group-nr', cls : 'input-group-nr',
menuStyle : 'min-width: 225px;max-height: 135px;', menuStyle : 'min-width: 225px;max-height: 135px;',
scrollAlwaysVisible: true, scrollAlwaysVisible: true,
data : [] data : [],
takeFocusOnClose: true
}); });
var comparator = function(item1, item2) { var comparator = function(item1, item2) {
@ -183,6 +188,8 @@ define([
this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this)); this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
this.loadDefaults(); this.loadDefaults();
this.focusManager.add([this.cmbCondition1, this.cmbValue1, this.cmbCondition2, this.cmbValue2], '.form-control');
}, },
show: function () { show: function () {
Common.UI.Window.prototype.show.call(this); Common.UI.Window.prototype.show.call(this);
@ -190,7 +197,7 @@ define([
var me = this; var me = this;
_.defer(function () { _.defer(function () {
if (me.cmbValue1) { if (me.cmbValue1) {
me.cmbValue1._input.focus(); me.cmbValue1.focus();
} }
}, 500); }, 500);
}, },
@ -314,7 +321,8 @@ define([
contentTemplate : '', contentTemplate : '',
title : t.txtTitle, title : t.txtTitle,
items : [], items : [],
buttons: ['ok', 'cancel'] buttons: ['ok', 'cancel'],
focusManager: true
}, options); }, options);
this.template = options.template || [ this.template = options.template || [
@ -352,7 +360,8 @@ define([
{ value: true, displayValue: this.txtTop }, { value: true, displayValue: this.txtTop },
{ value: false, displayValue: this.txtBottom } { value: false, displayValue: this.txtBottom }
], ],
editable : false editable : false,
takeFocusOnClose: true
}); });
this.cmbType.setValue(true); this.cmbType.setValue(true);
@ -368,7 +377,8 @@ define([
menuStyle : 'min-width: 85px;', menuStyle : 'min-width: 85px;',
cls : 'input-group-nr', cls : 'input-group-nr',
data : data, data : data,
editable : false editable : false,
takeFocusOnClose: true
}); });
this.cmbItem.setValue(false); this.cmbItem.setValue(false);
this.cmbItem.on('selected', _.bind(function(combo, record) { this.cmbItem.on('selected', _.bind(function(combo, record) {
@ -392,7 +402,8 @@ define([
cls : 'input-group-nr', cls : 'input-group-nr',
data : [], data : [],
scrollAlwaysVisible: true, scrollAlwaysVisible: true,
editable : false editable : false,
takeFocusOnClose: true
}); });
this.cmbFields.setVisible(this.type=='value'); this.cmbFields.setVisible(this.type=='value');
(this.type!=='value') && this.$window.find('#id-top10-lblby').addClass('hidden'); (this.type!=='value') && this.$window.find('#id-top10-lblby').addClass('hidden');
@ -400,6 +411,7 @@ define([
this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this)); this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
this.loadDefaults(); this.loadDefaults();
this.focusManager.add([this.cmbType, this.spnCount, this.cmbItem, this.cmbFields], '.form-control');
}, },
show: function () { show: function () {
Common.UI.Window.prototype.show.call(this); Common.UI.Window.prototype.show.call(this);
@ -407,7 +419,7 @@ define([
var me = this; var me = this;
_.defer(function () { _.defer(function () {
if (me.spnCount) { if (me.spnCount) {
me.spnCount.$input.focus(); me.spnCount.focus();
} }
}, 500); }, 500);
}, },
@ -518,7 +530,8 @@ define([
cls : 'filter-dlg', cls : 'filter-dlg',
contentTemplate : '', contentTemplate : '',
title : (options.type=='label') ? t.txtTitleLabel : t.txtTitleValue, title : (options.type=='label') ? t.txtTitleLabel : t.txtTitleValue,
items : [] items : [],
focusManager: true
}, options); }, options);
this.api = options.api; this.api = options.api;
@ -582,7 +595,8 @@ define([
cls : 'input-group-nr', cls : 'input-group-nr',
data : this.conditions, data : this.conditions,
scrollAlwaysVisible: true, scrollAlwaysVisible: true,
editable : false editable : false,
takeFocusOnClose: true
}); });
this.cmbCondition1.setValue(Asc.c_oAscCustomAutoFilter.equals); this.cmbCondition1.setValue(Asc.c_oAscCustomAutoFilter.equals);
this.cmbCondition1.on('selected', _.bind(function(combo, record) { this.cmbCondition1.on('selected', _.bind(function(combo, record) {
@ -593,7 +607,7 @@ define([
var me = this; var me = this;
_.defer(function () { _.defer(function () {
if (me.inputValue) { if (me.inputValue) {
me.inputValue._input.focus(); me.inputValue.focus();
} }
}, 10); }, 10);
}, this)); }, this));
@ -605,14 +619,15 @@ define([
cls : 'input-group-nr', cls : 'input-group-nr',
data : [], data : [],
scrollAlwaysVisible: true, scrollAlwaysVisible: true,
editable : false editable : false,
takeFocusOnClose: true
}); });
this.cmbFields.setVisible(this.type=='value'); this.cmbFields.setVisible(this.type=='value');
this.cmbFields.on('selected', _.bind(function(combo, record) { this.cmbFields.on('selected', _.bind(function(combo, record) {
var me = this; var me = this;
_.defer(function () { _.defer(function () {
if (me.inputValue) { if (me.inputValue) {
me.inputValue._input.focus(); me.inputValue.focus();
} }
}, 10); }, 10);
}, this)); }, this));
@ -636,6 +651,7 @@ define([
this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this)); this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
this.loadDefaults(); this.loadDefaults();
this.focusManager.add([this.cmbFields, this.cmbCondition1, this.inputValue, this.inputValue2], '.form-control');
}, },
show: function () { show: function () {
Common.UI.Window.prototype.show.call(this); Common.UI.Window.prototype.show.call(this);
@ -643,7 +659,7 @@ define([
var me = this; var me = this;
_.defer(function () { _.defer(function () {
if (me.inputValue) { if (me.inputValue) {
me.inputValue._input.focus(); me.inputValue.focus();
} }
}, 500); }, 500);
}, },
@ -1352,7 +1368,7 @@ define([
var me = this; var me = this;
if (this.input) { if (this.input) {
_.delay(function () { _.delay(function () {
me.input.$el.find('input').focus(); me.input.focus();
}, 500, this); }, 500, this);
} }
}, },
@ -1955,7 +1971,7 @@ define([
callback: function() { callback: function() {
me._skipCheckDocumentClick = false; me._skipCheckDocumentClick = false;
_.delay(function () { _.delay(function () {
me.input.$el.find('input').focus(); me.input.focus();
}, 100, this); }, 100, this);
} }
}); });

17
apps/spreadsheeteditor/main/app/view/PrintSettings.js
View file

@ -52,7 +52,8 @@ define([ 'text!spreadsheeteditor/main/app/template/PrintSettings.template',
alias: 'PrintSettings', alias: 'PrintSettings',
contentWidth: 280, contentWidth: 280,
height: 575, height: 575,
buttons: null buttons: null,
focusManager: true
}, },
initialize : function(options) { initialize : function(options) {
@ -93,6 +94,7 @@ define([ 'text!spreadsheeteditor/main/app/template/PrintSettings.template',
style : 'width: 132px;', style : 'width: 132px;',
menuStyle : 'min-width: 132px;max-height: 280px;', menuStyle : 'min-width: 132px;max-height: 280px;',
editable : false, editable : false,
takeFocusOnClose: true,
cls : 'input-group-nr', cls : 'input-group-nr',
data : [ data : [
{ value: Asc.c_oAscPrintType.ActiveSheets, displayValue: this.textCurrentSheet }, { value: Asc.c_oAscPrintType.ActiveSheets, displayValue: this.textCurrentSheet },
@ -113,7 +115,8 @@ define([ 'text!spreadsheeteditor/main/app/template/PrintSettings.template',
menuStyle : 'min-width: 242px;max-height: 280px;', menuStyle : 'min-width: 242px;max-height: 280px;',
editable : false, editable : false,
cls : 'input-group-nr', cls : 'input-group-nr',
data : [] data : [],
takeFocusOnClose: true
}); });
this.cmbPaperSize = new Common.UI.ComboBox({ this.cmbPaperSize = new Common.UI.ComboBox({
@ -121,6 +124,7 @@ define([ 'text!spreadsheeteditor/main/app/template/PrintSettings.template',
style : 'width: 242px;', style : 'width: 242px;',
menuStyle : 'max-height: 280px; min-width: 242px;', menuStyle : 'max-height: 280px; min-width: 242px;',
editable : false, editable : false,
takeFocusOnClose: true,
cls : 'input-group-nr', cls : 'input-group-nr',
data : [ data : [
{value:'215.9|279.4', displayValue:'US Letter (21,59cm x 27,94cm)', caption: 'US Letter'}, {value:'215.9|279.4', displayValue:'US Letter (21,59cm x 27,94cm)', caption: 'US Letter'},
@ -144,6 +148,7 @@ define([ 'text!spreadsheeteditor/main/app/template/PrintSettings.template',
style : 'width: 132px;', style : 'width: 132px;',
menuStyle : 'min-width: 132px;', menuStyle : 'min-width: 132px;',
editable : false, editable : false,
takeFocusOnClose: true,
cls : 'input-group-nr', cls : 'input-group-nr',
data : [ data : [
{ value: Asc.c_oAscPageOrientation.PagePortrait, displayValue: this.strPortrait }, { value: Asc.c_oAscPageOrientation.PagePortrait, displayValue: this.strPortrait },
@ -218,6 +223,7 @@ define([ 'text!spreadsheeteditor/main/app/template/PrintSettings.template',
style : 'width: 242px;', style : 'width: 242px;',
menuStyle : 'min-width: 242px;', menuStyle : 'min-width: 242px;',
editable : false, editable : false,
takeFocusOnClose: true,
cls : 'input-group-nr', cls : 'input-group-nr',
data : [ data : [
{ value: 0, displayValue: this.textActualSize }, { value: 0, displayValue: this.textActualSize },
@ -271,6 +277,13 @@ define([ 'text!spreadsheeteditor/main/app/template/PrintSettings.template',
var value = Common.localStorage.getItem("sse-hide-print-settings"); var value = Common.localStorage.getItem("sse-hide-print-settings");
this.extended = (value!==null && parseInt(value)==0); this.extended = (value!==null && parseInt(value)==0);
this.handlerShowDetails(this.btnHide); this.handlerShowDetails(this.btnHide);
this.focusManager.add([this.cmbRange, this.cmbSheet, this.cmbPaperSize, this.cmbPaperOrientation, this.cmbLayout, this.txtRangeTop, this.txtRangeLeft,
this.spnMarginTop, this.spnMarginBottom, this.spnMarginLeft, this.spnMarginRight], '.form-control');
var me = this;
setTimeout(function(){
me.cmbRange.focus();
},100);
}, },
addCustomScale: function (add) { addCustomScale: function (add) {

18
apps/spreadsheeteditor/main/app/view/PrintTitlesDialog.js
View file

@ -50,7 +50,8 @@ define([
style: 'min-width: 216px;', style: 'min-width: 216px;',
cls: 'modal-dlg', cls: 'modal-dlg',
id: 'window-page-margins', id: 'window-page-margins',
buttons: ['ok', 'cancel'] buttons: ['ok', 'cancel'],
focusManager: true
}, },
initialize : function(options) { initialize : function(options) {
@ -184,15 +185,20 @@ define([
$window.find('input').on('keypress', _.bind(this.onKeyPress, this)); $window.find('input').on('keypress', _.bind(this.onKeyPress, this));
this.setSettings(); this.setSettings();
this.focusManager.add([this.txtRangeTop, this.txtRangeLeft], '.form-control');
setTimeout(function(){
me.txtRangeTop.focus();
},100);
}, },
isRangeValid: function() { isRangeValid: function() {
if (this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.PrintTitles, this.txtRangeTop.getValue(), false) == Asc.c_oAscError.ID.DataRangeError) { if (this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.PrintTitles, this.txtRangeTop.getValue(), false) == Asc.c_oAscError.ID.DataRangeError) {
this.txtRangeTop.cmpEl.find('input').focus(); this.txtRangeTop.focus();
return false; return false;
} }
if (this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.PrintTitles, this.txtRangeLeft.getValue(), false) == Asc.c_oAscError.ID.DataRangeError) { if (this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.PrintTitles, this.txtRangeLeft.getValue(), false) == Asc.c_oAscError.ID.DataRangeError) {
this.txtRangeLeft.cmpEl.find('input').focus(); this.txtRangeLeft.focus();
return false; return false;
} }
return true; return true;
@ -260,6 +266,9 @@ define([
handler: handlerDlg handler: handlerDlg
}).on('close', function() { }).on('close', function() {
me.show(); me.show();
_.delay(function(){
txtRange.focus();
},1);
}); });
var xy = me.$window.offset(); var xy = me.$window.offset();
@ -279,6 +288,9 @@ define([
this.dataRangeTop = value; this.dataRangeTop = value;
else else
this.dataRangeLeft = value; this.dataRangeLeft = value;
_.delay(function(){
txtRange.focus();
},1);
} }
}, },

18
apps/spreadsheeteditor/main/app/view/ScaleDialog.js
View file

@ -50,7 +50,8 @@ define([
header: true, header: true,
style: 'min-width: 215px;', style: 'min-width: 215px;',
cls: 'modal-dlg', cls: 'modal-dlg',
buttons: ['ok', 'cancel'] buttons: ['ok', 'cancel'],
focusManager: true
}, },
initialize : function(options) { initialize : function(options) {
@ -126,7 +127,8 @@ define([
menuStyle : 'min-width: 90px;', menuStyle : 'min-width: 90px;',
editable: true, editable: true,
data: this.arrDataScale, data: this.arrDataScale,
scrollAlwaysVisible: true scrollAlwaysVisible: true,
takeFocusOnClose: true
}).on('selected', _.bind(this.changeWidthHeight, this, 'width')) }).on('selected', _.bind(this.changeWidthHeight, this, 'width'))
.on('changed:after', _.bind(this.changeWidthHeight, this, 'width')) .on('changed:after', _.bind(this.changeWidthHeight, this, 'width'))
.on('changed:before', _.bind(this.onChangeComboScale, this, 'width')); .on('changed:before', _.bind(this.onChangeComboScale, this, 'width'));
@ -138,7 +140,8 @@ define([
menuStyle : 'min-width: 90px;', menuStyle : 'min-width: 90px;',
editable: true, editable: true,
data: this.arrDataScale, data: this.arrDataScale,
scrollAlwaysVisible: true scrollAlwaysVisible: true,
takeFocusOnClose: true
}).on('selected', _.bind(this.changeWidthHeight, this, 'height')) }).on('selected', _.bind(this.changeWidthHeight, this, 'height'))
.on('changed:after', _.bind(this.changeWidthHeight, this, 'height')) .on('changed:after', _.bind(this.changeWidthHeight, this, 'height'))
.on('changed:before', _.bind(this.onChangeComboScale, this, 'height')); .on('changed:before', _.bind(this.onChangeComboScale, this, 'height'));
@ -163,6 +166,8 @@ define([
$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this)); $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
this.afterRender(); this.afterRender();
this.focusManager.add([this.cmbScaleWidth, this.cmbScaleHeight, this.spnScale], '.form-control');
}, },
afterRender: function() { afterRender: function() {
@ -250,6 +255,13 @@ define([
} }
this.spnScale.setValue((scale !== null && scale !== undefined) ? scale : '', true); this.spnScale.setValue((scale !== null && scale !== undefined) ? scale : '', true);
var me = this;
setTimeout(function(){
if (me.radioScaleTo.getValue())
me.spnScale.focus();
else
me.cmbScaleWidth.focus();
},100);
} }
}, },

9
apps/spreadsheeteditor/main/app/view/ValueFieldSettingsDialog.js
View file

@ -49,7 +49,8 @@ define([
SSE.Views.ValueFieldSettingsDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({ SSE.Views.ValueFieldSettingsDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
options: { options: {
contentWidth: 284, contentWidth: 284,
height: 220 height: 220,
focusManager: true
}, },
initialize : function(options) { initialize : function(options) {
@ -129,6 +130,7 @@ define([
menuStyle: 'min-width: 264px;max-height:160px;', menuStyle: 'min-width: 264px;max-height:160px;',
scrollAlwaysVisible: true, scrollAlwaysVisible: true,
editable: false, editable: false,
takeFocusOnClose: true,
data: [ data: [
{ value: Asc.c_oAscDataConsolidateFunction.Sum, displayValue: this.txtSum }, { value: Asc.c_oAscDataConsolidateFunction.Sum, displayValue: this.txtSum },
{ value: Asc.c_oAscDataConsolidateFunction.Count, displayValue: this.txtCount }, { value: Asc.c_oAscDataConsolidateFunction.Count, displayValue: this.txtCount },
@ -191,6 +193,11 @@ define([
this.lblSourceName = this.$window.find('#value-field-settings-source'); this.lblSourceName = this.$window.find('#value-field-settings-source');
this.afterRender(); this.afterRender();
this.focusManager.add([this.inputCustomName, this.cmbSummarize], '.form-control');
setTimeout(function(){
me.inputCustomName.focus();
},100);
}, },
afterRender: function() { afterRender: function() {