Checkbox, Radio, Switch, Range and Checkbox/Radio/Switch List components

Author: Mike North

addon/components/materialize-checkbox.js

@@ -0,0 +1,7 @@
+import SelectableItem from './materialize-selectable-item';
+import layout from '../templates/components/materialize-checkbox';
+
+export default SelectableItem.extend({
+  layout: layout,
+  classNames: ['materialize-checkbox']
+});

addon/components/materialize-checkboxes.js

@@ -0,0 +1,11 @@
+import SelectableItemGroup from './materialize-selectable-item-group';
+import CheckboxComponent from './materialize-checkbox';
+import GroupSelectableItemMixin from '../mixins/group-selectable-item';
+
+
+var GroupCheckboxComponent = CheckboxComponent.extend(GroupSelectableItemMixin, { });
+
+export default SelectableItemGroup.extend({
+  selectableItemView: GroupCheckboxComponent,
+  multiple: true
+});

addon/components/materialize-radio.js

@@ -0,0 +1,40 @@
+import Ember from 'ember';
+import SelectableItem from './materialize-selectable-item';
+import layout from '../templates/components/materialize-radio';
+
+export default SelectableItem.extend({
+  layout: layout,
+  className: ['materialize-radio'],
+  groupName: Ember.computed.alias('group.element.id'),
+
+  _inputId: Ember.computed('element.id', function () {
+    return this.get('element.id') + 'input';
+  }).readOnly(),
+
+  didInsertElement() {
+    this._super(...arguments);
+    this._checkboxInitialization();
+  },
+
+  _checkboxInitialization() {
+    /*
+      Workaround for a limitation of the {{input}} helper, where
+      the checked property doesn't two-way bind as expected when
+      type="radio" is used
+     */
+    this._radioChangeListener = jqEvt => this.set('isSelected', jqEvt.target.checked);
+
+    this.$('.selectable-item-input')
+      .on('change', this._radioChangeListener);
+
+    // Potentially part of the same workaround. We need to
+    //  set the initial state of the radio button explicitly
+    this.$('.selectable-item-input')
+      .prop('checked', this.get('isSelected'));
+  },
+
+  willDestroyElement() {
+    this.$('.selectable-item-input')
+      .off('change', this._radioChangeListener);
+  }
+});

addon/components/materialize-radios.js

@@ -0,0 +1,9 @@
+import SelectableItemGroup from './materialize-selectable-item-group';
+import RadioComponent from './materialize-radio';
+import GroupSelectableItemMixin from '../mixins/group-selectable-item';
+
+var GroupRadioComponent = RadioComponent.extend(GroupSelectableItemMixin, { });
+
+export default SelectableItemGroup.extend({
+    selectableItemView: GroupRadioComponent
+});

addon/components/materialize-range.js

@@ -0,0 +1,10 @@
+import Ember from 'ember';
+import layout from '../templates/components/materialize-range';
+
+export default Ember.Component.extend({
+  min: 0,
+  max: 100,
+  step: 5,
+  layout: layout,
+  classNames: ['range-field']
+});

addon/components/materialize-selectable-item-group.js

