From 666e737fa8dc9f1f2008ed7ae7cd074c79813f9f Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Sat, 26 Sep 2020 17:01:53 +0300 Subject: [PATCH] [SSE] Add focus manager for modal dialogs --- .../main/app/view/AutoFilterDialog.js | 54 ++++++++++++------- .../main/app/view/PrintSettings.js | 17 +++++- .../main/app/view/PrintTitlesDialog.js | 18 +++++-- .../main/app/view/ScaleDialog.js | 18 +++++-- .../main/app/view/ValueFieldSettingsDialog.js | 9 +++- 5 files changed, 88 insertions(+), 28 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/AutoFilterDialog.js b/apps/spreadsheeteditor/main/app/view/AutoFilterDialog.js index 1d34eed6e..d836b6875 100644 --- a/apps/spreadsheeteditor/main/app/view/AutoFilterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/AutoFilterDialog.js @@ -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); } }); diff --git a/apps/spreadsheeteditor/main/app/view/PrintSettings.js b/apps/spreadsheeteditor/main/app/view/PrintSettings.js index 752006fbe..630e3dc7a 100644 --- a/apps/spreadsheeteditor/main/app/view/PrintSettings.js +++ b/apps/spreadsheeteditor/main/app/view/PrintSettings.js @@ -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) { diff --git a/apps/spreadsheeteditor/main/app/view/PrintTitlesDialog.js b/apps/spreadsheeteditor/main/app/view/PrintTitlesDialog.js index 8d04fd18d..a303c4b38 100644 --- a/apps/spreadsheeteditor/main/app/view/PrintTitlesDialog.js +++ b/apps/spreadsheeteditor/main/app/view/PrintTitlesDialog.js @@ -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); } }, diff --git a/apps/spreadsheeteditor/main/app/view/ScaleDialog.js b/apps/spreadsheeteditor/main/app/view/ScaleDialog.js index f9cdd2171..e8e633df5 100644 --- a/apps/spreadsheeteditor/main/app/view/ScaleDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ScaleDialog.js @@ -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); } }, diff --git a/apps/spreadsheeteditor/main/app/view/ValueFieldSettingsDialog.js b/apps/spreadsheeteditor/main/app/view/ValueFieldSettingsDialog.js index a1de6916f..00a9bf28f 100644 --- a/apps/spreadsheeteditor/main/app/view/ValueFieldSettingsDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ValueFieldSettingsDialog.js @@ -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() {