highlight element after update, fix #245

CHANGELOG.txt

@@ -3,6 +3,7 @@ X-editable changelog
 
 Version 1.4.5 wip
 ----------------------------
+[enh #245] highlight element after update (vitalets)
 [enh] select2 now works with ajax source (vitalets)
 [bug] fix datefield (datetimefield) to return null for incorrect dates (vitalets)
 [bug #224] do not close popup when it is saving value (vitalets)

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

@@ -218,6 +218,22 @@
                $.error('Unknown type: '+ type);
                return false; 
            }  
+       },
+       
+       //see http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr
+       supportsTransitions: function () {
+           var b = document.body || document.documentElement;
+           var s = b.style;
+           var p = 'transition';
+           if(typeof s[p] == 'string') {return true; }
+
+           // Tests for vendor specific prop
+           v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
+           p = p.charAt(0).toUpperCase() + p.substr(1);
+           for(var i=0; i<v.length; i++) {
+               if(typeof s[v[i] + p] == 'string') { return true; }
+           }
+           return false;
        }            
        
     };      

src/element/editable-element.css

@@ -28,6 +28,14 @@ a.editable-click.editable-disabled:hover {
 /*    content: '*'*/
 }
 
+.editable-bg-transition {
+  -webkit-transition: background-color 1400ms ease-in;
+  -moz-transition: background-color 1400ms ease-in;
+  -o-transition: background-color 1400ms ease-in;
+  -ms-transition: background-color 1400ms ease-in;
+  transition: background-color 1400ms ease-in;  
+}
+
 /*see https://github.com/vitalets/x-editable/issues/139 */
 .form-horizontal .editable
 { 

src/element/editable-element.js

@@ -16,6 +16,11 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         } else {
             this.init();
         }
+        
+        //check for transition support
+        if(this.options.highlight && !$.fn.editableutils.supportsTransitions()) {
+            this.options.highlight = false;
+        }
     };
 
     Editable.prototype = {
@@ -382,6 +387,21 @@ Makes editable any HTML element on the page. Applied as jQuery method.
                 }
             }
             
+            //highlight when saving
+            if(this.options.highlight) {
+                var $e = this.$element,
+                    $bgColor = $e.css('background-color');
+                    
+                $e.css('background-color', this.options.highlight);
+                setTimeout(function(){
+                    $e.css('background-color', $bgColor);
+                    $e.addClass('editable-bg-transition');
+                    setTimeout(function(){
+                       $e.removeClass('editable-bg-transition');  
+                    }, 1500);
+                }, 0);
+            }
+            
             //set new value
             this.setValue(params.newValue, false, params.response);
             
@@ -761,7 +781,16 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         });
         </script>
         **/         
-        selector: null        
+        selector: null,
+        /**
+        Color used to highlight element after update. Implemented via CSS3 transition, works in modern browsers.
+        
+        @property selector 
+        @type string|boolean
+        @since 1.4.5        
+        @default #FFFF80 
+        **/
+        highlight: '#FFFF80'        
     };
     
 }(window.jQuery));