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

Add focus manager to cond. formatting

Browse source
This commit is contained in:
Julia Radzhabova 2021-03-19 12:14:25 +03:00
parent 5609945406
commit 74277ff36f
2 changed files with 86 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
apps/spreadsheeteditor/main/app/view/FormatRulesEditDlg.js
View file

@ -228,10 +228,12 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
menuStyle : 'min-width: 100%;max-height: 211px;', menuStyle : 'min-width: 100%;max-height: 211px;',
editable : false, editable : false,
cls : 'input-group-nr', cls : 'input-group-nr',
data : cmbData data : cmbData,
takeFocusOnClose: true
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
me.refreshRules(record.value); me.refreshRules(record.value);
}); });
Common.UI.FocusManager.add(this, this.cmbCategory);
this.cmbRule = new Common.UI.ComboBox({ this.cmbRule = new Common.UI.ComboBox({
el : $('#format-rules-edit-combo-rule'), el : $('#format-rules-edit-combo-rule'),
@ -239,10 +241,12 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
menuStyle : 'min-width: 100%;max-height: 211px;', menuStyle : 'min-width: 100%;max-height: 211px;',
editable : false, editable : false,
cls : 'input-group-nr', cls : 'input-group-nr',
data : [] data : [],
takeFocusOnClose: true
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
me.setControls(me.cmbCategory.getValue(), record.value); me.setControls(me.cmbCategory.getValue(), record.value);
}); });
Common.UI.FocusManager.add(this, this.cmbRule);
this.txtRange1 = new Common.UI.InputFieldBtn({ this.txtRange1 = new Common.UI.InputFieldBtn({
el : $('#format-rules-edit-txt-r1'), el : $('#format-rules-edit-txt-r1'),
@ -253,7 +257,8 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
validateOnChange: false validateOnChange: false
}); });
this.txtRange1.on('button:click', _.bind(this.onSelectData, this)); this.txtRange1.on('button:click', _.bind(this.onSelectData, this));
Common.UI.FocusManager.add(this, this.txtRange1);
this.txtRange2 = new Common.UI.InputFieldBtn({ this.txtRange2 = new Common.UI.InputFieldBtn({
el : $('#format-rules-edit-txt-r2'), el : $('#format-rules-edit-txt-r2'),
name : 'range', name : 'range',
@ -263,6 +268,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
validateOnChange: false validateOnChange: false
}); });
this.txtRange2.on('button:click', _.bind(this.onSelectData, this)); this.txtRange2.on('button:click', _.bind(this.onSelectData, this));
Common.UI.FocusManager.add(this, this.txtRange2);
// top 10 // top 10
this.cmbPercent = new Common.UI.ComboBox({ this.cmbPercent = new Common.UI.ComboBox({
@ -274,13 +280,15 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
data : [ data : [
{value: 0, displayValue: this.textItem}, {value: 0, displayValue: this.textItem},
{value: 1, displayValue: this.textPercent} {value: 1, displayValue: this.textPercent}
] ],
takeFocusOnClose: true
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
var percent = !!record.value; var percent = !!record.value;
// me.numRank.setMaxValue(percent ? 100 : 1000); // me.numRank.setMaxValue(percent ? 100 : 1000);
me.numRank.setValue(me.numRank.getNumberValue()); me.numRank.setValue(me.numRank.getNumberValue());
}); });
this.cmbPercent.setValue(0); this.cmbPercent.setValue(0);
Common.UI.FocusManager.add(this, this.cmbPercent);
this.numRank = new Common.UI.MetricSpinner({ this.numRank = new Common.UI.MetricSpinner({
el: $('#format-rules-edit-spin-rank'), el: $('#format-rules-edit-spin-rank'),
@ -295,6 +303,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
}); });
this.numRank.on('change', _.bind(function(field, newValue, oldValue, eOpts){ this.numRank.on('change', _.bind(function(field, newValue, oldValue, eOpts){
}, this)); }, this));
Common.UI.FocusManager.add(this, this.numRank);
// Format // Format
this.CFPresets = this.api.asc_getCFPresets(); this.CFPresets = this.api.asc_getCFPresets();
@ -619,10 +628,12 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
hint : this.tipNumFormat, hint : this.tipNumFormat,
itemsTemplate: formatTemplate, itemsTemplate: formatTemplate,
editable : false, editable : false,
data : this.numFormatData data : this.numFormatData,
takeFocusOnClose: true
}); });
this.cmbNumberFormat.setValue(Asc.c_oAscNumFormatType.General); this.cmbNumberFormat.setValue(Asc.c_oAscNumFormatType.General);
this.cmbNumberFormat.on('selected', _.bind(this.onNumberFormatSelect, this)); this.cmbNumberFormat.on('selected', _.bind(this.onNumberFormatSelect, this));
Common.UI.FocusManager.add(this, this.cmbNumberFormat);
this.btnClear = new Common.UI.Button({ this.btnClear = new Common.UI.Button({
el: $('#format-rules-edit-btn-clear') el: $('#format-rules-edit-btn-clear')
@ -656,6 +667,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
'</div>' '</div>'
].join('')) ].join(''))
}); });
var menu = (new Common.UI.Menu({ var menu = (new Common.UI.Menu({
style: 'min-width: 105px;', style: 'min-width: 105px;',
additionalAlign: this.menuAddAlign, additionalAlign: this.menuAddAlign,
@ -676,19 +688,6 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
this.iconsControls[i].cmbIcons = combo; this.iconsControls[i].cmbIcons = combo;
this.iconsControls[i].pickerIcons = picker; this.iconsControls[i].pickerIcons = picker;
combo = new Common.UI.ComboBox({
el : $('#format-rules-edit-combo-type-' + (i+1)),
style : 'width: 80px;',
menuStyle : 'min-width: 100%;max-height: 211px;',
editable : false,
cls : 'input-group-nr',
data : this.dataValTypes,
type : i
}).on('selected', function(combo, record) {
});
combo.setValue(Asc.c_oAscCfvoType.Percent);
this.iconsControls[i].cmbType = combo;
combo = new Common.UI.ComboBox({ combo = new Common.UI.ComboBox({
el : $('#format-rules-edit-combo-op-' + (i+1)), el : $('#format-rules-edit-combo-op-' + (i+1)),
style : 'width: 55px;', style : 'width: 55px;',
@ -696,12 +695,14 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
editable : false, editable : false,
cls : 'input-group-nr', cls : 'input-group-nr',
data : [{value: true, displayValue: '>=', prevOp: '<'}, {value: false, displayValue: '>', prevOp: '<='}], data : [{value: true, displayValue: '>=', prevOp: '<'}, {value: false, displayValue: '>', prevOp: '<='}],
type : i type : i,
takeFocusOnClose: true
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
me.fillIconsLabels(); me.fillIconsLabels();
}); });
combo.setValue(1); combo.setValue(1);
this.iconsControls[i].cmbOperator = combo; this.iconsControls[i].cmbOperator = combo;
Common.UI.FocusManager.add(this, combo);
var range = new Common.UI.InputFieldBtn({ var range = new Common.UI.InputFieldBtn({
el : $('#format-rules-edit-txt-value-' + (i+1)), el : $('#format-rules-edit-txt-value-' + (i+1)),
@ -717,6 +718,22 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
range.setValue(''); range.setValue('');
this.iconsControls[i].value = range; this.iconsControls[i].value = range;
range.on('button:click', _.bind(this.onSelectData, this)); range.on('button:click', _.bind(this.onSelectData, this));
Common.UI.FocusManager.add(this, range);
combo = new Common.UI.ComboBox({
el : $('#format-rules-edit-combo-type-' + (i+1)),
style : 'width: 80px;',
menuStyle : 'min-width: 100%;max-height: 211px;',
editable : false,
cls : 'input-group-nr',
data : this.dataValTypes,
type : i,
takeFocusOnClose: true
}).on('selected', function(combo, record) {
});
combo.setValue(Asc.c_oAscCfvoType.Percent);
this.iconsControls[i].cmbType = combo;
Common.UI.FocusManager.add(this, combo);
this.iconsControls[i].label = $('#format-rules-txt-icon-' + (i+1)); this.iconsControls[i].label = $('#format-rules-txt-icon-' + (i+1));
}, },
@ -777,6 +794,9 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
data : arr data : arr
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
me.fillIconsControls(record.value, record.data.values); me.fillIconsControls(record.value, record.data.values);
_.delay(function(){
me.iconsControls[me.iconsControls.length-1].cmbOperator.focus();
},50);
}); });
this.cmbIconsPresets.setValue(3); this.cmbIconsPresets.setValue(3);
this.iconsProps = {iconsSet: 3}; this.iconsProps = {iconsSet: 3};
@ -829,13 +849,15 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
editable : false, editable : false,
cls : 'input-group-nr', cls : 'input-group-nr',
data : arr, data : arr,
type : i type : i,
takeFocusOnClose: true
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
me.barControls[combo.options.type].range.setDisabled(record.value==Asc.c_oAscCfvoType.Minimum || record.value==Asc.c_oAscCfvoType.Maximum || me.barControls[combo.options.type].range.setDisabled(record.value==Asc.c_oAscCfvoType.Minimum || record.value==Asc.c_oAscCfvoType.Maximum ||
record.value==Asc.c_oAscCfvoType.AutoMin || record.value==Asc.c_oAscCfvoType.AutoMax); record.value==Asc.c_oAscCfvoType.AutoMin || record.value==Asc.c_oAscCfvoType.AutoMax);
me.setDefComboValue(combo.options.type, record.value, me.barControls[combo.options.type].range); me.setDefComboValue(combo.options.type, record.value, me.barControls[combo.options.type].range);
}); });
combo.setValue(arr[1].value); combo.setValue(arr[1].value);
Common.UI.FocusManager.add(this, combo);
var range = new Common.UI.InputFieldBtn({ var range = new Common.UI.InputFieldBtn({
el : $('#format-rules-edit-txt-bar-' + (i+1)), el : $('#format-rules-edit-txt-bar-' + (i+1)),
@ -849,6 +871,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
range.setValue(0); range.setValue(0);
range.on('button:click', _.bind(this.onSelectData, this)); range.on('button:click', _.bind(this.onSelectData, this));
this.barControls.push({combo: combo, range: range}); this.barControls.push({combo: combo, range: range});
Common.UI.FocusManager.add(this, range);
} }
// Fill // Fill
@ -861,7 +884,8 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
data : [ data : [
{value: false, displayValue: this.textSolid}, {value: false, displayValue: this.textSolid},
{value: true, displayValue: this.textGradient} {value: true, displayValue: this.textGradient}
] ],
takeFocusOnClose: true
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
if (me.barProps) { if (me.barProps) {
me.barProps.asc_setGradient(record.value); me.barProps.asc_setGradient(record.value);
@ -869,6 +893,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
} }
}); });
this.cmbFill.setValue(false); this.cmbFill.setValue(false);
Common.UI.FocusManager.add(this, this.cmbFill);
this.btnPosFill = new Common.UI.ColorButton({ this.btnPosFill = new Common.UI.ColorButton({
parentEl: $('#format-rules-edit-color-pos-fill'), parentEl: $('#format-rules-edit-color-pos-fill'),
@ -902,7 +927,8 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
data : [ data : [
{value: false, displayValue: this.textSolid}, {value: false, displayValue: this.textSolid},
{value: true, displayValue: this.textNone} {value: true, displayValue: this.textNone}
] ],
takeFocusOnClose: true
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
var hasBorder = !record.value; var hasBorder = !record.value;
me.btnPosBorder.setDisabled(!hasBorder); me.btnPosBorder.setDisabled(!hasBorder);
@ -917,6 +943,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
} }
}); });
this.cmbBorder.setValue(false); this.cmbBorder.setValue(false);
Common.UI.FocusManager.add(this, this.cmbBorder);
this.btnPosBorder = new Common.UI.ColorButton({ this.btnPosBorder = new Common.UI.ColorButton({
parentEl: $('#format-rules-edit-color-pos-border'), parentEl: $('#format-rules-edit-color-pos-border'),
@ -951,7 +978,8 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
{value: Asc.c_oAscDataBarDirection.context, displayValue: this.textContext}, {value: Asc.c_oAscDataBarDirection.context, displayValue: this.textContext},
{value: Asc.c_oAscDataBarDirection.leftToRight, displayValue: this.textLeft2Right}, {value: Asc.c_oAscDataBarDirection.leftToRight, displayValue: this.textLeft2Right},
{value: Asc.c_oAscDataBarDirection.rightToLeft, displayValue: this.textRight2Left} {value: Asc.c_oAscDataBarDirection.rightToLeft, displayValue: this.textRight2Left}
] ],
takeFocusOnClose: true
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
if (me.barProps) { if (me.barProps) {
me.barProps.asc_setDirection(record.value); me.barProps.asc_setDirection(record.value);
@ -959,6 +987,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
} }
}); });
this.cmbBarDirection.setValue(Asc.c_oAscDataBarDirection.context); this.cmbBarDirection.setValue(Asc.c_oAscDataBarDirection.context);
Common.UI.FocusManager.add(this, this.cmbBarDirection);
this.chShowBar = new Common.UI.CheckBox({ this.chShowBar = new Common.UI.CheckBox({
el: $('#format-rules-edit-chk-show-bar'), el: $('#format-rules-edit-chk-show-bar'),
@ -975,11 +1004,13 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
{value: Asc.c_oAscDataBarAxisPosition.automatic, displayValue: this.textAutomatic}, {value: Asc.c_oAscDataBarAxisPosition.automatic, displayValue: this.textAutomatic},
{value: Asc.c_oAscDataBarAxisPosition.middle, displayValue: this.textCellMidpoint}, {value: Asc.c_oAscDataBarAxisPosition.middle, displayValue: this.textCellMidpoint},
{value: Asc.c_oAscDataBarAxisPosition.none, displayValue: this.textNone} {value: Asc.c_oAscDataBarAxisPosition.none, displayValue: this.textNone}
] ],
takeFocusOnClose: true
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
me.btnAxisColor.setDisabled(record.value == Asc.c_oAscDataBarAxisPosition.none); me.btnAxisColor.setDisabled(record.value == Asc.c_oAscDataBarAxisPosition.none);
}); });
this.cmbAxisPos.setValue(Asc.c_oAscDataBarDirection.context); this.cmbAxisPos.setValue(Asc.c_oAscDataBarDirection.context);
Common.UI.FocusManager.add(this, this.cmbAxisPos);
this.btnAxisColor = new Common.UI.ColorButton({ this.btnAxisColor = new Common.UI.ColorButton({
parentEl: $('#format-rules-edit-color-axis-color'), parentEl: $('#format-rules-edit-color-axis-color'),
@ -1013,12 +1044,14 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
editable : false, editable : false,
cls : 'input-group-nr', cls : 'input-group-nr',
data : arr, data : arr,
type : i type : i,
takeFocusOnClose: true
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
me.scaleControls[combo.options.type].range.setDisabled(record.value==Asc.c_oAscCfvoType.Minimum || record.value==Asc.c_oAscCfvoType.Maximum); me.scaleControls[combo.options.type].range.setDisabled(record.value==Asc.c_oAscCfvoType.Minimum || record.value==Asc.c_oAscCfvoType.Maximum);
me.setDefComboValue(combo.options.type, record.value, me.scaleControls[combo.options.type].range); me.setDefComboValue(combo.options.type, record.value, me.scaleControls[combo.options.type].range);
}); });
combo.setValue((i==1) ? Asc.c_oAscCfvoType.Percentile : arr[0].value); combo.setValue((i==1) ? Asc.c_oAscCfvoType.Percentile : arr[0].value);
Common.UI.FocusManager.add(this, combo);
var range = new Common.UI.InputFieldBtn({ var range = new Common.UI.InputFieldBtn({
el : $('#format-rules-edit-txt-scale-' + (i+1)), el : $('#format-rules-edit-txt-scale-' + (i+1)),
@ -1032,6 +1065,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
}); });
range.setValue((i==1) ? 50 : ''); range.setValue((i==1) ? 50 : '');
range.on('button:click', _.bind(this.onSelectData, this)); range.on('button:click', _.bind(this.onSelectData, this));
Common.UI.FocusManager.add(this, range);
var color = new Common.UI.ColorButton({ var color = new Common.UI.ColorButton({
parentEl: $('#format-rules-edit-color-scale-' + (i+1)), parentEl: $('#format-rules-edit-color-scale-' + (i+1)),
@ -1473,6 +1507,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
setControls: function(category, rule) { setControls: function(category, rule) {
var hasformat = this.$window.find('.hasformat'); var hasformat = this.$window.find('.hasformat');
hasformat.toggleClass('hidden', category>=7 && category<=10); hasformat.toggleClass('hidden', category>=7 && category<=10);
var focused;
this.cmbRule.setVisible(category<7); this.cmbRule.setVisible(category<7);
@ -1497,6 +1532,20 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesEditDlg.template',
(category==10) && this.renderIconsPanel(); (category==10) && this.renderIconsPanel();
this.$window.find('.databar').toggleClass('hidden', category!==9); this.$window.find('.databar').toggleClass('hidden', category!==9);
this.$window.find('.iconset').toggleClass('hidden', category!==10); this.$window.find('.iconset').toggleClass('hidden', category!==10);
if (category<7)
focused = this.cmbRule;
else if (category==7 || category==8) {
focused = this.scaleControls[0].combo;
} else if (category==9) {
focused = this.barControls[0].combo;
} else if (category==10) {
focused = this.iconsControls[this.iconsControls.length-1].cmbOperator;
}
focused && _.delay(function(){
focused.focus();
},50);
}, },
onSelectData: function(cmp) { onSelectData: function(cmp) {

14
apps/spreadsheeteditor/main/app/view/FormatRulesManagerDlg.js
View file

@ -137,7 +137,8 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesManagerDlg.templa
menuStyle : 'min-width: 100%;max-height: 211px;', menuStyle : 'min-width: 100%;max-height: 211px;',
editable : false, editable : false,
cls : 'input-group-nr', cls : 'input-group-nr',
data : [] data : [],
takeFocusOnClose: true
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
me.refreshRuleList(record); me.refreshRuleList(record);
}); });
@ -156,7 +157,8 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesManagerDlg.templa
'<div class="lock-user"><%=lockuser%></div>', '<div class="lock-user"><%=lockuser%></div>',
'<% } %>', '<% } %>',
'</div>' '</div>'
].join('')) ].join('')),
tabindex: 1
}); });
this.rulesList.createNewItem = function(record) { this.rulesList.createNewItem = function(record) {
return new _CustomItem({ return new _CustomItem({
@ -201,11 +203,18 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesManagerDlg.templa
this.afterRender(); this.afterRender();
}, },
getDefaultFocusableComponent: function () {
return this.cmbScope;
},
afterRender: function() { afterRender: function() {
this._setDefaults(this.props); this._setDefaults(this.props);
}, },
_setDefaults: function (props) { _setDefaults: function (props) {
Common.UI.FocusManager.add(this, this.cmbScope);
Common.UI.FocusManager.add(this, {cmp: this.rulesList, selector: '.listview'});
this.rulesList.on('item:add', _.bind(this.addControls, this)); this.rulesList.on('item:add', _.bind(this.addControls, this));
this.rulesList.on('item:change', _.bind(this.addControls, this)); this.rulesList.on('item:change', _.bind(this.addControls, this));
this.currentSheet = this.api.asc_getActiveWorksheetIndex(); this.currentSheet = this.api.asc_getActiveWorksheetIndex();
@ -517,6 +526,7 @@ define([ 'text!spreadsheeteditor/main/app/template/FormatRulesManagerDlg.templa
} }
}).on('button:click', _.bind(this.onSelectData, this, rule, item)); }).on('button:click', _.bind(this.onSelectData, this, rule, item));
Common.UI.FocusManager.add(this, input);
var val = item.get('range'); var val = item.get('range');
(val!==null) && input.setValue(val); (val!==null) && input.setValue(val);