html5 inputs added
This commit is contained in:
parent
7270692c31
commit
b53b388259
@ -4,6 +4,7 @@ X-editable changelog
|
|||||||
|
|
||||||
Version 1.3.0 wip
|
Version 1.3.0 wip
|
||||||
----------------------------
|
----------------------------
|
||||||
|
[enh] added html5 inputs support: password, email, url, tel, number, range (vitalets)
|
||||||
[bug #43] fix for bootstrap 2.2.2 (vitalets)
|
[bug #43] fix for bootstrap 2.2.2 (vitalets)
|
||||||
[enh #41] 'abstract' class renamed to 'abstractinput' as abstract is reserved word (vitalets)
|
[enh #41] 'abstract' class renamed to 'abstractinput' as abstract is reserved word (vitalets)
|
||||||
[enh #40] 'params' option defined as function overwrites original ajax data instead of appending (vitalets)
|
[enh #40] 'params' option defined as function overwrites original ajax data instead of appending (vitalets)
|
||||||
|
3
grunt.js
3
grunt.js
@ -42,7 +42,8 @@ function getFiles() {
|
|||||||
inputs+'text.js',
|
inputs+'text.js',
|
||||||
inputs+'textarea.js',
|
inputs+'textarea.js',
|
||||||
inputs+'select.js',
|
inputs+'select.js',
|
||||||
inputs+'checklist.js'
|
inputs+'checklist.js',
|
||||||
|
inputs+'html5types.js'
|
||||||
];
|
];
|
||||||
|
|
||||||
//common css files
|
//common css files
|
||||||
|
@ -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)
|
@method value2str(value)
|
||||||
@param {mixed} value
|
@param {mixed} value
|
||||||
|
180
src/inputs/html5types.js
Normal file
180
src/inputs/html5types.js
Normal file
@ -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));
|
@ -84,7 +84,7 @@ $(function(){
|
|||||||
@type string
|
@type string
|
||||||
@default null
|
@default null
|
||||||
**/
|
**/
|
||||||
placeholder: null
|
placeholder: null
|
||||||
});
|
});
|
||||||
|
|
||||||
$.fn.editabletypes.textarea = Textarea;
|
$.fn.editabletypes.textarea = Textarea;
|
||||||
|
@ -33,6 +33,7 @@ define(function () {
|
|||||||
'inputs/textarea',
|
'inputs/textarea',
|
||||||
'inputs/select',
|
'inputs/select',
|
||||||
'inputs/checklist',
|
'inputs/checklist',
|
||||||
|
'inputs/html5types',
|
||||||
'inputs-ext/address/address'],
|
'inputs-ext/address/address'],
|
||||||
init: function(require) {
|
init: function(require) {
|
||||||
loadCss(require.toUrl("./editable-form.css"));
|
loadCss(require.toUrl("./editable-form.css"));
|
||||||
@ -44,6 +45,7 @@ define(function () {
|
|||||||
'inputs/text': ['inputs/abstract'],
|
'inputs/text': ['inputs/abstract'],
|
||||||
'inputs/textarea': ['inputs/abstract'],
|
'inputs/textarea': ['inputs/abstract'],
|
||||||
'inputs/abstract': ['editable-form/editable-form-utils'],
|
'inputs/abstract': ['editable-form/editable-form-utils'],
|
||||||
|
'inputs/html5types': ['inputs/text'],
|
||||||
|
|
||||||
//bootstrap
|
//bootstrap
|
||||||
'bootstrap/js/bootstrap': {
|
'bootstrap/js/bootstrap': {
|
||||||
|
@ -438,6 +438,67 @@ $(function () {
|
|||||||
start();
|
start();
|
||||||
}, timeout);
|
}, timeout);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test("password", function () {
|
||||||
|
var v = '123', v1 = '456';
|
||||||
|
|
||||||
|
var e = $('<a href="#" data-pk="1" data-name="name" data-value="'+v+'"></a>').appendTo('#qunit-fixture').editable({
|
||||||
|
type: 'password',
|
||||||
|
url: function(params) {
|
||||||
|
equal(params.value, v1, 'submitted value correct');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
equal(e.text(), '[hidden]', 'text is hidden');
|
||||||
|
|
||||||
|
e.click()
|
||||||
|
var p = tip(e);
|
||||||
|
ok(p.is(':visible'), 'popover visible');
|
||||||
|
var $input = p.find('input[type="password"]');
|
||||||
|
ok($input.length, 'input exists');
|
||||||
|
equal($input.val(), v, 'input contains correct value');
|
||||||
|
$input.val(v1);
|
||||||
|
p.find('form').submit();
|
||||||
|
|
||||||
|
ok(!p.is(':visible'), 'popover closed');
|
||||||
|
equal(e.data('editable').value, v1, 'new value saved to value');
|
||||||
|
equal(e.text(), '[hidden]', 'new text shown');
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
test("html5 types", function () {
|
||||||
|
|
||||||
|
var types = ['email', 'url', 'tel', 'number', 'range'],
|
||||||
|
v = '12',
|
||||||
|
v1 = '45';
|
||||||
|
|
||||||
|
expect(8*types.length);
|
||||||
|
|
||||||
|
for(var i = 0; i< types.length; i++) {
|
||||||
|
var e = $('<a href="#" data-pk="1" data-name="name">'+v+'</a>').appendTo('#qunit-fixture').editable({
|
||||||
|
type: types[i],
|
||||||
|
url: function(params) {
|
||||||
|
equal(params.value, v1, 'submitted value correct');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
equal(e.data('editable').value, v, 'value correct');
|
||||||
|
|
||||||
|
e.click()
|
||||||
|
var p = tip(e);
|
||||||
|
ok(p.is(':visible'), 'popover visible');
|
||||||
|
var $input = p.find('input[type='+types[i]+']');
|
||||||
|
ok($input.length, 'input exists');
|
||||||
|
equal($input.val(), v, 'input contain correct value');
|
||||||
|
$input.val(v1);
|
||||||
|
p.find('form').submit();
|
||||||
|
|
||||||
|
ok(!p.is(':visible'), 'popover closed');
|
||||||
|
equal(e.data('editable').value, v1, 'new value saved to value');
|
||||||
|
equal(e.text(), v1, 'new text shown');
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
Loading…
x
Reference in New Issue
Block a user