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

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')
+});

addon/templates/components/materialize-button.hbs

@@ -2,3 +2,4 @@
   <i {{bind-attr class="icon iconPosition"}}></i>
 {{/if}}
 {{text}}
+{{yield}}

addon/templates/components/materialize-checkbox.hbs

@@ -0,0 +1,2 @@
+{{input type="checkbox" class="selectable-item-input" checked=isSelected disabled=disabled}}
+<label class="materialize-selectable-item-label">{{name}}{{yield}}</label>

addon/templates/components/materialize-radio.hbs

@@ -0,0 +1,3 @@
+<input type="radio" class="selectable-item-input" {{bind-attr checked=isSelected id=_inputId name=groupName disabled=disabled value=value}} />
+<label class="materialize-selectable-item-label selectable-item-label" >{{name}}{{yield}}</label>
+

addon/templates/components/materialize-range.hbs

@@ -0,0 +1,2 @@
+<label>{{name}}</label>
+{{input type="range" min=min max=max step=step value=value disabled=disabled}}

addon/templates/components/materialize-selectable-item-group.hbs

@@ -0,0 +1,4 @@
+{{yield}}
+{{#each _content as |item|}}
+  <p>{{view selectableItemView content=item}}</p>
+{{/each}}

addon/templates/components/materialize-switch.hbs

@@ -0,0 +1,8 @@
+<span class="switch-label materialize-selectable-item-label">{{name}}</span>
+<label {{bind-attr class=_labelClass}}>
+  <span class="offlabel">{{offLabel}}</span>
+  {{input type="checkbox" disabled=disabled checked=isSelected}}
+  <span class="lever"></span>
+  <span class="onlabel">{{onLabel}}</span>
+</label>
+

app/components/materialize-checkbox.js

@@ -0,0 +1,3 @@
+import materializeCheckbox from 'ember-cli-materialize/components/materialize-checkbox';
+
+export default materializeCheckbox;

app/components/materialize-checkboxes.js

@@ -0,0 +1,3 @@
+import materializeCheckboxes from 'ember-cli-materialize/components/materialize-checkboxes';
+
+export default materializeCheckboxes;

app/components/materialize-radio.js

@@ -0,0 +1,3 @@
+import materializeRadio from 'ember-cli-materialize/components/materialize-radio';
+
+export default materializeRadio;

app/components/materialize-radios.js

@@ -0,0 +1,3 @@
+import materializeRadios from 'ember-cli-materialize/components/materialize-radios';
+
+export default materializeRadios;

app/components/materialize-range.js

@@ -0,0 +1,3 @@
+import materializeRange from 'ember-cli-materialize/components/materialize-range';
+
+export default materializeRange;

app/components/materialize-switch.js

@@ -0,0 +1,3 @@
+import materializeSwitch from 'ember-cli-materialize/components/materialize-switch';
+
+export default materializeSwitch;

app/components/materialize-switches.js

@@ -0,0 +1,3 @@
+import materializeSwitches from 'ember-cli-materialize/components/materialize-switches';
+
+export default materializeSwitches;

tests/dummy/app/controllers/forms.js

@@ -0,0 +1,70 @@
+import Ember from "ember";
+
+function asJSON(propKey) {
+  return new Ember.computed(propKey,propKey + '.[]', function () {
+    return JSON.stringify(this.get(propKey));
+  });
+}
+
+export default Ember.Controller.extend({
+  frameworks: new Ember.A([
+      {id: 1, value: 'Materialize CSS'},
+      {id: 2, value: 'Ember-CLI Materialize'}
+  ]),
+
+  errors: Ember.Object.create({
+    name: new Ember.A([]),
+    framework: new Ember.A([])
+  }),
+
+  nameDidChange: Ember.observer('name', function() {
+    var errors = this.get('errors');
+    var messages = [];
+    if (!Ember.isPresent(this.get('name'))) {
+      messages = ['This field is required'];
+    }
+    errors.set('name', messages);
+    this.set('errors', errors);
+  }),
+
+  frameworkDidChange: Ember.observer('framework', function() {
+    var self = this;
+    var errors = self.get('errors');
+    Ember.run.later(function() {
+      var messages = [];
+      if (!Ember.isPresent(self.get('framework'))) {
+        messages = ['This field is required'];
+      }
+      errors.set('framework', messages);
+      self.set('errors', errors);
+    }, 100);
+  }),
+  rangeValue: 64,
+  switchValue1: true,
+  notSwitchValue: Ember.computed.not('switchValue'),
+  switchValue: true,
+  checkValueOne: false,
+  checkValueTwo: true,
+
+  checkboxIsSelected: false,
+  radioIsSelected: false,
+  radioSelection: 2,
+  otherRadioSelection: 'green',
+  radioChoices: Ember.A([{ id: 1, text: "One" }, { id: 2, text: "Two" }]),
+
+  radioSelectionString: asJSON("radioSelection"),
+  radioChoicesString: asJSON("radioChoices"),
+
+  checkboxSelections: Ember.A([3, 4]),
+  checkboxChoices: Ember.A([{ id: 3, label: "Three" }, { id: 4, label: "Four" }, { id: 5, label: "Five" }]),
+
+  switchesChoicesString: asJSON('switchesChoices'),
+  switchesChoices: Ember.A([{ key: 6, name: "Six" }, { key: 7, name: "Seven" }, { key: 8, name: "Eight" }]),
+  switchesSelections: Ember.A([7]),
+  switchesSelection: 7,
+  switchesSelectionString: asJSON('switchesSelection'),
+  switchesSelectionsString: asJSON('switchesSelections'),
+
+  checkboxChoicesString: asJSON("checkboxChoices"),
+  checkboxSelectionsString: asJSON("checkboxSelections")
+});