Focus support for checkbox
This commit is contained in:
Julia Radzhabova
parent
f5d0d63787
commit
a6f7d17261
|
|
@ -121,6 +121,7 @@ define([
|
|||
this.$chk = me.$el.find('input[type=checkbox]');
|
||||
this.$label = me.$el.find('label.checkbox-indeterminate');
|
||||
this.$chk.on('click', this.onItemCheck.bind(this));
|
||||
this.$label.on('keydown', this.onKeyDown.bind(this));
|
||||
|
||||
this.rendered = true;
|
||||
}
|
||||
|
|
@ -194,6 +195,18 @@ define([
|
|||
|
||||
setCaption: function(text) {
|
||||
this.$label.find('span').text(text);
|
||||
},
|
||||
|
||||
onKeyDown: function(e) {
|
||||
if (e.isDefaultPrevented())
|
||||
return;
|
||||
|
||||
if (e.keyCode === Common.UI.Keys.SPACE)
|
||||
this.onItemCheck(e);
|
||||
},
|
||||
|
||||
focus: function() {
|
||||
this.$label && this.$label.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -58,7 +58,19 @@ Common.UI.FocusManager = new(function() {
|
|||
}
|
||||
fields.forEach(function(field) {
|
||||
if (field) {
|
||||
var item = (field.cmp && typeof field.selector == 'string') ? field : {cmp: field, selector: '.form-control'};
|
||||
// var item = (field.cmp && typeof field.selector == 'string') ? field : {cmp: field, selector: '.form-control'};
|
||||
var item = {};
|
||||
if (field.cmp && typeof field.selector == 'string')
|
||||
item = field;
|
||||
else {
|
||||
item.cmp = field;
|
||||
if (field instanceof Common.UI.ListView)
|
||||
item.selector = '.listview';
|
||||
else if (field instanceof Common.UI.CheckBox)
|
||||
item.selector = '.checkbox-indeterminate';
|
||||
else
|
||||
item.selector = '.form-control';
|
||||
}
|
||||
item.el = (item.cmp.$el || $(item.cmp.el || item.cmp)).find(item.selector).addBack().filter(item.selector);
|
||||
item.el && item.el.attr && item.el.attr('tabindex', _tabindex.toString());
|
||||
arr.push(item);
|
||||
|
|
|
|||
|
|
@ -20,6 +20,11 @@
|
|||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: auto;
|
||||
|
||||
+ span {
|
||||
border: @scaled-one-px-value-ie dotted transparent;
|
||||
border: @scaled-one-px-value dotted transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked:not(:indeterminate) {
|
||||
|
|
@ -65,4 +70,18 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
input[type=checkbox] {
|
||||
+ label {
|
||||
border-color: @border-control-focus-ie;
|
||||
border-color: @border-control-focus;
|
||||
|
||||
+ span {
|
||||
border-color: @border-control-focus-ie;
|
||||
border-color: @border-control-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -122,18 +122,32 @@
|
|||
<div class="padding-small">
|
||||
<label class="header"><%= scope.textEffects %></label>
|
||||
</div>
|
||||
<div>
|
||||
<div class="padding-large" style="display: inline-block;">
|
||||
<div class="padding-small" id="paragraphadv-checkbox-strike"></div>
|
||||
<div class="padding-small" id="paragraphadv-checkbox-double-strike"></div>
|
||||
<div id="paragraphadv-checkbox-superscript"></div>
|
||||
</div>
|
||||
<div class="padding-large" style="display: inline-block; padding-left: 40px;">
|
||||
<div class="padding-small" id="paragraphadv-checkbox-subscript"></div>
|
||||
<div class="padding-small" id="paragraphadv-checkbox-small-caps"></div>
|
||||
<div id="paragraphadv-checkbox-all-caps"></div>
|
||||
</div>
|
||||
</div>
|
||||
<table cols="2">
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<div id="paragraphadv-checkbox-strike"></div>
|
||||
</td>
|
||||
<td class="padding-small" style="padding-left: 40px;">
|
||||
<div id="paragraphadv-checkbox-subscript"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<div id="paragraphadv-checkbox-double-strike"></div>
|
||||
</td>
|
||||
<td class="padding-small" style="padding-left: 40px;">
|
||||
<div id="paragraphadv-checkbox-small-caps"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-large">
|
||||
<div id="paragraphadv-checkbox-superscript"></div>
|
||||
</td>
|
||||
<td class="padding-large" style="padding-left: 40px;">
|
||||
<div id="paragraphadv-checkbox-all-caps"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="padding-small">
|
||||
<label class="header"><%= scope.textCharacterSpacing %></label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -680,9 +680,10 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
|
|||
getFocusedComponents: function() {
|
||||
return [
|
||||
this.cmbTextAlignment, this.cmbOutlinelevel, this.numIndentsLeft, this.numIndentsRight, this.cmbSpecial, this.numSpecialBy,
|
||||
this.numSpacingBefore, this.numSpacingAfter, this.cmbLineRule, this.numLineHeight, // 0 tab
|
||||
this.numSpacing, this.numPosition, // 3 tab
|
||||
this.numDefaultTab, this.numTab, this.cmbAlign, this.cmbLeader, {cmp: this.tabList, selector: '.listview'}, // 4 tab
|
||||
this.numSpacingBefore, this.numSpacingAfter, this.cmbLineRule, this.numLineHeight, this.chAddInterval, // 0 tab
|
||||
this.chBreakBefore, this.chKeepLines, this.chOrphan, this.chKeepNext, this.chLineNumbers, // 1 tab
|
||||
this.chStrike, this.chSubscript, this.chDoubleStrike, this.chSmallCaps, this.chSuperscript, this.chAllCaps, this.numSpacing, this.numPosition, // 3 tab
|
||||
this.numDefaultTab, this.numTab, this.cmbAlign, this.cmbLeader, this.tabList, // 4 tab
|
||||
this.spnMarginTop, this.spnMarginLeft, this.spnMarginBottom, this.spnMarginRight // 5 tab
|
||||
];
|
||||
},
|
||||
|
|
@ -696,8 +697,11 @@ define([ 'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
|
|||
case 0:
|
||||
me.cmbTextAlignment.focus();
|
||||
break;
|
||||
case 1:
|
||||
me.chBreakBefore.focus();
|
||||
break;
|
||||
case 3:
|
||||
me.numSpacing.focus();
|
||||
me.chStrike.focus();
|
||||
break;
|
||||
case 4:
|
||||
me.numDefaultTab.focus();
|
||||
|
|
|
|||
Loading…
Reference in a new issue