tracer/x-editable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

option emptyclass

Browse Source
This commit is contained in:
vitalets 2013-01-16 23:32:57 +04:00
parent 0a8561cabd
commit 18267a8d07
4 changed files with 78 additions and 30 deletions

1
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)

49
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));

45
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));

13
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();