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

[DE][PE] Focus support for radiobox

Browse source
This commit is contained in:
Julia Radzhabova 2021-04-14 11:01:41 +03:00
parent 1949441c55
commit 576c42036f
13 changed files with 78 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/common/main/lib/component/FocusManager.js
View file

@ -67,6 +67,8 @@ Common.UI.FocusManager = new(function() {
item.selector = '.listview';
else if (field instanceof Common.UI.CheckBox)
item.selector = '.checkbox-indeterminate';
else if (field instanceof Common.UI.RadioBox)
item.selector = '.radiobox';
else if (field instanceof Common.UI.TreeView)
item.selector = '.treeview';
else

27
apps/common/main/lib/component/RadioBox.js
View file

@ -72,7 +72,7 @@ define([
rendered : false,
template : _.template('<label class="radiobox"><input type="radio" name="<%= name %>" id="<%= id %>" class="button__radiobox">' +
'<label for="<%= id %>" class="radiobox__shape"></label><span><%= labelText %></span></label>'),
'<label for="<%= id %>" class="radiobox__shape"></label><span></span></label>'),
initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, options);
@ -89,6 +89,8 @@ define([
if (this.options.checked!==undefined)
this.setValue(this.options.checked, true);
this.setCaption(this.options.labelText);
// handle events
this.$radio.on('click', _.bind(this.onItemCheck, this));
},
@ -103,6 +105,8 @@ define([
this.$radio = el.find('input[type=radio]');
this.$label = el.find('label.radiobox');
this.$span = this.$label.find('span');
this.$label.on('keydown', this.onKeyDown.bind(this));
this.rendered = true;
return this;
@ -116,6 +120,12 @@ define([
this.$label.toggleClass('disabled', disabled);
this.$radio.toggleClass('disabled', disabled);
(disabled) ? this.$radio.attr({disabled: disabled}) : this.$radio.removeAttr('disabled');
if (disabled) {
this.tabindex = this.$label.attr('tabindex');
this.$label.attr('tabindex', -1);
} else if (this.tabindex) {
this.$label.attr('tabindex', this.tabindex);
}
}
this.disabled = disabled;
@ -152,7 +162,20 @@ define([
},
setCaption: function(text) {
this.$label.find('span').text(text);
this.$span.text(text);
this.$span.css('visibility', text ? 'visible' : 'hidden');
},
onKeyDown: function(e) {
if (e.isDefaultPrevented())
return;
if (e.keyCode === Common.UI.Keys.SPACE)
this.onItemCheck(e);
},
focus: function() {
this.$label && this.$label.focus();
}
});
});

16
apps/common/main/lib/view/OptionsDialog.js
View file

@ -79,8 +79,8 @@ define([
var me = this,
$window = me.getChild(),
items = this.options.items,
checked = true,
checkedIndex = -1;
checked = true;
this.checkedIndex = -1;
if (items) {
for (var i=0; i<items.length; i++) {
var item = items[i];
@ -98,14 +98,22 @@ define([
}));
if ((checked || item.checked)&& !item.disabled) {
checked = false;
checkedIndex = i;
this.checkedIndex = i;
}
}
(checkedIndex>=0) && this.radio[checkedIndex].setValue(true);
(this.checkedIndex>=0) && this.radio[this.checkedIndex].setValue(true);
}
$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
},
getFocusedComponents: function() {
return this.radio;
},
getDefaultFocusableComponent: function () {
return (this.checkedIndex>=0) ? this.radio[this.checkedIndex] : null;
},
_handleInput: function(state) {
if (this.options.handler) {
this.options.handler.call(this, this, state);

20
apps/common/main/resources/less/radiobox.less
View file

@ -23,6 +23,12 @@
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
border-radius: 50%;
+ span {
outline: @scaled-one-px-value-ie dotted transparent;
outline: @scaled-one-px-value dotted transparent;
display: inline-block;
}
}
&:checked {
@ -49,4 +55,18 @@
}
}
}
&:focus:not(.disabled) {
input[type=radio] {
+ label {
border-color: @border-control-focus-ie;
border-color: @border-control-focus;
+ span {
outline-color: @border-control-focus-ie;
outline-color: @border-control-focus;
}
}
}
}
}

2
apps/documenteditor/main/app/view/BookmarksDialog.js
View file

@ -249,7 +249,7 @@ define([
},
getFocusedComponents: function() {
return [this.txtName, this.bookmarksList, this.chHidden];
return [this.txtName, this.radioName, this.radioLocation, this.bookmarksList, this.chHidden];
},
afterRender: function() {

2
apps/documenteditor/main/app/view/CellsAddDialog.js
View file

@ -130,7 +130,7 @@ define([
},
getFocusedComponents: function() {
return [this.cmbRowCol, this.spnCount];
return [this.cmbRowCol, this.spnCount, this.radioBefore, this.radioAfter];
},
getDefaultFocusableComponent: function () {

12
apps/documenteditor/main/app/view/ImageSettingsAdvanced.js
View file

@ -1155,11 +1155,12 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
getFocusedComponents: function() {
return [
this.spnWidth, this.spnHeight, // 0 tab
this.spnShapeWidth , this.spnShapeWidthPc, this.cmbWidthPc, this.spnShapeHeight, this.spnShapeHeightPc, this.cmbHeightPc, this.chRatio, // 1 tab
this.radioHSize, this.spnShapeWidth , this.spnShapeWidthPc, this.radioHSizePc, this.cmbWidthPc,
this.radioVSize, this.spnShapeHeight, this.spnShapeHeightPc, this.radioVSizePc, this.cmbHeightPc, this.chRatio, // 1 tab
this.spnAngle, this.chFlipHor, this.chFlipVert, // 2 tab
this.spnTop, this.spnLeft, this.spnBottom, this.spnRight, // 3 tab
this.cmbHAlign , this.cmbHRelative, this.spnX, this.cmbHPosition, this.spnXPc, this.cmbHPositionPc,
this.cmbVAlign , this.cmbVRelative, this.spnY, this.cmbVPosition, this.spnYPc, this.cmbVPositionPc, this.chMove, this.chOverlap, // 4 tab
this.radioHAlign, this.radioHPosition, this.radioHPositionPc, this.cmbHAlign , this.cmbHRelative, this.spnX, this.cmbHPosition, this.spnXPc, this.cmbHPositionPc,
this.radioVAlign, this.radioVPosition, this.radioVPositionPc, this.cmbVAlign , this.cmbVRelative, this.spnY, this.cmbVPosition, this.spnYPc, this.cmbVPositionPc, this.chMove, this.chOverlap, // 4 tab
this.cmbCapType, this.cmbJoinType, // 5 tab
this.chAutofit, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight, // 6 tab
this.inputAltTitle, this.textareaAltDescription // 7 tab
@ -1176,7 +1177,10 @@ define([ 'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
me.spnWidth.focus();
break;
case 1:
me.spnShapeWidth.focus();
if (!me.spnShapeWidth.isDisabled())
me.spnShapeWidth.focus();
else
me.spnShapeWidthPc.focus();
break;
case 2:
me.spnAngle.focus();

2
apps/documenteditor/main/app/view/LineNumbersDialog.js
View file

@ -179,7 +179,7 @@ define([
},
getFocusedComponents: function() {
return [this.chAddLineNumbering, this.spnStartAt, this.spnFromText, this.spnCountBy, this.cmbApply];
return [this.chAddLineNumbering, this.spnStartAt, this.spnFromText, this.spnCountBy, this.rbRestartEachPage, this.rbRestartEachSection, this.rbContinuous, this.cmbApply];
},
getDefaultFocusableComponent: function () {

2
apps/documenteditor/main/app/view/NoteSettingsDialog.js
View file

@ -291,7 +291,7 @@ define([
},
getFocusedComponents: function() {
return [this.cmbFootnote, this.cmbEndnote, this.cmbFormat, this.spnStart, this.cmbNumbering, this.txtCustom, this.cmbApply];
return [this.radioFootnote, this.cmbFootnote, this.radioEndnote, this.cmbEndnote, this.cmbFormat, this.spnStart, this.cmbNumbering, this.txtCustom, this.cmbApply];
},
getDefaultFocusableComponent: function () {

4
apps/documenteditor/main/app/view/TableSettingsAdvanced.js
View file

@ -1012,8 +1012,8 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
return [
this.chWidth, this.nfWidth, this.cmbUnit, this.chAutofit, this.spnTableMarginTop, this.spnTableMarginLeft, this.spnTableMarginBottom, this.spnTableMarginRight, this.chAllowSpacing, this.nfSpacing, // 0 tab
this.chPrefWidth, this.nfPrefWidth, this.cmbPrefWidthUnit, this.chCellMargins, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight, this.chWrapText, // 1 tab
this.cmbHAlign , this.cmbHRelative, this.spnX, this.cmbHPosition,
this.cmbVAlign , this.cmbVRelative, this.spnY, this.cmbVPosition, this.chMove, this.chOverlap, // 3 tab
this.radioHAlign, this.cmbHAlign , this.radioHPosition, this.cmbHRelative, this.spnX, this.cmbHPosition,
this.radioVAlign, this.cmbVAlign , this.radioVPosition, this.cmbVRelative, this.spnY, this.cmbVPosition, this.chMove, this.chOverlap, // 3 tab
this.spnIndentLeft, this.spnDistanceTop, this.spnDistanceLeft, this.spnDistanceBottom, this.spnDistanceRight, // 4 tab
this.inputAltTitle, this.textareaAltDescription // 5 tab
];

4
apps/documenteditor/main/app/view/WatermarkSettingsDialog.js
View file

@ -383,7 +383,7 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
},
getFocusedComponents: function() {
return [ this.cmbLang, this.cmbText, this.cmbFonts, this.chTransparency, this.cmbFontSize, this.cmbScale ];
return [ this.radioNone, this.radioText, this.cmbLang, this.cmbText, this.cmbFonts, this.chTransparency, this.radioDiag, this.radioHor, this.radioImage, this.cmbFontSize, this.cmbScale ];
},
getDefaultFocusableComponent: function () {
@ -391,6 +391,8 @@ define(['text!documenteditor/main/app/template/WatermarkSettings.template',
return this.cmbLang;
else if (!this.cmbScale.isDisabled())
return this.cmbScale;
else
return this.radioNone;
},
focusControls: function() {

2
apps/presentationeditor/main/app/view/HeaderFooterDialog.js
View file

@ -188,7 +188,7 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
},
getFocusedComponents: function() {
return [ this.chDateTime, this.cmbFormat, this.cmbLang, this.inputFixed, this.chSlide, this.chFooter, this.inputFooter, this.chNotTitle ];
return [ this.chDateTime, this.radioUpdate, this.cmbFormat, this.cmbLang, this.radioFixed, this.inputFixed, this.chSlide, this.chFooter, this.inputFooter, this.chNotTitle ];
},
getDefaultFocusableComponent: function () {

2
apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js
View file

@ -524,7 +524,7 @@ define([ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
this.spnWidth, this.spnHeight, // 0 tab
this.spnAngle, this.chFlipHor, this.chFlipVert, // 1 tab
this.cmbCapType, this.cmbJoinType, // 2 tab
this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight, // 3 tab
this.radioNofit, this.radioShrink, this.radioFit, this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight, // 3 tab
this.spnColumns, this.spnSpacing, // 4 tab
this.inputAltTitle, this.textareaAltDescription // 5 tab
];