Refactoring setting focus

apps/common/main/lib/component/FocusManager.js

@@ -150,10 +150,8 @@ Common.UI.FocusManager = new(function() {
                 addTraps(_windows[e.cid]);
             }
 
-            if (e && e.getDefaultFocusableComponent())
+            var el = e ? e.getDefaultFocusableComponent() : null;
-                setTimeout(function(){
+            el && setTimeout(function(){ el.focus(); }, 100);
-                    e.getDefaultFocusableComponent().focus();
-                }, 100);
         },
         'modal:close': function(e, last) {
             if (e && e.cid && _windows[e.cid]) {

apps/common/main/lib/component/Window.js

@@ -985,7 +985,6 @@ define([
             },
 
             getDefaultFocusableComponent: function() {
-                return undefined;
             },
 
             cancelButtonText: 'Cancel',

apps/common/main/lib/view/ExtendedColorDialog.js

@@ -150,6 +150,10 @@ define([
             return [this.spinR, this.spinG, this.spinB, {cmp: this.textColor, selector: 'input'}];
         },
 
+        getDefaultFocusableComponent: function () {
+            return this.getChild('#extended-text-color');
+        },
+
         onChangeColor: function(o, color) {
             this.colorNew.css({'background-color' : color});
 
@@ -272,15 +276,6 @@ define([
             me.stopevents = false;
         },
 
-        show: function() {
-            Common.UI.Window.prototype.show.apply(this, arguments);
-
-            var me = this;
-            _.delay(function(){
-                me.getChild('#extended-text-color').focus();
-            },50);
-        },
-
         onPrimary: function() {
             this.trigger('onmodalresult', 1);
             this.close(true);

apps/common/main/lib/view/InsertTableDialog.js

@@ -105,17 +105,16 @@ define([
             });
 //            this.udColumns.on('entervalue', _.bind(this.onPrimary, this));
 //            this.udRows.on('entervalue', _.bind(this.onPrimary, this));
-            var me = this;
-            setTimeout(function(){
-                me.udColumns.focus();
-            }, 100);
-
         },
 
         getFocusedComponents: function() {
             return [this.udColumns, this.udRows];
         },
 
+        getDefaultFocusableComponent: function () {
+            return this.udColumns;
+        },
+
         onBtnClick: function(event) {
             if (this.options.handler) {
                 this.options.handler.call(this, event.currentTarget.attributes['result'].value, {

apps/documenteditor/main/app/view/CaptionDialog.js

@@ -350,17 +350,12 @@ define([
             return [this.txtCaption, this.cmbPosition, this.cmbLabel, this.cmbNumbering, this.cmbChapter, this.cmbSeparator];
         },
 
-        afterRender: function() {
+        getDefaultFocusableComponent: function () {
-            this._setDefaults(this.props);
+            return this.txtCaption;
-
-            var me = this;
-            setTimeout(function(){
-                me.txtCaption.focus();
-            }, 100);
         },
 
-        show: function() {
+        afterRender: function() {
-            Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
+            this._setDefaults(this.props);
         },
 
         close: function() {

apps/documenteditor/main/app/view/CellsAddDialog.js

@@ -127,17 +127,16 @@ define([
 
             var $window = this.getChild();
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
-
-            var me = this;
-            setTimeout(function(){
-                me.spnCount.focus();
-            }, 100);
         },
 
         getFocusedComponents: function() {
             return [this.cmbRowCol, this.spnCount];
         },
 
+        getDefaultFocusableComponent: function () {
+            return this.spnCount;
+        },
+
         _handleInput: function(state) {
             if (this.options.handler) {
                 this.options.handler.call(this, state, this.getSettings());

apps/documenteditor/main/app/view/DateTimeDialog.js

@@ -173,16 +173,16 @@ define([
             });
 
             this._setDefaults();
-
-            setTimeout(function(){
-                me.cmbLang.focus();
-            }, 100);
         },
 
         getFocusedComponents: function() {
             return [this.cmbLang, {cmp: this.listFormats, selector: '.listview'}];
         },
 
+        getDefaultFocusableComponent: function () {
+            return this.cmbLang;
+        },
+
         _setDefaults: function () {
             this.props = new Asc.CAscDateTime();
             if (this.lang) {

apps/documenteditor/main/app/view/EditListItemDialog.js

@@ -129,13 +129,8 @@ define([
             return [this.inputName, this.inputValue];
         },
 
-        show: function() {
+        getDefaultFocusableComponent: function () {
-            Common.UI.Window.prototype.show.apply(this, arguments);
+            return this.inputName;
-
-            var me = this;
-            _.delay(function(){
-                me.inputName.focus();
-            },50);
         },
 
         onPrimary: function(event) {

apps/documenteditor/main/app/view/ListSettingsDialog.js

@@ -358,10 +358,6 @@ define([
             });
         },
 
-        show: function() {
-            Common.UI.Window.prototype.show.apply(this, arguments);
-        },
-
         updateThemeColors: function() {
             this.colors.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
         },

apps/documenteditor/main/app/view/NoteSettingsDialog.js

@@ -286,17 +286,12 @@ define([
             return [this.cmbFootnote, this.cmbEndnote, this.cmbFormat, this.spnStart, this.cmbNumbering, this.txtCustom, this.cmbApply];
         },
 
-        afterRender: function() {
+        getDefaultFocusableComponent: function () {
-            this._setDefaults(this.props);
+            return this.cmbFormat;
-
-            var me = this;
-            setTimeout(function(){
-                me.cmbFormat.focus();
-            }, 100);
         },
 
-        show: function() {
+        afterRender: function() {
-            Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
+            this._setDefaults(this.props);
         },
 
         _setDefaults: function (props) {

apps/documenteditor/main/app/view/PageMarginsDialog.js

@@ -306,17 +306,16 @@ define([
             this.window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
 
             this.updateMetricUnit();
-
-            var me = this;
-            setTimeout(function(){
-                me.spnTop.focus();
-            }, 100);
         },
 
         getFocusedComponents: function() {
             return [this.spnTop, this.spnBottom, this.spnLeft, this.spnRight, this.spnGutter, this.cmbGutterPosition, this.cmbOrientation, this.cmbMultiplePages];
         },
 
+        getDefaultFocusableComponent: function () {
+            return this.spnTop;
+        },
+
         _handleInput: function(state) {
             if (this.options.handler) {
                 if (state == 'ok') {

apps/documenteditor/main/app/view/PageSizeDialog.js

@@ -167,17 +167,16 @@ define([
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
 
             this.updateMetricUnit();
-
-            var me = this;
-            setTimeout(function(){
-                me.cmbPreset.focus();
-            }, 100);
         },
 
         getFocusedComponents: function() {
             return [this.cmbPreset, this.spnWidth, this.spnHeight];
         },
 
+        getDefaultFocusableComponent: function () {
+            return this.cmbPreset;
+        },
+
         _handleInput: function(state) {
             if (this.options.handler) {
                 this.options.handler.call(this, this, state);

apps/documenteditor/main/app/view/StyleTitleDialog.js

@@ -115,13 +115,8 @@ define([
             return [this.inputTitle, this.cmbNextStyle];
         },
 
-        show: function() {
+        getDefaultFocusableComponent: function () {
-            Common.UI.Window.prototype.show.apply(this, arguments);
+            return this.inputTitle;
-
-            var me = this;
-            _.delay(function(){
-                me.inputTitle.focus();
-            },500);
         },
 
         getTitle: function () {

apps/documenteditor/main/app/view/TableFormulaDialog.js

@@ -169,17 +169,12 @@ define([
             return [this.inputFormula, this.cmbFormat, this.cmbFunction, this.cmbBookmark];
         },
 
-        onSelectItem: function(picker, item, record, e){
+        getDefaultFocusableComponent: function () {
-            this.btnOk.setDisabled(record.get('level')==0 && record.get('index')>0);
+            return this.inputFormula;
         },
 
-        show: function() {
+        onSelectItem: function(picker, item, record, e){
-            Common.UI.Window.prototype.show.apply(this, arguments);
+            this.btnOk.setDisabled(record.get('level')==0 && record.get('index')>0);
-
-            var me = this;
-            _.delay(function(){
-                me.inputFormula.focus();
-            },500);
         },
 
         afterRender: function() {

apps/documenteditor/main/app/view/WatermarkSettingsDialog.js

@@ -387,13 +387,17 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
             return [ this.cmbLang, this.cmbText, this.cmbFonts, this.cmbFontSize, this.cmbScale ];
         },
 
+        getDefaultFocusableComponent: function () {
+            if (!this.cmbLang.isDisabled())
+                return this.cmbLang;
+            else if (!this.cmbScale.isDisabled())
+                return this.cmbScale;
+        },
+
         focusControls: function() {
-            var me = this;
+            var el = this.getDefaultFocusableComponent();
-            setTimeout(function(){
+            el && setTimeout(function(){
-                if (!me.cmbLang.isDisabled())
+                el.focus();
-                    me.cmbLang.focus();
-                else if (!me.cmbScale.isDisabled())
-                    me.cmbScale.focus();
             }, 10);
         },
 
@@ -453,14 +457,9 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
             });
         },
 
-        show: function() {
-            Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
-
-            this.focusControls();
-        },
-
         loadLanguages: function() {
-            var me = this;
+            var me = this,
+                focus = false;
             var callback = function(languages) {
                 var data = [];
                 me.languages = languages;
@@ -478,8 +477,10 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
                     me.text && me.cmbText.setValue(me.text);
                 } else
                     me.cmbLang.setDisabled(true);
+                focus && me.focusControls();
             };
             var languages = DE.Views.WatermarkText.get();
+            focus = !languages;
             if (languages)
                 callback(languages);
             else

apps/presentationeditor/main/app/view/DateTimeDialog.js

@@ -173,16 +173,16 @@ define([
             });
 
             this._setDefaults();
-
-            setTimeout(function(){
-                me.cmbLang.focus();
-            }, 100);
         },
 
         getFocusedComponents: function() {
             return [this.cmbLang, {cmp: this.listFormats, selector: '.listview'}];
         },
 
+        getDefaultFocusableComponent: function () {
+            return this.cmbLang;
+        },
+
         _setDefaults: function () {
             this.props = new AscCommonSlide.CAscDateTime();
             if (this.lang) {

apps/presentationeditor/main/app/view/HeaderFooterDialog.js

@@ -191,21 +191,20 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
             return [ this.cmbFormat, this.cmbLang, this.inputFixed, this.inputFooter ];
         },
 
-        focusControls: function() {
+        getDefaultFocusableComponent: function () {
-            var me = this;
+            if (!this.cmbFormat.isDisabled())
-            setTimeout(function(){
+                return this.cmbFormat;
-                if (!me.cmbFormat.isDisabled())
+            else if (!this.inputFixed.isDisabled())
-                    me.cmbFormat.focus();
+                return this.inputFixed;
-                else if (!me.inputFixed.isDisabled())
+            else if (!this.inputFooter.isDisabled())
-                    me.inputFixed.focus();
+                return this.inputFooter;
-                else if (!me.inputFooter.isDisabled())
-                    me.inputFooter.focus();
-            }, 10);
         },
 
-        show: function() {
+        focusControls: function() {
-            Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
+            var el = this.getDefaultFocusableComponent();
-            this.focusControls();
+            el && setTimeout(function(){
+                el.focus();
+            }, 10);
         },
 
         afterRender: function() {

apps/presentationeditor/main/app/view/SlideSizeSettings.js

@@ -202,17 +202,16 @@ define([
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
 
             this.updateMetricUnit();
-
-            var me = this;
-            setTimeout(function(){
-                me.cmbSlideSize.focus();
-            }, 100);
         },
 
         getFocusedComponents: function() {
             return [this.cmbSlideSize, this.spnWidth, this.spnHeight, this.cmbSlideOrientation];
         },
 
+        getDefaultFocusableComponent: function () {
+            return this.cmbSlideSize;
+        },
+
         _handleInput: function(state) {
             if (this.options.handler) {
                 this.options.handler.call(this, this, state);

apps/spreadsheeteditor/main/app/view/AdvancedSeparatorDialog.js

@@ -102,6 +102,10 @@ define([
             return [this.inputDecimalSeparator, this.inputThousandsSeparator];
         },
 
+        getDefaultFocusableComponent: function () {
+            return this.inputDecimalSeparator;
+        },
+
         afterRender: function() {
             this._setDefaults(this.props);
         },
@@ -113,15 +117,6 @@ define([
             }
         },
 
-        show: function() {
-            Common.UI.Window.prototype.show.apply(this, arguments);
-
-            var me = this;
-            _.delay(function(){
-                me.inputDecimalSeparator.cmpEl.find('input').focus();
-            },50);
-        },
-
         onPrimary: function(event) {
             this._handleInput('ok');
             return false;

apps/spreadsheeteditor/main/app/view/AutoFilterDialog.js

@@ -193,15 +193,8 @@ define([
             return [this.cmbCondition1, this.cmbValue1, this.cmbCondition2, this.cmbValue2];
         },
 
-        show: function () {
+        getDefaultFocusableComponent: function () {
-            Common.UI.Window.prototype.show.call(this);
+            return this.cmbValue1;
-
-            var me  = this;
-            _.defer(function () {
-                if (me.cmbValue1) {
-                    me.cmbValue1.focus();
-                }
-            }, 500);
         },
 
         close: function () {
@@ -418,15 +411,8 @@ define([
             return [this.cmbType, this.spnCount, this.cmbItem, this.cmbFields];
         },
 
-        show: function () {
+        getDefaultFocusableComponent: function () {
-            Common.UI.Window.prototype.show.call(this);
+            return this.spnCount;
-
-            var me  = this;
-            _.defer(function () {
-                if (me.spnCount) {
-                    me.spnCount.focus();
-                }
-            }, 500);
         },
 
         close: function () {
@@ -661,15 +647,8 @@ define([
             return [this.cmbFields, this.cmbCondition1, this.inputValue, this.inputValue2];
         },
 
-        show: function () {
+        getDefaultFocusableComponent: function () {
-            Common.UI.Window.prototype.show.call(this);
+            return this.inputValue;
-
-            var me  = this;
-            _.defer(function () {
-                if (me.inputValue) {
-                    me.inputValue.focus();
-                }
-            }, 500);
         },
 
         close: function () {

apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js

@@ -170,16 +170,18 @@ define([
             this.lblRange3 = $window.find('#id-dlg-chart-range-lbl3');
 
             $window.find('.dlg-btn').on('click',     _.bind(this.onBtnClick, this));
-
-            setTimeout(function(){
-                me.inputRange1.cmpEl.find('input').focus();
-            }, 10);
         },
 
         getFocusedComponents: function() {
             return [this.inputRange1, this.inputRange2, this.inputRange3];
         },
 
+        getDefaultFocusableComponent: function () {
+            if (this._alreadyRendered) return; // focus only at first show
+            this._alreadyRendered = true;
+            return this.inputRange1;
+        },
+
         onPrimary: function() {
             this._handleInput('ok');
             return false;

apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js

@@ -168,17 +168,14 @@ define([
             return [this.txtSourceRange, this.txtDestRange];
         },
 
-        afterRender: function() {
+        getDefaultFocusableComponent: function () {
-            this._setDefaults(this.props);
+            if (this._alreadyRendered) return; // focus only at first show
-
+            this._alreadyRendered = true;
-            var me = this;
+            return this.txtSourceRange;
-            _.delay(function(){
-                me.txtSourceRange.focus();
-            },50);
         },
 
-        show: function() {
+        afterRender: function() {
-            Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
+            this._setDefaults(this.props);
         },
 
         _setDefaults: function (props) {

apps/spreadsheeteditor/main/app/view/FormatSettingsDialog.js

@@ -255,12 +255,12 @@ define([
             return [this.cmbFormat, this.spnDecimal, this.cmbSymbols, this.cmbNegative, this.cmbType, this.cmbCode];
         },
 
+        getDefaultFocusableComponent: function () {
+            return this.cmbFormat;
+        },
+
         afterRender: function() {
             this._setDefaults(this.props);
-            var cmp = this.cmbFormat;
-            setTimeout(function(){
-                (cmp.$el || $(cmp.el)).find('.form-control').focus();
-            }, 10);
         },
 
         show: function() {

apps/spreadsheeteditor/main/app/view/FormulaDialog.js

@@ -128,6 +128,10 @@ define([
             return [this.inputSearch, this.cmbFuncGroup, {cmp: this.cmbListFunctions, selector: '.listview'}];
         },
 
+        getDefaultFocusableComponent: function () {
+            return this.inputSearch;
+        },
+
         show: function (group) {
             if (this.$window) {
                 var main_width, main_height, top, left, win_height = this.initConfig.height;
@@ -152,13 +156,7 @@ define([
             group && this.cmbFuncGroup.setValue(group);
             (group || this.cmbFuncGroup.getValue()=='Last10') && this.fillFunctions(this.cmbFuncGroup.getValue());
 
-            if (this.cmbListFunctions) {
+            this.inputSearch.setValue('');
-                this.inputSearch.setValue('');
-                var me = this;
-                setTimeout(function () {
-                    me.inputSearch.$el.find('input').focus();
-                }, 100);
-            }
             this._preventCloseCellEditor = false;
         },
 

apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js

@@ -255,10 +255,6 @@ define([
             return [this.inputUrl, {cmp: this.internalList, selector: '.treeview'}, this.inputRange, this.inputDisplay, this.inputTip];
         },
 
-        show: function() {
-            Common.UI.Window.prototype.show.apply(this, arguments);
-        },
-
         setSettings: function(settings) {
             if (settings) {
                 var me = this;

apps/spreadsheeteditor/main/app/view/NameManagerDlg.js

@@ -175,12 +175,8 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
             return [ this.cmbFilter, {cmp: this.rangeList, selector: '.listview'} ];
         },
 
-        show: function() {
+        getDefaultFocusableComponent: function () {
-            Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
+            return this.rangeList;
-            var me = this;
-            _.delay(function () {
-                me.rangeList.focus();
-            }, 100, me);
         },
 
         afterRender: function() {

apps/spreadsheeteditor/main/app/view/NamedRangeEditDlg.js

@@ -179,17 +179,19 @@ define([
             return [this.inputName, this.cmbScope, this.txtDataRange];
         },
 
+        getDefaultFocusableComponent: function () {
+            if (this._alreadyRendered) return; // focus only at first show
+            this._alreadyRendered = true;
+            return this.inputName;
+        },
+
         afterRender: function() {
             this._setDefaults(this.props);
             this.setTitle((this.isEdit) ? this.txtTitleEdit : this.txtTitleNew);
 
             this.api.asc_registerCallback('asc_onLockDefNameManager', this.wrapEvents.onLockDefNameManager);
             this.api.asc_registerCallback('asc_onRefreshDefNameList', this.wrapEvents.onRefreshDefNameList);
-
+        },
-            var me = this;
-            _.delay(function(){
-                me.inputName.focus();
-            },200);        },
 
         show: function() {
             Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);

apps/spreadsheeteditor/main/app/view/PageMarginsDialog.js

@@ -146,11 +146,6 @@ define([
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
             $window.find('input').on('keypress', _.bind(this.onKeyPress, this));
 
-            var cmp = this.spnTop;
-            setTimeout(function(){
-                (cmp.$el || $(cmp.el)).find('.form-control').focus();
-            }, 10);
-
             this.updateMetricUnit();
         },
 
@@ -158,6 +153,10 @@ define([
             return this.spinners;
         },
 
+        getDefaultFocusableComponent: function () {
+            return this.spnTop;
+        },
+
         _handleInput: function(state) {
             if (this.options.handler)
                 this.options.handler.call(this, this, state);

apps/spreadsheeteditor/main/app/view/PrintSettings.js

@@ -276,11 +276,6 @@ 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);
-
-            var me = this;
-            setTimeout(function(){
-                me.cmbRange.focus();
-            },100);
         },
 
         getFocusedComponents: function() {
@@ -288,6 +283,12 @@ define([    'text!spreadsheeteditor/main/app/template/PrintSettings.template',
                     this.spnMarginTop, this.spnMarginBottom, this.spnMarginLeft, this.spnMarginRight];
         },
 
+        getDefaultFocusableComponent: function () {
+            if (this._alreadyRendered) return; // focus only at first show
+            this._alreadyRendered = true;
+            return this.cmbRange;
+        },
+
         addCustomScale: function (add) {
             if (add) {
                 this.cmbLayout.setData([

apps/spreadsheeteditor/main/app/view/PrintTitlesDialog.js

@@ -184,16 +184,18 @@ define([
             $window.find('input').on('keypress', _.bind(this.onKeyPress, this));
 
             this.setSettings();
-
-            setTimeout(function(){
-                me.txtRangeTop.focus();
-            },100);
         },
 
         getFocusedComponents: function() {
             return [this.txtRangeTop, this.txtRangeLeft];
         },
 
+        getDefaultFocusableComponent: function () {
+            if (this._alreadyRendered) return; // focus only at first show
+            this._alreadyRendered = true;
+            return this.txtRangeTop;
+        },
+
         isRangeValid: function() {
             if (this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.PrintTitles, this.txtRangeTop.getValue(), false) == Asc.c_oAscError.ID.DataRangeError)  {
                 this.txtRangeTop.focus();

apps/spreadsheeteditor/main/app/view/ScaleDialog.js

@@ -171,6 +171,10 @@ define([
             return [this.cmbScaleWidth, this.cmbScaleHeight, this.spnScale];
         },
 
+        getDefaultFocusableComponent: function () {
+            return this.radioScaleTo.getValue() ? this.spnScale : this.cmbScaleWidth;
+        },
+
         afterRender: function() {
             this._setDefaults(this._originalProps);
         },
@@ -256,13 +260,6 @@ 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);
             }
         },
 

apps/spreadsheeteditor/main/app/view/ValueFieldSettingsDialog.js

@@ -192,22 +192,18 @@ define([
             this.lblSourceName = this.$window.find('#value-field-settings-source');
 
             this.afterRender();
-
-            setTimeout(function(){
-                me.inputCustomName.focus();
-            },100);
         },
 
         getFocusedComponents: function() {
             return [this.inputCustomName, this.cmbSummarize];
         },
 
-        afterRender: function() {
+        getDefaultFocusableComponent: function () {
-            this._setDefaults(this.props);
+            return this.inputCustomName;
         },
 
-        show: function() {
+        afterRender: function() {
-            Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
+            this._setDefaults(this.props);
         },
 
         _setDefaults: function (props) {