addon/mixins/ui-checkbox-group-base.js

  1. import $ from 'jquery';
  2. import Mixin from '@ember/object/mixin';
  3. import { observer } from '@ember/object';
  4. import { bool } from '@ember/object/computed';
  5. import { set } from '@ember/object';
  6. import { guidFor } from '@ember/object/internals';
  7.  
  8.  
  9. /**
  10. ui-checkbox-base mixinx
  11.  
  12. @module mixins
  13. @namespace mixins
  14. @class UiCheckboxGroupBase
  15. @constructor
  16. */
  17. export default Mixin.create({
  18.     /**
  19.      * The root component element
  20.      *
  21.      * @property {Ember.String} tagName
  22.      * @default  "div"
  23.      */
  24.     tagName: 'div',
  25.  
  26.     /**
  27.      * value  for the checkbox radio group component
  28.      *
  29.      * @property {Ember.Array} value
  30.      */
  31.     value: null,
  32.  
  33.     /**
  34.      * name for the checkbox radio group component
  35.      *
  36.      * @property {Ember.String} name
  37.      */
  38.     name: '',
  39.  
  40.     /**
  41.      *  label for the checkbox radio group component
  42.      *
  43.      * @property {Ember.String} label
  44.      */
  45.     label: '',
  46.  
  47.     /**
  48.      * label key for option
  49.      *
  50.      * @property {Ember.String} labelPath
  51.      */
  52.     labelPath: 'name',
  53.  
  54.     /**
  55.      * value key for option
  56.      *
  57.      * @property {Ember.String} valuePath
  58.      */
  59.     valuePath: 'value',
  60.  
  61.     /**
  62.      * Class bindings for the checkbox component
  63.      *
  64.      * @property {Ember.Array} classNameBindings
  65.      */
  66.     classNameBindings: ['theme', '_componentClass'],
  67.     theme: 'inline',
  68.     _componentClass: 'fields',
  69.  
  70.     /**
  71.      * options for the checkbox component
  72.      *
  73.      * @property {Ember.Array} options
  74.      */
  75.     options: null,
  76.  
  77.     /**
  78.      * options for the checkbox component
  79.      *
  80.      * @property {Ember.Array} options
  81.      */
  82.     _options: null,
  83.     valueChange: observer('value', function() {
  84.         if (this._options) {
  85.             for (var i = 0; i < this._options.length; i++) {
  86.                 let item = this._options[i];
  87.                 set(item, 'checked', this.isOptionChecked(item['value']));
  88.             }
  89.         }
  90.         this.setupBlockOptions();
  91.     }),
  92.     /**
  93.      * @function initOptions connect options and _options step one
  94.      * @observes "didInsertElement" event
  95.      * @returns  {void}
  96.      */
  97.     init: function() {
  98.         this._super(...arguments);
  99.         this.setupOptions();
  100.         if (!this.name) {
  101.             this.set('name', guidFor(this));
  102.         }
  103.     },
  104.     didInsertElement() {
  105.         this.setupBlockOptions();
  106.     },
  107.     setupBlockOptions() {
  108.         if (this.hasBlock && !this.options) {
  109.             let name = this.name;
  110.             this.$('input').each((index, item) => {
  111.                 if (!$(item).attr('name')) {
  112.                     $(item).attr('name', name);
  113.                 }
  114.                 let checked = this.isOptionChecked($(item).val());
  115.                 $(item).prop('checked', checked);
  116.             });
  117.         }
  118.     },
  119.     setupOptions() {
  120.         let _options = [];
  121.         if (this.options) {
  122.             for (var i = 0; i < this.options.length; i++) {
  123.                 let item = this.options[i];
  124.                 let label = item[this.get('labelPath')];
  125.                 let value = item[this.get('valuePath')];
  126.                 let checked = this.isOptionChecked(value);
  127.                 _options.push({
  128.                     'label': label,
  129.                     'value': String(value),
  130.                     'checked': checked
  131.                 });
  132.             }
  133.             this.set('_options', _options);
  134.         }
  135.     },
  136.     optionsChange: observer('options', function() {
  137.         this.setupOptions();
  138.     }),
  139.     hasBlock: bool('template').readOnly()
  140. });