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',
contentTemplate : '',
title : t.txtTitle,
items : []
items : [],
focusManager: true
}, options);
this.template = options.template || [
@ -123,7 +124,8 @@ define([
cls : 'input-group-nr',
data : this.conditions,
scrollAlwaysVisible: true,
editable : false
editable : false,
takeFocusOnClose: true
});
this.cmbCondition1.setValue(Asc.c_oAscCustomAutoFilter.equals);
@ -135,7 +137,8 @@ define([
cls : 'input-group-nr',
data : this.conditions,
scrollAlwaysVisible: true,
editable : false
editable : false,
takeFocusOnClose: true
});
this.cmbCondition2.setValue(0);
@ -157,7 +160,8 @@ define([
cls : 'input-group-nr',
menuStyle : 'min-width: 225px;max-height: 135px;',
scrollAlwaysVisible: true,
data : []
data : [],
takeFocusOnClose: true
});
this.cmbValue2 = new Common.UI.ComboBox({
@ -165,7 +169,8 @@ define([
cls : 'input-group-nr',
menuStyle : 'min-width: 225px;max-height: 135px;',
scrollAlwaysVisible: true,
data : []
data : [],
takeFocusOnClose: true
});
var comparator = function(item1, item2) {
@ -183,6 +188,8 @@ define([
this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
this.loadDefaults();
this.focusManager.add([this.cmbCondition1, this.cmbValue1, this.cmbCondition2, this.cmbValue2], '.form-control');
},
show: function () {
Common.UI.Window.prototype.show.call(this);
@ -190,7 +197,7 @@ define([
var me = this;
_.defer(function () {
if (me.cmbValue1) {
me.cmbValue1._input.focus();
me.cmbValue1.focus();
}
}, 500);
},
@ -314,7 +321,8 @@ define([
contentTemplate : '',
title : t.txtTitle,
items : [],
buttons: ['ok', 'cancel']
buttons: ['ok', 'cancel'],
focusManager: true
}, options);
this.template = options.template || [
@ -352,7 +360,8 @@ define([
{ value: true, displayValue: this.txtTop },
{ value: false, displayValue: this.txtBottom }
],
editable : false
editable : false,
takeFocusOnClose: true
});
this.cmbType.setValue(true);
@ -368,7 +377,8 @@ define([
menuStyle : 'min-width: 85px;',
cls : 'input-group-nr',
data : data,
editable : false
editable : false,
takeFocusOnClose: true
});
this.cmbItem.setValue(false);
this.cmbItem.on('selected', _.bind(function(combo, record) {
@ -392,7 +402,8 @@ define([
cls : 'input-group-nr',
data : [],
scrollAlwaysVisible: true,
editable : false
editable : false,
takeFocusOnClose: true
});
this.cmbFields.setVisible(this.type=='value');
(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.loadDefaults();
this.focusManager.add([this.cmbType, this.spnCount, this.cmbItem, this.cmbFields], '.form-control');
},
show: function () {
Common.UI.Window.prototype.show.call(this);
@ -407,7 +419,7 @@ define([
var me = this;
_.defer(function () {
if (me.spnCount) {
me.spnCount.$input.focus();
me.spnCount.focus();
}
}, 500);
},
@ -518,7 +530,8 @@ define([
cls : 'filter-dlg',
contentTemplate : '',
title : (options.type=='label') ? t.txtTitleLabel : t.txtTitleValue,
items : []
items : [],
focusManager: true
}, options);
this.api = options.api;
@ -582,7 +595,8 @@ define([
cls : 'input-group-nr',
data : this.conditions,
scrollAlwaysVisible: true,
editable : false
editable : false,
takeFocusOnClose: true
});
this.cmbCondition1.setValue(Asc.c_oAscCustomAutoFilter.equals);
this.cmbCondition1.on('selected', _.bind(function(combo, record) {
@ -593,7 +607,7 @@ define([
var me = this;
_.defer(function () {
if (me.inputValue) {
me.inputValue._input.focus();
me.inputValue.focus();
}
}, 10);
}, this));
@ -605,14 +619,15 @@ define([
cls : 'input-group-nr',
data : [],
scrollAlwaysVisible: true,
editable : false
editable : false,
takeFocusOnClose: true
});
this.cmbFields.setVisible(this.type=='value');
this.cmbFields.on('selected', _.bind(function(combo, record) {
var me = this;
_.defer(function () {
if (me.inputValue) {
me.inputValue._input.focus();
me.inputValue.focus();
}
}, 10);
}, this));
@ -636,6 +651,7 @@ define([
this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
this.loadDefaults();
this.focusManager.add([this.cmbFields, this.cmbCondition1, this.inputValue, this.inputValue2], '.form-control');
},
show: function () {
Common.UI.Window.prototype.show.call(this);
@ -643,7 +659,7 @@ define([
var me = this;
_.defer(function () {
if (me.inputValue) {
me.inputValue._input.focus();
me.inputValue.focus();
}
}, 500);
},
@ -1352,7 +1368,7 @@ define([
var me = this;
if (this.input) {
_.delay(function () {
me.input.$el.find('input').focus();
me.input.focus();
}, 500, this);
}
},
@ -1955,7 +1971,7 @@ define([
callback: function() {
me._skipCheckDocumentClick = false;
_.delay(function () {
me.input.$el.find('input').focus();
me.input.focus();
}, 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',
contentWidth: 280,
height: 575,
buttons: null
buttons: null,
focusManager: true
},
initialize : function(options) {
@ -93,6 +94,7 @@ define([ 'text!spreadsheeteditor/main/app/template/PrintSettings.template',
style : 'width: 132px;',
menuStyle : 'min-width: 132px;max-height: 280px;',
editable : false,
takeFocusOnClose: true,
cls : 'input-group-nr',
data : [
{ 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;',
editable : false,
cls : 'input-group-nr',
data : []
data : [],
takeFocusOnClose: true
});
this.cmbPaperSize = new Common.UI.ComboBox({
@ -121,6 +124,7 @@ define([ 'text!spreadsheeteditor/main/app/template/PrintSettings.template',
style : 'width: 242px;',
menuStyle : 'max-height: 280px; min-width: 242px;',
editable : false,
takeFocusOnClose: true,
cls : 'input-group-nr',
data : [
{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;',
menuStyle : 'min-width: 132px;',
editable : false,
takeFocusOnClose: true,
cls : 'input-group-nr',
data : [
{ value: Asc.c_oAscPageOrientation.PagePortrait, displayValue: this.strPortrait },
@ -218,6 +223,7 @@ define([ 'text!spreadsheeteditor/main/app/template/PrintSettings.template',
style : 'width: 242px;',
menuStyle : 'min-width: 242px;',
editable : false,
takeFocusOnClose: true,
cls : 'input-group-nr',
data : [
{ 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");
this.extended = (value!==null && parseInt(value)==0);
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) {

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

@ -50,7 +50,8 @@ define([
style: 'min-width: 216px;',
cls: 'modal-dlg',
id: 'window-page-margins',
buttons: ['ok', 'cancel']
buttons: ['ok', 'cancel'],
focusManager: true
},
initialize : function(options) {
@ -184,15 +185,20 @@ define([
$window.find('input').on('keypress', _.bind(this.onKeyPress, this));
this.setSettings();
this.focusManager.add([this.txtRangeTop, this.txtRangeLeft], '.form-control');
setTimeout(function(){
me.txtRangeTop.focus();
},100);
},
isRangeValid: function() {
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;
}
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 true;
@ -260,6 +266,9 @@ define([
handler: handlerDlg
}).on('close', function() {
me.show();
_.delay(function(){
txtRange.focus();
},1);
});
var xy = me.$window.offset();
@ -279,6 +288,9 @@ define([
this.dataRangeTop = value;
else
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,
style: 'min-width: 215px;',
cls: 'modal-dlg',
buttons: ['ok', 'cancel']
buttons: ['ok', 'cancel'],
focusManager: true
},
initialize : function(options) {
@ -126,7 +127,8 @@ define([
menuStyle : 'min-width: 90px;',
editable: true,
data: this.arrDataScale,
scrollAlwaysVisible: true
scrollAlwaysVisible: true,
takeFocusOnClose: true
}).on('selected', _.bind(this.changeWidthHeight, this, 'width'))
.on('changed:after', _.bind(this.changeWidthHeight, this, 'width'))
.on('changed:before', _.bind(this.onChangeComboScale, this, 'width'));
@ -138,7 +140,8 @@ define([
menuStyle : 'min-width: 90px;',
editable: true,
data: this.arrDataScale,
scrollAlwaysVisible: true
scrollAlwaysVisible: true,
takeFocusOnClose: true
}).on('selected', _.bind(this.changeWidthHeight, this, 'height'))
.on('changed:after', _.bind(this.changeWidthHeight, 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));
this.afterRender();
this.focusManager.add([this.cmbScaleWidth, this.cmbScaleHeight, this.spnScale], '.form-control');
},
afterRender: function() {
@ -250,6 +255,13 @@ define([
}
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({
options: {
contentWidth: 284,
height: 220
height: 220,
focusManager: true
},
initialize : function(options) {
@ -129,6 +130,7 @@ define([
menuStyle: 'min-width: 264px;max-height:160px;',
scrollAlwaysVisible: true,
editable: false,
takeFocusOnClose: true,
data: [
{ value: Asc.c_oAscDataConsolidateFunction.Sum, displayValue: this.txtSum },
{ value: Asc.c_oAscDataConsolidateFunction.Count, displayValue: this.txtCount },
@ -191,6 +193,11 @@ define([
this.lblSourceName = this.$window.find('#value-field-settings-source');
this.afterRender();
this.focusManager.add([this.inputCustomName, this.cmbSummarize], '.form-control');
setTimeout(function(){
me.inputCustomName.focus();
},100);
},
afterRender: function() {