addon/mixins/ui-checkbox-base.js
import Mixin from '@ember/object/mixin';
/**
ui-checkbox-base mixinx
@module mixins
@namespace mixins
@class UiCheckboxBase
@constructor
*/
export default Mixin.create({
/**
* The root component element
*
* @property {Ember.String} tagName
* @default "input"
*/
tagName: 'div',
/**
* the checkbox default class
* @private
* @property {Ember.String} _theme
*/
_theme: 'checkbox',
/**
* the checkbox classes
*
* @property {Ember.String} theme
*/
class: '',
/**
* Class names to apply to the button
*
* @property {Ember.Array} classNames
*/
classNameBindings: ['_uiClass', '_theme', 'class', '_componentClass'],
_uiClass: 'ui',
_componentClass: 'checkbox',
/**
*
*
* @property {Ember.String} value
*/
value: null,
/**
* checkbox checked
*
* @property {Ember.Boolean} checked
*/
checked: false,
/**
* checkbox name
*
* @property {Ember.String} name
*/
name: null,
/**
* @function initialize
* @observes "didInsertElement" event
* @returns {void}
*/
didInsertElement() {
this.$().checkbox();
let {checked} = this.getProperties('checked');
let input = this.$('input');
//set checbox stated
input.prop('checked', checked);
//bind input change event
this.$('input').change(()=>{
let isChecked = input.is(':checked');
this._updateValue(isChecked);
this.set('checked', isChecked);
this.sendAction('action', isChecked, this.value);
});
},
_updateValue(checked){
if(typeof this.attrs.update ==='function'){
if(checked){
this.attrs.update(this.value);
}else {
this.attrs.update('');
}
}
},
init(){
//set checked value
this._super(...arguments);
this._updateValue(this.get('checked'));
},
didUpdateAttrs(){
this.setChecked();
},
/**
* @function setChecked
* @observes "checked"
* @returns {void}
*/
setChecked() {
let input = this.$('input');
//when checked change, set checkbox state
input.prop('checked', this.get('checked'));
//change value
this._updateValue(this.get('checked'));
}
});