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

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