build dev

dist/CHANGELOG.txt

@@ -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)

dist/README.md

@@ -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!
 

dist/bootstrap-editable/css/bootstrap-editable.css

@@ -1,4 +1,4 @@
-/*! X-editable - v1.5.0 
+/*! 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 */
@@ -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;

dist/bootstrap-editable/js/bootstrap-editable.js

@@ -1,4 +1,4 @@
-/*! X-editable - v1.5.0 
+/*! 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 */
@@ -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;
@@ -3737,16 +3738,10 @@ $(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')) {
@@ -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;
                 
@@ -3800,6 +3803,10 @@ $(function(){
             });
         },
 
+        getSeparator: function() {
+            return this.options.select2.separator || $.fn.select2.defaults.separator;
+        },
+        
         /*
         Converts source from x-editable format: {value: 1, text: "1"} to
         select2 format: {id: 1, text: "1"}

dist/bootstrap3-editable/css/bootstrap-editable.css

@@ -1,4 +1,4 @@
-/*! X-editable - v1.5.0 
+/*! 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 */
@@ -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;

dist/bootstrap3-editable/js/bootstrap-editable.js

@@ -1,4 +1,4 @@
-/*! X-editable - v1.5.0 
+/*! 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 */
@@ -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;
@@ -3737,16 +3738,10 @@ $(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')) {
@@ -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;
                 
@@ -3800,6 +3803,10 @@ $(function(){
             });
         },
 
+        getSeparator: function() {
+            return this.options.select2.separator || $.fn.select2.defaults.separator;
+        },
+        
         /*
         Converts source from x-editable format: {value: 1, text: "1"} to
         select2 format: {id: 1, text: "1"}

dist/jquery-editable/css/jquery-editable.css

@@ -1,4 +1,4 @@
-/*! X-editable - v1.5.0 
+/*! 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 */
@@ -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;

dist/jquery-editable/js/jquery-editable-poshytip.js

@@ -1,4 +1,4 @@
-/*! X-editable - v1.5.0 
+/*! 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 */
@@ -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;
@@ -3737,16 +3738,10 @@ $(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')) {
@@ -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;
                 
@@ -3800,6 +3803,10 @@ $(function(){
             });
         },
 
+        getSeparator: function() {
+            return this.options.select2.separator || $.fn.select2.defaults.separator;
+        },
+        
         /*
         Converts source from x-editable format: {value: 1, text: "1"} to
         select2 format: {id: 1, text: "1"}
@@ -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);
        }
 
     });

dist/jqueryui-editable/css/jqueryui-editable.css

@@ -1,4 +1,4 @@
-/*! X-editable - v1.5.0 
+/*! 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 */
@@ -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;

dist/jqueryui-editable/js/jqueryui-editable.js

@@ -1,4 +1,4 @@
-/*! X-editable - v1.5.0 
+/*! 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 */
@@ -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;
@@ -3737,16 +3738,10 @@ $(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')) {
@@ -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;
                 
@@ -3800,6 +3803,10 @@ $(function(){
             });
         },
 
+        getSeparator: function() {
+            return this.options.select2.separator || $.fn.select2.defaults.separator;
+        },
+        
         /*
         Converts source from x-editable format: {value: 1, text: "1"} to
         select2 format: {id: 1, text: "1"}
@@ -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);
        }
 
     });