option emptyclass

CHANGELOG.txt

@@ -4,6 +4,7 @@ X-editable changelog
 
 Version 1.4.1 wip
 ----------------------------
+[enh] new option `emptyclass` to set css class when element is empty (vitalets) 
 [enh #59] select2 input (vitalets) 
 [enh #17] typeahead input (vitalets) 
 [enh] select: support of OPTGROUP via `children` key in source (vitalets) 

src/element/editable-element.js

@@ -127,7 +127,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         enable: function() {
             this.options.disabled = false;
             this.$element.removeClass('editable-disabled');
-            this.handleEmpty();
+            this.handleEmpty(this.isEmpty);
             if(this.options.toggle !== 'manual') {
                 if(this.$element.attr('tabindex') === '-1') {    
                     this.$element.removeAttr('tabindex');                                
@@ -143,7 +143,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             this.options.disabled = true; 
             this.hide();           
             this.$element.addClass('editable-disabled');
-            this.handleEmpty();
+            this.handleEmpty(this.isEmpty);
             //do not stop focus on this element
             this.$element.attr('tabindex', -1);                
         },
@@ -204,27 +204,33 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         },              
         
         /*
-        * set emptytext if element is empty (reverse: remove emptytext if needed)
+        * set emptytext if element is empty
         */
-        handleEmpty: function () {
+        handleEmpty: function (isEmpty) {
             //do not handle empty if we do not display anything
             if(this.options.display === false) {
                 return;
             }
             
-            var emptyClass = 'editable-empty';
+            this.isEmpty = isEmpty !== undefined ? isEmpty : $.trim(this.$element.text()) === '';           
+            
             //emptytext shown only for enabled
             if(!this.options.disabled) {
-                if ($.trim(this.$element.text()) === '') {
+                if (this.isEmpty) {
-                    this.$element.addClass(emptyClass).text(this.options.emptytext);
+                    this.$element.text(this.options.emptytext);
-                } else {
+                    if(this.options.emptyclass) {
-                    this.$element.removeClass(emptyClass);
+                        this.$element.addClass(this.options.emptyclass);
+                    }
+                } else if(this.options.emptyclass) {
+                    this.$element.removeClass(this.options.emptyclass);
                 }
             } else {
                 //below required if element disable property was changed
-                if(this.$element.hasClass(emptyClass)) {
+                if(this.isEmpty) {
                     this.$element.empty();
-                    this.$element.removeClass(emptyClass);
+                    if(this.options.emptyclass) {
+                        this.$element.removeClass(this.options.emptyclass);
+                    }
                 }
             }
         },        
@@ -381,7 +387,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         url: '/post',
         pk: 1
     });
-    **/    
+    **/
     $.fn.editable = function (option) {
         //special API methods returning non-jquery object
         var result = {}, args = arguments, datakey = 'editable';
@@ -398,7 +404,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
               username: "username is required",
               fullname: "fullname should be minimum 3 letters length"
             }
-            **/             
+            **/
             case 'validate':
                 this.each(function () {
                     var $this = $(this), data = $this.data(datakey), error;
@@ -419,7 +425,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             username: "superuser",
             fullname: "John"
             }
-            **/               
+            **/
             case 'getValue':
                 this.each(function () {
                     var $this = $(this), data = $this.data(datakey);
@@ -438,11 +444,11 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             @param {object} options 
             @param {object} options.url url to submit data 
             @param {object} options.data additional data to submit
-            @param {object} options.ajaxOptions additional ajax options            
+            @param {object} options.ajaxOptions additional ajax options
             @param {function} options.error(obj) error handler 
             @param {function} options.success(obj,config) success handler
             @returns {Object} jQuery object
-            **/            
+            **/
             case 'submit':  //collects value, validate and submit to server for creating new record
                 var config = arguments[1] || {},
                 $elems = this,
@@ -593,7 +599,16 @@ Makes editable any HTML element on the page. Applied as jQuery method.
            }
         }
         **/          
-        display: null
+        display: null,
+        /**
+        Css class applied when editable text is empty.
+
+        @property emptyclass 
+        @type string
+        @default editable-empty
+        @since 1.4.1
+        **/        
+        emptyclass: 'editable-empty'
     };
     
 }(window.jQuery));

test/unit/common.js

@@ -545,5 +545,50 @@
         ok(p.is(':visible'), 'inline visible visible');
         ok(p.hasClass('editable-inline'), 'has inline class');
     }); 
+    
+     test("emptytext, emptyclass", function () {
+        var  emptytext = 'empty!',
+             emptyclass = 'abc',
+             e = $('<a href="#" id="a">  </a>').appendTo('#qunit-fixture').editable({
+                 emptytext: emptytext,
+                 emptyclass: emptyclass,
+                 send: 'never'
+             });
+       
+        equal(e.text(), emptytext, 'emptytext shown on init');
+        ok(e.hasClass(emptyclass), 'emptyclass added');
+             
+        e.click();
+        var p = tip(e);
+        equal(p.find('input[type="text"]').val(), '', 'input val is empty string');
+//        p.find('.editable-cancel').click();
+        //set non-empty value  
+        p.find('input[type="text"]').val('abc');
+        p.find('form').submit();
+        
+        ok(!p.is(':visible'), 'popover was removed');
+        ok(e.text() != emptytext, 'emptytext not shown');
+        ok(!e.hasClass(emptyclass), 'emptyclass removed');
+        
+        e.click();
+        p = tip(e);
+        p.find('input[type="text"]').val('');
+        p.find('form').submit();
+        
+        ok(!p.is(':visible'), 'popover was removed');
+        equal(e.text(), emptytext, 'emptytext shown');
+        ok(e.hasClass(emptyclass), 'emptyclass added');
+        
+        e.editable('disable');
+        equal(e.text(), '', 'emptytext removed');
+        ok(!e.hasClass(emptyclass), 'emptyclass removed');
+        
+        e.editable('enable');            
+        e.editable('enable');
+         
+        equal(e.text(), emptytext, 'emptytext shown');
+        ok(e.hasClass(emptyclass), 'emptyclass added');                     
+   });  
+    
           
 }(jQuery));  

test/unit/text.js

@@ -7,19 +7,6 @@ $(function () {
        }
    });
       
-     test("if element originally empty: emptytext should be shown and input should contain ''", function () {
-        var  emptytext = 'empty!',
-             e = $('<a href="#" id="a">  </a>').appendTo('#qunit-fixture').editable({emptytext: emptytext});
-       
-        equal(e.text(), emptytext, 'emptytext shown on init');
-             
-        e.click();
-        var p = tip(e);
-        equal(p.find('input[type="text"]').val(), '', 'input val is empty string')
-        p.find('.editable-cancel').click(); 
-        ok(!p.is(':visible'), 'popover was removed')    
-     })   
-      
      test("option 'placeholder'", function () {
         var  e = $('<a href="#" id="a" data-placeholder="abc"> </a>').appendTo('#qunit-fixture').editable();