html5 inputs added

src/inputs/abstract.js

@@ -65,7 +65,7 @@ To create your own input you can inherit from this class.
        },
         
        /**
-        Converts value to string (for comparering)
+        Converts value to string (for internal compare). For submitting to server used value2submit().
         
         @method value2str(value) 
         @param {mixed} value

src/inputs/html5types.js

@@ -0,0 +1,180 @@
+/**
+HTML5 input types.
+Following types are supported:
+- password
+- email
+- url
+- tel
+- number
+- range
+
+To check browser compatibility please see:
+http://www.wufoo.com/html5/
+
+@class html5types 
+@extends text
+@final
+@example
+<a href="#" id="email" data-type="email" data-pk="1">admin@example.com</a>
+<script>
+$(function(){
+    $('#email').editable({
+        url: '/post',
+        title: 'Enter email'
+    });
+});
+</script>
+**/
+   
+
+/*
+Password
+*/
+(function ($) {
+    var Password = function (options) {
+        this.init('password', options, Password.defaults);
+    };
+    $.fn.editableutils.inherit(Password, $.fn.editabletypes.text);
+    $.extend(Password.prototype, {
+       //do not display password, show '[hidden]' instead
+       value2html: function(value, element) {
+           if(value) {
+               $(element).text('[hidden]');
+           } else {
+               $(element).empty(); 
+           }
+       },
+       //as password not displayed, should not set value by html
+       html2value: function(html) {
+           return null;
+       }       
+    });    
+    Password.defaults = $.extend({}, $.fn.editabletypes.text.defaults, {
+        tpl: '<input type="password">'
+    });
+    $.fn.editabletypes.password = Password;
+}(window.jQuery));
+
+
+/*
+Email
+*/
+(function ($) {
+    var Email = function (options) {
+        this.init('email', options, Email.defaults);
+    };
+    $.fn.editableutils.inherit(Email, $.fn.editabletypes.text);
+    Email.defaults = $.extend({}, $.fn.editabletypes.text.defaults, {
+        tpl: '<input type="email">'
+    });
+    $.fn.editabletypes.email = Email;
+}(window.jQuery));
+
+
+/*
+Url
+*/
+(function ($) {
+    var Url = function (options) {
+        this.init('url', options, Url.defaults);
+    };
+    $.fn.editableutils.inherit(Url, $.fn.editabletypes.text);
+    Url.defaults = $.extend({}, $.fn.editabletypes.text.defaults, {
+        tpl: '<input type="url">'
+    });
+    $.fn.editabletypes.url = Url;
+}(window.jQuery));
+
+
+/*
+Tel
+*/
+(function ($) {
+    var Tel = function (options) {
+        this.init('tel', options, Tel.defaults);
+    };
+    $.fn.editableutils.inherit(Tel, $.fn.editabletypes.text);
+    Tel.defaults = $.extend({}, $.fn.editabletypes.text.defaults, {
+        tpl: '<input type="tel">'
+    });
+    $.fn.editabletypes.tel = Tel;
+}(window.jQuery));
+
+
+/*
+Number
+*/
+(function ($) {
+    var NumberInput = function (options) {
+        this.init('number', options, NumberInput.defaults);
+    };
+    $.fn.editableutils.inherit(NumberInput, $.fn.editabletypes.text);
+    $.extend(NumberInput.prototype, {
+         render: function () {
+            NumberInput.superclass.render.call(this);
+
+            if (this.options.min !== null) {
+                this.$input.attr('min', this.options.min);
+            } 
+            
+            if (this.options.max !== null) {
+                this.$input.attr('max', this.options.max);
+            } 
+            
+            if (this.options.step !== null) {
+                this.$input.attr('step', this.options.step);
+            }                         
+        }
+    });     
+    NumberInput.defaults = $.extend({}, $.fn.editabletypes.text.defaults, {
+        tpl: '<input type="number">',
+        inputclass: 'input-mini',
+        min: null,
+        max: null,
+        step: null
+    });
+    $.fn.editabletypes.number = NumberInput;
+}(window.jQuery));
+
+
+/*
+Range (inherit from number)
+*/
+(function ($) {
+    var Range = function (options) {
+        this.init('range', options, Range.defaults);
+    };
+    $.fn.editableutils.inherit(Range, $.fn.editabletypes.number);
+    $.extend(Range.prototype, {
+        render: function () {
+            this.$input = $(this.options.tpl);
+            var $slider = this.$input.filter('input');
+            if(this.options.inputclass) {
+                $slider.addClass(this.options.inputclass); 
+            }
+            if (this.options.min !== null) {
+                $slider.attr('min', this.options.min);
+            } 
+            
+            if (this.options.max !== null) {
+                $slider.attr('max', this.options.max);
+            } 
+            
+            if (this.options.step !== null) {
+                $slider.attr('step', this.options.step);
+            }             
+            
+            $slider.on('input', function(){
+                $(this).siblings('output').text($(this).val()); 
+            });  
+        },
+        activate: function() {
+            this.$input.filter('input').focus();
+        }         
+    });
+    Range.defaults = $.extend({}, $.fn.editabletypes.number.defaults, {
+        tpl: '<input type="range"><output style="width: 30px; display: inline-block"></output>',
+        inputclass: 'input-medium'
+    });
+    $.fn.editabletypes.range = Range;
+}(window.jQuery));

src/inputs/textarea.js

@@ -84,7 +84,7 @@ $(function(){
         @type string
         @default null
         **/             
-        placeholder: null        
+        placeholder: null 
     });
 
     $.fn.editabletypes.textarea = Textarea;