@@ -0,0 +1,81 @@
+import Ember from 'ember';
+import layout from '../templates/components/materialize-selectable-item-group';
+
+var get = Ember.get,
+  map = Ember.EnumerableUtils.map,
+  indexOf = Ember.EnumerableUtils.indexOf;
+
+export default Ember.Component.extend({
+  content: null,
+  selection: null,
+  layout: layout,
+  optionValuePath: 'content',
+  optionLabelPath: 'content',
+  multiple: false,
+  __materializeSelectableItemGroup: true,
+
+  init() {
+    this._super(...arguments);
+    if (this.get('selection') === null && !!this.get('multiple')) {
+      this.set('selection', Ember.A());
+    }
+  },
+
+  isValueSelected(value) {
+    if (this.get('multiple')) {
+      return indexOf(this.get('selection'), value) >= 0;
+    }
+    else {
+      return this.get('selection') === value;
+    }
+  },
+
+  setValueSelection(value, select) {
+    if (select) {
+      return this.addToSelection(value);
+    }
+    else {
+      return this.removeFromSelection(value);
+    }
+  },
+
+  addToSelection(value) {
+    if (this.get('multiple')) {
+      this.get('selection').addObject(value);
+    }
+    else {
+      this.set('selection', value);
+    }
+  },
+
+  removeFromSelection(value) {
+    if (this.get('multiple')) {
+      this.get('selection').removeObject(value);
+    }
+    else {
+      throw new Error('removeFromSelection is not supported in single-selection mode');
+    }
+  },
+
+  _valuePath: Ember.computed('optionValuePath', function () {
+    var optionValuePath = get(this, 'optionValuePath');
+    return optionValuePath.replace(/^content\.?/, '');
+  }),
+
+  _labelPath: Ember.computed('optionLabelPath', function () {
+    var optionLabelPath = get(this, 'optionLabelPath');
+    return optionLabelPath.replace(/^content\.?/, '');
+  }),
+
+  _content: Ember.computed('content.[]', '_valuePath', '_labelPath',function () {
+    var valuePath = get(this, '_valuePath');
+    var labelPath = get(this, '_labelPath');
+    var content = get(this, 'content') || Ember.A([]);
+
+    if (valuePath && labelPath) {
+      return Ember.A(map(content, function (el) { return {value: get(el, valuePath), label: get(el, labelPath)}; }));
+    } else {
+      return Ember.A(map(content, function (el) { return {value: el, label: el}; }));
+    }
+  })
+});

addon/components/materialize-selectable-item.js

@@ -0,0 +1,50 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  checked: null,
+  classNames: ['materialize-selectable-item'],
+  _checked: Ember.computed('group.selection', 'group.selection.[]', function (key, val) {
+    var group = this.get('group');
+    if (!group) {
+      if (arguments.length <= 1) {
+        return this.get('checked');
+      }
+      else {
+        this.set('checked', val);
+        return val;
+      }
+    }
+    else {
+      // Operate in the context of a group. The group owns
+      // the selection state
+      if (arguments.length <= 1) {
+        // get
+        return group.isValueSelected(this.get('value'));
+      }
+      else {
+        //set
+        group.setValueSelection(this.get('value'), val);
+        return !!val;
+      }
+    }
+  }),
+
+  isSelected: Ember.computed.alias('_checked'),
+  _setupLabel() {
+    var $input = this.$('.selectable-item-input')[0];
+
+    var inputId = $input ? $input.id : null;
+    if (inputId) {
+      this.$('.selectable-item-label').attr('for', inputId);
+    }
+  },
+
+  didInsertElement() {
+    this._super(...arguments);
+    this._setupLabel();
+  },
+
+  group: Ember.computed(function () {
+    return this.nearestWithProperty('__materializeSelectableItemGroup');
+  })
+});

addon/components/materialize-switch.js

@@ -0,0 +1,15 @@
+import Ember from 'ember';
+import SelectableItem from './materialize-selectable-item';
+import layout from '../templates/components/materialize-switch';
+
+export default SelectableItem.extend({
+  layout: layout,
+  offLabel: 'Off',
+  onLabel: 'On',
+  disabled: false,
+
+  classNames: ['switch', 'materialize-switch'],
+  _labelClass: Ember.computed('name', function () {
+    return this.get('name') ? 'right' : '';
+  })
+});

addon/components/materialize-switches.js

@@ -0,0 +1,10 @@
+import SelectableItemGroup from './materialize-selectable-item-group';
+import GroupSelectableItemMixin from '../mixins/group-selectable-item';
+import SwitchComponent from './materialize-switch';
+
+var GroupSwitchComponent = SwitchComponent.extend(GroupSelectableItemMixin, { });
+
+export default SelectableItemGroup.extend({
+  selectableItemView: GroupSwitchComponent,
+  multiple: true
+});

addon/mixins/group-selectable-item.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Mixin.create({
+  name: Ember.computed.alias('content.label'),
+  value: Ember.computed.alias('content.value'),
+  disabled: Ember.computed.alias('group.disabled')
+});