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

[common] changed radiobox component

Browse source
This commit is contained in:
Maxim Kadushkin 2019-12-10 23:58:38 +03:00
parent 3d087bb587
commit ad7bc46e30
2 changed files with 30 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -71,7 +71,8 @@ define([
disabled : false,
rendered : false,
template : _.template('<label class="radiobox"><input type="button" name="<%= name %>" class="button__radiobox"><span><%= labelText %></span></label>'),
template : _.template('<label class="radiobox"><input type="radio" name="<%= name %>" id="<%= id %>" class="button__radiobox">' +
'<label for="<%= id %>" class="radiobox__shape" /><span><%= labelText %></span></label>'),
initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, options);
@ -96,11 +97,12 @@ define([
var el = this.$el || $(this.el);
el.html(this.template({
labelText: this.options.labelText,
name: this.name
name: this.name,
id: Common.UI.getId('rdb-')
}));
this.$radio = el.find('input[type=button]');
this.$label = el.find('label');
this.$radio = el.find('input[type=radio]');
this.$label = el.find('label.radiobox');
this.rendered = true;
return this;
@ -129,8 +131,7 @@ define([
setRawValue: function(value) {
var value = (value === true || value === 'true' || value === '1' || value === 1 );
$('input[type=button][name=' + this.name + ']').removeClass('checked');
this.$radio.toggleClass('checked', value);
this.$radio.prop('checked', value);
},
setValue: function(value, suspendchange) {
@ -138,7 +139,7 @@ define([
var lastValue = this.$radio.hasClass('checked');
this.setRawValue(value);
if (suspendchange !== true && lastValue !== value)
this.trigger('change', this, this.$radio.hasClass('checked'));
this.trigger('change', this, this.$radio.is(':checked'));
} else {
this.options.checked = value;
}

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

@ -4,22 +4,27 @@
.font-size-normal();
font-weight: normal;
position: relative;
min-height: 1em;
input[type=button] {
margin-left: -22px;
margin-right: 6px;
padding-bottom: 4px;
width: 14px;
height: 14px;
cursor: default;
vertical-align: top;
input[type=radio] {
background: #fff;
border: 1px solid @gray;
border-radius: 50%;
display: none;
&.checked {
+ span {
+ label {
position: absolute;
left: 0;
margin-top: auto;
padding-bottom: 4px;
width: 14px;
height: 14px;
background: #fff;
border: 1px solid @gray;
border-radius: 50%;
}
&:checked {
+ label {
&::before {
content: '';
position: absolute;
@ -27,16 +32,16 @@
border-radius: 50%;
width: 8px;
height: 8px;
left: 3px;
top: 3px;
left: 2px;
top: 2px;
}
}
}
&.disabled {
&.disabled, &:disabled {
opacity: .4;
+ span {
+ label {
&::before {
opacity: .4;
}