yuidoc comments
This commit is contained in:
vitalets
@ -1,21 +1,12 @@
|
||||
/**
|
||||
* Editable-form plugin
|
||||
* Form with single input element, two buttons and automatic loader, shown on init/submit
|
||||
* Plugin applied to DIV tag and show form inside
|
||||
* Input must be one of following types:
|
||||
* - text
|
||||
* - textarea
|
||||
* - select
|
||||
* - date
|
||||
* - <your input here>
|
||||
*
|
||||
* EVENTS:
|
||||
* - render
|
||||
* - resize
|
||||
* - save
|
||||
*/
|
||||
(function ($) {
|
||||
Form with single input element, two buttons and two states: normal/loading.
|
||||
Applied as jQuery method to DIV tag (not to form tag!)
|
||||
Editableform is linked with one of input types, e.g. 'text' or 'select'.
|
||||
|
||||
@class editableform
|
||||
**/
|
||||
(function ($) {
|
||||
|
||||
var EditableForm = function (element, options) {
|
||||
this.options = $.extend({}, $.fn.editableform.defaults, options);
|
||||
this.$container = $(element); //div, containing form
|
||||
@ -42,6 +33,11 @@
|
||||
initTemplate: function() {
|
||||
this.$form = $($.fn.editableform.template);
|
||||
},
|
||||
/**
|
||||
Renders editableform
|
||||
|
||||
@method render
|
||||
**/
|
||||
render: function() {
|
||||
this.$loading = $(this.options.loading);
|
||||
this.$container.empty().append(this.$loading);
|
||||
@ -49,6 +45,11 @@
|
||||
|
||||
this.initTemplate();
|
||||
|
||||
/**
|
||||
Fired when rendering starts
|
||||
@event rendering
|
||||
@param {Object} event event object
|
||||
**/
|
||||
this.$container.triggerHandler('rendering');
|
||||
|
||||
//render input
|
||||
@ -72,6 +73,11 @@
|
||||
}, this));
|
||||
},
|
||||
cancel: function() {
|
||||
/**
|
||||
Fired when form was cancelled by user
|
||||
@event cancel
|
||||
@param {Object} event event object
|
||||
**/
|
||||
this.$container.triggerHandler('cancel');
|
||||
},
|
||||
showLoading: function() {
|
||||
@ -96,7 +102,12 @@
|
||||
showForm: function() {
|
||||
this.$loading.hide();
|
||||
this.$form.show();
|
||||
this.input.activate();
|
||||
this.input.activate();
|
||||
/**
|
||||
Fired when form is shown
|
||||
@event show
|
||||
@param {Object} event event object
|
||||
**/
|
||||
this.$container.triggerHandler('show');
|
||||
},
|
||||
|
||||
@ -145,6 +156,19 @@
|
||||
.done($.proxy(function(response) {
|
||||
this.error(false);
|
||||
this.value = newValue;
|
||||
/**
|
||||
Fired when form is submitted
|
||||
@event save
|
||||
@param {Object} event event object
|
||||
@param {Object} params additional params
|
||||
@param {mixed} params.newValue submitted value
|
||||
@param {Object} params.response ajax response
|
||||
|
||||
@example
|
||||
$('#form-div').on('save'), function(e, params){
|
||||
if(params.newValue === 'username') {...}
|
||||
});
|
||||
**/
|
||||
this.$container.triggerHandler('save', {newValue: newValue, response: response});
|
||||
}, this))
|
||||
.fail($.proxy(function(xhr) {
|
||||
@ -194,7 +218,22 @@
|
||||
}
|
||||
};
|
||||
|
||||
//jquery plugin definition
|
||||
/*
|
||||
Initialize editableform. Applied to jQuery object.
|
||||
|
||||
@method $().editableform(options)
|
||||
@params {Object} options
|
||||
@example
|
||||
var $form = $('<div>').editableform({
|
||||
type: 'text',
|
||||
name: 'username',
|
||||
url: 'post.php',
|
||||
value: 'vitaliy'
|
||||
});
|
||||
|
||||
//to display form you should call 'render' method
|
||||
$form.editableform('render');
|
||||
*/
|
||||
$.fn.editableform = function (option) {
|
||||
var args = arguments;
|
||||
return this.each(function () {
|
||||
@ -217,14 +256,86 @@
|
||||
//defaults
|
||||
$.fn.editableform.defaults = {
|
||||
/* see also defaults for input */
|
||||
|
||||
/**
|
||||
Type of input. Can be text|textarea|select|date
|
||||
|
||||
@property type
|
||||
@type String
|
||||
@default 'text'
|
||||
**/
|
||||
type: 'text',
|
||||
/**
|
||||
Url for submit
|
||||
|
||||
@property url
|
||||
@type String|Object|Array
|
||||
@default null
|
||||
**/
|
||||
url:null,
|
||||
/**
|
||||
Additional params for submit
|
||||
|
||||
@property params
|
||||
@type Object
|
||||
@default null
|
||||
**/
|
||||
params:null,
|
||||
/**
|
||||
Name of field. Will be submitted on server. Can be taken from id attribute.
|
||||
|
||||
@property name
|
||||
@type String
|
||||
@default null
|
||||
**/
|
||||
name: null,
|
||||
/**
|
||||
Primary key of editable object (e.g. record id in database). Use Object for composite keys.
|
||||
|
||||
@property pk
|
||||
@type String|Object|Function
|
||||
@default null
|
||||
**/
|
||||
pk: null,
|
||||
value: null, //initial value
|
||||
send: 'auto', //always|auto|never
|
||||
/**
|
||||
Initial value. If not defined - will be taken from element's content.
|
||||
For <i>select</i> type should be defined (as it is ID of shown text).
|
||||
|
||||
@property value
|
||||
@type String|Object
|
||||
@default null
|
||||
**/
|
||||
value: null,
|
||||
/**
|
||||
Strategy for sending data on server. Can be auto|always|never.
|
||||
When 'auto' data will be sent on server only if pk defined, otherwise new value will be stored in element.
|
||||
|
||||
@property send
|
||||
@type String
|
||||
@default 'auto'
|
||||
**/
|
||||
send: 'auto',
|
||||
/**
|
||||
Template for loading element
|
||||
|
||||
@property loading
|
||||
@type String
|
||||
@default <div class="editableform-loading"></div>
|
||||
**/
|
||||
loading: '<div class="editableform-loading"></div>',
|
||||
/**
|
||||
Function for client-side validation. If returns string - means validation not passed and string showed as error.
|
||||
|
||||
@property validate
|
||||
@type Function
|
||||
@default null
|
||||
@example
|
||||
validate: function(value) {
|
||||
if($.trim(value) == '') {
|
||||
return 'This field is required';
|
||||
}
|
||||
}
|
||||
**/
|
||||
validate: null
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user