diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 84c1f28..58d414d 100644 --- a/CHANGELOG.txt +++ b/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) diff --git a/src/editable-form/editable-form-utils.js b/src/editable-form/editable-form-utils.js index 304e050..21e7994 100644 --- a/src/editable-form/editable-form-utils.js +++ b/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; } }; diff --git a/src/element/editable-element.css b/src/element/editable-element.css index ddb92ae..4bb95b2 100644 --- a/src/element/editable-element.css +++ b/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 { diff --git a/src/element/editable-element.js b/src/element/editable-element.js index 8cb8bf0..29d29ca 100644 --- a/src/element/editable-element.js +++ b/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));