dev build 1.5.1

This commit is contained in:
vitalets 2013-11-04 14:58:17 +04:00
parent c77ebf6cc7
commit b3a73fe08e
10 changed files with 257 additions and 204 deletions

3
dist/CHANGELOG.txt vendored

@ -4,7 +4,8 @@ X-editable changelog
Version 1.5.1 wip Version 1.5.1 wip
---------------------------- ----------------------------
[enh #400] allow `validate` to change submitted value (vitalets) [bug] select2: placeholder not shown if value initially empty (vitalets)
[enh #400] allow `validate` to change submitted value, also fix #354 (vitalets)
[enh #396] bs3 popover: placement `auto` (vitalets) [enh #396] bs3 popover: placement `auto` (vitalets)
[bug #357] select2: tags mode with space separator (vitalets) [bug #357] select2: tags mode with space separator (vitalets)
[bug #374] dateui: clear button does not submit (vitalets) [bug #374] dateui: clear button does not submit (vitalets)

50
dist/README.md vendored

@ -5,7 +5,10 @@ In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery.
## Live demo ## Live demo
**http://vitalets.github.io/x-editable/demo.html** **http://vitalets.github.io/x-editable/demo.html**
## Installation ## Documentation
**http://vitalets.github.io/x-editable**
## How to get it
### Manual download ### Manual download
Use **http://vitalets.github.io/x-editable** main page. Use **http://vitalets.github.io/x-editable** main page.
@ -16,22 +19,38 @@ bower install x-editable
```` ````
### CDN ### CDN
Bootstrap 3 build:
````js ````js
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/> <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
```` ````
## Documentation Bootstrap 2 build:
**http://vitalets.github.io/x-editable** ````js
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap-editable/js/bootstrap-editable.min.js"></script>
````
jQuery UI build:
````js
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jqueryui-editable/css/jqueryui-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jqueryui-editable/js/jqueryui-editable.min.js"></script>
````
jQuery only build:
````js
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/css/jquery-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/js/jquery-editable-poshytip.min.js"></script>
````
## Reporting issues ## Reporting issues
Please provide [jsFiddles](http://jsfiddle.net)! Please **provide jsFiddle** when creating issues!
Use these as template: It's really saves much time. Use these as template:
1. [jsFiddle bootstrap 3](http://jsfiddle.net/xBB5x/2265) 1. [jsFiddle Bootstrap 3](http://jsfiddle.net/xBB5x/2265/)
2. [jsFiddle bootstrap 2](http://jsfiddle.net/xBB5x/1817) 2. [jsFiddle Bootstrap 2](http://jsfiddle.net/xBB5x/1817/)
3. [jsFiddle jqueryui](http://jsfiddle.net/xBB5x/196) 3. [jsFiddle jQuery-ui](http://jsfiddle.net/xBB5x/2511/)
4. [jsFiddle jquery](http://jsfiddle.net/xBB5x/197) 4. [jsFiddle jQuery](http://jsfiddle.net/xBB5x/197)
Your feedback is very appreciated! Your feedback is very appreciated!
## Contribution ## Contribution
@ -48,9 +67,10 @@ npm i -g grunt-cli
```` ````
3.Install dependencies: 3.Install dependencies:
```` ````
cd x-editable
npm i npm i
```` ````
4.Make your awesome changes. 4.Make your changes:
```` ````
vim editable-form.js vim editable-form.js
```` ````
@ -58,7 +78,7 @@ vim editable-form.js
```` ````
vim /test/unit/*.js vim /test/unit/*.js
```` ````
6.Run tests: 6.Run tests in cli:
```` ````
grunt test grunt test
```` ````
@ -82,13 +102,13 @@ By default test run on bootstrap 3 popup version, but you can test any other bui
* popup: http://127.0.0.1:8000/test/?f=plain&c=popup * popup: http://127.0.0.1:8000/test/?f=plain&c=popup
* inline: http://127.0.0.1:8000/test/?f=plain&c=inline * inline: http://127.0.0.1:8000/test/?f=plain&c=inline
7.Commit and push on github: 7.Commit and push back on github:
```` ````
git add . git add .
git commit -m'refactor editable form, fix #123' git commit -m'refactor editable form, fix #123'
git push origin git push origin
```` ````
8.Make pull request on github. 8.Make pull request on github (to `dev` branch).
Thanks for your support! Thanks for your support!

@ -3587,7 +3587,11 @@ $(function(){
}); });
//remote source (simple) //remote source (simple)
$('#country').editable({ $('#country').editable({
source: '/getCountries' source: '/getCountries',
select2: {
placeholder: 'Select Country',
minimumInputLength: 1
}
}); });
//remote source (advanced) //remote source (advanced)
$('#country').editable({ $('#country').editable({
@ -3663,14 +3667,14 @@ $(function(){
options.select2.data = this.sourceData; options.select2.data = this.sourceData;
} }
} }
//overriding objects in config (as by default jQuery extend() is not recursive) //overriding objects in config (as by default jQuery extend() is not recursive)
this.options.select2 = $.extend({}, Constructor.defaults.select2, options.select2); this.options.select2 = $.extend({}, Constructor.defaults.select2, options.select2);
//detect whether it is multi-valued //detect whether it is multi-valued
this.isMultiple = this.options.select2.tags || this.options.select2.multiple; this.isMultiple = this.options.select2.tags || this.options.select2.multiple;
this.isRemote = ('ajax' in this.options.select2); this.isRemote = ('ajax' in this.options.select2);
//store function returning ID of item //store function returning ID of item
//should be here as used inautotext for local source //should be here as used inautotext for local source
this.idFunc = this.options.select2.id; this.idFunc = this.options.select2.id;
@ -3678,12 +3682,12 @@ $(function(){
var idKey = this.idFunc || 'id'; var idKey = this.idFunc || 'id';
this.idFunc = function (e) { return e[idKey]; }; this.idFunc = function (e) { return e[idKey]; };
} }
//store function that renders text in select2 //store function that renders text in select2
this.formatSelection = this.options.select2.formatSelection; this.formatSelection = this.options.select2.formatSelection;
if (typeof(this.formatSelection) !== "function") { if (typeof(this.formatSelection) !== "function") {
this.formatSelection = function (e) { return e.text; }; this.formatSelection = function (e) { return e.text; };
} }
}; };
$.fn.editableutils.inherit(Constructor, $.fn.editabletypes.abstractinput); $.fn.editableutils.inherit(Constructor, $.fn.editabletypes.abstractinput);
@ -3705,49 +3709,49 @@ $(function(){
}, this)); }, this));
} }
//trigger resize of editableform to re-position container in multi-valued mode //trigger resize of editableform to re-position container in multi-valued mode
if(this.isMultiple) { if(this.isMultiple) {
this.$input.on('change', function() { this.$input.on('change', function() {
$(this).closest('form').parent().triggerHandler('resize'); $(this).closest('form').parent().triggerHandler('resize');
}); });
} }
}, },
value2html: function(value, element) { value2html: function(value, element) {
var text = '', data, var text = '', data,
that = this; that = this;
if(this.options.select2.tags) { //in tags mode just assign value if(this.options.select2.tags) { //in tags mode just assign value
data = value; data = value;
//data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc); //data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc);
} else if(this.sourceData) { } else if(this.sourceData) {
data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc); data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
} else { } else {
//can not get list of possible values //can not get list of possible values
//(e.g. autotext for select2 with ajax source) //(e.g. autotext for select2 with ajax source)
} }
//data may be array (when multiple values allowed) //data may be array (when multiple values allowed)
if($.isArray(data)) { if($.isArray(data)) {
//collect selected data and show with separator //collect selected data and show with separator
text = []; text = [];
$.each(data, function(k, v){ $.each(data, function(k, v){
text.push(v && typeof v === 'object' ? that.formatSelection(v) : v); text.push(v && typeof v === 'object' ? that.formatSelection(v) : v);
}); });
} else if(data) { } else if(data) {
text = that.formatSelection(data); text = that.formatSelection(data);
} }
text = $.isArray(text) ? text.join(this.options.viewseparator) : text; text = $.isArray(text) ? text.join(this.options.viewseparator) : text;
//$(element).text(text); //$(element).text(text);
Constructor.superclass.value2html.call(this, text, element); Constructor.superclass.value2html.call(this, text, element);
}, },
html2value: function(html) { html2value: function(html) {
return this.options.select2.tags ? this.str2value(html, this.options.viewseparator) : null; return this.options.select2.tags ? this.str2value(html, this.options.viewseparator) : null;
}, },
value2input: function(value) { value2input: function(value) {
// if value array => join it anyway // if value array => join it anyway
if($.isArray(value)) { if($.isArray(value)) {
@ -3765,19 +3769,23 @@ $(function(){
//Uncaught Error: cannot call val() if initSelection() is not defined //Uncaught Error: cannot call val() if initSelection() is not defined
//this.$input.select2('val', value); //this.$input.select2('val', value);
} }
// if defined remote source AND no multiple mode AND no user's initSelection provided --> // if defined remote source AND no multiple mode AND no user's initSelection provided -->
// we should somehow get text for provided id. // we should somehow get text for provided id.
// The solution is to use element's text as text for that id // The solution is to use element's text as text for that id (exclude empty)
if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) { if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
// customId and customText are methods to extract `id` and `text` from data object // customId and customText are methods to extract `id` and `text` from data object
// we can use this workaround only if user did not define these methods // we can use this workaround only if user did not define these methods
// otherwise we cant construct data object // otherwise we cant construct data object
var customId = this.options.select2.id, var customId = this.options.select2.id,
customText = this.options.select2.formatSelection; customText = this.options.select2.formatSelection;
if(!customId && !customText) {
var data = {id: value, text: $(this.options.scope).text()}; if(!customId && !customText) {
this.$input.select2('data', data); var $el = $(this.options.scope);
if (!$el.data('editable').isEmpty) {
var data = {id: value, text: $el.text()};
this.$input.select2('data', data);
}
} }
} }
}, },
@ -3790,11 +3798,11 @@ $(function(){
if(typeof str !== 'string' || !this.isMultiple) { if(typeof str !== 'string' || !this.isMultiple) {
return str; return str;
} }
separator = separator || this.getSeparator(); separator = separator || this.getSeparator();
var val, i, l; var val, i, l;
if (str === null || str.length < 1) { if (str === null || str.length < 1) {
return null; return null;
} }
@ -3802,10 +3810,10 @@ $(function(){
for (i = 0, l = val.length; i < l; i = i + 1) { for (i = 0, l = val.length; i < l; i = i + 1) {
val[i] = $.trim(val[i]); val[i] = $.trim(val[i]);
} }
return val; return val;
}, },
autosubmit: function() { autosubmit: function() {
this.$input.on('change', function(e, isInitial){ this.$input.on('change', function(e, isInitial){
if(!isInitial) { if(!isInitial) {
@ -3817,7 +3825,7 @@ $(function(){
getSeparator: function() { getSeparator: function() {
return this.options.select2.separator || $.fn.select2.defaults.separator; return this.options.select2.separator || $.fn.select2.defaults.separator;
}, },
/* /*
Converts source from x-editable format: {value: 1, text: "1"} to Converts source from x-editable format: {value: 1, text: "1"} to
select2 format: {id: 1, text: "1"} select2 format: {id: 1, text: "1"}
@ -3831,26 +3839,26 @@ $(function(){
} }
} }
} }
return source; return source;
}, },
destroy: function() { destroy: function() {
if(this.$input.data('select2')) { if(this.$input.data('select2')) {
this.$input.select2('destroy'); this.$input.select2('destroy');
} }
} }
}); });
Constructor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, { Constructor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
/** /**
@property tpl @property tpl
@default <input type="hidden"> @default <input type="hidden">
**/ **/
tpl:'<input type="hidden">', tpl:'<input type="hidden">',
/** /**
Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2). Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2).
@property select2 @property select2
@type object @type object
@default null @default null
@ -3862,21 +3870,21 @@ $(function(){
@property placeholder @property placeholder
@type string @type string
@default null @default null
**/ **/
placeholder: null, placeholder: null,
/** /**
Source data for select. It will be assigned to select2 `data` property and kept here just for convenience. Source data for select. It will be assigned to select2 `data` property and kept here just for convenience.
Please note, that format is different from simple `select` input: use 'id' instead of 'value'. Please note, that format is different from simple `select` input: use 'id' instead of 'value'.
E.g. `[{id: 1, text: "text1"}, {id: 2, text: "text2"}, ...]`. E.g. `[{id: 1, text: "text1"}, {id: 2, text: "text2"}, ...]`.
@property source @property source
@type array|string|function @type array|string|function
@default null @default null
**/ **/
source: null, source: null,
/** /**
Separator used to display tags. Separator used to display tags.
@property viewseparator @property viewseparator
@type string @type string
@default ', ' @default ', '
@ -3884,8 +3892,8 @@ $(function(){
viewseparator: ', ' viewseparator: ', '
}); });
$.fn.editabletypes.select2 = Constructor; $.fn.editabletypes.select2 = Constructor;
}(window.jQuery)); }(window.jQuery));
/** /**
@ -6215,7 +6223,7 @@ $(function(){
viewformat: null, viewformat: null,
/** /**
Configuration of datepicker. Configuration of datepicker.
Full list of options: http://vitalets.github.com/bootstrap-datepicker Full list of options: http://bootstrap-datepicker.readthedocs.org/en/latest/options.html
@property datepicker @property datepicker
@type object @type object

File diff suppressed because one or more lines are too long

@ -3587,7 +3587,11 @@ $(function(){
}); });
//remote source (simple) //remote source (simple)
$('#country').editable({ $('#country').editable({
source: '/getCountries' source: '/getCountries',
select2: {
placeholder: 'Select Country',
minimumInputLength: 1
}
}); });
//remote source (advanced) //remote source (advanced)
$('#country').editable({ $('#country').editable({
@ -3663,14 +3667,14 @@ $(function(){
options.select2.data = this.sourceData; options.select2.data = this.sourceData;
} }
} }
//overriding objects in config (as by default jQuery extend() is not recursive) //overriding objects in config (as by default jQuery extend() is not recursive)
this.options.select2 = $.extend({}, Constructor.defaults.select2, options.select2); this.options.select2 = $.extend({}, Constructor.defaults.select2, options.select2);
//detect whether it is multi-valued //detect whether it is multi-valued
this.isMultiple = this.options.select2.tags || this.options.select2.multiple; this.isMultiple = this.options.select2.tags || this.options.select2.multiple;
this.isRemote = ('ajax' in this.options.select2); this.isRemote = ('ajax' in this.options.select2);
//store function returning ID of item //store function returning ID of item
//should be here as used inautotext for local source //should be here as used inautotext for local source
this.idFunc = this.options.select2.id; this.idFunc = this.options.select2.id;
@ -3678,12 +3682,12 @@ $(function(){
var idKey = this.idFunc || 'id'; var idKey = this.idFunc || 'id';
this.idFunc = function (e) { return e[idKey]; }; this.idFunc = function (e) { return e[idKey]; };
} }
//store function that renders text in select2 //store function that renders text in select2
this.formatSelection = this.options.select2.formatSelection; this.formatSelection = this.options.select2.formatSelection;
if (typeof(this.formatSelection) !== "function") { if (typeof(this.formatSelection) !== "function") {
this.formatSelection = function (e) { return e.text; }; this.formatSelection = function (e) { return e.text; };
} }
}; };
$.fn.editableutils.inherit(Constructor, $.fn.editabletypes.abstractinput); $.fn.editableutils.inherit(Constructor, $.fn.editabletypes.abstractinput);
@ -3705,49 +3709,49 @@ $(function(){
}, this)); }, this));
} }
//trigger resize of editableform to re-position container in multi-valued mode //trigger resize of editableform to re-position container in multi-valued mode
if(this.isMultiple) { if(this.isMultiple) {
this.$input.on('change', function() { this.$input.on('change', function() {
$(this).closest('form').parent().triggerHandler('resize'); $(this).closest('form').parent().triggerHandler('resize');
}); });
} }
}, },
value2html: function(value, element) { value2html: function(value, element) {
var text = '', data, var text = '', data,
that = this; that = this;
if(this.options.select2.tags) { //in tags mode just assign value if(this.options.select2.tags) { //in tags mode just assign value
data = value; data = value;
//data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc); //data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc);
} else if(this.sourceData) { } else if(this.sourceData) {
data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc); data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
} else { } else {
//can not get list of possible values //can not get list of possible values
//(e.g. autotext for select2 with ajax source) //(e.g. autotext for select2 with ajax source)
} }
//data may be array (when multiple values allowed) //data may be array (when multiple values allowed)
if($.isArray(data)) { if($.isArray(data)) {
//collect selected data and show with separator //collect selected data and show with separator
text = []; text = [];
$.each(data, function(k, v){ $.each(data, function(k, v){
text.push(v && typeof v === 'object' ? that.formatSelection(v) : v); text.push(v && typeof v === 'object' ? that.formatSelection(v) : v);
}); });
} else if(data) { } else if(data) {
text = that.formatSelection(data); text = that.formatSelection(data);
} }
text = $.isArray(text) ? text.join(this.options.viewseparator) : text; text = $.isArray(text) ? text.join(this.options.viewseparator) : text;
//$(element).text(text); //$(element).text(text);
Constructor.superclass.value2html.call(this, text, element); Constructor.superclass.value2html.call(this, text, element);
}, },
html2value: function(html) { html2value: function(html) {
return this.options.select2.tags ? this.str2value(html, this.options.viewseparator) : null; return this.options.select2.tags ? this.str2value(html, this.options.viewseparator) : null;
}, },
value2input: function(value) { value2input: function(value) {
// if value array => join it anyway // if value array => join it anyway
if($.isArray(value)) { if($.isArray(value)) {
@ -3765,19 +3769,23 @@ $(function(){
//Uncaught Error: cannot call val() if initSelection() is not defined //Uncaught Error: cannot call val() if initSelection() is not defined
//this.$input.select2('val', value); //this.$input.select2('val', value);
} }
// if defined remote source AND no multiple mode AND no user's initSelection provided --> // if defined remote source AND no multiple mode AND no user's initSelection provided -->
// we should somehow get text for provided id. // we should somehow get text for provided id.
// The solution is to use element's text as text for that id // The solution is to use element's text as text for that id (exclude empty)
if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) { if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
// customId and customText are methods to extract `id` and `text` from data object // customId and customText are methods to extract `id` and `text` from data object
// we can use this workaround only if user did not define these methods // we can use this workaround only if user did not define these methods
// otherwise we cant construct data object // otherwise we cant construct data object
var customId = this.options.select2.id, var customId = this.options.select2.id,
customText = this.options.select2.formatSelection; customText = this.options.select2.formatSelection;
if(!customId && !customText) {
var data = {id: value, text: $(this.options.scope).text()}; if(!customId && !customText) {
this.$input.select2('data', data); var $el = $(this.options.scope);
if (!$el.data('editable').isEmpty) {
var data = {id: value, text: $el.text()};
this.$input.select2('data', data);
}
} }
} }
}, },
@ -3790,11 +3798,11 @@ $(function(){
if(typeof str !== 'string' || !this.isMultiple) { if(typeof str !== 'string' || !this.isMultiple) {
return str; return str;
} }
separator = separator || this.getSeparator(); separator = separator || this.getSeparator();
var val, i, l; var val, i, l;
if (str === null || str.length < 1) { if (str === null || str.length < 1) {
return null; return null;
} }
@ -3802,10 +3810,10 @@ $(function(){
for (i = 0, l = val.length; i < l; i = i + 1) { for (i = 0, l = val.length; i < l; i = i + 1) {
val[i] = $.trim(val[i]); val[i] = $.trim(val[i]);
} }
return val; return val;
}, },
autosubmit: function() { autosubmit: function() {
this.$input.on('change', function(e, isInitial){ this.$input.on('change', function(e, isInitial){
if(!isInitial) { if(!isInitial) {
@ -3817,7 +3825,7 @@ $(function(){
getSeparator: function() { getSeparator: function() {
return this.options.select2.separator || $.fn.select2.defaults.separator; return this.options.select2.separator || $.fn.select2.defaults.separator;
}, },
/* /*
Converts source from x-editable format: {value: 1, text: "1"} to Converts source from x-editable format: {value: 1, text: "1"} to
select2 format: {id: 1, text: "1"} select2 format: {id: 1, text: "1"}
@ -3831,26 +3839,26 @@ $(function(){
} }
} }
} }
return source; return source;
}, },
destroy: function() { destroy: function() {
if(this.$input.data('select2')) { if(this.$input.data('select2')) {
this.$input.select2('destroy'); this.$input.select2('destroy');
} }
} }
}); });
Constructor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, { Constructor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
/** /**
@property tpl @property tpl
@default <input type="hidden"> @default <input type="hidden">
**/ **/
tpl:'<input type="hidden">', tpl:'<input type="hidden">',
/** /**
Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2). Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2).
@property select2 @property select2
@type object @type object
@default null @default null
@ -3862,21 +3870,21 @@ $(function(){
@property placeholder @property placeholder
@type string @type string
@default null @default null
**/ **/
placeholder: null, placeholder: null,
/** /**
Source data for select. It will be assigned to select2 `data` property and kept here just for convenience. Source data for select. It will be assigned to select2 `data` property and kept here just for convenience.
Please note, that format is different from simple `select` input: use 'id' instead of 'value'. Please note, that format is different from simple `select` input: use 'id' instead of 'value'.
E.g. `[{id: 1, text: "text1"}, {id: 2, text: "text2"}, ...]`. E.g. `[{id: 1, text: "text1"}, {id: 2, text: "text2"}, ...]`.
@property source @property source
@type array|string|function @type array|string|function
@default null @default null
**/ **/
source: null, source: null,
/** /**
Separator used to display tags. Separator used to display tags.
@property viewseparator @property viewseparator
@type string @type string
@default ', ' @default ', '
@ -3884,8 +3892,8 @@ $(function(){
viewseparator: ', ' viewseparator: ', '
}); });
$.fn.editabletypes.select2 = Constructor; $.fn.editabletypes.select2 = Constructor;
}(window.jQuery)); }(window.jQuery));
/** /**
@ -6283,7 +6291,7 @@ $(function(){
viewformat: null, viewformat: null,
/** /**
Configuration of datepicker. Configuration of datepicker.
Full list of options: http://vitalets.github.com/bootstrap-datepicker Full list of options: http://bootstrap-datepicker.readthedocs.org/en/latest/options.html
@property datepicker @property datepicker
@type object @type object

File diff suppressed because one or more lines are too long

@ -3587,7 +3587,11 @@ $(function(){
}); });
//remote source (simple) //remote source (simple)
$('#country').editable({ $('#country').editable({
source: '/getCountries' source: '/getCountries',
select2: {
placeholder: 'Select Country',
minimumInputLength: 1
}
}); });
//remote source (advanced) //remote source (advanced)
$('#country').editable({ $('#country').editable({
@ -3663,14 +3667,14 @@ $(function(){
options.select2.data = this.sourceData; options.select2.data = this.sourceData;
} }
} }
//overriding objects in config (as by default jQuery extend() is not recursive) //overriding objects in config (as by default jQuery extend() is not recursive)
this.options.select2 = $.extend({}, Constructor.defaults.select2, options.select2); this.options.select2 = $.extend({}, Constructor.defaults.select2, options.select2);
//detect whether it is multi-valued //detect whether it is multi-valued
this.isMultiple = this.options.select2.tags || this.options.select2.multiple; this.isMultiple = this.options.select2.tags || this.options.select2.multiple;
this.isRemote = ('ajax' in this.options.select2); this.isRemote = ('ajax' in this.options.select2);
//store function returning ID of item //store function returning ID of item
//should be here as used inautotext for local source //should be here as used inautotext for local source
this.idFunc = this.options.select2.id; this.idFunc = this.options.select2.id;
@ -3678,12 +3682,12 @@ $(function(){
var idKey = this.idFunc || 'id'; var idKey = this.idFunc || 'id';
this.idFunc = function (e) { return e[idKey]; }; this.idFunc = function (e) { return e[idKey]; };
} }
//store function that renders text in select2 //store function that renders text in select2
this.formatSelection = this.options.select2.formatSelection; this.formatSelection = this.options.select2.formatSelection;
if (typeof(this.formatSelection) !== "function") { if (typeof(this.formatSelection) !== "function") {
this.formatSelection = function (e) { return e.text; }; this.formatSelection = function (e) { return e.text; };
} }
}; };
$.fn.editableutils.inherit(Constructor, $.fn.editabletypes.abstractinput); $.fn.editableutils.inherit(Constructor, $.fn.editabletypes.abstractinput);
@ -3705,49 +3709,49 @@ $(function(){
}, this)); }, this));
} }
//trigger resize of editableform to re-position container in multi-valued mode //trigger resize of editableform to re-position container in multi-valued mode
if(this.isMultiple) { if(this.isMultiple) {
this.$input.on('change', function() { this.$input.on('change', function() {
$(this).closest('form').parent().triggerHandler('resize'); $(this).closest('form').parent().triggerHandler('resize');
}); });
} }
}, },
value2html: function(value, element) { value2html: function(value, element) {
var text = '', data, var text = '', data,
that = this; that = this;
if(this.options.select2.tags) { //in tags mode just assign value if(this.options.select2.tags) { //in tags mode just assign value
data = value; data = value;
//data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc); //data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc);
} else if(this.sourceData) { } else if(this.sourceData) {
data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc); data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
} else { } else {
//can not get list of possible values //can not get list of possible values
//(e.g. autotext for select2 with ajax source) //(e.g. autotext for select2 with ajax source)
} }
//data may be array (when multiple values allowed) //data may be array (when multiple values allowed)
if($.isArray(data)) { if($.isArray(data)) {
//collect selected data and show with separator //collect selected data and show with separator
text = []; text = [];
$.each(data, function(k, v){ $.each(data, function(k, v){
text.push(v && typeof v === 'object' ? that.formatSelection(v) : v); text.push(v && typeof v === 'object' ? that.formatSelection(v) : v);
}); });
} else if(data) { } else if(data) {
text = that.formatSelection(data); text = that.formatSelection(data);
} }
text = $.isArray(text) ? text.join(this.options.viewseparator) : text; text = $.isArray(text) ? text.join(this.options.viewseparator) : text;
//$(element).text(text); //$(element).text(text);
Constructor.superclass.value2html.call(this, text, element); Constructor.superclass.value2html.call(this, text, element);
}, },
html2value: function(html) { html2value: function(html) {
return this.options.select2.tags ? this.str2value(html, this.options.viewseparator) : null; return this.options.select2.tags ? this.str2value(html, this.options.viewseparator) : null;
}, },
value2input: function(value) { value2input: function(value) {
// if value array => join it anyway // if value array => join it anyway
if($.isArray(value)) { if($.isArray(value)) {
@ -3765,19 +3769,23 @@ $(function(){
//Uncaught Error: cannot call val() if initSelection() is not defined //Uncaught Error: cannot call val() if initSelection() is not defined
//this.$input.select2('val', value); //this.$input.select2('val', value);
} }
// if defined remote source AND no multiple mode AND no user's initSelection provided --> // if defined remote source AND no multiple mode AND no user's initSelection provided -->
// we should somehow get text for provided id. // we should somehow get text for provided id.
// The solution is to use element's text as text for that id // The solution is to use element's text as text for that id (exclude empty)
if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) { if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
// customId and customText are methods to extract `id` and `text` from data object // customId and customText are methods to extract `id` and `text` from data object
// we can use this workaround only if user did not define these methods // we can use this workaround only if user did not define these methods
// otherwise we cant construct data object // otherwise we cant construct data object
var customId = this.options.select2.id, var customId = this.options.select2.id,
customText = this.options.select2.formatSelection; customText = this.options.select2.formatSelection;
if(!customId && !customText) {
var data = {id: value, text: $(this.options.scope).text()}; if(!customId && !customText) {
this.$input.select2('data', data); var $el = $(this.options.scope);
if (!$el.data('editable').isEmpty) {
var data = {id: value, text: $el.text()};
this.$input.select2('data', data);
}
} }
} }
}, },
@ -3790,11 +3798,11 @@ $(function(){
if(typeof str !== 'string' || !this.isMultiple) { if(typeof str !== 'string' || !this.isMultiple) {
return str; return str;
} }
separator = separator || this.getSeparator(); separator = separator || this.getSeparator();
var val, i, l; var val, i, l;
if (str === null || str.length < 1) { if (str === null || str.length < 1) {
return null; return null;
} }
@ -3802,10 +3810,10 @@ $(function(){
for (i = 0, l = val.length; i < l; i = i + 1) { for (i = 0, l = val.length; i < l; i = i + 1) {
val[i] = $.trim(val[i]); val[i] = $.trim(val[i]);
} }
return val; return val;
}, },
autosubmit: function() { autosubmit: function() {
this.$input.on('change', function(e, isInitial){ this.$input.on('change', function(e, isInitial){
if(!isInitial) { if(!isInitial) {
@ -3817,7 +3825,7 @@ $(function(){
getSeparator: function() { getSeparator: function() {
return this.options.select2.separator || $.fn.select2.defaults.separator; return this.options.select2.separator || $.fn.select2.defaults.separator;
}, },
/* /*
Converts source from x-editable format: {value: 1, text: "1"} to Converts source from x-editable format: {value: 1, text: "1"} to
select2 format: {id: 1, text: "1"} select2 format: {id: 1, text: "1"}
@ -3831,26 +3839,26 @@ $(function(){
} }
} }
} }
return source; return source;
}, },
destroy: function() { destroy: function() {
if(this.$input.data('select2')) { if(this.$input.data('select2')) {
this.$input.select2('destroy'); this.$input.select2('destroy');
} }
} }
}); });
Constructor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, { Constructor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
/** /**
@property tpl @property tpl
@default <input type="hidden"> @default <input type="hidden">
**/ **/
tpl:'<input type="hidden">', tpl:'<input type="hidden">',
/** /**
Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2). Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2).
@property select2 @property select2
@type object @type object
@default null @default null
@ -3862,21 +3870,21 @@ $(function(){
@property placeholder @property placeholder
@type string @type string
@default null @default null
**/ **/
placeholder: null, placeholder: null,
/** /**
Source data for select. It will be assigned to select2 `data` property and kept here just for convenience. Source data for select. It will be assigned to select2 `data` property and kept here just for convenience.
Please note, that format is different from simple `select` input: use 'id' instead of 'value'. Please note, that format is different from simple `select` input: use 'id' instead of 'value'.
E.g. `[{id: 1, text: "text1"}, {id: 2, text: "text2"}, ...]`. E.g. `[{id: 1, text: "text1"}, {id: 2, text: "text2"}, ...]`.
@property source @property source
@type array|string|function @type array|string|function
@default null @default null
**/ **/
source: null, source: null,
/** /**
Separator used to display tags. Separator used to display tags.
@property viewseparator @property viewseparator
@type string @type string
@default ', ' @default ', '
@ -3884,8 +3892,8 @@ $(function(){
viewseparator: ', ' viewseparator: ', '
}); });
$.fn.editabletypes.select2 = Constructor; $.fn.editabletypes.select2 = Constructor;
}(window.jQuery)); }(window.jQuery));
/** /**

File diff suppressed because one or more lines are too long

@ -3587,7 +3587,11 @@ $(function(){
}); });
//remote source (simple) //remote source (simple)
$('#country').editable({ $('#country').editable({
source: '/getCountries' source: '/getCountries',
select2: {
placeholder: 'Select Country',
minimumInputLength: 1
}
}); });
//remote source (advanced) //remote source (advanced)
$('#country').editable({ $('#country').editable({
@ -3663,14 +3667,14 @@ $(function(){
options.select2.data = this.sourceData; options.select2.data = this.sourceData;
} }
} }
//overriding objects in config (as by default jQuery extend() is not recursive) //overriding objects in config (as by default jQuery extend() is not recursive)
this.options.select2 = $.extend({}, Constructor.defaults.select2, options.select2); this.options.select2 = $.extend({}, Constructor.defaults.select2, options.select2);
//detect whether it is multi-valued //detect whether it is multi-valued
this.isMultiple = this.options.select2.tags || this.options.select2.multiple; this.isMultiple = this.options.select2.tags || this.options.select2.multiple;
this.isRemote = ('ajax' in this.options.select2); this.isRemote = ('ajax' in this.options.select2);
//store function returning ID of item //store function returning ID of item
//should be here as used inautotext for local source //should be here as used inautotext for local source
this.idFunc = this.options.select2.id; this.idFunc = this.options.select2.id;
@ -3678,12 +3682,12 @@ $(function(){
var idKey = this.idFunc || 'id'; var idKey = this.idFunc || 'id';
this.idFunc = function (e) { return e[idKey]; }; this.idFunc = function (e) { return e[idKey]; };
} }
//store function that renders text in select2 //store function that renders text in select2
this.formatSelection = this.options.select2.formatSelection; this.formatSelection = this.options.select2.formatSelection;
if (typeof(this.formatSelection) !== "function") { if (typeof(this.formatSelection) !== "function") {
this.formatSelection = function (e) { return e.text; }; this.formatSelection = function (e) { return e.text; };
} }
}; };
$.fn.editableutils.inherit(Constructor, $.fn.editabletypes.abstractinput); $.fn.editableutils.inherit(Constructor, $.fn.editabletypes.abstractinput);
@ -3705,49 +3709,49 @@ $(function(){
}, this)); }, this));
} }
//trigger resize of editableform to re-position container in multi-valued mode //trigger resize of editableform to re-position container in multi-valued mode
if(this.isMultiple) { if(this.isMultiple) {
this.$input.on('change', function() { this.$input.on('change', function() {
$(this).closest('form').parent().triggerHandler('resize'); $(this).closest('form').parent().triggerHandler('resize');
}); });
} }
}, },
value2html: function(value, element) { value2html: function(value, element) {
var text = '', data, var text = '', data,
that = this; that = this;
if(this.options.select2.tags) { //in tags mode just assign value if(this.options.select2.tags) { //in tags mode just assign value
data = value; data = value;
//data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc); //data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc);
} else if(this.sourceData) { } else if(this.sourceData) {
data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc); data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
} else { } else {
//can not get list of possible values //can not get list of possible values
//(e.g. autotext for select2 with ajax source) //(e.g. autotext for select2 with ajax source)
} }
//data may be array (when multiple values allowed) //data may be array (when multiple values allowed)
if($.isArray(data)) { if($.isArray(data)) {
//collect selected data and show with separator //collect selected data and show with separator
text = []; text = [];
$.each(data, function(k, v){ $.each(data, function(k, v){
text.push(v && typeof v === 'object' ? that.formatSelection(v) : v); text.push(v && typeof v === 'object' ? that.formatSelection(v) : v);
}); });
} else if(data) { } else if(data) {
text = that.formatSelection(data); text = that.formatSelection(data);
} }
text = $.isArray(text) ? text.join(this.options.viewseparator) : text; text = $.isArray(text) ? text.join(this.options.viewseparator) : text;
//$(element).text(text); //$(element).text(text);
Constructor.superclass.value2html.call(this, text, element); Constructor.superclass.value2html.call(this, text, element);
}, },
html2value: function(html) { html2value: function(html) {
return this.options.select2.tags ? this.str2value(html, this.options.viewseparator) : null; return this.options.select2.tags ? this.str2value(html, this.options.viewseparator) : null;
}, },
value2input: function(value) { value2input: function(value) {
// if value array => join it anyway // if value array => join it anyway
if($.isArray(value)) { if($.isArray(value)) {
@ -3765,19 +3769,23 @@ $(function(){
//Uncaught Error: cannot call val() if initSelection() is not defined //Uncaught Error: cannot call val() if initSelection() is not defined
//this.$input.select2('val', value); //this.$input.select2('val', value);
} }
// if defined remote source AND no multiple mode AND no user's initSelection provided --> // if defined remote source AND no multiple mode AND no user's initSelection provided -->
// we should somehow get text for provided id. // we should somehow get text for provided id.
// The solution is to use element's text as text for that id // The solution is to use element's text as text for that id (exclude empty)
if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) { if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
// customId and customText are methods to extract `id` and `text` from data object // customId and customText are methods to extract `id` and `text` from data object
// we can use this workaround only if user did not define these methods // we can use this workaround only if user did not define these methods
// otherwise we cant construct data object // otherwise we cant construct data object
var customId = this.options.select2.id, var customId = this.options.select2.id,
customText = this.options.select2.formatSelection; customText = this.options.select2.formatSelection;
if(!customId && !customText) {
var data = {id: value, text: $(this.options.scope).text()}; if(!customId && !customText) {
this.$input.select2('data', data); var $el = $(this.options.scope);
if (!$el.data('editable').isEmpty) {
var data = {id: value, text: $el.text()};
this.$input.select2('data', data);
}
} }
} }
}, },
@ -3790,11 +3798,11 @@ $(function(){
if(typeof str !== 'string' || !this.isMultiple) { if(typeof str !== 'string' || !this.isMultiple) {
return str; return str;
} }
separator = separator || this.getSeparator(); separator = separator || this.getSeparator();
var val, i, l; var val, i, l;
if (str === null || str.length < 1) { if (str === null || str.length < 1) {
return null; return null;
} }
@ -3802,10 +3810,10 @@ $(function(){
for (i = 0, l = val.length; i < l; i = i + 1) { for (i = 0, l = val.length; i < l; i = i + 1) {
val[i] = $.trim(val[i]); val[i] = $.trim(val[i]);
} }
return val; return val;
}, },
autosubmit: function() { autosubmit: function() {
this.$input.on('change', function(e, isInitial){ this.$input.on('change', function(e, isInitial){
if(!isInitial) { if(!isInitial) {
@ -3817,7 +3825,7 @@ $(function(){
getSeparator: function() { getSeparator: function() {
return this.options.select2.separator || $.fn.select2.defaults.separator; return this.options.select2.separator || $.fn.select2.defaults.separator;
}, },
/* /*
Converts source from x-editable format: {value: 1, text: "1"} to Converts source from x-editable format: {value: 1, text: "1"} to
select2 format: {id: 1, text: "1"} select2 format: {id: 1, text: "1"}
@ -3831,26 +3839,26 @@ $(function(){
} }
} }
} }
return source; return source;
}, },
destroy: function() { destroy: function() {
if(this.$input.data('select2')) { if(this.$input.data('select2')) {
this.$input.select2('destroy'); this.$input.select2('destroy');
} }
} }
}); });
Constructor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, { Constructor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
/** /**
@property tpl @property tpl
@default <input type="hidden"> @default <input type="hidden">
**/ **/
tpl:'<input type="hidden">', tpl:'<input type="hidden">',
/** /**
Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2). Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2).
@property select2 @property select2
@type object @type object
@default null @default null
@ -3862,21 +3870,21 @@ $(function(){
@property placeholder @property placeholder
@type string @type string
@default null @default null
**/ **/
placeholder: null, placeholder: null,
/** /**
Source data for select. It will be assigned to select2 `data` property and kept here just for convenience. Source data for select. It will be assigned to select2 `data` property and kept here just for convenience.
Please note, that format is different from simple `select` input: use 'id' instead of 'value'. Please note, that format is different from simple `select` input: use 'id' instead of 'value'.
E.g. `[{id: 1, text: "text1"}, {id: 2, text: "text2"}, ...]`. E.g. `[{id: 1, text: "text1"}, {id: 2, text: "text2"}, ...]`.
@property source @property source
@type array|string|function @type array|string|function
@default null @default null
**/ **/
source: null, source: null,
/** /**
Separator used to display tags. Separator used to display tags.
@property viewseparator @property viewseparator
@type string @type string
@default ', ' @default ', '
@ -3884,8 +3892,8 @@ $(function(){
viewseparator: ', ' viewseparator: ', '
}); });
$.fn.editabletypes.select2 = Constructor; $.fn.editabletypes.select2 = Constructor;
}(window.jQuery)); }(window.jQuery));
/** /**

File diff suppressed because one or more lines are too long