build dev

This commit is contained in:
vitalets 2013-10-07 12:54:30 +04:00
parent 882ac60346
commit b86d5f120a
14 changed files with 345 additions and 238 deletions

7
dist/CHANGELOG.txt vendored

@ -1,6 +1,13 @@
X-editable changelog
=============================
Version 1.5.1 wip
----------------------------
[bug #357] select2: tags mode with space separator (vitalets)
[bug #374] dateui: clear button does not submit (vitalets)
Version 1.5.0 Oct 1, 2013
----------------------------
[enh #362] add twitter typeahead.js (vitalets)

42
dist/README.md vendored

@ -26,10 +26,12 @@ bower install x-editable
## Reporting issues
When creating issues please provide [jsFiddle](http://jsfiddle.net) example. You can easily fork one of following:
1. [jsFiddle bootstrap template](http://jsfiddle.net/xBB5x/1817)
2. [jsFiddle jqueryui template](http://jsfiddle.net/xBB5x/196)
3. [jsFiddle jquery template](http://jsfiddle.net/xBB5x/197)
Please provide [jsFiddles](http://jsfiddle.net)!
Use these as template:
1. [jsFiddle bootstrap 3](http://jsfiddle.net/xBB5x/2265)
2. [jsFiddle bootstrap 2](http://jsfiddle.net/xBB5x/1817)
3. [jsFiddle jqueryui](http://jsfiddle.net/xBB5x/196)
4. [jsFiddle jquery](http://jsfiddle.net/xBB5x/197)
Your feedback is very appreciated!
## Contribution
@ -42,7 +44,7 @@ git clone https://github.com/<your-github-name>/x-editable.git -b dev
````
2.Install *grunt-cli* globally (if not yet):
````
npm i -d grunt-cli
npm i -g grunt-cli
````
3.Install dependencies:
````
@ -52,17 +54,41 @@ npm i
````
vim editable-form.js
````
5.Run tests:
5.Write some tests for your changes:
````
vim /test/unit/*.js
````
6.Run tests:
````
grunt test
````
6.Commit and push back on github:
or directly in browser:
````
grunt server
````
and open http://127.0.0.1:8000/test
By default test run on bootstrap 3 popup version, but you can test any other build:
* bootstrap 3
* popup: http://127.0.0.1:8000/test/?f=bootstrap3&c=popup
* inline: http://127.0.0.1:8000/test/?f=bootstrap3&c=inline
* bootstrap 2
* popup: http://127.0.0.1:8000/test/?f=bootstrap2&c=popup
* inline: http://127.0.0.1:8000/test/?f=bootstrap2&c=inline
* jquery-ui
* popup: http://127.0.0.1:8000/test/?f=jqueryui&c=popup
* inline: http://127.0.0.1:8000/test/?f=jqueryui&c=inline
* jquery + poshytip
* popup: http://127.0.0.1:8000/test/?f=plain&c=popup
* inline: http://127.0.0.1:8000/test/?f=plain&c=inline
7.Commit and push on github:
````
git add .
git commit -m'refactor editable form, fix #123'
git push origin
````
7.Make pull request on github.
8.Make pull request on github.
Thanks for your support!

@ -1,7 +1,7 @@
/*! X-editable - v1.5.0
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
/*! X-editable - v1.5.1
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
.editableform {
margin-bottom: 0; /* overwrites bootstrap margin */
}
@ -12,6 +12,14 @@
line-height: 20px; /* overwriting bootstrap line-height. See #133 */
}
/*
BS3 width:1005 for inputs breaks editable form in popup
See: https://github.com/vitalets/x-editable/issues/393
*/
.editableform .form-control {
width: auto;
}
.editable-buttons {
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
vertical-align: top;
@ -136,7 +144,7 @@
.editable-pre-wrapped {
white-space: pre-wrap;
}
}
.editable-container.editable-popup {
max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
}
@ -157,7 +165,7 @@
.editable-container.ui-widget {
font-size: inherit; /* jqueryui widget font 1.1em too big, overwrite it */
z-index: 9990; /* should be less than select2 dropdown z-index to close dropdown first when click */
}
}
.editable-click,
a.editable-click,
a.editable-click:hover {
@ -203,7 +211,7 @@ a.editable-click.editable-disabled:hover {
display:inline-block;
}
/*!
* Datepicker for Bootstrap
*

@ -1,7 +1,7 @@
/*! X-editable - v1.5.0
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
/*! X-editable - v1.5.1
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
/**
Form with single input element, two buttons and two states: normal/loading.
Applied as jQuery method to DIV tag (not to form tag!). This is because form can be in loading state when spinner shown.
@ -185,7 +185,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
} else {
//convert newline to <br> for more pretty error display
if(msg) {
lines = msg.split("\n");
lines = (''+msg).split('\n');
for (var i = 0; i < lines.length; i++) {
lines[i] = $('<div>').text(lines[i]).html();
}
@ -200,11 +200,12 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
e.stopPropagation();
e.preventDefault();
var error,
newValue = this.input.input2value(); //get new value from input
//get new value from input
var newValue = this.input.input2value();
//validation
if (error = this.validate(newValue)) {
// validation: if validate returns truthy value - means error
var error = this.validate(newValue);
if (error) {
this.error(error);
this.showForm();
return;
@ -625,7 +626,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
//engine
$.fn.editableform.engine = 'jquery';
}(window.jQuery));
/**
* EditableForm utilites
*/
@ -875,7 +876,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
};
}(window.jQuery));
/**
Attaches stand-alone container with editable-form to HTML element. Element is used only for positioning, value is not stored anywhere.<br>
This method applied internally in <code>$().editable()</code>. You should subscribe on it's events (save / cancel) to get profit of it.<br>
@ -1391,7 +1392,7 @@ Applied as jQuery method.
};
}(window.jQuery));
/**
* Editable Inline
* ---------------------
@ -1445,7 +1446,7 @@ Applied as jQuery method.
}
});
}(window.jQuery));
}(window.jQuery));
/**
Makes editable any HTML element on the page. Applied as jQuery method.
@ -2257,7 +2258,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
};
}(window.jQuery));
/**
AbstractInput - base class for all editable inputs.
It defines interface to be implemented by any input type.
@ -2478,7 +2479,7 @@ To create your own input you can inherit from this class.
$.extend($.fn.editabletypes, {abstractinput: AbstractInput});
}(window.jQuery));
/**
List - abstract class for inputs that have source option loaded from js array or via ajax
@ -2814,7 +2815,7 @@ List - abstract class for inputs that have source option loaded from js array or
$.fn.editabletypes.list = List;
}(window.jQuery));
/**
Text input
@ -2949,7 +2950,7 @@ $(function(){
$.fn.editabletypes.text = Text;
}(window.jQuery));
/**
Textarea input
@ -3061,7 +3062,7 @@ $(function(){
$.fn.editabletypes.textarea = Textarea;
}(window.jQuery));
/**
Select (dropdown)
@ -3158,7 +3159,7 @@ $(function(){
$.fn.editabletypes.select = Select;
}(window.jQuery));
/**
List of checkboxes.
Internally value stored as javascript array of values.
@ -3315,7 +3316,7 @@ $(function(){
$.fn.editabletypes.checklist = Checklist;
}(window.jQuery));
/**
HTML5 input types.
Following types are supported:
@ -3534,7 +3535,7 @@ Time
});
$.fn.editabletypes.time = Time;
}(window.jQuery));
/**
Select2 input. Based on amazing work of Igor Vaynberg https://github.com/ivaynberg/select2.
Please see [original select2 docs](http://ivaynberg.github.com/select2) for detailed description and options.
@ -3737,17 +3738,11 @@ $(function(){
},
value2input: function(value) {
//for local source use data directly from source (to allow autotext)
/*
if(!this.isRemote && !this.isMultiple) {
var items = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
if(items.length) {
this.$input.select2('data', items[0]);
return;
}
}
*/
// if value array => join it anyway
if($.isArray(value)) {
value = value.join(this.getSeparator());
}
//for remote source just set value, text is updated by initSelection
if(!this.$input.data('select2')) {
this.$input.val(value);
@ -3755,10 +3750,18 @@ $(function(){
} else {
//second argument needed to separate initial change from user's click (for autosubmit)
this.$input.val(value).trigger('change', true);
//Uncaught Error: cannot call val() if initSelection() is not defined
//this.$input.select2('val', value);
}
//if remote source AND no user's initSelection provided --> try to use element's text
// if defined remote source AND no multiple mode AND no user's initSelection provided -->
// we should somehow get text for provided id.
// The solution is to use element's text as text for that id
if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
// 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
// otherwise we cant construct data object
var customId = this.options.select2.id,
customText = this.options.select2.formatSelection;
if(!customId && !customText) {
@ -3777,7 +3780,7 @@ $(function(){
return str;
}
separator = separator || this.options.select2.separator || $.fn.select2.defaults.separator;
separator = separator || this.getSeparator();
var val, i, l;
@ -3799,6 +3802,10 @@ $(function(){
}
});
},
getSeparator: function() {
return this.options.select2.separator || $.fn.select2.defaults.separator;
},
/*
Converts source from x-editable format: {value: 1, text: "1"} to
@ -3869,7 +3876,7 @@ $(function(){
$.fn.editabletypes.select2 = Constructor;
}(window.jQuery));
/**
* Combodate - 1.0.4
* Dropdown date and time picker.
@ -4322,7 +4329,7 @@ $(function(){
roundTime: true //whether to round minutes and seconds if step > 1
};
}(window.jQuery));
}(window.jQuery));
/**
Combodate input - dropdown date and time picker.
Based on [combodate](http://vitalets.github.com/combodate) plugin (included). To use it you should manually include [momentjs](http://momentjs.com).
@ -4520,7 +4527,7 @@ $(function(){
$.fn.editabletypes.combodate = Constructor;
}(window.jQuery));
/*
Editableform based on Twitter Bootstrap 2
*/
@ -4562,7 +4569,7 @@ Editableform based on Twitter Bootstrap 2
//engine
$.fn.editableform.engine = 'bs2';
}(window.jQuery));
}(window.jQuery));
/**
* Editable Popover
* ---------------------
@ -4743,7 +4750,7 @@ Editableform based on Twitter Bootstrap 2
});
}(window.jQuery));
/* =========================================================
* bootstrap-datepicker.js
* http://www.eyecon.ro/bootstrap-datepicker
@ -5998,7 +6005,7 @@ Editableform based on Twitter Bootstrap 2
});
}( window.jQuery ));
/**
Bootstrap-datepicker.
Description and examples: https://github.com/eternicode/bootstrap-datepicker.
@ -6228,7 +6235,7 @@ $(function(){
$.fn.editabletypes.date = Date;
}(window.jQuery));
/**
Bootstrap datefield input - modification for inline mode.
Shows normal <input type="text"> and binds popup datepicker.
@ -6309,7 +6316,7 @@ Automatically shown in inline mode.
$.fn.editabletypes.datefield = DateField;
}(window.jQuery));
}(window.jQuery));
/**
Bootstrap-datetimepicker.
Based on [smalot bootstrap-datetimepicker plugin](https://github.com/smalot/bootstrap-datetimepicker).
@ -6553,7 +6560,7 @@ $(function(){
$.fn.editabletypes.datetime = DateTime;
}(window.jQuery));
}(window.jQuery));
/**
Bootstrap datetimefield input - datetime input for inline mode.
Shows normal <input type="text"> and binds popup datetimepicker.
@ -6630,7 +6637,7 @@ Automatically shown in inline mode.
$.fn.editabletypes.datetimefield = DateTimeField;
}(window.jQuery));
}(window.jQuery));
/**
Typeahead input (bootstrap 2 only). Based on Twitter Bootstrap 2 [typeahead](http://getbootstrap.com/2.3.2/javascript.html#typeahead).
Depending on `source` format typeahead operates in two modes:

File diff suppressed because one or more lines are too long

@ -1,7 +1,7 @@
/*! X-editable - v1.5.0
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
/*! X-editable - v1.5.1
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
.editableform {
margin-bottom: 0; /* overwrites bootstrap margin */
}
@ -12,6 +12,14 @@
line-height: 20px; /* overwriting bootstrap line-height. See #133 */
}
/*
BS3 width:1005 for inputs breaks editable form in popup
See: https://github.com/vitalets/x-editable/issues/393
*/
.editableform .form-control {
width: auto;
}
.editable-buttons {
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
vertical-align: top;
@ -136,7 +144,7 @@
.editable-pre-wrapped {
white-space: pre-wrap;
}
}
.editable-container.editable-popup {
max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
}
@ -157,7 +165,7 @@
.editable-container.ui-widget {
font-size: inherit; /* jqueryui widget font 1.1em too big, overwrite it */
z-index: 9990; /* should be less than select2 dropdown z-index to close dropdown first when click */
}
}
.editable-click,
a.editable-click,
a.editable-click:hover {
@ -203,7 +211,7 @@ a.editable-click.editable-disabled:hover {
display:inline-block;
}
/*!
* Datepicker for Bootstrap
*

@ -1,7 +1,7 @@
/*! X-editable - v1.5.0
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
/*! X-editable - v1.5.1
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
/**
Form with single input element, two buttons and two states: normal/loading.
Applied as jQuery method to DIV tag (not to form tag!). This is because form can be in loading state when spinner shown.
@ -185,7 +185,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
} else {
//convert newline to <br> for more pretty error display
if(msg) {
lines = msg.split("\n");
lines = (''+msg).split('\n');
for (var i = 0; i < lines.length; i++) {
lines[i] = $('<div>').text(lines[i]).html();
}
@ -200,11 +200,12 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
e.stopPropagation();
e.preventDefault();
var error,
newValue = this.input.input2value(); //get new value from input
//get new value from input
var newValue = this.input.input2value();
//validation
if (error = this.validate(newValue)) {
// validation: if validate returns truthy value - means error
var error = this.validate(newValue);
if (error) {
this.error(error);
this.showForm();
return;
@ -625,7 +626,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
//engine
$.fn.editableform.engine = 'jquery';
}(window.jQuery));
/**
* EditableForm utilites
*/
@ -875,7 +876,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
};
}(window.jQuery));
/**
Attaches stand-alone container with editable-form to HTML element. Element is used only for positioning, value is not stored anywhere.<br>
This method applied internally in <code>$().editable()</code>. You should subscribe on it's events (save / cancel) to get profit of it.<br>
@ -1391,7 +1392,7 @@ Applied as jQuery method.
};
}(window.jQuery));
/**
* Editable Inline
* ---------------------
@ -1445,7 +1446,7 @@ Applied as jQuery method.
}
});
}(window.jQuery));
}(window.jQuery));
/**
Makes editable any HTML element on the page. Applied as jQuery method.
@ -2257,7 +2258,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
};
}(window.jQuery));
/**
AbstractInput - base class for all editable inputs.
It defines interface to be implemented by any input type.
@ -2478,7 +2479,7 @@ To create your own input you can inherit from this class.
$.extend($.fn.editabletypes, {abstractinput: AbstractInput});
}(window.jQuery));
/**
List - abstract class for inputs that have source option loaded from js array or via ajax
@ -2814,7 +2815,7 @@ List - abstract class for inputs that have source option loaded from js array or
$.fn.editabletypes.list = List;
}(window.jQuery));
/**
Text input
@ -2949,7 +2950,7 @@ $(function(){
$.fn.editabletypes.text = Text;
}(window.jQuery));
/**
Textarea input
@ -3061,7 +3062,7 @@ $(function(){
$.fn.editabletypes.textarea = Textarea;
}(window.jQuery));
/**
Select (dropdown)
@ -3158,7 +3159,7 @@ $(function(){
$.fn.editabletypes.select = Select;
}(window.jQuery));
/**
List of checkboxes.
Internally value stored as javascript array of values.
@ -3315,7 +3316,7 @@ $(function(){
$.fn.editabletypes.checklist = Checklist;
}(window.jQuery));
/**
HTML5 input types.
Following types are supported:
@ -3534,7 +3535,7 @@ Time
});
$.fn.editabletypes.time = Time;
}(window.jQuery));
/**
Select2 input. Based on amazing work of Igor Vaynberg https://github.com/ivaynberg/select2.
Please see [original select2 docs](http://ivaynberg.github.com/select2) for detailed description and options.
@ -3737,17 +3738,11 @@ $(function(){
},
value2input: function(value) {
//for local source use data directly from source (to allow autotext)
/*
if(!this.isRemote && !this.isMultiple) {
var items = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
if(items.length) {
this.$input.select2('data', items[0]);
return;
}
}
*/
// if value array => join it anyway
if($.isArray(value)) {
value = value.join(this.getSeparator());
}
//for remote source just set value, text is updated by initSelection
if(!this.$input.data('select2')) {
this.$input.val(value);
@ -3755,10 +3750,18 @@ $(function(){
} else {
//second argument needed to separate initial change from user's click (for autosubmit)
this.$input.val(value).trigger('change', true);
//Uncaught Error: cannot call val() if initSelection() is not defined
//this.$input.select2('val', value);
}
//if remote source AND no user's initSelection provided --> try to use element's text
// if defined remote source AND no multiple mode AND no user's initSelection provided -->
// we should somehow get text for provided id.
// The solution is to use element's text as text for that id
if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
// 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
// otherwise we cant construct data object
var customId = this.options.select2.id,
customText = this.options.select2.formatSelection;
if(!customId && !customText) {
@ -3777,7 +3780,7 @@ $(function(){
return str;
}
separator = separator || this.options.select2.separator || $.fn.select2.defaults.separator;
separator = separator || this.getSeparator();
var val, i, l;
@ -3799,6 +3802,10 @@ $(function(){
}
});
},
getSeparator: function() {
return this.options.select2.separator || $.fn.select2.defaults.separator;
},
/*
Converts source from x-editable format: {value: 1, text: "1"} to
@ -3869,7 +3876,7 @@ $(function(){
$.fn.editabletypes.select2 = Constructor;
}(window.jQuery));
/**
* Combodate - 1.0.4
* Dropdown date and time picker.
@ -4322,7 +4329,7 @@ $(function(){
roundTime: true //whether to round minutes and seconds if step > 1
};
}(window.jQuery));
}(window.jQuery));
/**
Combodate input - dropdown date and time picker.
Based on [combodate](http://vitalets.github.com/combodate) plugin (included). To use it you should manually include [momentjs](http://momentjs.com).
@ -4520,7 +4527,7 @@ $(function(){
$.fn.editabletypes.combodate = Constructor;
}(window.jQuery));
/*
Editableform based on Twitter Bootstrap 3
*/
@ -4584,7 +4591,7 @@ Editableform based on Twitter Bootstrap 3
$.fn.editableform.errorBlockClass = null;
//engine
$.fn.editableform.engine = 'bs3';
}(window.jQuery));
}(window.jQuery));
/**
* Editable Popover3 (for Bootstrap 3)
* ---------------------
@ -4784,7 +4791,7 @@ Editableform based on Twitter Bootstrap 3
});
}(window.jQuery));
/* =========================================================
* bootstrap-datepicker.js
* http://www.eyecon.ro/bootstrap-datepicker
@ -6039,7 +6046,7 @@ Editableform based on Twitter Bootstrap 3
});
}( window.jQuery ));
/**
Bootstrap-datepicker.
Description and examples: https://github.com/eternicode/bootstrap-datepicker.
@ -6269,7 +6276,7 @@ $(function(){
$.fn.editabletypes.date = Date;
}(window.jQuery));
/**
Bootstrap datefield input - modification for inline mode.
Shows normal <input type="text"> and binds popup datepicker.
@ -6350,7 +6357,7 @@ Automatically shown in inline mode.
$.fn.editabletypes.datefield = DateField;
}(window.jQuery));
}(window.jQuery));
/**
Bootstrap-datetimepicker.
Based on [smalot bootstrap-datetimepicker plugin](https://github.com/smalot/bootstrap-datetimepicker).
@ -6594,7 +6601,7 @@ $(function(){
$.fn.editabletypes.datetime = DateTime;
}(window.jQuery));
}(window.jQuery));
/**
Bootstrap datetimefield input - datetime input for inline mode.
Shows normal <input type="text"> and binds popup datetimepicker.

File diff suppressed because one or more lines are too long

@ -1,7 +1,7 @@
/*! X-editable - v1.5.0
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
/*! X-editable - v1.5.1
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
.editableform {
margin-bottom: 0; /* overwrites bootstrap margin */
}
@ -12,6 +12,14 @@
line-height: 20px; /* overwriting bootstrap line-height. See #133 */
}
/*
BS3 width:1005 for inputs breaks editable form in popup
See: https://github.com/vitalets/x-editable/issues/393
*/
.editableform .form-control {
width: auto;
}
.editable-buttons {
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
vertical-align: top;
@ -136,7 +144,7 @@
.editable-pre-wrapped {
white-space: pre-wrap;
}
}
.editable-container.editable-popup {
max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
}
@ -157,7 +165,7 @@
.editable-container.ui-widget {
font-size: inherit; /* jqueryui widget font 1.1em too big, overwrite it */
z-index: 9990; /* should be less than select2 dropdown z-index to close dropdown first when click */
}
}
.editable-click,
a.editable-click,
a.editable-click:hover {

@ -1,7 +1,7 @@
/*! X-editable - v1.5.0
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
/*! X-editable - v1.5.1
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
/**
Form with single input element, two buttons and two states: normal/loading.
Applied as jQuery method to DIV tag (not to form tag!). This is because form can be in loading state when spinner shown.
@ -185,7 +185,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
} else {
//convert newline to <br> for more pretty error display
if(msg) {
lines = msg.split("\n");
lines = (''+msg).split('\n');
for (var i = 0; i < lines.length; i++) {
lines[i] = $('<div>').text(lines[i]).html();
}
@ -200,11 +200,12 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
e.stopPropagation();
e.preventDefault();
var error,
newValue = this.input.input2value(); //get new value from input
//get new value from input
var newValue = this.input.input2value();
//validation
if (error = this.validate(newValue)) {
// validation: if validate returns truthy value - means error
var error = this.validate(newValue);
if (error) {
this.error(error);
this.showForm();
return;
@ -625,7 +626,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
//engine
$.fn.editableform.engine = 'jquery';
}(window.jQuery));
/**
* EditableForm utilites
*/
@ -875,7 +876,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
};
}(window.jQuery));
/**
Attaches stand-alone container with editable-form to HTML element. Element is used only for positioning, value is not stored anywhere.<br>
This method applied internally in <code>$().editable()</code>. You should subscribe on it's events (save / cancel) to get profit of it.<br>
@ -1391,7 +1392,7 @@ Applied as jQuery method.
};
}(window.jQuery));
/**
* Editable Inline
* ---------------------
@ -1445,7 +1446,7 @@ Applied as jQuery method.
}
});
}(window.jQuery));
}(window.jQuery));
/**
Makes editable any HTML element on the page. Applied as jQuery method.
@ -2257,7 +2258,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
};
}(window.jQuery));
/**
AbstractInput - base class for all editable inputs.
It defines interface to be implemented by any input type.
@ -2478,7 +2479,7 @@ To create your own input you can inherit from this class.
$.extend($.fn.editabletypes, {abstractinput: AbstractInput});
}(window.jQuery));
/**
List - abstract class for inputs that have source option loaded from js array or via ajax
@ -2814,7 +2815,7 @@ List - abstract class for inputs that have source option loaded from js array or
$.fn.editabletypes.list = List;
}(window.jQuery));
/**
Text input
@ -2949,7 +2950,7 @@ $(function(){
$.fn.editabletypes.text = Text;
}(window.jQuery));
/**
Textarea input
@ -3061,7 +3062,7 @@ $(function(){
$.fn.editabletypes.textarea = Textarea;
}(window.jQuery));
/**
Select (dropdown)
@ -3158,7 +3159,7 @@ $(function(){
$.fn.editabletypes.select = Select;
}(window.jQuery));
/**
List of checkboxes.
Internally value stored as javascript array of values.
@ -3315,7 +3316,7 @@ $(function(){
$.fn.editabletypes.checklist = Checklist;
}(window.jQuery));
/**
HTML5 input types.
Following types are supported:
@ -3534,7 +3535,7 @@ Time
});
$.fn.editabletypes.time = Time;
}(window.jQuery));
/**
Select2 input. Based on amazing work of Igor Vaynberg https://github.com/ivaynberg/select2.
Please see [original select2 docs](http://ivaynberg.github.com/select2) for detailed description and options.
@ -3737,17 +3738,11 @@ $(function(){
},
value2input: function(value) {
//for local source use data directly from source (to allow autotext)
/*
if(!this.isRemote && !this.isMultiple) {
var items = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
if(items.length) {
this.$input.select2('data', items[0]);
return;
}
}
*/
// if value array => join it anyway
if($.isArray(value)) {
value = value.join(this.getSeparator());
}
//for remote source just set value, text is updated by initSelection
if(!this.$input.data('select2')) {
this.$input.val(value);
@ -3755,10 +3750,18 @@ $(function(){
} else {
//second argument needed to separate initial change from user's click (for autosubmit)
this.$input.val(value).trigger('change', true);
//Uncaught Error: cannot call val() if initSelection() is not defined
//this.$input.select2('val', value);
}
//if remote source AND no user's initSelection provided --> try to use element's text
// if defined remote source AND no multiple mode AND no user's initSelection provided -->
// we should somehow get text for provided id.
// The solution is to use element's text as text for that id
if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
// 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
// otherwise we cant construct data object
var customId = this.options.select2.id,
customText = this.options.select2.formatSelection;
if(!customId && !customText) {
@ -3777,7 +3780,7 @@ $(function(){
return str;
}
separator = separator || this.options.select2.separator || $.fn.select2.defaults.separator;
separator = separator || this.getSeparator();
var val, i, l;
@ -3799,6 +3802,10 @@ $(function(){
}
});
},
getSeparator: function() {
return this.options.select2.separator || $.fn.select2.defaults.separator;
},
/*
Converts source from x-editable format: {value: 1, text: "1"} to
@ -3869,7 +3876,7 @@ $(function(){
$.fn.editabletypes.select2 = Constructor;
}(window.jQuery));
/**
* Combodate - 1.0.4
* Dropdown date and time picker.
@ -4322,7 +4329,7 @@ $(function(){
roundTime: true //whether to round minutes and seconds if step > 1
};
}(window.jQuery));
}(window.jQuery));
/**
Combodate input - dropdown date and time picker.
Based on [combodate](http://vitalets.github.com/combodate) plugin (included). To use it you should manually include [momentjs](http://momentjs.com).
@ -4520,7 +4527,7 @@ $(function(){
$.fn.editabletypes.combodate = Constructor;
}(window.jQuery));
/**
* Editable Poshytip
* ---------------------
@ -4727,7 +4734,7 @@ $(function(){
};
}
/*jshinteqeqeq: true, curly: true*/
}(window.jQuery));
}(window.jQuery));
/**
jQuery UI Datepicker.
Description and examples: http://jqueryui.com/datepicker.
@ -4849,15 +4856,22 @@ $(function(){
clear: function() {
this.$input.datepicker('setDate', null);
// submit automatically whe that are no buttons
if(this.isAutosubmit) {
this.submit();
}
},
autosubmit: function() {
this.$input.on('mouseup', 'table.ui-datepicker-calendar a.ui-state-default', function(e){
var $form = $(this).closest('form');
setTimeout(function() {
$form.submit();
}, 200);
});
this.isAutosubmit = true;
this.$input.on('mouseup', 'table.ui-datepicker-calendar a.ui-state-default', $.proxy(this.submit, this));
},
submit: function() {
var $form = this.$input.closest('form');
setTimeout(function() {
$form.submit();
}, 200);
}
});
@ -4924,7 +4938,7 @@ $(function(){
$.fn.editabletypes.dateui = DateUI;
}(window.jQuery));
/**
jQuery UI datefield input - modification for inline mode.
Shows normal <input type="text"> and binds popup datepicker.

File diff suppressed because one or more lines are too long

@ -1,7 +1,7 @@
/*! X-editable - v1.5.0
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
/*! X-editable - v1.5.1
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
.editableform {
margin-bottom: 0; /* overwrites bootstrap margin */
}
@ -12,6 +12,14 @@
line-height: 20px; /* overwriting bootstrap line-height. See #133 */
}
/*
BS3 width:1005 for inputs breaks editable form in popup
See: https://github.com/vitalets/x-editable/issues/393
*/
.editableform .form-control {
width: auto;
}
.editable-buttons {
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
vertical-align: top;
@ -136,7 +144,7 @@
.editable-pre-wrapped {
white-space: pre-wrap;
}
}
.editable-container.editable-popup {
max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
}
@ -157,7 +165,7 @@
.editable-container.ui-widget {
font-size: inherit; /* jqueryui widget font 1.1em too big, overwrite it */
z-index: 9990; /* should be less than select2 dropdown z-index to close dropdown first when click */
}
}
.editable-click,
a.editable-click,
a.editable-click:hover {

@ -1,7 +1,7 @@
/*! X-editable - v1.5.0
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
/*! X-editable - v1.5.1
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
/**
Form with single input element, two buttons and two states: normal/loading.
Applied as jQuery method to DIV tag (not to form tag!). This is because form can be in loading state when spinner shown.
@ -185,7 +185,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
} else {
//convert newline to <br> for more pretty error display
if(msg) {
lines = msg.split("\n");
lines = (''+msg).split('\n');
for (var i = 0; i < lines.length; i++) {
lines[i] = $('<div>').text(lines[i]).html();
}
@ -200,11 +200,12 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
e.stopPropagation();
e.preventDefault();
var error,
newValue = this.input.input2value(); //get new value from input
//get new value from input
var newValue = this.input.input2value();
//validation
if (error = this.validate(newValue)) {
// validation: if validate returns truthy value - means error
var error = this.validate(newValue);
if (error) {
this.error(error);
this.showForm();
return;
@ -625,7 +626,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
//engine
$.fn.editableform.engine = 'jquery';
}(window.jQuery));
/**
* EditableForm utilites
*/
@ -875,7 +876,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
};
}(window.jQuery));
/**
Attaches stand-alone container with editable-form to HTML element. Element is used only for positioning, value is not stored anywhere.<br>
This method applied internally in <code>$().editable()</code>. You should subscribe on it's events (save / cancel) to get profit of it.<br>
@ -1391,7 +1392,7 @@ Applied as jQuery method.
};
}(window.jQuery));
/**
* Editable Inline
* ---------------------
@ -1445,7 +1446,7 @@ Applied as jQuery method.
}
});
}(window.jQuery));
}(window.jQuery));
/**
Makes editable any HTML element on the page. Applied as jQuery method.
@ -2257,7 +2258,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
};
}(window.jQuery));
/**
AbstractInput - base class for all editable inputs.
It defines interface to be implemented by any input type.
@ -2478,7 +2479,7 @@ To create your own input you can inherit from this class.
$.extend($.fn.editabletypes, {abstractinput: AbstractInput});
}(window.jQuery));
/**
List - abstract class for inputs that have source option loaded from js array or via ajax
@ -2814,7 +2815,7 @@ List - abstract class for inputs that have source option loaded from js array or
$.fn.editabletypes.list = List;
}(window.jQuery));
/**
Text input
@ -2949,7 +2950,7 @@ $(function(){
$.fn.editabletypes.text = Text;
}(window.jQuery));
/**
Textarea input
@ -3061,7 +3062,7 @@ $(function(){
$.fn.editabletypes.textarea = Textarea;
}(window.jQuery));
/**
Select (dropdown)
@ -3158,7 +3159,7 @@ $(function(){
$.fn.editabletypes.select = Select;
}(window.jQuery));
/**
List of checkboxes.
Internally value stored as javascript array of values.
@ -3315,7 +3316,7 @@ $(function(){
$.fn.editabletypes.checklist = Checklist;
}(window.jQuery));
/**
HTML5 input types.
Following types are supported:
@ -3534,7 +3535,7 @@ Time
});
$.fn.editabletypes.time = Time;
}(window.jQuery));
/**
Select2 input. Based on amazing work of Igor Vaynberg https://github.com/ivaynberg/select2.
Please see [original select2 docs](http://ivaynberg.github.com/select2) for detailed description and options.
@ -3737,17 +3738,11 @@ $(function(){
},
value2input: function(value) {
//for local source use data directly from source (to allow autotext)
/*
if(!this.isRemote && !this.isMultiple) {
var items = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
if(items.length) {
this.$input.select2('data', items[0]);
return;
}
}
*/
// if value array => join it anyway
if($.isArray(value)) {
value = value.join(this.getSeparator());
}
//for remote source just set value, text is updated by initSelection
if(!this.$input.data('select2')) {
this.$input.val(value);
@ -3755,10 +3750,18 @@ $(function(){
} else {
//second argument needed to separate initial change from user's click (for autosubmit)
this.$input.val(value).trigger('change', true);
//Uncaught Error: cannot call val() if initSelection() is not defined
//this.$input.select2('val', value);
}
//if remote source AND no user's initSelection provided --> try to use element's text
// if defined remote source AND no multiple mode AND no user's initSelection provided -->
// we should somehow get text for provided id.
// The solution is to use element's text as text for that id
if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
// 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
// otherwise we cant construct data object
var customId = this.options.select2.id,
customText = this.options.select2.formatSelection;
if(!customId && !customText) {
@ -3777,7 +3780,7 @@ $(function(){
return str;
}
separator = separator || this.options.select2.separator || $.fn.select2.defaults.separator;
separator = separator || this.getSeparator();
var val, i, l;
@ -3799,6 +3802,10 @@ $(function(){
}
});
},
getSeparator: function() {
return this.options.select2.separator || $.fn.select2.defaults.separator;
},
/*
Converts source from x-editable format: {value: 1, text: "1"} to
@ -3869,7 +3876,7 @@ $(function(){
$.fn.editabletypes.select2 = Constructor;
}(window.jQuery));
/**
* Combodate - 1.0.4
* Dropdown date and time picker.
@ -4322,7 +4329,7 @@ $(function(){
roundTime: true //whether to round minutes and seconds if step > 1
};
}(window.jQuery));
}(window.jQuery));
/**
Combodate input - dropdown date and time picker.
Based on [combodate](http://vitalets.github.com/combodate) plugin (included). To use it you should manually include [momentjs](http://momentjs.com).
@ -4520,7 +4527,7 @@ $(function(){
$.fn.editabletypes.combodate = Constructor;
}(window.jQuery));
/*
Editableform based on jQuery UI
*/
@ -4552,7 +4559,7 @@ Editableform based on jQuery UI
//engine
$.fn.editableform.engine = 'jquery-ui';
}(window.jQuery));
}(window.jQuery));
/**
* Editable jQuery UI Tooltip
* ---------------------
@ -4674,7 +4681,7 @@ Editableform based on jQuery UI
});
}(window.jQuery));
/**
jQuery UI Datepicker.
Description and examples: http://jqueryui.com/datepicker.
@ -4796,15 +4803,22 @@ $(function(){
clear: function() {
this.$input.datepicker('setDate', null);
// submit automatically whe that are no buttons
if(this.isAutosubmit) {
this.submit();
}
},
autosubmit: function() {
this.$input.on('mouseup', 'table.ui-datepicker-calendar a.ui-state-default', function(e){
var $form = $(this).closest('form');
setTimeout(function() {
$form.submit();
}, 200);
});
this.isAutosubmit = true;
this.$input.on('mouseup', 'table.ui-datepicker-calendar a.ui-state-default', $.proxy(this.submit, this));
},
submit: function() {
var $form = this.$input.closest('form');
setTimeout(function() {
$form.submit();
}, 200);
}
});
@ -4871,7 +4885,7 @@ $(function(){
$.fn.editabletypes.dateui = DateUI;
}(window.jQuery));
/**
jQuery UI datefield input - modification for inline mode.
Shows normal <input type="text"> and binds popup datepicker.

File diff suppressed because one or more lines are too long