fallemand · fallemand · Sep 19, 2016 · Sep 19, 2016 · Sep 19, 2016 · Sep 19, 2016
diff --git a/README.md b/README.md
@@ -1,91 +1,41 @@
-# js-telephone-input
+# jsTelephoneInput
 
 ## Overview
-Input with telephone mask and validations for each country.
+Vanilla JS library to validate international telephones. It uses a precompiled and express version of the [google's libphonenumber](https://github.com/googlei18n/libphonenumber) called [awesome-phonenumber](https://github.com/grantila/awesome-phonenumber).
 
-## Demo
-[URL here!](http://mercadolibre.github.io/js-telephone-input)
+![enjzuhgyk8](https://cloud.githubusercontent.com/assets/16105726/18643322/fe9a2380-7e7a-11e6-8033-fe5226085690.gif)
 
 ## How to use
+[Demo Standalone](https://fallemand.github.io/js-telephone-input/demo/demo-standalone.html)
+[Documentation](https://fallemand.github.io/js-telephone-input/documentation/)
 
-### Install
-
-[Instructions to install and use]
-
-## Contribute
-This is the way you can contribute with this project:
-
-### Development
-#### Install
+## Development
 Download this repository, and install node dependencies from the root:
-
 ```
 npm install
 ```
-
 Run build task for generate development assets:
 ```
 npm run build
 ```
-
-Run the following command for browse the demo at [http://localhost:3000](http://localhost:3000):
-```
-npm start
-```
-
 Run dist task for generate production assets:
 ```
 npm run dist
 ```
-
-##### Tests
-
-**Unit**
-
 Run test command for run unit tests:
 ```
 npm test
 ```
-
-**End to End**
-
-Just once run install-selenium task for preapare the enviroment for run e2e tests:
-```
-npm run install-selenium
-```
-
-Then run nightwatch every time you want to run e2e tests:
-```
-npm run nightwatch
-```
-
-If you need to pass parameters to the task you can do it so:
-```
-npm run nightwatch -- --verbose
-```
-Look at all the options [here](http://nightwatchjs.org/guide#command-line-options).
-
-##### Deploy
-
-Run swift command for upload static files to swift server (assuming that we upload the v1.0.0 release):
-```
-npm run swift -- --release v1.0.0
-```
-
-Run gh-pages command for deploy site to gh-pages:
-```
-npm run gh-pages
-```
-
-
 ## Maintenance
-
-Front-End team ([email protected])
+Facundo Allemand ([email protected])
 
 ## Change log
-[See releases](https://github.com/mercadolibre/js-telephone-input/releases)
+[See releases](https://github.com/fallemand/js-telephone-input/releases)
 
 ## TO-DO
-[See the issue tracker](https://github.com/mercadolibre/js-telephone-input/issues)
-
-## Browser support
+[See the issue tracker](https://github.com/fallemand/js-telephone-input/issues)
+-Improve documentation webpage
+-Add tests.
+-Add new methods.
+-Define as parameter the countries you want
+-Document with [jsDocs](http://usejsdoc.org/)
diff --git a/config/bundles.js b/config/bundles.js
@@ -0,0 +1,15 @@
+/**
+ * Bundles
+ */
+exports.scripts = {
+    'js-telephone-input': ['./src/scripts/js-telephone-input.js']
+};
+
+exports.styles = {
+    'js-telephone-input': ['./src/styles/js-telephone-input.scss'],
+    'js-telephone-input-chico': ['./src/styles/js-telephone-input-chico.scss']
+};
+
+exports.images = {
+    'images': './src/images/**/*.{png,jpg,ico,svg,gif}'
+};
diff --git a/demo/demo-standalone.html b/demo/demo-standalone.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html class="no-js" lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>JsTelephoneInput | Standalone Demo</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="../ui-build/css/js-telephone-input.css">
+
+</head>
+
+<body>
+    <h1>Demo Standalone</h1>
+    <form>
+        <div class="ui-telephone">
+            <div class="ui-telephone__number">
+                <input data-js="telephone" type="text" />
+            </div>
+            <div data-js="tel-validations" class="ui-telephone__validations"></div>
+        </div>
+    </form>
+
+    <h2>Resultado</h2>
+    <span class="result">Código Área: </span> <input data-js="telephoneAreaCode" type="text" /> <br />
+    <span class="result">Teléfono: </span> <input data-js="telephoneNumber" type="text" />
+
+    <script src="../ui-build/js/js-telephone-input.js"></script>
+    <script src="./demo-standalone.js"></script>
+</body>
+
+</html>
diff --git a/demo/demo-standalone.js b/demo/demo-standalone.js
@@ -0,0 +1,31 @@
+window.onload = function () {
+    //Define parameters
+    var messages = {
+            'required': 'Completa este dato.',
+            'valid': 'El teléfono es correcto.',
+            'min': 'Este teléfono tiene menos dígitos de los requeridos.',
+            'invalidDefaultNumber': 'El teléfono cargado en tu cuenta no es válido. Verifícalo por favor.',
+            'max': 'Este teléfono excede el máximo de dígitos posible.',
+            'numbers': 'Sólo puedes ingresar números.',
+            'possible': 'Revisa tu teléfono.',
+            'notANumber': 'El teléfono no es un número.',
+            'zero': 'Ingrésalo siguiendo el formato de este ejemplo: ##example##'
+        },
+        parameters = {
+            required: false,
+            withFlag: true,
+            country: 'ar',
+            messages: messages,
+            validations : 'tel-validations',
+            areaCode : "telephoneAreaCode",
+            number : "telephoneNumber"
+        };
+
+    var telephoneInput = document.querySelector('[data-js="telephone"]');
+
+    //Initialize component
+    telephoneInput = new jsTelephoneInput(telephoneInput, parameters);
+
+    //Call method
+    console.log(telephoneInput.isValid());
+};
diff --git a/documentation/documentation.css b/documentation/documentation.css
@@ -0,0 +1,123 @@
+/* --------------------------------------------------------
+    Demo HTML - This is not part of the component
+-------------------------------------------------------- */
+
+body {
+    margin: 30px auto;
+    background-color: #eee;
+    color: #888;
+    font-family: 'Lato', sans-serif;
+    font-weight: 300;
+    max-width: 1050px;
+}
+
+h1, h2, h3, h4 {
+    font-weight: 300;
+}
+
+b, strong {
+    font-weight: 400;
+}
+
+a:visited {
+    color: #03B;
+}
+
+/* Demo Section
+------------------------------------------------------------*/
+
+.demo {
+    width: 380px;
+    display: inline-block;
+}
+
+.demo .ch-box-lite {
+    padding: 15px 20px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,.2);
+    -moz-box-shadow: 0 0 7px 0 rgba(0,0,0,.2);
+    box-shadow: 0 0 7px 0 rgba(0,0,0,.2);
+}
+
+.demo-telephone {
+    min-height: 100px;
+}
+
+.demo-title {
+    font-weight: 300;
+}
+
+.demo-result {
+    display: inline-block;
+    width: 90px;
+}
+
+
+.demo-value {
+    margin-top: 4px;
+    height: 15px;
+    width: 100px;
+    padding: 1px 2px;
+    font-size: 12px;
+}
+
+select.demo-value {
+    margin-top: 3px;
+    height: 15px;
+    width: 60px;
+    padding: 1px 2px;
+    font-size: 12px;
+}
+
+.demo .ch-btn {
+    margin-top: 5px;
+}
+
+/* Documentation Section
+------------------------------------------------------------*/
+
+.documentation {
+    margin-left: 20px;
+    padding: 20px 20px 15px;
+    width: 600px;
+    height: 500px;
+    overflow-y: scroll;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.documentation-title {
+    font-size: 28px;
+    text-align: center;
+    margin: 100px 0 20px;
+}
+
+.documentation-title small {
+    font-size: 16px;
+}
+
+.documentation-article {
+    margin-top: 20px;
+    padding-top: 20px;
+    margin-bottom: 10px;
+    border-top: 1px dashed #ccc;
+}
+
+.documentation-article h2 {
+    margin-bottom: 20px;
+}
+
+.documentation-article-step {
+    margin-top: 15px;
+}
+
+.documentation pre {
+    margin-top: 15px;
+}
+
+.documentation xmp {
+    margin: -25px 0 -40px;
+}
+
diff --git a/documentation/documentation.js b/documentation/documentation.js
@@ -0,0 +1,67 @@
+window.onload = function () {
+    initializeComponent();
+
+    initializeDemo();
+};
+
+function initializeComponent() {
+    //Define parameters
+    var messages = {
+            'required': 'Completa este dato.',
+            'valid': 'El teléfono es correcto.',
+            'min': 'Este teléfono tiene menos dígitos de los requeridos.',
+            'invalidDefaultNumber': 'El teléfono cargado en tu cuenta no es válido. Verifícalo por favor.',
+            'max': 'Este teléfono excede el máximo de dígitos posible.',
+            'numbers': 'Sólo puedes ingresar números.',
+            'possible': 'Revisa tu teléfono.',
+            'notANumber': 'El teléfono no es un número.',
+            'zero': 'Ingrésalo siguiendo el formato de este ejemplo: ##example##'
+        },
+        parameters = {
+            required: (document.querySelector("[data-js='required']").value == 'Yes'),
+            withFlag: (document.querySelector("[data-js='withFlag']").value == 'Yes'),
+            canChangeCountry: (document.querySelector("[data-js='canChangeCountry']").value == 'Yes'),
+            messages: messages
+        };
+
+    //Initialize component
+    var telephoneInput = document.querySelector("[data-js='telephone']");
+    telephoneInput = new jsTelephoneInput(telephoneInput, parameters);
+
+}
+
+function initializeDemo() {
+
+    //Fill select with countries
+    var countries = [
+        "ar","bo","br","cl","co","do","ec","sv","gt","hn","mx","ni","pa","py","pe","pt","uy","ve"
+    ];
+    var countrySelect = document.querySelector("[data-js='country']");
+    var option;
+    for(var country in countries) {
+        option = document.createElement('option');
+        option.innerText = countries[country];
+        countrySelect.appendChild(option);
+    }
+
+    //Button event
+    var saveButton = document.querySelector("[data-js='saveParameters']");
+    saveButton.onclick = function() {changeParameters()};
+}
+
+function changeParameters() {
+    var initialValue = document.querySelector("[data-js='initialValue']").value;
+    var tel = document.querySelector("[data-js='demo-telephone']");
+    tel.className = 'ui-telephone';
+    var telNumber = document.createElement('div');
+    telNumber.className = 'ui-telephone__number';
+    telNumber.innerHTML = '<input data-js="telephone" type="text" value="' + initialValue + '" data-validations="tel-validations" data-country="' + document.querySelector("[data-js='country']").value + '" data-area-code="telephoneAreaCode" data-full-number="telephoneFullNumber" data-number="telephoneNumber" />';
+    var telValidations = document.createElement('div');
+    telValidations.setAttribute('data-js', 'tel-validations');
+    telValidations.className = 'ui-telephone__validations';
+    tel.innerHTML = '';
+    tel.appendChild(telNumber);
+    tel.appendChild(telValidations);
+
+    initializeComponent();
+}