localization!

README.md

@@ -16,7 +16,7 @@ The best forms just got better! Ideal Forms 3 is smaller, faster, and more exten
 - Custom checkboxes, radios and file inputs
 - Custom seamless jQuery UI datepicker
 - Support for third party extensions
-- Localization (todo)
+- Localization
 
 ### Major changes since version 2
 
@@ -33,7 +33,7 @@ Ideal Forms 3 is **not** compatible with version 2. You can still find Ideal For
 
 ### TODO
 
-- i18n
+- Bring back other languages to Ideal Forms 3
 
 ## Table of Contents
 
@@ -54,6 +54,7 @@ Ideal Forms 3 is **not** compatible with version 2. You can still find Ideal For
     - [Adaptive](#extension-adaptive)
 - [Custom Rules](#custom-rules)
 - [Custom Extensions](#custom-extensions)
+- [Localization](#localization)
 - [Themes](#themes)
 - [FAQ](#faq)
 - [Build & Share](#build--share)
@@ -84,6 +85,7 @@ $('form').idealforms({ options });
 
 ```javascript
 defaults = {
+  i18n: 'en',
   field: '.field',
   error: '.error',
   iconHtml: '<i/>',
@@ -98,6 +100,10 @@ defaults = {
 }
 ```
 
+### i18n
+
+Localize Ideal Forms. See [Localization](#localization).
+
 ### field
 
 The field container for [custom markup](#custom-markup).
@@ -320,7 +326,7 @@ A rule must be in this format `rule:param` where `rule` is the name of the `rule
 
 To call a method run `idealforms` on the form and pass the method and arguments:
 
-```javascript
+```javascript`
 $('form').idealforms('method', arg1, arg2, ...);
 ```
 
@@ -722,7 +728,7 @@ To add a custom extension provide a `name`, extended `options` and extended `met
 - **focusFirstInvalid:** Inject code when the first input is focused.
 - **reset(name):** Reset the form. `name` is an input name, if any. Check the [reset](#idealformsreset-name) method.
 
-It is recommended that you always namespace your extension, by prefixing it with a unique identifier:
+It is recommended that you always namespace your extension, by prefixing it with a unique identifier. To allow for Ideal Forms localization, add the `i18n` option and all the strings that may change inside, then build your extension with localization in mind:
 
 ```javascript
 $.idealforms.addExtension({
@@ -730,14 +736,19 @@ $.idealforms.addExtension({
   name: 'MY_extensionName',
   
   options: {
-    MY_option: 'default'  
+    MY_extension: {
+      option: 'default',
+      i18n: {
+        initialized: 'Initialized'
+      }
+    }
   },
   
   methods: {
     
     // @extend
     _init: function() {
-    
+      console.log(this.opts.i18n.initialized +'!');
     },
     
     MY_newMethod: function() {
@@ -759,6 +770,50 @@ _init: function() {
 
 [![TOC](http://i.imgur.com/RDbarNr.png)](#table-of-contents)
 
+## Localization
+
+To localize Ideal Forms load the corresponding i18n file from `js/i18n` **after** the plugin and pass the `i18n` option:
+
+```html
+<script src="jquery.idealforms.js"></script>
+<script src="jquery.idealforms.i18n.es.js"></script>
+
+<script>
+  $('form').idealforms({
+    i18n: 'es',
+    ...
+  });
+</script>
+```
+
+Creating your own locale file:
+
+```javascript
+/**
+ * i18n ES
+ */
+$.idealforms.i18n.es = {
+
+  customInputs: {
+    open: 'Abrir'
+  },
+  
+  steps: {
+    step: 'Paso'
+  },
+
+  errors: {
+    required: 'Este campo es obligatorio',
+    digits: 'Debe contener sólo cifras',
+    name: 'Debe contener al menos 3 caracteres y contener únicamente letras',
+    ...
+  }
+};
+
+```
+
+External plugins like the jQuery UI datepicker have to be localized separately in their own way.
+
 ## Themes
 
 Ideal Forms 3 themes are built with [Stylus](http://learnboost.github.io/stylus/). To create your own theme to use with the default markup open `styl/vars.stly`, modify what you need and [compile](#build--share).

js/extensions/ajax/ajax.ext.js

@@ -9,9 +9,7 @@ module.exports = {
 
       $.extend($.idealforms, { _requests: {} });
 
-      $.extend($.idealforms.errors, {
+      $.idealforms.errors.ajax = $.idealforms.errors.ajax || 'Loading...';
-        ajax: 'Loading...'
-      });
 
       $.extend($.idealforms.rules, {
 

js/extensions/custom-inputs/custom-inputs.ext.js

@@ -5,6 +5,14 @@ module.exports = {
 
   name: 'customInputs',
 
+  options: {
+    customInputs: {
+      i18n: {
+        open: 'Open'
+      }
+    }
+  },
+
   methods: {
 
     // @extend
@@ -17,7 +25,7 @@ module.exports = {
     },
 
     _buildCustomInputs: function() {
-      this.$form.find(':file').idealfile();
+      this.$form.find(':file').idealfile(this.opts.customInputs.i18n);
       this.$form.find(':checkbox, :radio').idealradiocheck();
     }
 

js/extensions/custom-inputs/idealfile.js

@@ -10,6 +10,10 @@
 
   plugin.name = 'idealfile';
 
+  plugin.defaults = {
+    open: 'Open'
+  };
+
   plugin.methods = {
 
     _init: function() {
@@ -18,9 +22,9 @@
         , $wrap = $('<div class="ideal-file-wrap">')
         , $input = $('<input type="text" class="ideal-file-filename" />')
           // Button that will be used in non-IE browsers
-        , $button = $('<button type="button" class="ideal-file-upload">Open</button>')
+        , $button = $('<button type="button" class="ideal-file-upload">'+ this.opts.open +'</button>')
           // Hack for IE
-        , $label = $('<label class="ideal-file-upload" for="' + $file[0].id + '">Open</label>');
+        , $label = $('<label class="ideal-file-upload" for="' + $file[0].id + '">'+ this.opts.open +'</label>');
 
       if (isIE) $label.add($button).addClass('ie');
 

js/extensions/steps/steps.ext.js

@@ -5,19 +5,25 @@ module.exports = {
   name: 'steps',
 
   options: {
+
     steps: {
+
       container: '.idealsteps-container',
       nav: '.idealsteps-nav',
       navItems: 'li',
       buildNavItems: function(i) {
-        return 'Step '+ (i+1);
+        return this.opts.steps.i18n.step +' '+ (i+1);
       },
       wrap: '.idealsteps-wrap',
       step: '.idealsteps-step',
       activeClass: 'idealsteps-step-active',
       before: null,
       after: null,
-      fadeSpeed: 0
+      fadeSpeed: 0,
+
+      i18n: {
+        step: 'Step'
+      }
     }
   },
 

js/main.js

@@ -11,6 +11,7 @@
   plugin.name = 'idealforms';
 
   plugin.defaults = {
+    i18n: 'en',
     field: '.field',
     error: '.error',
     iconHtml: '<i/>',
@@ -39,6 +40,8 @@
       }, obj);
     },
 
+    i18n: {},
+
     ruleSeparator: ' ',
     argSeparator: ':',
 

js/private.js

@@ -7,12 +7,14 @@ module.exports = {
 
     var self = this;
 
-    this._extend($.idealforms.extensions);
-
     this.$form = $(this.el);
     this.$fields = $();
     this.$inputs = $();
 
+    this._extend($.idealforms.extensions);
+
+    this._i18n();
+
     this._inject('_init');
 
     this.addRules(this.opts.rules || {});
@@ -27,6 +29,22 @@ module.exports = {
     if (! this.opts.silentLoad) this.focusFirstInvalid();
   },
 
+  _i18n: function() {
+
+    if (this.opts.i18n == 'en') return;
+
+    var lang = $.idealforms.i18n[this.opts.i18n]
+      , errors = lang.errors
+      , options = {};
+
+    delete lang.errors;
+
+    for (var ext in lang) options[ext] = { i18n: lang[ext] };
+
+    $.extend($.idealforms.errors, errors);
+    $.extend(true, this.opts, options);
+  },
+
   _buildField: function(input) {
 
     var self = this