addon/mixins/ui-checkbox-base.js

  1. import Mixin from '@ember/object/mixin';
  2.  
  3. /**
  4. ui-checkbox-base mixinx
  5.  
  6. @module mixins
  7. @namespace mixins
  8. @class UiCheckboxBase
  9. @constructor
  10. */
  11. export default Mixin.create({
  12.     /**
  13.      * The root component element
  14.      *
  15.      * @property {Ember.String} tagName
  16.      * @default  "input"
  17.      */
  18.     tagName: 'div',
  19.  
  20.     /**
  21.      * the checkbox default class
  22.      * @private
  23.      * @property {Ember.String} _theme
  24.      */
  25.     _theme: 'checkbox',
  26.     /**
  27.      * the checkbox classes
  28.      *
  29.      * @property {Ember.String} theme
  30.      */
  31.     class: '',
  32.     /**
  33.      * Class names to apply to the button
  34.      *
  35.      * @property {Ember.Array} classNames
  36.      */
  37.     classNameBindings: ['_uiClass', '_theme', 'class', '_componentClass'],
  38.     _uiClass: 'ui',
  39.     _componentClass: 'checkbox',
  40.  
  41.     /**
  42.      * 
  43.      *
  44.      * @property {Ember.String} value
  45.      */
  46.     value: null,
  47.  
  48.     /**
  49.      * checkbox checked
  50.      *
  51.      * @property {Ember.Boolean} checked
  52.      */
  53.     checked: false,
  54.     /**
  55.      * checkbox name
  56.      *
  57.      * @property {Ember.String} name
  58.      */
  59.     name: null,
  60.  
  61.     /**
  62.      * @function initialize
  63.      * @observes "didInsertElement" event
  64.      * @returns  {void}
  65.      */
  66.     didInsertElement() {
  67.         this.$().checkbox();
  68.         let {checked} = this.getProperties('checked');
  69.         let input = this.$('input');
  70.  
  71.         //set checbox stated
  72.         input.prop('checked', checked);
  73.         //bind input change event
  74.         this.$('input').change(()=>{
  75.             let isChecked = input.is(':checked');
  76.             this._updateValue(isChecked);
  77.             this.set('checked', isChecked);
  78.             this.sendAction('action', isChecked, this.value);
  79.         });
  80.     },
  81.     _updateValue(checked){
  82.         if(typeof this.attrs.update ==='function'){
  83.             if(checked){
  84.                 this.attrs.update(this.value);
  85.             }else {
  86.                 this.attrs.update('');
  87.             }
  88.         }
  89.     },
  90.     init(){
  91.         //set checked value
  92.         this._super(...arguments);
  93.         this._updateValue(this.get('checked'));
  94.     },
  95.     didUpdateAttrs(){
  96.         this.setChecked();
  97.     },
  98.     /**
  99.      * @function setChecked
  100.      * @observes "checked" 
  101.      * @returns  {void}
  102.      */
  103.     setChecked() {
  104.         let input = this.$('input');
  105.         //when checked change, set checkbox state
  106.         input.prop('checked', this.get('checked'));
  107.         //change value
  108.         this._updateValue(this.get('checked'));
  109.     }
  110. });