Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Use 'as' instead of 'type'

Added url, color, search, and tel inputs
  • Loading branch information...
commit f9841211ce7b3f66ee9f027ed37e5197d5cab4cc 1 parent 92b7ab7
@bcardarella bcardarella authored
View
10 README.md
@@ -76,7 +76,7 @@ This will result in the following semantic structure:
You can customize your input by passing certain options.
```handlebars
-{{input secret type="hidden"}}
+{{input secret as="hidden"}}
```
`ember-easyForm` will also try to determine the type automatically
@@ -141,10 +141,16 @@ likewise for "email".
##### options
-* `type` - overrides the type of the input
* `placeholder` - sets the placeholder attribute
* `as` - accepts the following:
* `text` - renders a `textarea` input
+ * `email`
+ * `password`
+ * `url`
+ * `color`
+ * `tel`
+ * `search`
+ * `hidden`
```handlebars
{{inputField bio as="text"}}
View
12 packages/ember-easyForm/lib/helpers/inputField.js
@@ -13,11 +13,19 @@ Ember.Handlebars.registerHelper('inputField', function(property, options) {
if (options.hash.as === 'text') {
return Ember.Handlebars.helpers.view.call(context, Ember.TextArea, options);
} else {
- if (!options.hash.type) {
+ if (!options.hash.as) {
if (property.match(/password/)) {
options.hash.type = 'password';
} else if (property.match(/email/)) {
options.hash.type = 'email';
+ } else if (property.match(/url/)) {
+ options.hash.type = 'url';
+ } else if (property.match(/color/)) {
+ options.hash.type = 'color';
+ } else if (property.match(/^tel/)) {
+ options.hash.type = 'tel';
+ } else if (property.match(/search/)) {
+ options.hash.type = 'search';
} else {
if (propertyType(context, property) === 'number' || typeof(context.get(property)) === 'number') {
options.hash.type = 'number';
@@ -25,6 +33,8 @@ Ember.Handlebars.registerHelper('inputField', function(property, options) {
options.hash.type = 'date';
}
}
+ } else {
+ options.hash.type = options.hash.as;
}
return Ember.Handlebars.helpers.view.call(context, Ember.TextField, options);
}
View
2  packages/ember-easyForm/lib/views/input.js
@@ -16,7 +16,7 @@ Ember.EasyForm.Input = Ember.View.extend({
classNames: ['input', 'string'],
classNameBindings: ['error:fieldWithErrors'],
concatenatedProperties: ['inputOptions'],
- inputOptions: ['type', 'placeholder'],
+ inputOptions: ['as', 'placeholder'],
fieldsForInput: function() {
return this.labelField()+this.inputField()+this.errorField();
},
View
90 packages/ember-easyForm/tests/helpers/inputField_test.js
@@ -62,6 +62,87 @@ test('auto sets input type to password if name includes password', function() {
equal(view.$().find('input').attr('type'), 'password');
});
+test('auto sets input type to password if forced to passwordr', function() {
+ view = Ember.View.create({
+ template: templateFor('{{inputField token as="password"}}'),
+ controller: controller
+ });
+ append(view);
+ equal(view.$().find('input').attr('type'), 'password');
+});
+
+test('auto sets input type to url if name includes url', function() {
+ view = Ember.View.create({
+ template: templateFor('{{inputField url}}'),
+ controller: controller
+ });
+ append(view);
+ equal(view.$().find('input').attr('type'), 'url');
+});
+
+test('auto sets input type to url if forced to url', function() {
+ view = Ember.View.create({
+ template: templateFor('{{inputField website as="url"}}'),
+ controller: controller
+ });
+ append(view);
+ equal(view.$().find('input').attr('type'), 'url');
+});
+
+test('auto sets input type to color if name includes color', function() {
+ view = Ember.View.create({
+ template: templateFor('{{inputField color}}'),
+ controller: controller
+ });
+ append(view);
+ equal(view.$().find('input').attr('type'), 'color');
+});
+
+test('auto sets input type to color if forced to color', function() {
+ view = Ember.View.create({
+ template: templateFor('{{inputField hue as="color"}}'),
+ controller: controller
+ });
+ append(view);
+ equal(view.$().find('input').attr('type'), 'color');
+});
+
+test('auto sets input type to tel if name includes tel', function() {
+ view = Ember.View.create({
+ template: templateFor('{{inputField telephone}}'),
+ controller: controller
+ });
+ append(view);
+ equal(view.$().find('input').attr('type'), 'tel');
+});
+
+test('auto sets input type to tel if forced to tel', function() {
+ view = Ember.View.create({
+ template: templateFor('{{inputField phoneNumber as="tel"}}'),
+ controller: controller
+ });
+ append(view);
+ equal(view.$().find('input').attr('type'), 'tel');
+});
+
+test('auto sets input type to search if name includes search', function() {
+ view = Ember.View.create({
+ template: templateFor('{{inputField search}}'),
+ controller: controller
+ });
+ append(view);
+ equal(view.$().find('input').attr('type'), 'search');
+});
+
+test('auto sets input type to search if forced to search', function() {
+ view = Ember.View.create({
+ template: templateFor('{{inputField query as="search"}}'),
+ controller: controller
+ });
+ append(view);
+ equal(view.$().find('input').attr('type'), 'search');
+});
+
test('auto sets input type to email if name includes email', function() {
view = Ember.View.create({
template: templateFor('{{inputField email}}'),
@@ -71,6 +152,15 @@ test('auto sets input type to email if name includes email', function() {
equal(view.$().find('input').attr('type'), 'email');
});
+test('auto sets input type to email if forced to email', function() {
+ view = Ember.View.create({
+ template: templateFor('{{inputField receivedAt as="email"}}'),
+ controller: controller
+ });
+ append(view);
+ equal(view.$().find('input').attr('type'), 'email');
+});
+
test('auto sets input type to number if property meta attribute is a number', function() {
model.reopen({
metaForProperty: function(property) {
View
2  packages/ember-easyForm/tests/helpers/input_test.js
@@ -100,7 +100,7 @@ test('block form for input', function() {
test('sets input attributes propertly', function() {
view = Ember.View.create({
- template: templateFor('{{input receiveAt type="email" placeholder="Your email"}}'),
+ template: templateFor('{{input receiveAt as="email" placeholder="Your email"}}'),
controller: controller
});
append(view);
Please sign in to comment.
Something went wrong with that request. Please try again.