[DE][PE] Focus support for radiobox
This commit is contained in:
Julia Radzhabova
parent
1949441c55
commit
576c42036f
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ define([
|
|||
},
|
||||
|
||||
getFocusedComponents: function() {
|
||||
return [this.cmbRowCol, this.spnCount];
|
||||
return [this.cmbRowCol, this.spnCount, this.radioBefore, this.radioAfter];
|
||||
},
|
||||
|
||||
getDefaultFocusableComponent: function () {
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
if (!me.spnShapeWidth.isDisabled())
|
||||
me.spnShapeWidth.focus();
|
||||
else
|
||||
me.spnShapeWidthPc.focus();
|
||||
break;
|
||||
case 2:
|
||||
me.spnAngle.focus();
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in a new issue