From f6b7b82b077cffc897339618bcf8d3dc2ed5a3a3 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 2 Oct 2020 12:43:59 +0300 Subject: [PATCH] Add focus manager to advansed settings --- .../common/main/lib/view/AutoCorrectDialog.js | 17 +++++-- .../main/app/view/CaptionDialog.js | 15 ++++++- .../main/app/view/ControlSettingsDialog.js | 36 +++++++++++++-- .../main/app/view/DropcapSettingsAdvanced.js | 44 ++++++++++++++++--- 4 files changed, 99 insertions(+), 13 deletions(-) diff --git a/apps/common/main/lib/view/AutoCorrectDialog.js b/apps/common/main/lib/view/AutoCorrectDialog.js index 044798b37..de663ec72 100644 --- a/apps/common/main/lib/view/AutoCorrectDialog.js +++ b/apps/common/main/lib/view/AutoCorrectDialog.js @@ -51,7 +51,8 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template', contentWidth: 375, height: 430, buttons: null, - toggleGroup: 'autocorrect-dialog-group' + toggleGroup: 'autocorrect-dialog-group', + focusManager: true }, initialize : function(options) { @@ -177,7 +178,8 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template', '
<%= by %>
', '' ].join('')), - scrollAlwaysVisible: true + scrollAlwaysVisible: true, + tabindex: 1 }); this.mathList.on('item:select', _.bind(this.onSelectMathItem, this)); @@ -257,7 +259,8 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template', itemTemplate: _.template([ '
<%= value %>
' ].join('')), - scrollAlwaysVisible: true + scrollAlwaysVisible: true, + tabindex: 1 }); this.mathRecList.on('item:select', _.bind(this.onSelectRecItem, this)); @@ -352,6 +355,14 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template', this.btnsCategory[1].on('click', _.bind(this.onRecCategoryClick, this, false)); this.btnsCategory[2] && this.btnsCategory[2].on('click', _.bind(this.updateFooterButtons, this, true)); + // 0 tab + this.focusManager.add([this.inputReplace, this.inputBy], '.form-control'); + this.focusManager.add(this.mathList, '.listview'); + + // 1 tab + this.focusManager.add([this.inputRecFind], '.form-control'); + this.focusManager.add(this.mathRecList, '.listview'); + this.afterRender(); }, diff --git a/apps/documenteditor/main/app/view/CaptionDialog.js b/apps/documenteditor/main/app/view/CaptionDialog.js index 570b63aad..f50371a53 100644 --- a/apps/documenteditor/main/app/view/CaptionDialog.js +++ b/apps/documenteditor/main/app/view/CaptionDialog.js @@ -49,7 +49,8 @@ define([ DE.Views.CaptionDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({ options: { contentWidth: 351, - height: 350 + height: 350, + focusManager: true }, initialize : function(options) { @@ -152,6 +153,7 @@ define([ menuStyle: 'min-width: 75px;', editable: false, disabled: !this.isObject, + takeFocusOnClose: true, data: [ { displayValue: this.textBefore, value: 1 }, { displayValue: this.textAfter, value: 0 } @@ -180,6 +182,7 @@ define([ cls: 'input-group-nr', menuStyle: 'min-width: 160px;max-height:155px;', editable: false, + takeFocusOnClose: true, data: this.arrLabel, alwaysVisibleY: true }); @@ -264,6 +267,7 @@ define([ cls: 'input-group-nr', menuStyle: 'min-width: 160px;', editable: false, + takeFocusOnClose: true, data: [ { displayValue: '1, 2, 3,...', value: Asc.c_oAscNumberingFormat.Decimal, maskExp: /[0-9]/, defValue: 1 }, { displayValue: 'a, b, c,...', value: Asc.c_oAscNumberingFormat.LowerLetter, maskExp: /[a-z]/, defValue: 'a' }, @@ -305,6 +309,7 @@ define([ cls: 'input-group-nr', menuStyle: 'min-width: 160px;max-height:135px;', editable: false, + takeFocusOnClose: true, disabled: true, data: this._arrLevel }); @@ -320,6 +325,7 @@ define([ cls: 'input-group-nr', menuStyle: 'min-width: 160px;', editable: false, + takeFocusOnClose: true, disabled: true, data: [ { displayValue: '- (' + this.textHyphen + ')', value: '-' }, @@ -338,11 +344,18 @@ define([ this.lblExample = this.$window.find('#caption-label-example'); + this.focusManager.add([this.txtCaption, this.cmbPosition, this.cmbLabel, this.cmbNumbering, this.cmbChapter, this.cmbSeparator], '.form-control'); + this.afterRender(); }, afterRender: function() { this._setDefaults(this.props); + + var me = this; + setTimeout(function(){ + me.txtCaption.focus(); + }, 100); }, show: function() { diff --git a/apps/documenteditor/main/app/view/ControlSettingsDialog.js b/apps/documenteditor/main/app/view/ControlSettingsDialog.js index 0510ce273..aff30e1ec 100644 --- a/apps/documenteditor/main/app/view/ControlSettingsDialog.js +++ b/apps/documenteditor/main/app/view/ControlSettingsDialog.js @@ -53,7 +53,8 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', contentWidth: 310, height: 392, toggleGroup: 'control-adv-settings-group', - storageName: 'de-control-settings-adv-category' + storageName: 'de-control-settings-adv-category', + focusManager: true }, initialize : function(options) { @@ -120,6 +121,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', cls: 'input-group-nr', menuStyle: 'min-width: 120px;', editable: false, + takeFocusOnClose: true, data: [ { displayValue: this.textBox, value: Asc.c_oAscSdtAppearance.Frame }, { displayValue: this.textNone, value: Asc.c_oAscSdtAppearance.Hidden } @@ -168,7 +170,8 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', '
<%= name %>
', '
<%= value %>
', '' - ].join('')) + ].join('')), + tabindex: 1 }); this.list.on('item:select', _.bind(this.onSelectItem, this)); @@ -212,6 +215,7 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', menuStyle : 'min-width: 100%; max-height: 185px;', cls : 'input-group-nr', editable : false, + takeFocusOnClose: true, data : data, search: true, scrollAlwaysVisible: true @@ -224,7 +228,8 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', this.listFormats = new Common.UI.ListView({ el: $('#control-settings-format'), store: new Common.UI.DataViewStore(), - scrollAlwaysVisible: true + scrollAlwaysVisible: true, + tabindex: 1 }); this.listFormats.on('item:select', _.bind(this.onSelectFormat, this)); @@ -345,9 +350,34 @@ define([ 'text!documenteditor/main/app/template/ControlSettingsDialog.template', this.spnWidth.setDisabled(!checked); }, this)); + // 0 tab + this.focusManager.add([this.txtName, this.txtTag, this.txtPlaceholder, this.cmbShow], '.form-control'); + + // 2 tab + this.focusManager.add([this.list], '.listview'); + + // 3 tab + this.focusManager.add([this.txtDate], '.form-control'); + this.focusManager.add([this.listFormats], '.listview'); + this.focusManager.add([this.cmbLang], '.form-control'); + this.afterRender(); }, + onCategoryClick: function(btn, index) { + Common.Views.AdvancedSettingsWindow.prototype.onCategoryClick.call(this, btn, index); + + var me = this; + setTimeout(function(){ + if (index==0) { + me.txtName.focus(); + } else if (index==2) { + me.list.focus(); + } else if (index==3) + me.txtDate.focus(); + }, 100); + }, + onColorsSelect: function(btn, color) { var clr_item = this.btnColor.menu.$el.find('#control-settings-system-color > a'); clr_item.hasClass('selected') && clr_item.removeClass('selected'); diff --git a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js index 869d0b59e..a27d73ab9 100644 --- a/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js +++ b/apps/documenteditor/main/app/view/DropcapSettingsAdvanced.js @@ -62,7 +62,8 @@ define([ contentWidth: 320, height : 380, toggleGroup : 'dropcap-adv-settings-group', - storageName: 'de-dropcap-settings-adv-category' + storageName: 'de-dropcap-settings-adv-category', + focusManager: true }, initialize : function(options) { @@ -141,6 +142,7 @@ define([ el : $('#drop-advanced-input-bordersize'), style : 'width: 90px;', store : new Backbone.Collection(), + takeFocusOnClose: true, data: [ {id: Common.UI.getId(), displayValue: this.txtNoBorders, value: 0, borderstyle: ''}, {id: Common.UI.getId(), displayValue: '0.5 ' + txtPt, value: 0.5, pxValue: 0.5, offsety: 0}, @@ -353,7 +355,8 @@ define([ menuStyle : 'min-width: 55px;max-height: 236px;', store : new Common.Collections.Fonts(), recent : 0, - hint: this.tipFontName + hint: this.tipFontName, + takeFocusOnClose: true }) .on('selected', _.bind(function(combo, record) { if (me._changedProps) { @@ -418,6 +421,7 @@ define([ cls : 'input-group-nr', menuStyle : 'min-width: 130px;', editable : false, + takeFocusOnClose: true, data : this._arrWidth }) .on('selected', _.bind(function(combo, record) { @@ -457,6 +461,7 @@ define([ cls : 'input-group-nr', menuStyle : 'min-width: 130px;', editable : false, + takeFocusOnClose: true, data : this._arrHeight }) .on('selected', _.bind(function(combo, record) { @@ -539,7 +544,8 @@ define([ el : $('#frame-advanced-input-hposition'), cls : 'input-group-nr', menuStyle : 'min-width: 130px;', - data : this._arrHAlign + data : this._arrHAlign, + takeFocusOnClose: true }) .on('changed:after', _.bind(function(combo, record) { if (me._changedProps) { @@ -564,7 +570,8 @@ define([ cls : 'input-group-nr', menuStyle : 'min-width: 95px;', data : this._arrHRelative, - editable : false + editable : false, + takeFocusOnClose: true }) .on('selected', _.bind(function(combo, record) { if (me._changedProps) { @@ -582,7 +589,8 @@ define([ el : $('#frame-advanced-input-vposition'), cls : 'input-group-nr', menuStyle : 'min-width: 130px;', - data : this._arrVAlign + data : this._arrVAlign, + takeFocusOnClose: true }) .on('changed:after', _.bind(function(combo, record) { if (me._changedProps) { @@ -607,7 +615,8 @@ define([ cls : 'input-group-nr', menuStyle : 'min-width: 95px;', data : this._arrVRelative, - editable : false + editable : false, + takeFocusOnClose: true }) .on('selected', _.bind(function(combo, record) { if (me._changedProps) { @@ -632,6 +641,15 @@ define([ this.on('show', _.bind(this.onShowDialog, this)); this.afterRender(); + + // 0 tab + this.focusManager.add([this.cmbWidth, this.spnWidth, this.cmbHeight, this.spnHeight, this.cmbHAlign, this.cmbHRelative, this.spnX, + this.cmbVAlign, this.cmbVRelative, this.spnY], '.form-control'); + // 1 tab + this.focusManager.add([this.cmbFonts, this.spnRowHeight, this.numDistance], '.form-control'); + + // 3 tab + this.focusManager.add([this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight], '.form-control'); }, afterRender: function() { @@ -687,6 +705,20 @@ define([ } }, + onCategoryClick: function(btn, index) { + Common.Views.AdvancedSettingsWindow.prototype.onCategoryClick.call(this, btn, index); + + var me = this; + setTimeout(function(){ + if (index==0) { + me.cmbWidth.focus(); + } else if (index==1) { + me.cmbFonts.focus(); + } else if (index==3) + me.spnMarginTop.focus(); + }, 100); + }, + getSettings: function() { if (this.ChangedBorders === null) { this._changedProps.put_Borders(this.Borders);