diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index d854def..d7a9d3b 100644
--- a/CHANGELOG.txt
+++ b/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)
diff --git a/src/element/editable-element.js b/src/element/editable-element.js
index 5b37a47..b440f1a 100644
--- a/src/element/editable-element.js
+++ b/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()) === '') {
- this.$element.addClass(emptyClass).text(this.options.emptytext);
- } else {
- this.$element.removeClass(emptyClass);
+ if (this.isEmpty) {
+ this.$element.text(this.options.emptytext);
+ if(this.options.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));
diff --git a/test/unit/common.js b/test/unit/common.js
index 8a2f42e..ada59fe 100644
--- a/test/unit/common.js
+++ b/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 = $(' ').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));
\ No newline at end of file
diff --git a/test/unit/text.js b/test/unit/text.js
index 69e9254..80b17b2 100644
--- a/test/unit/text.js
+++ b/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 = $(' ').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 = $(' ').appendTo('#qunit-fixture').editable();