ember-intl-tel-input

An Ember.js addon for entering and validating international telephone numbers.

Please check out the demo page to see the addon in action.

For more information on using ember-cli, visit http://www.ember-cli.com/.

Installation

$ ember install ember-intl-tel-input

Basic Usage

Just place the {{intl-tel-input}} component in the handlebars template, as you would have guessed.

{{intl-tel-input}}

The component derives from Ember.TextField, anything you can do with the input helper can also be done with this component.

{{intl-tel-input value="555-5555"}}

With Utilities Script

With the utilities script included, the autoFormat and autoPlaceholder options are automatically enabled.

If your ember version is <= 1.12, use Brocfile:

// Brocfile.js (if ember <= 1.12)

var app = new EmberAddon({

  intlTelInput: {
    includeUtilsScript: true, // default to false
  },

});

Otherwise, use ember-cli-build.js

// ember-cli-build.js

var app = new EmberApp(defaults, {
  // Add options here
  intlTelInput: {
    includeUtilsScript: true,
  }
});

{{intl-tel-input}}

Properties Binding

Use the following properties for binding:

value for input value
selectedCountryData for data of the currently selected country
number for formatted phone number
extension for the extension part of the number
numberType for the type of the current number
isValidNumber for the validity of the number
validationError for information about a validation error

{{intl-tel-input
  allowExtensions=true
  value=value
  selectedCountryData=selectedCountryData
  number=number
  extension=extension
  numberType=numberType
  isValidNumber=isValidNumber
  validationError=validationError}}

Lookup User's Country

intl-tel-input provides a convenient way to look up the user's country based on their IP addresses. This example uses Telize for demonstration.

// controller

geoIpLookupFunc: function(callback) {
  $.getJSON('//www.telize.com/geoip')
   .always(function(resp) {
     if (!resp || !resp.country_code) {
       callback('');
     }

     callback(resp.country_code);
   });
}

{{intl-tel-input
  defaultCountry="auto"
  geoIpLookup=geoIpLookupFunc}}

Running The Demo Page Locally

Run ember server, and visit the demo page at http://localhost:4200.

Credits

This is a wrapper library. It simply wraps the API of the original jQuery plugin created by Jack O'Connor into an Ember.js component.

The original jQuery plugin also depends on several other open-source libraries:

Flag images from region-flags
Original country data from mledoze's World countries in JSON, CSV and XML
Formatting/validation/example number code from Google's libphonenumber
Lookup user's country using ipinfo.io

This addon's demo page uses Telize for a fast, SSL-supported, yet FREE Geo IP service.

The layout and color theme of the demo page comes from Twitter's Bootstrap and Ember.js, respectively.

isabella232 / ember-intl-tel-input Goto Github PK