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

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

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