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

display option ready

Browse Source
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
src/containers/editable-container.js

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

9
src/editable-form/editable-form-utils.js

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

29
src/editable-form/editable-form.js

@ -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,
/**

66
src/element/editable-element.js

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

18
src/inputs/abstract.js

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

57
src/inputs/checklist.js

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

6
src/inputs/date/date.js

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

6
src/inputs/dateui/dateui.js

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

9
src/inputs/list.js

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