-
Notifications
You must be signed in to change notification settings - Fork 113
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #24 from rynam0/input-fields
create input components for Date, Select, and TextArea
- Loading branch information
Showing
21 changed files
with
465 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import MaterializeInput from './materialize-input'; | ||
| import layout from '../templates/components/materialize-date-input'; | ||
|
|
||
| export default MaterializeInput.extend({ | ||
| layout: layout, | ||
| selectMonths: true, | ||
| numberOfYears: 15, | ||
| min: '', | ||
| max: '', | ||
| didInsertElement: function() { | ||
| this._super(); | ||
| var self = this; | ||
| this.$('.datepicker').pickadate({ | ||
| selectMonths: self.selectMonths, | ||
| selectYears: self.numberOfYears, | ||
| min: self.min, | ||
| max: self.max | ||
| }); | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import Ember from 'ember'; | ||
|
|
||
| export default Ember.Component.extend({ | ||
| init: function() { | ||
| this._super(); | ||
| // bind validation errors | ||
| var propertyPath = this.get('valueBinding._label'); | ||
| if (Ember.isPresent(propertyPath)) { | ||
| Ember.Binding.from('targetObject.errors.' + propertyPath) | ||
| .to('errors') | ||
| .connect(this); | ||
| } | ||
| }, | ||
| bindAttributes: ['disabled', 'readonly'], | ||
| tagName: 'div', | ||
| classNames: ['input-field'], | ||
| validate: false, | ||
| id: Ember.computed(function() { | ||
| var elementId = this.get('elementId'); | ||
| return elementId + '-input'; | ||
| }), | ||
| didInsertElement: function() { | ||
| // pad the errors element when an icon is present | ||
| if (Ember.isPresent(this.get('icon'))) { | ||
| this.$('>span').css('padding-left', '3rem'); | ||
| } | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import Ember from 'ember'; | ||
| import MaterializeInputField from './materialize-input-field'; | ||
| import layout from '../templates/components/materialize-select'; | ||
|
|
||
| export default MaterializeInputField.extend({ | ||
| layout: layout, | ||
| didInsertElement: function() { | ||
| this._super(); | ||
| this.$('select').material_select(); | ||
| }, | ||
| errorsDidChange: function() { | ||
| var self = this; | ||
| var inputSelector = this.$('input'); | ||
| // monitor the select's validity and copy the appropriate validation class to the materialize input element. | ||
| Ember.run.later(function() { | ||
| var isValid = self.$('select').hasClass('valid'); | ||
| if (isValid) { | ||
| inputSelector.removeClass('invalid'); | ||
| inputSelector.addClass('valid'); | ||
| } else { | ||
| inputSelector.removeClass('valid'); | ||
| inputSelector.addClass('invalid'); | ||
| } | ||
| }, 150); | ||
| }.observes('errors') | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import Ember from 'ember'; | ||
| import InputField from './materialize-input-field'; | ||
| import layout from '../templates/components/materialize-textarea'; | ||
|
|
||
| export default InputField.extend({ | ||
| layout: layout, | ||
| didInsertElement: function() { | ||
| this._super(); | ||
| // make sure the label moves when a value is bound. | ||
| var labelSelector = this.$('>label'); | ||
| if (Ember.isPresent(this.get('value')) && !labelSelector.hasClass('active')) { | ||
| labelSelector.addClass('active'); | ||
| } | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| {{#if icon}} | ||
| <i {{bind-attr class="icon :prefix"}}></i> | ||
| {{/if}} | ||
| <input type="date" {{bind-atrr id=id}} {{bind-attr class="validate:validate: errors:invalid:valid :datepicker"}} | ||
| {{bind-attr data-value=value}} {{bind-attr required=required}} {{bind-attr readonly=readonly}} | ||
| {{bind-attr disabled=disabled}}/> | ||
| <label {{bind-attr for=id}}>{{label}}</label> | ||
| <small class="red-text"> | ||
| {{#if errors}} {{errors.firstObject}} {{else}} {{/if}} | ||
| </small> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <label {{bind-attr id=id}} class="active">{{label}}</label> | ||
| {{view "select" id=id content=content optionValuePath=optionValuePath optionLabelPath=optionLabelPath prompt=prompt | ||
| value=value classNameBindings="validate:validate: errors:invalid:valid"}} | ||
| <small class="red-text"> | ||
| {{#if errors}} {{errors.firstObject}} {{else}} {{/if}} | ||
| </small> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| {{#if icon}} | ||
| <i {{bind-attr class="icon :prefix"}}></i> | ||
| {{/if}} | ||
| {{textarea id=id value=value name=name required=required readonly=readonly disabled=disabled maxlength=maxlength | ||
| class="materialize-textarea"}} | ||
| <label {{bind-attr for=id}}>{{label}}</label> | ||
| <small class="red-text"> | ||
| {{#if errors}} {{errors.firstObject}} {{else}} {{/if}} | ||
| </small> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import materializeDateInput from 'ember-cli-materialize/components/materialize-date-input'; | ||
|
|
||
| export default materializeDateInput; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import materializeInputField from 'ember-cli-materialize/components/materialize-input-field'; | ||
|
|
||
| export default materializeInputField; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import materializeSelect from 'ember-cli-materialize/components/materialize-select'; | ||
|
|
||
| export default materializeSelect; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import materializeTextarea from 'ember-cli-materialize/components/materialize-textarea'; | ||
|
|
||
| export default materializeTextarea; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,33 @@ | ||
| import Ember from 'ember'; | ||
|
|
||
| export default Ember.ObjectController.extend({ | ||
|
|
||
| frameworks: [ | ||
| {id: 1, value: 'Materialize CSS'}, | ||
| {id: 2, value: 'Ember-CLI Materialize'} | ||
| ], | ||
| errors: Ember.Object.create({ | ||
| name: [], | ||
| framework: [] | ||
| }), | ||
| nameDidChange: function() { | ||
| var errors = { name: [] }; | ||
| var errors = this.get('errors'); | ||
| var messages = []; | ||
| if (!Ember.isPresent(this.get('name'))) { | ||
| errors.name = ['This field is required']; | ||
| } else { | ||
| errors.name = []; | ||
| messages = ['This field is required']; | ||
| } | ||
| errors.set('name', messages); | ||
| this.set('errors', errors); | ||
| }.observes('name') | ||
|
|
||
| }.observes('name'), | ||
| frameworkDidChange: 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); | ||
| }.observes('framework') | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.