display option ready

This commit is contained in:
vitalets 2012-12-06 00:33:07 +04:00
parent 212d161f08
commit 8ed61d6b6b
14 changed files with 203 additions and 128 deletions

@ -3,10 +3,13 @@ X-editable changelog
Version 1.2.0 wip
----------------------------
----------------------------
[enh] 'checklist' submit value as array, not comma separated string (vitalets)
[enh] 'checklist' was refactored: options 'viewseparator', 'limit', 'limitText' are supressed by 'display' callback (vitalets)
[enh] new option: 'display' callback. Makes far more flexible rendering value into element's text. (vitalets)
[bug] fix typos (atrophic)
[enh] all callbacks scope changed to element (vitalets)
[enh] new option 'cancelnochange' to cancel or submit value when it was not changed in form (vitalets)
[enh] new option: 'cancelnochange' to cancel or submit value when it was not changed in form (vitalets)
[enh] composite pk can be defined as JSON in data-pk attribute (vitalets)
[enh #30] new option 'sourceCache' true|false to disable cache for select (vitalets)
[bug #34] inputclass span* broken with fluid bootstrap layout. Classes changed to 'input-*'. (vitalets)

@ -75,6 +75,7 @@ Applied as jQuery method.
},
initForm: function() {
this.formOptions.scope = this.$element[0]; //set scope of form callbacks to element
this.$form = $('<div>')
.editableform(this.formOptions)
.on({
@ -263,7 +264,7 @@ Applied as jQuery method.
closeOthers: function(element) {
$('.editable-open').each(function(i, el){
//do nothing with passed element
if(el === element) {
if(el === element || $(el).find(element).length) {
return;
}

@ -117,6 +117,13 @@
return k;
}
}
},
/**
method to escape html.
**/
escape: function(str) {
return $('<div>').text(str).html();
}
};
}(window.jQuery));

@ -168,8 +168,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
e.preventDefault();
var error,
newValue = this.input.input2value(), //get new value from input
newValueStr;
newValue = this.input.input2value(); //get new value from input
//validation
if (error = this.validate(newValue)) {
@ -178,19 +177,16 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
return;
}
//value as string
newValueStr = this.input.value2str(newValue);
//if value not changed --> cancel
/*jslint eqeq: true*/
if (this.options.cancelnochange && newValueStr == this.input.value2str(this.value)) {
if (this.options.cancelnochange && this.input.value2str(newValue) == this.input.value2str(this.value)) {
/*jslint eqeq: false*/
this.cancel();
return;
}
//sending data to server
$.when(this.save(newValueStr))
$.when(this.save(newValue))
.done($.proxy(function(response) {
//run success callback
var res = typeof this.options.success === 'function' ? this.options.success.call(this.options.scope, response, newValue) : null;
@ -238,13 +234,16 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
}, this));
},
save: function(value) {
save: function(newValue) {
//convert value for submitting to server
var submitValue = this.input.value2submit(newValue);
//try parse composite pk defined as json string in data-pk
this.options.pk = $.fn.editableutils.tryParseJson(this.options.pk, true);
var pk = (typeof this.options.pk === 'function') ? this.options.pk.call(this.options.scope) : this.options.pk,
send = !!(typeof this.options.url === 'function' || (this.options.url && ((this.options.send === 'always') || (this.options.send === 'auto' && pk)))),
params, ajaxOptions;
params;
if (send) { //send to server
this.showLoading();
@ -252,7 +251,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
//standard params
params = {
name: this.options.name || '',
value: value,
value: submitValue,
pk: pk
};
@ -267,15 +266,14 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
if(typeof this.options.url === 'function') { //user's function
return this.options.url.call(this.options.scope, params);
} else { //send ajax to server and return deferred object
ajaxOptions = $.extend({
} else {
//send ajax to server and return deferred object
return $.ajax($.extend({
url : this.options.url,
data : params,
type : 'post',
dataType: 'json'
}, this.options.ajaxOptions);
return $.ajax(ajaxOptions);
}, this.options.ajaxOptions));
}
}
},
@ -455,6 +453,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
@property ajaxOptions
@type object
@default null
@since 1.1.1
**/
ajaxOptions: null,
/**

@ -47,13 +47,20 @@ Makes editable any HTML element on the page. Applied as jQuery method.
this.value = this.input.html2value($.trim(this.$element.html()));
isValueByText = true;
} else {
/*
value can be string when received from 'data-value' attribute
for complext objects value can be set as json string in data-value attribute,
e.g. data-value="{city: 'Moscow', street: 'Lenina'}"
*/
this.options.value = $.fn.editableutils.tryParseJson(this.options.value, true);
if(typeof this.options.value === 'string') {
this.options.value = $.trim(this.options.value);
this.value = this.input.str2value(this.options.value);
} else {
this.value = this.options.value;
}
this.value = this.input.str2value(this.options.value);
}
//add 'editable' class
//add 'editable' class to every editable element
this.$element.addClass('editable');
//attach handler activating editable. In disabled mode it just prevent default action (useful for links)
@ -64,6 +71,13 @@ Makes editable any HTML element on the page. Applied as jQuery method.
//stop propagation not required anymore because in document click handler it checks event target
//e.stopPropagation();
//mark event with special flag: it will not be processed in document click handler
/*
if(e.type === 'click' && e.target !== e.currentTarget) {
$(e.target).data('editable-element', e.currentTarget);
}
*/
if(this.options.toggle === 'mouseenter') {
//for hover only show container
this.show();
@ -81,7 +95,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
//if value was generated by text or value is empty, no sense to run autotext
doAutotext = !isValueByText && this.value !== null && this.value !== undefined;
doAutotext &= (this.options.autotext === 'always') || (this.options.autotext === 'auto' && !this.$element.text().length);
$.when(doAutotext ? this.input.value2html(this.value, this.$element) : true).then($.proxy(function() {
$.when(doAutotext ? this.render() : true).then($.proxy(function() {
if(this.options.disabled) {
this.disable();
} else {
@ -104,6 +118,25 @@ Makes editable any HTML element on the page. Applied as jQuery method.
this.isInit = false;
}, this));
},
/*
Renders value into element's text.
Can call custom display method from options.
Can return deferred object.
@method render()
*/
render: function() {
//if it is input with source, we pass callback in third param to be called when source is loaded
if(this.input.options.hasOwnProperty('source')) {
return this.input.value2html(this.value, this.$element[0], this.options.display);
//if display method defined --> use it
} else if(typeof this.options.display === 'function') {
return this.options.display.call(this.$element[0], this.value);
//else use input's original value2html() method
} else {
return this.input.value2html(this.value, this.$element[0]);
}
},
/**
Enables editable
@ -222,8 +255,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
if(!this.container) {
var containerOptions = $.extend({}, this.options, {
value: this.value,
autohide: false, //element will take care to show/hide container. Otherwise hide() will be called twice
scope: this.$element[0] //set scope to element
autohide: false //element will take care to show/hide container. Otherwise hide() will be called twice
});
this.$element.editableContainer(containerOptions);
this.$element.on({
@ -326,7 +358,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
if(this.container) {
this.container.option('value', this.value);
}
$.when(this.input.value2html(this.value, this.$element))
$.when(this.render())
.then($.proxy(function() {
this.handleEmpty();
this.$element.triggerHandler('render', this);
@ -401,7 +433,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
this.each(function () {
var $this = $(this), data = $this.data(datakey);
if (data && data.value !== undefined && data.value !== null) {
result[data.options.name] = data.input.value2str(data.value);
result[data.options.name] = data.input.value2submit(data.value);
}
});
return result;
@ -544,7 +576,23 @@ Makes editable any HTML element on the page. Applied as jQuery method.
@type mixed
@default element's text
**/
value: null
value: null,
/**
Callback to perform custom displaying of value in element's text.
If not defined, default input's value2html() will be called.
Runs under element's scope.
Second parameter __sourceData__ is passed for inputs with source (select, checklist).
@property display
@type function
@default null
@since 1.2.0
@example
display: function(value, sourceData) {
$(this).html('<b>'+value+'</b>');
}
**/
display: null
};
}(window.jQuery));

@ -49,8 +49,7 @@ To create your own input you should inherit from this class.
@param {DOMElement} element
**/
value2html: function(value, element) {
var html = this.escape(value);
$(element).html(html);
$(element).text(value);
},
/**
@ -65,7 +64,7 @@ To create your own input you should inherit from this class.
},
/**
Converts value to string (for submitting to server)
Converts value to string (for comparering)
@method value2str(value)
@param {mixed} value
@ -86,6 +85,17 @@ To create your own input you should inherit from this class.
return str;
},
/**
Converts value for submitting to server
@method value2submit(value)
@param {mixed} value
@returns {mixed}
**/
value2submit: function(value) {
return value;
},
/**
Sets value of input.
@ -121,7 +131,7 @@ To create your own input you should inherit from this class.
@method clear()
**/
clear: function() {
clear: function() {
this.$input.val(null);
},

@ -49,10 +49,8 @@ $(function(){
},
value2str: function(value) {
return $.isArray(value) ? value.join($.trim(this.options.separator)) : '';
//it is also possible to sent as array
//return value;
},
return $.isArray(value) ? value.sort().join($.trim(this.options.separator)) : '';
},
//parse separated string
str2value: function(str) {
@ -95,19 +93,16 @@ $(function(){
//collect text of checked boxes
value2htmlFinal: function(value, element) {
var selected = [], item, i, html = '';
if($.isArray(value) && value.length <= this.options.limit) {
for(i=0; i<value.length; i++){
item = this.itemByVal(value[i]);
if(item) {
selected.push($('<div>').text(item.text).html());
}
}
html = selected.join(this.options.viewseparator);
} else {
html = this.options.limitText.replace('{checked}', $.isArray(value) ? value.length : 0).replace('{count}', this.sourceData.length);
var html = [],
checked = $.grep(this.sourceData, function(o){
return $.grep(value, function(v){return v == o.value;}).length;
});
if(checked.length) {
$.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
$(element).html(html.join('<br>'));
} else {
$(element).empty();
}
$(element).html(html);
},
activate: function() {
@ -138,39 +133,13 @@ $(function(){
inputclass: 'editable-checklist',
/**
Separator of values in string when sending to server
Separator of values when reading from 'data-value' string
@property separator
@type string
@default ', '
**/
separator: ',',
/**
Separator of text when display as element content.
@property viewseparator
@type string
@default '<br>'
**/
viewseparator: '<br>',
/**
Maximum number of items shown as element content.
If checked more items - <code>limitText</code> will be shown.
@property limit
@type integer
@default 4
**/
limit: 4,
/**
Text shown when count of checked items is greater than <code>limit</code> parameter.
You can use <code>{checked}</code> and <code>{count}</code> placeholders.
@property limitText
@type string
@default 'Selected {checked} of {count}'
**/
limitText: 'Selected {checked} of {count}'
separator: ','
});
$.fn.editabletypes.checklist = Checklist;

@ -79,7 +79,11 @@ $(function(){
str2value: function(str) {
return str ? this.dpg.parseDate(str, this.parsedFormat, this.options.datepicker.language) : null;
},
},
value2submit: function(value) {
return this.value2str(value);
},
value2input: function(value) {
this.$input.datepicker('update', value);

@ -97,7 +97,11 @@ $(function(){
} catch(e) {}
return d;
},
},
value2submit: function(value) {
return this.value2str(value);
},
value2input: function(value) {
this.$input.datepicker('setDate', value);

@ -34,10 +34,15 @@ List - abstract class for inputs that have source option loaded from js array or
return null; //can't set value by text
},
value2html: function (value, element) {
value2html: function (value, element, display) {
var deferred = $.Deferred();
this.onSourceReady(function () {
this.value2htmlFinal(value, element);
if(typeof display === 'function') {
//custom display method
display.call(element, value, this.sourceData);
} else {
this.value2htmlFinal(value, element);
}
deferred.resolve();
}, function () {
List.superclass.value2html(this.options.sourceError, element);

@ -4,21 +4,28 @@ $(function () {
setup: function(){
sfx = $('#qunit-fixture'),
fx = $('#async-fixture');
$.support.transition = false;
}
});
asyncTest("should load options, set correct value and save new value", function () {
var sep = '-',
var sep = '<br>',
newValue,
e = $('<a href="#" data-type="checklist" data-url="post.php"></a>').appendTo(fx).editable({
e = $('<a href="#" data-type="checklist" data-url="post-checklist.php"></a>').appendTo(fx).editable({
pk: 1,
source: groupsArr,
value: [2, 3],
viewseparator: sep
value: [2, 3]
});
equal(e.text(), groups[2]+sep+groups[3], 'autotext ok');
equal(e.html(), groups[2]+sep+groups[3], 'autotext ok');
$.mockjax({
url: 'post-checklist.php',
response: function(settings) {
ok($.isArray(settings.data.value), 'value submitted as array');
equal(settings.data.value.sort().join(''), [newValue, 3].join(''), 'submitted array correct');
}
});
e.click();
var p = tip(e);
@ -28,8 +35,8 @@ $(function () {
equal(p.find('input[type="checkbox"]:checked').eq(1).val(), 3, '2nd checked');
//set new value
p.find('input[type="checkbox"]:checked').eq(0).click();
p.find('input[type="checkbox"]').first().click();
p.find('input[type="checkbox"]:checked').eq(0).click(); //uncheck 2
p.find('input[type="checkbox"]').first().click(); //check first
newValue = p.find('input[type="checkbox"]').first().val();
//submit
@ -39,7 +46,7 @@ $(function () {
ok(!p.is(':visible'), 'popup closed');
equal(e.data('editable').value.join(''), [newValue, 3].join(''), 'new value ok')
equal(e.text(), groups[newValue]+sep+groups[3], 'new text ok');
equal(e.html(), groups[newValue]+'<br>'+groups[3], 'new text ok');
// open container again to see what checked
e.click()
@ -54,40 +61,5 @@ $(function () {
start();
}, timeout);
});
asyncTest("limit option", function () {
var e = $('<a href="#" data-type="checklist" data-value="2,3" data-url="post.php"></a>').appendTo(fx).editable({
pk: 1,
source: groupsArr,
limit: 1,
limitText: '{checked} of {count}'
});
equal(e.text(), '2 of '+groupsArr.length, 'autotext ok');
e.click();
var p = tip(e);
equal(p.find('input[type="checkbox"]:checked').length, 2, 'checked count ok');
equal(p.find('input[type="checkbox"]:checked').eq(0).val(), 2, '1st checked');
equal(p.find('input[type="checkbox"]:checked').eq(1).val(), 3, '2nd checked');
//set new value
p.find('input[type="checkbox"]').first().click();
newValue = p.find('input[type="checkbox"]').first().val();
//submit
p.find('form').submit();
setTimeout(function() {
ok(!p.is(':visible'), 'popup closed');
equal(e.text(), '3 of '+groupsArr.length, 'autotext ok');
e.remove();
start();
}, timeout);
});
});

@ -523,6 +523,34 @@ $(function () {
e.remove();
start();
}, timeout);
});
});
asyncTest("'display' callback", function () {
var e = $('<a href="#" data-type="select" data-value="2" data-url="post.php"></a>').appendTo(fx).editable({
pk: 1,
source: groups,
display: function(value, sourceData) {
var els = $.grep(sourceData, function(o) {return o.value == value;});
$(this).text('qq' + els[0].text);
}
}),
selected = 3;
equal(e.text(), 'qq'+groups[2], 'autotext display ok');
e.click();
var p = tip(e);
p.find('select').val(selected);
p.find('form').submit();
setTimeout(function() {
ok(!p.is(':visible'), 'popover closed');
equal(e.data('editable').value, selected, 'new value saved')
equal(e.text(), 'qq'+groups[selected], 'text shown correctly')
e.remove();
start();
}, timeout);
});
});

@ -454,6 +454,31 @@ $(function () {
delete $.fn.editable.defaults.name;
var e = $('<a href="#" id="cde">abc</a>').appendTo('#qunit-fixture').editable();
equal(e.data('editable').options.name, 'cde', 'name is taken from id');
});
});
asyncTest("'display' callback", function () {
var newText = 'cd<e>;"',
e = $('<a href="#" data-pk="1" data-url="post.php" data-name="text1">abc</a>').appendTo(fx).editable({
display: function(value) {
ok(this === e[0], 'scope is ok');
$(this).text('qq'+value);
}
});
e.click()
var p = tip(e);
ok(p.find('input[type=text]').length, 'input exists')
p.find('input').val(newText);
p.find('form').submit();
setTimeout(function() {
ok(!p.is(':visible'), 'popover was removed');
equal(e.text(), 'qq'+newText, 'custom display ok');
e.remove();
start();
}, timeout);
});
});

@ -34,8 +34,8 @@ $(function () {
var e = $('<a href="#" data-pk="1" data-url="post.php">'+v1+'</a>').appendTo(fx).editable({
type: 'textarea',
send: 'ifpk',
success: function(data) {
return false;
success: function(response, newvalue) {
equal(newvalue, v2, 'value in success ok');
}
});