yuidoc comments
This commit is contained in:
vitalets
@@ -1,26 +1,15 @@
|
||||
/**
|
||||
* Editable Container
|
||||
* Container can be popover, inline form or whatever
|
||||
* Container must provide following:
|
||||
* 1. methods:
|
||||
* show(),
|
||||
* hide(),
|
||||
* tip() - returns jquery object of container element
|
||||
* option()
|
||||
*
|
||||
* 2. events:
|
||||
* - save
|
||||
* - cancel
|
||||
*
|
||||
* 3. settings: trigger, value, placement
|
||||
*/
|
||||
Container for editableform. It can be popup (bootstrap-popover, jqueryui-tooltip, poshytip..) or inline.
|
||||
Applied as jQuery method to any element. Element is used only for positioning!
|
||||
|
||||
@class editableContainer
|
||||
**/
|
||||
(function ($) {
|
||||
|
||||
//Constructor
|
||||
|
||||
var EditableContainer = function (element, options) {
|
||||
this.init(element, options);
|
||||
};
|
||||
|
||||
|
||||
//methods
|
||||
EditableContainer.prototype = {
|
||||
containerName: null, //tbd in child class
|
||||
@@ -28,18 +17,19 @@
|
||||
init: function(element, options) {
|
||||
this.$element = $(element);
|
||||
this.options = $.extend({}, $.fn.editableContainer.defaults, $.fn.editableform.utils.getConfigData(this.$element), options);
|
||||
this.options.trigger = 'manual';
|
||||
this.initContainer();
|
||||
|
||||
|
||||
//bind 'destroyed' listener to destroy container when element is removed from dom
|
||||
this.$element.on('destroyed', $.proxy(function(){
|
||||
this.destroy();
|
||||
}, this));
|
||||
},
|
||||
|
||||
|
||||
initContainer: function(){
|
||||
this.call(this.options);
|
||||
this.call(this.options);
|
||||
},
|
||||
|
||||
|
||||
initForm: function() {
|
||||
this.$form = $('<div>')
|
||||
.editableform(this.options)
|
||||
@@ -52,92 +42,152 @@
|
||||
return this.$form;
|
||||
},
|
||||
|
||||
/**
|
||||
Returns jquery object of container
|
||||
@method tip()
|
||||
**/
|
||||
tip: function() {
|
||||
return this.container().$tip;
|
||||
return this.container().$tip;
|
||||
},
|
||||
|
||||
//return instance of container
|
||||
|
||||
container: function() {
|
||||
return this.$element.data(this.containerName);
|
||||
return this.$element.data(this.containerName);
|
||||
},
|
||||
|
||||
//call container's method
|
||||
|
||||
call: function() {
|
||||
this.$element[this.containerName].apply(this.$element, arguments);
|
||||
this.$element[this.containerName].apply(this.$element, arguments);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
Shows container with form
|
||||
@method show()
|
||||
**/
|
||||
show: function () {
|
||||
this.call('show');
|
||||
this.tip().addClass('editable-container');
|
||||
|
||||
|
||||
this.initForm();
|
||||
this.tip().find(this.innerCss).empty().append(this.$form);
|
||||
this.$form.editableform('render');
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
this.call('hide');
|
||||
},
|
||||
|
||||
setPosition: function() {
|
||||
//tbd in child class
|
||||
},
|
||||
|
||||
cancel: function() {
|
||||
if(this.options.autohide) {
|
||||
this.hide();
|
||||
}
|
||||
this.$element.triggerHandler('cancel');
|
||||
},
|
||||
|
||||
save: function(e, params) {
|
||||
if(this.options.autohide) {
|
||||
this.hide();
|
||||
}
|
||||
this.$element.triggerHandler('save', params);
|
||||
},
|
||||
|
||||
option: function(key, value) {
|
||||
this.options[key] = value;
|
||||
this.call('option', key, value);
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
this.call('destroy');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
Hides container with form
|
||||
@method hide()
|
||||
**/
|
||||
hide: function() {
|
||||
this.call('hide');
|
||||
},
|
||||
|
||||
/**
|
||||
Updates the position of container when content changed.
|
||||
@method setPosition()
|
||||
**/
|
||||
setPosition: function() {
|
||||
//tbd in child class
|
||||
},
|
||||
|
||||
cancel: function() {
|
||||
if(this.options.autohide) {
|
||||
this.hide();
|
||||
}
|
||||
/**
|
||||
Fired when form was cancelled by user
|
||||
|
||||
@event cancel
|
||||
@param {Object} event event object
|
||||
**/
|
||||
this.$element.triggerHandler('cancel');
|
||||
},
|
||||
|
||||
save: function(e, params) {
|
||||
if(this.options.autohide) {
|
||||
this.hide();
|
||||
}
|
||||
/**
|
||||
Fired when new value was 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
|
||||
**/
|
||||
this.$element.triggerHandler('save', params);
|
||||
},
|
||||
|
||||
/**
|
||||
Sets new option
|
||||
|
||||
@method option(key, value)
|
||||
@param {string} key
|
||||
@param {mixed} value
|
||||
**/
|
||||
option: function(key, value) {
|
||||
this.options[key] = value;
|
||||
this.call('option', key, value);
|
||||
},
|
||||
|
||||
/**
|
||||
Destroys the container instance
|
||||
@method destroy()
|
||||
**/
|
||||
destroy: function() {
|
||||
this.call('destroy');
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
//jQuery plugin definition
|
||||
$.fn.editableContainer = function (option) {
|
||||
var args = arguments;
|
||||
return this.each(function () {
|
||||
var $this = $(this),
|
||||
dataKey = 'editableContainer',
|
||||
data = $this.data(dataKey),
|
||||
options = typeof option === 'object' && option;
|
||||
dataKey = 'editableContainer',
|
||||
data = $this.data(dataKey),
|
||||
options = typeof option === 'object' && option;
|
||||
|
||||
if (!data) {
|
||||
$this.data(dataKey, (data = new EditableContainer(this, options)));
|
||||
}
|
||||
|
||||
|
||||
if (typeof option === 'string') { //call method
|
||||
data[option].apply(data, Array.prototype.slice.call(args, 1));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
//store constructor
|
||||
$.fn.editableContainer.Constructor = EditableContainer;
|
||||
|
||||
|
||||
//defaults - must be redefined!
|
||||
$.fn.editableContainer.defaults = {
|
||||
trigger: 'manual',
|
||||
value: null,
|
||||
placement: 'top',
|
||||
autohide: true
|
||||
/**
|
||||
Initial value of form input
|
||||
|
||||
@property value
|
||||
@type mixed
|
||||
@default null
|
||||
**/
|
||||
value: null,
|
||||
/**
|
||||
Placement of container relative to element. Can be top|right|bottom|left. Not used for inline container.
|
||||
|
||||
@property placement
|
||||
@type string
|
||||
@default 'top'
|
||||
**/
|
||||
placement: 'top',
|
||||
/**
|
||||
Wether to hide container on save/cancel.
|
||||
|
||||
@property autohide
|
||||
@type boolean
|
||||
@default true
|
||||
**/
|
||||
autohide: true
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* workaround to have 'destroyed' event to destroy popover when element is destroyed
|
||||
* see http://stackoverflow.com/questions/2200494/jquery-trigger-event-when-an-element-is-removed-from-the-dom
|
||||
@@ -149,5 +199,5 @@
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
}(window.jQuery));
|
||||
Reference in New Issue
Block a user