display option ready

CHANGELOG.txt

@@ -3,10 +3,13 @@ X-editable changelog
 
 
 Version 1.2.0 wip
-----------------------------   
+----------------------------  
+[enh] 'checklist' submit value as array, not comma separated string (vitalets)  
+[enh] 'checklist' was refactored: options 'viewseparator', 'limit', 'limitText' are supressed by 'display' callback (vitalets)  
+[enh] new option: 'display' callback. Makes far more flexible rendering value into element's text. (vitalets)  
 [bug] fix typos (atrophic) 
 [enh] all callbacks scope changed to element (vitalets) 
-[enh] new option 'cancelnochange' to cancel or submit value when it was not changed in form (vitalets) 
+[enh] new option: 'cancelnochange' to cancel or submit value when it was not changed in form (vitalets) 
 [enh] composite pk can be defined as JSON in data-pk attribute (vitalets) 
 [enh #30] new option 'sourceCache' true|false to disable cache for select (vitalets) 
 [bug #34] inputclass span* broken with fluid bootstrap layout. Classes changed to 'input-*'. (vitalets) 

src/containers/editable-container.js

@@ -75,6 +75,7 @@ Applied as jQuery method.
         },
 
         initForm: function() {
+            this.formOptions.scope = this.$element[0]; //set scope of form callbacks to element
             this.$form = $('<div>')
             .editableform(this.formOptions)
             .on({
@@ -263,7 +264,7 @@ Applied as jQuery method.
         closeOthers: function(element) {
             $('.editable-open').each(function(i, el){
                 //do nothing with passed element
-                if(el === element) {
+                if(el === element || $(el).find(element).length) {
                     return;
                 }
 

src/editable-form/editable-form-utils.js

@@ -117,6 +117,13 @@
                 return k;
             }
 
-        }   
+        },
+        
+       /**
+        method to escape html.
+       **/
+       escape: function(str) {
+           return $('<div>').text(str).html();
+       }           
     };      
 }(window.jQuery));

src/editable-form/editable-form.js

@@ -168,8 +168,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
             e.preventDefault();
             
             var error,
-                newValue = this.input.input2value(), //get new value from input
+                newValue = this.input.input2value(); //get new value from input
-                newValueStr;
 
             //validation
             if (error = this.validate(newValue)) {
@@ -178,19 +177,16 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
                 return;
             } 
             
-            //value as string
-            newValueStr = this.input.value2str(newValue);
-
             //if value not changed --> cancel
             /*jslint eqeq: true*/
-            if (this.options.cancelnochange && newValueStr == this.input.value2str(this.value)) {
+            if (this.options.cancelnochange && this.input.value2str(newValue) == this.input.value2str(this.value)) {
             /*jslint eqeq: false*/                
                 this.cancel();
                 return;
             } 
 
             //sending data to server
-            $.when(this.save(newValueStr))
+            $.when(this.save(newValue))
             .done($.proxy(function(response) {
                 //run success callback
                 var res = typeof this.options.success === 'function' ? this.options.success.call(this.options.scope, response, newValue) : null;
@@ -238,13 +234,16 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
             }, this));
         },
 
-        save: function(value) {
+        save: function(newValue) {
+            //convert value for submitting to server
+            var submitValue = this.input.value2submit(newValue);
+            
             //try parse composite pk defined as json string in data-pk 
             this.options.pk = $.fn.editableutils.tryParseJson(this.options.pk, true); 
             
             var pk = (typeof this.options.pk === 'function') ? this.options.pk.call(this.options.scope) : this.options.pk,
             send = !!(typeof this.options.url === 'function' || (this.options.url && ((this.options.send === 'always') || (this.options.send === 'auto' && pk)))),
-            params, ajaxOptions;
+            params;
 
             if (send) { //send to server
                 this.showLoading();
@@ -252,7 +251,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
                 //standard params
                 params = {
                     name: this.options.name || '',
-                    value: value,
+                    value: submitValue,
                     pk: pk 
                 };
 
@@ -267,15 +266,14 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
 
                 if(typeof this.options.url === 'function') { //user's function
                     return this.options.url.call(this.options.scope, params);
-                } else {  //send ajax to server and return deferred object
+                } else {  
-                    ajaxOptions = $.extend({
+                    //send ajax to server and return deferred object
+                    return $.ajax($.extend({
                         url     : this.options.url,
                         data    : params,
                         type    : 'post',
                         dataType: 'json'
-                    }, this.options.ajaxOptions);
+                    }, this.options.ajaxOptions));
-
-                    return $.ajax(ajaxOptions);
                 }
             }
         }, 
@@ -455,6 +453,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
         @property ajaxOptions 
         @type object
         @default null
+        @since 1.1.1        
         **/        
         ajaxOptions: null,
         /**

src/element/editable-element.js

@@ -47,13 +47,20 @@ Makes editable any HTML element on the page. Applied as jQuery method.
                 this.value = this.input.html2value($.trim(this.$element.html()));
                 isValueByText = true;
             } else {
+                /*
+                  value can be string when received from 'data-value' attribute
+                  for complext objects value can be set as json string in data-value attribute, 
+                  e.g. data-value="{city: 'Moscow', street: 'Lenina'}"
+                */
+                this.options.value = $.fn.editableutils.tryParseJson(this.options.value, true); 
                 if(typeof this.options.value === 'string') {
-                   this.options.value = $.trim(this.options.value);
+                    this.value = this.input.str2value(this.options.value);
+                } else {
+                    this.value = this.options.value;
                 }
-                this.value = this.input.str2value(this.options.value);
             }
             
-            //add 'editable' class
+            //add 'editable' class to every editable element
             this.$element.addClass('editable');
             
             //attach handler activating editable. In disabled mode it just prevent default action (useful for links)
@@ -64,6 +71,13 @@ Makes editable any HTML element on the page. Applied as jQuery method.
                     //stop propagation not required anymore because in document click handler it checks event target
                     //e.stopPropagation();
                     
+                    //mark event with special flag: it will not be processed in document click handler
+                    /*
+                    if(e.type === 'click' && e.target !== e.currentTarget) {
+                        $(e.target).data('editable-element', e.currentTarget);
+                    }
+                    */
+                    
                     if(this.options.toggle === 'mouseenter') {
                         //for hover only show container
                         this.show(); 
@@ -81,7 +95,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             //if value was generated by text or value is empty, no sense to run autotext
             doAutotext = !isValueByText && this.value !== null && this.value !== undefined;
             doAutotext &= (this.options.autotext === 'always') || (this.options.autotext === 'auto' && !this.$element.text().length);
-            $.when(doAutotext ? this.input.value2html(this.value, this.$element) : true).then($.proxy(function() {
+            $.when(doAutotext ? this.render() : true).then($.proxy(function() {
                 if(this.options.disabled) {
                     this.disable();
                 } else {
@@ -104,6 +118,25 @@ Makes editable any HTML element on the page. Applied as jQuery method.
                 this.isInit = false;    
             }, this));
         },
+
+        /*
+        Renders value into element's text.
+        Can call custom display method from options.
+        Can return deferred object.
+        @method render()
+        */          
+        render: function() {
+           //if it is input with source, we pass callback in third param to be called when source is loaded
+           if(this.input.options.hasOwnProperty('source')) {
+               return this.input.value2html(this.value, this.$element[0], this.options.display); 
+           //if display method defined --> use it    
+           } else if(typeof this.options.display === 'function') {
+               return this.options.display.call(this.$element[0], this.value);
+           //else use input's original value2html() method    
+           } else {
+               return this.input.value2html(this.value, this.$element[0]); 
+           }
+        },
         
         /**
         Enables editable
@@ -222,8 +255,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             if(!this.container) {
                 var containerOptions = $.extend({}, this.options, {
                     value: this.value,
-                    autohide: false, //element will take care to show/hide container. Otherwise hide() will be called twice
+                    autohide: false //element will take care to show/hide container. Otherwise hide() will be called twice
-                    scope: this.$element[0] //set scope to element
                 });
                 this.$element.editableContainer(containerOptions);
                 this.$element.on({
@@ -326,7 +358,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             if(this.container) {
                 this.container.option('value', this.value);
             }
-            $.when(this.input.value2html(this.value, this.$element))
+            $.when(this.render())
             .then($.proxy(function() {
                 this.handleEmpty();
                 this.$element.triggerHandler('render', this);                        
@@ -401,7 +433,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
                 this.each(function () {
                     var $this = $(this), data = $this.data(datakey);
                     if (data && data.value !== undefined && data.value !== null) {
-                        result[data.options.name] = data.input.value2str(data.value);
+                        result[data.options.name] = data.input.value2submit(data.value);
                     }
                 });
             return result;
@@ -544,7 +576,23 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         @type mixed
         @default element's text
         **/
-        value: null
+        value: null,
+        /**
+        Callback to perform custom displaying of value in element's text.
+        If not defined, default input's value2html() will be called.
+        Runs under element's scope.
+        Second parameter __sourceData__ is passed for inputs with source (select, checklist).
+        
+        @property display 
+        @type function
+        @default null
+        @since 1.2.0
+        @example
+        display: function(value, sourceData) {
+            $(this).html('<b>'+value+'</b>');
+        }
+        **/          
+        display: null
     };
     
 }(window.jQuery));

src/inputs/abstract.js

@@ -49,8 +49,7 @@ To create your own input you should inherit from this class.
         @param {DOMElement} element
        **/       
        value2html: function(value, element) {
-           var html = this.escape(value);
+           $(element).text(value);
-           $(element).html(html);
        },
         
        /**
@@ -65,7 +64,7 @@ To create your own input you should inherit from this class.
        },
         
        /**
-        Converts value to string (for submitting to server)
+        Converts value to string (for comparering)
         
         @method value2str(value) 
         @param {mixed} value
@@ -86,6 +85,17 @@ To create your own input you should inherit from this class.
            return str;
        }, 
        
+       /**
+        Converts value for submitting to server
+        
+        @method value2submit(value) 
+        @param {mixed} value
+        @returns {mixed}
+       **/       
+       value2submit: function(value) {
+           return value;
+       },         
+       
        /**
         Sets value of input.
         
@@ -121,7 +131,7 @@ To create your own input you should inherit from this class.
         
         @method clear() 
        **/        
-       clear:  function() {
+       clear: function() {
            this.$input.val(null);
        },
        

src/inputs/checklist.js

@@ -49,10 +49,8 @@ $(function(){
         },
        
        value2str: function(value) {
-           return $.isArray(value) ? value.join($.trim(this.options.separator)) : '';
+           return $.isArray(value) ? value.sort().join($.trim(this.options.separator)) : '';
-           //it is also possible to sent as array
+       },  
-           //return value;
-       },        
        
        //parse separated string
         str2value: function(str) {
@@ -95,19 +93,16 @@ $(function(){
           
        //collect text of checked boxes
         value2htmlFinal: function(value, element) {
-           var selected = [], item, i, html = '';
+           var html = [],
-           if($.isArray(value) && value.length <= this.options.limit) {    
+               checked = $.grep(this.sourceData, function(o){
-               for(i=0; i<value.length; i++){
+                   return $.grep(value, function(v){return v == o.value;}).length;
-                   item = this.itemByVal(value[i]);
+               });
-                   if(item) {
+           if(checked.length) {
-                       selected.push($('<div>').text(item.text).html());
+               $.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
-                   }
+               $(element).html(html.join('<br>'));
-               }
+           } else {
-               html = selected.join(this.options.viewseparator);
+               $(element).empty(); 
-           } else {  
-               html = this.options.limitText.replace('{checked}', $.isArray(value) ? value.length : 0).replace('{count}', this.sourceData.length); 
            }
-           $(element).html(html);
         },
         
        activate: function() {
@@ -138,39 +133,13 @@ $(function(){
         inputclass: 'editable-checklist',        
         
         /**
-        Separator of values in string when sending to server
+        Separator of values when reading from 'data-value' string
 
         @property separator 
         @type string
         @default ', '
         **/         
-        separator: ',',
+        separator: ','
-        /**
-        Separator of text when display as element content.
-
-        @property viewseparator 
-        @type string
-        @default '<br>'
-        **/         
-        viewseparator: '<br>',
-        /**
-        Maximum number of items shown as element content. 
-        If checked more items - <code>limitText</code> will be shown.
-
-        @property limit 
-        @type integer
-        @default 4
-        **/         
-        limit: 4,
-        /**
-        Text shown when count of checked items is greater than <code>limit</code> parameter.
-        You can use <code>{checked}</code> and <code>{count}</code> placeholders.
-
-        @property limitText 
-        @type string
-        @default 'Selected {checked} of {count}'
-        **/         
-        limitText: 'Selected {checked} of {count}'        
     });
 
     $.fn.editabletypes.checklist = Checklist;      

src/inputs/date/date.js

@@ -79,7 +79,11 @@ $(function(){
        
        str2value: function(str) {
            return str ? this.dpg.parseDate(str, this.parsedFormat, this.options.datepicker.language) : null;
-       },             
+       }, 
+       
+       value2submit: function(value) {
+           return this.value2str(value);
+       },                    
 
        value2input: function(value) {
            this.$input.datepicker('update', value);

src/inputs/dateui/dateui.js

@@ -97,7 +97,11 @@ $(function(){
            } catch(e) {}
            
            return d;
-       },             
+       }, 
+       
+       value2submit: function(value) {
+           return this.value2str(value);
+       },                     
 
        value2input: function(value) {
            this.$input.datepicker('setDate', value);

src/inputs/list.js

@@ -34,10 +34,15 @@ List - abstract class for inputs that have source option loaded from js array or
             return null; //can't set value by text
         },
         
-        value2html: function (value, element) {
+        value2html: function (value, element, display) {
             var deferred = $.Deferred();
             this.onSourceReady(function () {
-                this.value2htmlFinal(value, element);
+                if(typeof display === 'function') {
+                    //custom display method
+                    display.call(element, value, this.sourceData); 
+                } else {
+                    this.value2htmlFinal(value, element);
+                }
                 deferred.resolve();
             }, function () {
                 List.superclass.value2html(this.options.sourceError, element);

test/unit/checklist.js

@@ -4,21 +4,28 @@ $(function () {
         setup: function(){
             sfx = $('#qunit-fixture'),
             fx = $('#async-fixture');               
-            $.support.transition = false;
         }
     });  
    
     asyncTest("should load options, set correct value and save new value", function () {
-         var sep = '-',
+         var sep = '<br>',
              newValue,
-             e = $('<a href="#" data-type="checklist" data-url="post.php"></a>').appendTo(fx).editable({
+             e = $('<a href="#" data-type="checklist" data-url="post-checklist.php"></a>').appendTo(fx).editable({
              pk: 1,
              source: groupsArr,
-             value: [2, 3],
+             value: [2, 3]
-             viewseparator: sep
         });
            
-        equal(e.text(), groups[2]+sep+groups[3], 'autotext ok');
+        equal(e.html(), groups[2]+sep+groups[3], 'autotext ok');
+        
+          $.mockjax({
+              url: 'post-checklist.php',
+              response: function(settings) {
+                 ok($.isArray(settings.data.value), 'value submitted as array');
+                 equal(settings.data.value.sort().join(''), [newValue, 3].join(''), 'submitted array correct');
+              }
+          });         
+        
         
         e.click();
         var p = tip(e);
@@ -28,8 +35,8 @@ $(function () {
         equal(p.find('input[type="checkbox"]:checked').eq(1).val(), 3, '2nd checked');
 
         //set new value
-        p.find('input[type="checkbox"]:checked').eq(0).click(); 
+        p.find('input[type="checkbox"]:checked').eq(0).click();  //uncheck 2
-        p.find('input[type="checkbox"]').first().click();
+        p.find('input[type="checkbox"]').first().click(); //check first 
         newValue = p.find('input[type="checkbox"]').first().val();
         
         //submit
@@ -39,7 +46,7 @@ $(function () {
                ok(!p.is(':visible'), 'popup closed');
                
                equal(e.data('editable').value.join(''), [newValue, 3].join(''), 'new value ok')
-               equal(e.text(), groups[newValue]+sep+groups[3], 'new text ok');
+               equal(e.html(), groups[newValue]+'<br>'+groups[3], 'new text ok');
               
                // open container again to see what checked
                e.click()
@@ -54,40 +61,5 @@ $(function () {
                start();  
          }, timeout);                              
     });                  
-   
-     asyncTest("limit option", function () {
-         var e = $('<a href="#" data-type="checklist" data-value="2,3" data-url="post.php"></a>').appendTo(fx).editable({
-             pk: 1,
-             source: groupsArr,
-             limit: 1,
-             limitText: '{checked} of {count}'
-        });
-           
-        equal(e.text(), '2 of '+groupsArr.length, 'autotext ok');
-        
-        e.click();
-        var p = tip(e);
-
-        equal(p.find('input[type="checkbox"]:checked').length, 2, 'checked count ok');
-        equal(p.find('input[type="checkbox"]:checked').eq(0).val(), 2, '1st checked');
-        equal(p.find('input[type="checkbox"]:checked').eq(1).val(), 3, '2nd checked');
-
-        //set new value
-        p.find('input[type="checkbox"]').first().click();
-        newValue = p.find('input[type="checkbox"]').first().val();
-        
-        //submit
-        p.find('form').submit(); 
-         
-         setTimeout(function() {
-               ok(!p.is(':visible'), 'popup closed');
-               
-               equal(e.text(), '3 of '+groupsArr.length, 'autotext ok');
-               
-               e.remove();    
-               start();  
-         }, timeout);                              
-    });   
-   
      
 });

test/unit/select.js

@@ -523,6 +523,34 @@ $(function () {
                e.remove();    
                start();  
          }, timeout);   
-     });    
+     });   
+     
+     asyncTest("'display' callback", function () {
+         var e = $('<a href="#" data-type="select" data-value="2" data-url="post.php"></a>').appendTo(fx).editable({
+             pk: 1,
+             source: groups,
+             display: function(value, sourceData) {
+                var els = $.grep(sourceData, function(o) {return o.value == value;});  
+                $(this).text('qq' + els[0].text);
+             }
+        }),
+        selected = 3;
+
+        equal(e.text(), 'qq'+groups[2], 'autotext display ok'); 
+        
+        e.click();
+        var p = tip(e);
+
+        p.find('select').val(selected);
+        p.find('form').submit();
+         
+         setTimeout(function() {
+               ok(!p.is(':visible'), 'popover closed');
+               equal(e.data('editable').value, selected, 'new value saved')
+               equal(e.text(), 'qq'+groups[selected], 'text shown correctly') 
+               e.remove();    
+               start();  
+         }, timeout);   
+     });        
      
 });

test/unit/text.js

@@ -454,6 +454,31 @@ $(function () {
             delete $.fn.editable.defaults.name;
             var e = $('<a href="#" id="cde">abc</a>').appendTo('#qunit-fixture').editable();
             equal(e.data('editable').options.name, 'cde', 'name is taken from id');
-      });      
+      });   
+      
+     asyncTest("'display' callback", function () {
+        var newText = 'cd<e>;"',
+            e = $('<a href="#" data-pk="1" data-url="post.php" data-name="text1">abc</a>').appendTo(fx).editable({
+             display: function(value) {
+                 ok(this === e[0], 'scope is ok');
+                 $(this).text('qq'+value);
+             } 
+          });  
+
+        e.click()
+        var p = tip(e);
+
+        ok(p.find('input[type=text]').length, 'input exists')
+        p.find('input').val(newText);
+        p.find('form').submit(); 
+        
+        setTimeout(function() {
+           ok(!p.is(':visible'), 'popover was removed');
+           equal(e.text(), 'qq'+newText, 'custom display ok');
+           e.remove();    
+           start();  
+        }, timeout);             
+        
+      });           
          
 });    

test/unit/textarea.js

@@ -34,8 +34,8 @@ $(function () {
         var e = $('<a href="#" data-pk="1" data-url="post.php">'+v1+'</a>').appendTo(fx).editable({
              type: 'textarea',
              send: 'ifpk',
-             success: function(data) {
+             success: function(response, newvalue) {
-                 return false;
+                 equal(newvalue, v2, 'value in success ok');         
              } 
           });