');\n }\n $group.addClass($.fn.editableform.errorGroupClass);\n $block.addClass($.fn.editableform.errorBlockClass).html(msg).show();\n }\n },\n\n submit: function(e) {\n e.stopPropagation();\n e.preventDefault();\n \n //get new value from input\n var newValue = this.input.input2value(); \n\n //validation: if validate returns string or truthy value - means error\n //if returns object like {newValue: '...'} => submitted value is reassigned to it\n var error = this.validate(newValue);\n if ($.type(error) === 'object' && error.newValue !== undefined) {\n newValue = error.newValue;\n this.input.value2input(newValue);\n if(typeof error.msg === 'string') {\n this.error(error.msg);\n this.showForm();\n return;\n }\n } else if (error) {\n this.error(error);\n this.showForm();\n return;\n } \n \n //if value not changed --> trigger 'nochange' event and return\n /*jslint eqeq: true*/\n if (!this.options.savenochange && this.input.value2str(newValue) === this.input.value2str(this.value)) {\n /*jslint eqeq: false*/ \n /** \n Fired when value not changed but form is submitted. Requires savenochange = false.\n @event nochange \n @param {Object} event event object\n **/ \n this.$div.triggerHandler('nochange'); \n return;\n } \n\n //convert value for submitting to server\n var submitValue = this.input.value2submit(newValue);\n \n this.isSaving = true;\n \n //sending data to server\n $.when(this.save(submitValue))\n .done($.proxy(function(response) {\n this.isSaving = false;\n\n //run success callback\n var res = typeof this.options.success === 'function' ? this.options.success.call(this.options.scope, response, newValue) : null;\n\n //if success callback returns false --> keep form open and do not activate input\n if(res === false) {\n this.error(false);\n this.showForm(false);\n return;\n }\n\n //if success callback returns string --> keep form open, show error and activate input \n if(typeof res === 'string') {\n this.error(res);\n this.showForm();\n return;\n }\n\n //if success callback returns object like {newValue:
text|textarea|select|date|checklist\n\n @property type \n @type string\n @default 'text'\n **/\n type: 'text',\n /**\n Url for submit, e.g. '/post' \n If function - it will be called instead of ajax. Function should return deferred object to run fail/done callbacks.\n\n @property url \n @type string|function\n @default null\n @example\n url: function(params) {\n var d = new $.Deferred;\n if(params.value === 'abc') {\n return d.reject('error message'); //returning error via deferred object\n } else {\n //async saving data in js model\n someModel.asyncSaveMethod({\n ..., \n success: function(){\n d.resolve();\n }\n }); \n return d.promise();\n }\n } \n **/ \n url:null,\n /**\n Additional params for submit. If defined as object - it is **appended** to original ajax data (pk, name and value). \n If defined as function - returned object **overwrites** original ajax data.\n @example\n params: function(params) {\n //originally params contain pk, name and value\n params.a = 1;\n return params;\n }\n\n @property params \n @type object|function\n @default null\n **/ \n params:null,\n /**\n Name of field. Will be submitted on server. Can be taken from id attribute\n\n @property name \n @type string\n @default null\n **/ \n name: null,\n /**\n Primary key of editable object (e.g. record id in database). For composite keys use object, e.g. {id: 1, lang: 'en'}.\n Can be calculated dynamically via function.\n\n @property pk \n @type string|object|function\n @default null\n **/ \n pk: null,\n /**\n Initial value. If not defined - will be taken from element's content.\n For __select__ type should be defined (as it is ID of shown text).\n\n @property value \n @type string|object\n @default null\n **/ \n value: null,\n /**\n Value that will be displayed in input if original field value is empty (`null|undefined|''`).\n\n @property defaultValue \n @type string|object\n @default null\n @since 1.4.6\n **/ \n defaultValue: null,\n /**\n Strategy for sending data on server. Can be `auto|always|never`.\n When 'auto' data will be sent on server **only if pk and url defined**, otherwise new value will be stored locally.\n\n @property send \n @type string\n @default 'auto'\n **/ \n send: 'auto', \n /**\n Function for client-side validation. If returns string - means validation not passed and string showed as error.\n Since 1.5.1 you can modify submitted value by returning object from `validate`: \n `{newValue: '...'}` or `{newValue: '...', msg: '...'}`\n\n @property validate \n @type function\n @default null\n @example\n validate: function(value) {\n if($.trim(value) == '') {\n return 'This field is required';\n }\n }\n **/ \n validate: null,\n /**\n Success callback. Called when value successfully sent on server and **response status = 200**. \n Usefull to work with json response. For example, if your backend response can be {success: true}\n or `{success: false, msg: \"server error\"}` you can check it inside this callback. \n If it returns **string** - means error occured and string is shown as error message. \n If it returns **object like** `{newValue: <something>}` - it overwrites value, submitted by user\n (useful when server changes value). \n Otherwise newValue simply rendered into element.\n \n @property success \n @type function\n @default null\n @example\n success: function(response, newValue) {\n if(!response.success) return response.msg;\n }\n **/ \n success: null,\n /**\n Error callback. Called when request failed (response status != 200). \n Usefull when you want to parse error response and display a custom message.\n Must return **string** - the message to be displayed in the error block.\n \n @property error \n @type function\n @default null\n @since 1.4.4\n @example\n error: function(response, newValue) {\n if(response.status === 500) {\n return 'Service unavailable. Please try later.';\n } else {\n return response.responseText;\n }\n }\n **/ \n error: null,\n /**\n Additional options for submit ajax request.\n List of values: http://api.jquery.com/jQuery.ajax\n \n @property ajaxOptions \n @type object\n @default null\n @since 1.1.1 \n @example \n ajaxOptions: {\n type: 'put',\n dataType: 'json'\n } \n **/ \n ajaxOptions: null,\n /**\n Where to show buttons: left(true)|bottom|false \n Form without buttons is auto-submitted.\n\n @property showbuttons \n @type boolean|string\n @default true\n @since 1.1.1\n **/ \n showbuttons: true,\n /**\n Scope for callback methods (success, validate). \n If null means editableform instance itself. \n\n @property scope \n @type DOMElement|object\n @default null\n @since 1.2.0\n @private\n **/ \n scope: null,\n /**\n Whether to save or cancel value when it was not changed but form was submitted\n\n @property savenochange \n @type boolean\n @default false\n @since 1.2.0\n **/\n savenochange: false\n }; \n\n /*\n Note: following params could redefined in engine: bootstrap or jqueryui:\n Classes 'control-group' and 'editable-error-block' must always present!\n */ \n $.fn.editableform.template = '';\n\n //loading div\n $.fn.editableform.loading = '';\n\n //buttons\n $.fn.editableform.buttons = ''+\n ''; \n\n //error class attached to control-group\n $.fn.editableform.errorGroupClass = null; \n\n //error class attached to editable-error-block\n $.fn.editableform.errorBlockClass = 'editable-error';\n \n //engine\n $.fn.editableform.engine = 'jquery';\n}(window.jQuery));\n\n/**\n* EditableForm utilites\n*/\n(function ($) {\n \"use strict\";\n \n //utils\n $.fn.editableutils = {\n /**\n * classic JS inheritance function\n */ \n inherit: function (Child, Parent) {\n var F = function() { };\n F.prototype = Parent.prototype;\n Child.prototype = new F();\n Child.prototype.constructor = Child;\n Child.superclass = Parent.prototype;\n },\n\n /**\n * set caret position in input\n * see http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area\n */ \n setCursorPosition: function(elem, pos) {\n if (elem.setSelectionRange) {\n try { elem.setSelectionRange(pos, pos); } catch (e) {}\n } else if (elem.createTextRange) {\n var range = elem.createTextRange();\n range.collapse(true);\n range.moveEnd('character', pos);\n range.moveStart('character', pos);\n range.select();\n }\n },\n\n /**\n * function to parse JSON in *single* quotes. (jquery automatically parse only double quotes)\n * That allows such code as: \n * safe = true --> means no exception will be thrown\n * for details see http://stackoverflow.com/questions/7410348/how-to-set-json-format-to-html5-data-attributes-in-the-jquery\n */\n tryParseJson: function(s, safe) {\n if (typeof s === 'string' && s.length && s.match(/^[\\{\\[].*[\\}\\]]$/)) {\n if (safe) {\n try {\n /*jslint evil: true*/\n s = (new Function('return ' + s))();\n /*jslint evil: false*/\n } catch (e) {} finally {\n return s;\n }\n } else {\n /*jslint evil: true*/\n s = (new Function('return ' + s))();\n /*jslint evil: false*/\n }\n }\n return s;\n },\n\n /**\n * slice object by specified keys\n */\n sliceObj: function(obj, keys, caseSensitive /* default: false */) {\n var key, keyLower, newObj = {};\n\n if (!$.isArray(keys) || !keys.length) {\n return newObj;\n }\n\n for (var i = 0; i < keys.length; i++) {\n key = keys[i];\n if (obj.hasOwnProperty(key)) {\n newObj[key] = obj[key];\n }\n\n if(caseSensitive === true) {\n continue;\n }\n\n //when getting data-* attributes via $.data() it's converted to lowercase.\n //details: http://stackoverflow.com/questions/7602565/using-data-attributes-with-jquery\n //workaround is code below.\n keyLower = key.toLowerCase();\n if (obj.hasOwnProperty(keyLower)) {\n newObj[key] = obj[keyLower];\n }\n }\n\n return newObj;\n },\n\n /*\n exclude complex objects from $.data() before pass to config\n */\n getConfigData: function($element) {\n var data = {};\n $.each($element[0].dataset, function(k, v) {\n if(typeof v !== 'object' || (v && typeof v === 'object' && (v.constructor === Object || v.constructor === Array))) {\n data[k] = v;\n }\n });\n return data;\n },\n\n /*\n returns keys of object\n */\n objectKeys: function(o) {\n if (Object.keys) {\n return Object.keys(o); \n } else {\n if (o !== Object(o)) {\n throw new TypeError('Object.keys called on a non-object');\n }\n var k=[], p;\n for (p in o) {\n if (Object.prototype.hasOwnProperty.call(o,p)) {\n k.push(p);\n }\n }\n return k;\n }\n\n },\n \n /**\n method to escape html.\n **/\n escape: function(str) {\n return $('').text(str).html();\n },\n \n /*\n returns array items from sourceData having value property equal or inArray of 'value'\n */\n itemsByValue: function(value, sourceData, valueProp) {\n if(!sourceData || value === null) {\n return [];\n }\n \n if (typeof(valueProp) !== \"function\") {\n var idKey = valueProp || 'value';\n valueProp = function (e) { return e[idKey]; };\n }\n \n var isValArray = $.isArray(value),\n result = [], \n that = this;\n\n $.each(sourceData, function(i, o) {\n if(o.children) {\n result = result.concat(that.itemsByValue(value, o.children, valueProp));\n } else {\n /*jslint eqeq: true*/\n if(isValArray) {\n if($.grep(value, function(v){ return v == (o && typeof o === 'object' ? valueProp(o) : o); }).length) {\n result.push(o); \n }\n } else {\n var itemValue = (o && (typeof o === 'object')) ? valueProp(o) : o;\n if(value == itemValue) {\n result.push(o); \n }\n }\n /*jslint eqeq: false*/\n }\n });\n \n return result;\n },\n \n /*\n Returns input by options: type, mode. \n */\n createInput: function(options) {\n var TypeConstructor, typeOptions, input,\n type = options.type;\n\n //`date` is some kind of virtual type that is transformed to one of exact types\n //depending on mode and core lib\n if(type === 'date') {\n //inline\n if(options.mode === 'inline') {\n if($.fn.editabletypes.datefield) {\n type = 'datefield';\n } else if($.fn.editabletypes.dateuifield) {\n type = 'dateuifield';\n }\n //popup\n } else {\n if($.fn.editabletypes.date) {\n type = 'date';\n } else if($.fn.editabletypes.dateui) {\n type = 'dateui';\n }\n }\n \n //if type still `date` and not exist in types, replace with `combodate` that is base input\n if(type === 'date' && !$.fn.editabletypes.date) {\n type = 'combodate';\n } \n }\n \n //`datetime` should be datetimefield in 'inline' mode\n if(type === 'datetime' && options.mode === 'inline') {\n type = 'datetimefield'; \n } \n\n //change wysihtml5 to textarea for jquery UI and plain versions\n if(type === 'wysihtml5' && !$.fn.editabletypes[type]) {\n type = 'textarea';\n }\n\n //create input of specified type. Input will be used for converting value, not in form\n if(typeof $.fn.editabletypes[type] === 'function') {\n TypeConstructor = $.fn.editabletypes[type];\n typeOptions = this.sliceObj(options, this.objectKeys(TypeConstructor.defaults));\n input = new TypeConstructor(typeOptions);\n return input;\n } else {\n $.error('Unknown type: '+ type);\n return false; \n } \n },\n \n //see http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr\n supportsTransitions: function () {\n var b = document.body || document.documentElement,\n s = b.style,\n p = 'transition',\n v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'];\n \n if(typeof s[p] === 'string') {\n return true; \n }\n\n // Tests for vendor specific prop\n p = p.charAt(0).toUpperCase() + p.substr(1);\n for(var i=0; i\nThis method applied internally in
\nFinal realization can be different: bootstrap-popover, jqueryui-tooltip, poshytip, inline-div. It depends on which js file you include.
\nApplied as jQuery method.\n\n@class editableContainer\n@uses editableform\n**/\n(function ($) {\n \"use strict\";\n\n var Popup = function (element, options) {\n this.init(element, options);\n };\n \n var Inline = function (element, options) {\n this.init(element, options);\n }; \n\n //methods\n Popup.prototype = {\n containerName: null, //method to call container on element\n containerDataName: null, //object name in element's .data()\n innerCss: null, //tbd in child class\n containerClass: 'editable-container editable-popup', //css class applied to container element\n defaults: {}, //container itself defaults\n \n init: function(element, options) {\n this.$element = $(element);\n //since 1.4.1 container do not use data-* directly as they already merged into options.\n this.options = $.extend({}, $.fn.editableContainer.defaults, options); \n this.splitOptions();\n \n //set scope of form callbacks to element\n this.formOptions.scope = this.$element[0]; \n \n this.initContainer();\n \n //flag to hide container, when saving value will finish\n this.delayedHide = false;\n\n //bind 'destroyed' listener to destroy container when element is removed from dom\n this.$element.on('destroyed', $.proxy(function(){\n this.destroy();\n }, this)); \n \n //attach document handler to close containers on click / escape\n if(!$(document).data('editable-handlers-attached')) {\n //close all on escape\n $(document).on('keyup.editable', function (e) {\n if (e.which === 27) {\n $('.editable-open').editableContainer('hide', 'cancel');\n //todo: return focus on element \n }\n });\n\n //close containers when click outside \n //(mousedown could be better than click, it closes everything also on drag drop)\n $(document).on('click.editable', function(e) {\n var $target = $(e.target), i,\n exclude_classes = ['.editable-container', \n '.ui-datepicker-header', \n '.datepicker', //in inline mode datepicker is rendered into body\n '.modal-backdrop', \n '.bootstrap-wysihtml5-insert-image-modal', \n '.bootstrap-wysihtml5-insert-link-modal'\n ];\n\n // select2 has extra body click in IE\n // see: https://github.com/ivaynberg/select2/issues/1058 \n if ($('.select2-drop-mask').is(':visible')) {\n return;\n }\n\n //check if element is detached. It occurs when clicking in bootstrap datepicker\n if (!$.contains(document.documentElement, e.target)) {\n return;\n }\n\n //for some reason FF 20 generates extra event (click) in select2 widget with e.target = document\n //we need to filter it via construction below. See https://github.com/vitalets/x-editable/issues/199\n //Possibly related to http://stackoverflow.com/questions/10119793/why-does-firefox-react-differently-from-webkit-and-ie-to-click-event-on-selec\n if($target.is(document)) {\n return;\n }\n \n //if click inside one of exclude classes --> no nothing\n for(i=0; i container changes size before hide. \n */ \n \n //if form already exist - delete previous data \n if(this.$form) {\n //todo: destroy prev data!\n //this.$form.destroy();\n }\n\n this.$form = $('
$().editable(). You should subscribe on it's events (save / cancel) to get profit of it.\nFinal realization can be different: bootstrap-popover, jqueryui-tooltip, poshytip, inline-div. It depends on which js file you include.
\nApplied as jQuery method.\n\n@class editableContainer\n@uses editableform\n**/\n(function ($) {\n \"use strict\";\n\n var Popup = function (element, options) {\n this.init(element, options);\n };\n \n var Inline = function (element, options) {\n this.init(element, options);\n }; \n\n //methods\n Popup.prototype = {\n containerName: null, //method to call container on element\n containerDataName: null, //object name in element's .data()\n innerCss: null, //tbd in child class\n containerClass: 'editable-container editable-popup', //css class applied to container element\n defaults: {}, //container itself defaults\n \n init: function(element, options) {\n this.$element = $(element);\n //since 1.4.1 container do not use data-* directly as they already merged into options.\n this.options = $.extend({}, $.fn.editableContainer.defaults, options); \n this.splitOptions();\n \n //set scope of form callbacks to element\n this.formOptions.scope = this.$element[0]; \n \n this.initContainer();\n \n //flag to hide container, when saving value will finish\n this.delayedHide = false;\n\n //bind 'destroyed' listener to destroy container when element is removed from dom\n this.$element.on('destroyed', $.proxy(function(){\n this.destroy();\n }, this)); \n \n //attach document handler to close containers on click / escape\n if(!$(document).data('editable-handlers-attached')) {\n //close all on escape\n $(document).on('keyup.editable', function (e) {\n if (e.which === 27) {\n $('.editable-open').editableContainer('hide', 'cancel');\n //todo: return focus on element \n }\n });\n\n //close containers when click outside \n //(mousedown could be better than click, it closes everything also on drag drop)\n $(document).on('click.editable', function(e) {\n var $target = $(e.target), i,\n exclude_classes = ['.editable-container', \n '.ui-datepicker-header', \n '.datepicker', //in inline mode datepicker is rendered into body\n '.modal-backdrop', \n '.bootstrap-wysihtml5-insert-image-modal', \n '.bootstrap-wysihtml5-insert-link-modal'\n ];\n\n // select2 has extra body click in IE\n // see: https://github.com/ivaynberg/select2/issues/1058 \n if ($('.select2-drop-mask').is(':visible')) {\n return;\n }\n\n //check if element is detached. It occurs when clicking in bootstrap datepicker\n if (!$.contains(document.documentElement, e.target)) {\n return;\n }\n\n //for some reason FF 20 generates extra event (click) in select2 widget with e.target = document\n //we need to filter it via construction below. See https://github.com/vitalets/x-editable/issues/199\n //Possibly related to http://stackoverflow.com/questions/10119793/why-does-firefox-react-differently-from-webkit-and-ie-to-click-event-on-selec\n if($target.is(document)) {\n return;\n }\n \n //if click inside one of exclude classes --> no nothing\n for(i=0; i
');\n \n //insert form into container body\n if(this.tip().is(this.innerCss)) {\n //for inline container\n this.tip().append(this.$form); \n } else {\n this.tip().find(this.innerCss).append(this.$form);\n } \n \n //render form\n this.renderForm();\n },\n\n /**\n Hides container with form\n @method hide()\n @param {string} reason Reason caused hiding. Can be
, ,![]()
\n if(typeof(this.input.isEmpty) === 'function') {\n this.isEmpty = this.input.isEmpty(this.$element); \n } else {\n this.isEmpty = $.trim(this.$element.html()) === '';\n }\n } \n \n //emptytext shown only for enabled\n if(!this.options.disabled) {\n if (this.isEmpty) {\n this.$element.html(this.options.emptytext);\n if(this.options.emptyclass) {\n this.$element.addClass(this.options.emptyclass);\n }\n } else if(this.options.emptyclass) {\n this.$element.removeClass(this.options.emptyclass);\n }\n } else {\n //below required if element disable property was changed\n if(this.isEmpty) {\n this.$element.empty();\n if(this.options.emptyclass) {\n this.$element.removeClass(this.options.emptyclass);\n }\n }\n }\n }, \n \n /**\n Shows container with form\n @method show()\n @param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true.\n **/ \n show: function (closeAll) {\n if(this.options.disabled) {\n return;\n }\n \n //init editableContainer: popover, tooltip, inline, etc..\n if(!this.container) {\n var containerOptions = $.extend({}, this.options, {\n value: this.value,\n input: this.input //pass input to form (as it is already created)\n });\n this.$element.editableContainer(containerOptions);\n //listen `save` event \n this.$element.on(\"save.internal\", $.proxy(this.save, this));\n this.container = this.$element.data('editableContainer'); \n } else if(this.container.tip().is(':visible')) {\n return;\n } \n \n //show container\n this.container.show(closeAll);\n },\n \n /**\n Hides container with form\n @method hide()\n **/ \n hide: function () { \n if(this.container) { \n this.container.hide();\n }\n },\n \n /**\n Toggles container visibility (show / hide)\n @method toggle()\n @param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true.\n **/ \n toggle: function(closeAll) {\n if(this.container && this.container.tip().is(':visible')) {\n this.hide();\n } else {\n this.show(closeAll);\n }\n },\n \n /*\n * called when form was submitted\n */ \n save: function(e, params) {\n //mark element with unsaved class if needed\n if(this.options.unsavedclass) {\n /*\n Add unsaved css to element if:\n - url is not user's function \n - value was not sent to server\n - params.response === undefined, that means data was not sent\n - value changed \n */\n var sent = false;\n sent = sent || typeof this.options.url === 'function';\n sent = sent || this.options.display === false; \n sent = sent || params.response !== undefined; \n sent = sent || (this.options.savenochange && this.input.value2str(this.value) !== this.input.value2str(params.newValue)); \n \n if(sent) {\n this.$element.removeClass(this.options.unsavedclass); \n } else {\n this.$element.addClass(this.options.unsavedclass); \n }\n }\n \n //highlight when saving\n if(this.options.highlight) {\n var $e = this.$element,\n bgColor = $e.css('background-color');\n \n $e.css('background-color', this.options.highlight);\n setTimeout(function(){\n if(bgColor === 'transparent') {\n bgColor = ''; \n }\n $e.css('background-color', bgColor);\n $e.addClass('editable-bg-transition');\n setTimeout(function(){\n $e.removeClass('editable-bg-transition'); \n }, 1700);\n }, 10);\n }\n \n //set new value\n this.setValue(params.newValue, false, params.response);\n \n /** \n Fired when new value was submitted. You can use
save|cancel|onblur|nochange|undefined (=manual)\n **/ \n hide: function(reason) { \n if(!this.tip() || !this.tip().is(':visible') || !this.$element.hasClass('editable-open')) {\n return;\n }\n \n //if form is saving value, schedule hide\n if(this.$form.data('editableform').isSaving) {\n this.delayedHide = {reason: reason};\n return; \n } else {\n this.delayedHide = false;\n }\n\n this.$element.removeClass('editable-open'); \n this.innerHide();\n\n /**\n Fired when container was hidden. It occurs on both save or cancel. \n **Note:** Bootstrap popover has own `hidden` event that now cannot be separated from x-editable's one.\n The workaround is to check `arguments.length` that is always `2` for x-editable. \n\n @event hidden \n @param {object} event event object\n @param {string} reason Reason caused hiding. Can be save|cancel|onblur|nochange|manual\n @example\n $('#username').on('hidden', function(e, reason) {\n if(reason === 'save' || reason === 'cancel') {\n //auto-open next editable\n $(this).closest('tr').next().find('.editable').editable('show');\n } \n });\n **/\n this.$element.triggerHandler('hidden', reason || 'manual'); \n },\n\n /* internal show method. To be overwritten in child classes */\n innerShow: function () {\n \n }, \n\n /* internal hide method. To be overwritten in child classes */\n innerHide: function () {\n\n },\n \n /**\n Toggles container visibility (show / hide)\n @method toggle()\n @param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true.\n **/ \n toggle: function(closeAll) {\n if(this.container() && this.tip() && this.tip().is(':visible')) {\n this.hide();\n } else {\n this.show(closeAll);\n } \n },\n\n /*\n Updates the position of container when content changed.\n @method setPosition()\n */ \n setPosition: function() {\n //tbd in child class\n },\n\n save: function(e, params) {\n /** \n Fired when new value was submitted. You can use $(this).data('editableContainer') inside handler to access to editableContainer instance\n \n @event save \n @param {Object} event event object\n @param {Object} params additional params\n @param {mixed} params.newValue submitted value\n @param {Object} params.response ajax response\n @example\n $('#username').on('save', function(e, params) {\n //assuming server response: '{success: true}'\n var pk = $(this).data('editableContainer').options.pk;\n if(params.response && params.response.success) {\n alert('value: ' + params.newValue + ' with pk: ' + pk + ' saved!');\n } else {\n alert('error!'); \n } \n });\n **/ \n this.$element.triggerHandler('save', params);\n \n //hide must be after trigger, as saving value may require methods of plugin, applied to input\n this.hide('save');\n },\n\n /**\n Sets new option\n \n @method option(key, value)\n @param {string} key \n @param {mixed} value \n **/ \n option: function(key, value) {\n this.options[key] = value;\n if(key in this.containerOptions) {\n this.containerOptions[key] = value;\n this.setContainerOption(key, value); \n } else {\n this.formOptions[key] = value;\n if(this.$form) {\n this.$form.editableform('option', key, value); \n }\n }\n },\n \n setContainerOption: function(key, value) {\n this.call('option', key, value);\n },\n\n /**\n Destroys the container instance\n @method destroy()\n **/ \n destroy: function() {\n this.hide();\n this.innerDestroy();\n this.$element.off('destroyed');\n this.$element.removeData('editableContainer');\n },\n \n /* to be overwritten in child classes */\n innerDestroy: function() {\n \n }, \n \n /*\n Closes other containers except one related to passed element. \n Other containers can be cancelled or submitted (depends on onblur option)\n */\n closeOthers: function(element) {\n $('.editable-open').each(function(i, el){\n //do nothing with passed element and it's children\n if(el === element || $(el).find(element).length) {\n return;\n }\n\n //otherwise cancel or submit all open containers \n var $el = $(el),\n ec = $el.data('editableContainer');\n\n if(!ec) {\n return; \n }\n \n if(ec.options.onblur === 'cancel') {\n $el.data('editableContainer').hide('onblur');\n } else if(ec.options.onblur === 'submit') {\n $el.data('editableContainer').tip().find('form').submit();\n }\n });\n\n },\n \n /**\n Activates input of visible container (e.g. set focus)\n @method activate()\n **/ \n activate: function() {\n if(this.tip && this.tip().is(':visible') && this.$form) {\n this.$form.data('editableform').input.activate(); \n }\n } \n\n };\n\n /**\n jQuery method to initialize editableContainer.\n \n @method $().editableContainer(options)\n @params {Object} options\n @example\n $('#edit').editableContainer({\n type: 'text',\n url: '/post',\n pk: 1,\n value: 'hello'\n });\n **/ \n $.fn.editableContainer = function (option) {\n var args = arguments;\n return this.each(function () {\n var $this = $(this),\n dataKey = 'editableContainer', \n data = $this.data(dataKey),\n options = typeof option === 'object' && option,\n Constructor = (options.mode === 'inline') ? Inline : Popup; \n\n if (!data) {\n $this.data(dataKey, (data = new Constructor(this, options)));\n }\n\n if (typeof option === 'string') { //call method \n data[option].apply(data, Array.prototype.slice.call(args, 1));\n } \n });\n }; \n\n //store constructors\n $.fn.editableContainer.Popup = Popup;\n $.fn.editableContainer.Inline = Inline;\n\n //defaults\n $.fn.editableContainer.defaults = {\n /**\n Initial value of form input\n\n @property value \n @type mixed\n @default null\n @private\n **/ \n value: null,\n /**\n Placement of container relative to element. Can be top|right|bottom|left. Not used for inline container.\n\n @property placement \n @type string\n @default 'top'\n **/ \n placement: 'top',\n /**\n Whether to hide container on save/cancel.\n\n @property autohide \n @type boolean\n @default true\n @private \n **/ \n autohide: true,\n /**\n Action when user clicks outside the container. Can be cancel|submit|ignore. \n Setting ignore allows to have several containers open. \n\n @property onblur \n @type string\n @default 'cancel'\n @since 1.1.1\n **/ \n onblur: 'cancel',\n \n /**\n Animation speed (inline mode only)\n @property anim \n @type string\n @default false\n **/ \n anim: false,\n \n /**\n Mode of editable, can be `popup` or `inline` \n \n @property mode \n @type string \n @default 'popup'\n @since 1.4.0 \n **/ \n mode: 'popup' \n };\n\n /* \n * workaround to have 'destroyed' event to destroy popover when element is destroyed\n * see http://stackoverflow.com/questions/2200494/jquery-trigger-event-when-an-element-is-removed-from-the-dom\n */\n jQuery.event.special.destroyed = {\n remove: function(o) {\n if (o.handler) {\n o.handler();\n }\n }\n }; \n\n}(window.jQuery));\n\n/**\n* Editable Inline \n* ---------------------\n*/\n(function ($) {\n \"use strict\";\n \n //copy prototype from EditableContainer\n //extend methods\n $.extend($.fn.editableContainer.Inline.prototype, $.fn.editableContainer.Popup.prototype, {\n containerName: 'editableform',\n innerCss: '.editable-inline',\n containerClass: 'editable-container editable-inline', //css class applied to container element\n \n initContainer: function(){\n //container is element\n this.$tip = $('');\n \n //convert anim to miliseconds (int)\n if(!this.options.anim) {\n this.options.anim = 0;\n } \n },\n \n splitOptions: function() {\n //all options are passed to form\n this.containerOptions = {};\n this.formOptions = this.options;\n },\n \n tip: function() {\n return this.$tip; \n },\n \n innerShow: function () {\n this.$element.hide();\n this.tip().insertAfter(this.$element).show();\n }, \n \n innerHide: function () {\n this.$tip.hide(this.options.anim, $.proxy(function() {\n this.$element.show();\n this.innerDestroy();\n }, this)); \n },\n \n innerDestroy: function() {\n if(this.tip()) {\n this.tip().empty().remove();\n }\n } \n });\n\n}(window.jQuery));\n/**\nMakes editable any HTML element on the page. Applied as jQuery method.\n\n@class editable\n@uses editableContainer\n**/\n(function ($) {\n \"use strict\";\n\n var Editable = function (element, options) {\n this.$element = $(element);\n //data-* has more priority over js options: because dynamically created elements may change data-* \n this.options = $.extend({}, $.fn.editable.defaults, options, $.fn.editableutils.getConfigData(this.$element)); \n if(this.options.selector) {\n this.initLive();\n } else {\n this.init();\n }\n \n //check for transition support\n if(this.options.highlight && !$.fn.editableutils.supportsTransitions()) {\n this.options.highlight = false;\n }\n };\n\n Editable.prototype = {\n constructor: Editable, \n init: function () {\n var isValueByText = false, \n doAutotext, finalize;\n\n //name\n this.options.name = this.options.name || this.$element.attr('id');\n \n //create input of specified type. Input needed already here to convert value for initial display (e.g. show text by id for select)\n //also we set scope option to have access to element inside input specific callbacks (e. g. source as function)\n this.options.scope = this.$element[0]; \n this.input = $.fn.editableutils.createInput(this.options);\n if(!this.input) {\n return; \n } \n\n //set value from settings or by element's text\n if (this.options.value === undefined || this.options.value === null) {\n this.value = this.input.html2value($.trim(this.$element.html()));\n isValueByText = true;\n } else {\n /*\n value can be string when received from 'data-value' attribute\n for complext objects value can be set as json string in data-value attribute, \n e.g. data-value=\"{city: 'Moscow', street: 'Lenina'}\"\n */\n this.options.value = $.fn.editableutils.tryParseJson(this.options.value, true); \n if(typeof this.options.value === 'string') {\n this.value = this.input.str2value(this.options.value);\n } else {\n this.value = this.options.value;\n }\n }\n \n //add 'editable' class to every editable element\n this.$element.addClass('editable');\n \n //specifically for \"textarea\" add class .editable-pre-wrapped to keep linebreaks\n if(this.input.type === 'textarea') {\n this.$element.addClass('editable-pre-wrapped');\n }\n \n //attach handler activating editable. In disabled mode it just prevent default action (useful for links)\n if(this.options.toggle !== 'manual') {\n this.$element.addClass('editable-click');\n this.$element.on(this.options.toggle + '.editable', $.proxy(function(e){\n //prevent following link if editable enabled\n if(!this.options.disabled) {\n e.preventDefault();\n }\n \n //stop propagation not required because in document click handler it checks event target\n //e.stopPropagation();\n \n if(this.options.toggle === 'mouseenter') {\n //for hover only show container\n this.show();\n } else {\n //when toggle='click' we should not close all other containers as they will be closed automatically in document click listener\n var closeAll = (this.options.toggle !== 'click');\n this.toggle(closeAll);\n }\n }, this));\n } else {\n this.$element.attr('tabindex', -1); //do not stop focus on element when toggled manually\n }\n \n //if display is function it's far more convinient to have autotext = always to render correctly on init\n //see https://github.com/vitalets/x-editable-yii/issues/34\n if(typeof this.options.display === 'function') {\n this.options.autotext = 'always';\n }\n \n //check conditions for autotext:\n switch(this.options.autotext) {\n case 'always':\n doAutotext = true;\n break;\n case 'auto':\n //if element text is empty and value is defined and value not generated by text --> run autotext\n doAutotext = !$.trim(this.$element.text()).length && this.value !== null && this.value !== undefined && !isValueByText;\n break;\n default:\n doAutotext = false;\n }\n\n //depending on autotext run render() or just finilize init\n $.when(doAutotext ? this.render() : true).then($.proxy(function() {\n if(this.options.disabled) {\n this.disable();\n } else {\n this.enable(); \n }\n /** \n Fired when element was initialized by `$().editable()` method. \n Please note that you should setup `init` handler **before** applying `editable`. \n \n @event init \n @param {Object} event event object\n @param {Object} editable editable instance (as here it cannot accessed via data('editable'))\n @since 1.2.0\n @example\n $('#username').on('init', function(e, editable) {\n alert('initialized ' + editable.options.name);\n });\n $('#username').editable();\n **/ \n this.$element.triggerHandler('init', this);\n }, this));\n },\n\n /*\n Initializes parent element for live editables \n */\n initLive: function() {\n //store selector \n var selector = this.options.selector;\n //modify options for child elements\n this.options.selector = false; \n this.options.autotext = 'never';\n //listen toggle events\n this.$element.on(this.options.toggle + '.editable', selector, $.proxy(function(e){\n var $target = $(e.target).closest(selector);\n if(!$target.data('editable')) {\n //if delegated element initially empty, we need to clear it's text (that was manually set to `empty` by user)\n //see https://github.com/vitalets/x-editable/issues/137 \n if($target.hasClass(this.options.emptyclass)) {\n $target.empty();\n }\n $target.editable(this.options).trigger(e);\n }\n }, this)); \n },\n \n /*\n Renders value into element's text.\n Can call custom display method from options.\n Can return deferred object.\n @method render()\n @param {mixed} response server response (if exist) to pass into display function\n */ \n render: function(response) {\n //do not display anything\n if(this.options.display === false) {\n return;\n }\n \n //if input has `value2htmlFinal` method, we pass callback in third param to be called when source is loaded\n if(this.input.value2htmlFinal) {\n return this.input.value2html(this.value, this.$element[0], this.options.display, response); \n //if display method defined --> use it \n } else if(typeof this.options.display === 'function') {\n return this.options.display.call(this.$element[0], this.value, response);\n //else use input's original value2html() method \n } else {\n return this.input.value2html(this.value, this.$element[0]); \n }\n },\n \n /**\n Enables editable\n @method enable()\n **/ \n enable: function() {\n this.options.disabled = false;\n this.$element.removeClass('editable-disabled');\n this.handleEmpty(this.isEmpty);\n if(this.options.toggle !== 'manual') {\n if(this.$element.attr('tabindex') === '-1') { \n this.$element.removeAttr('tabindex'); \n }\n }\n },\n \n /**\n Disables editable\n @method disable()\n **/ \n disable: function() {\n this.options.disabled = true; \n this.hide(); \n this.$element.addClass('editable-disabled');\n this.handleEmpty(this.isEmpty);\n //do not stop focus on this element\n this.$element.attr('tabindex', -1); \n },\n \n /**\n Toggles enabled / disabled state of editable element\n @method toggleDisabled()\n **/ \n toggleDisabled: function() {\n if(this.options.disabled) {\n this.enable();\n } else { \n this.disable(); \n }\n }, \n \n /**\n Sets new option\n \n @method option(key, value)\n @param {string|object} key option name or object with several options\n @param {mixed} value option new value\n @example\n $('.editable').editable('option', 'pk', 2);\n **/ \n option: function(key, value) {\n //set option(s) by object\n if(key && typeof key === 'object') {\n $.each(key, $.proxy(function(k, v){\n this.option($.trim(k), v); \n }, this)); \n return;\n }\n\n //set option by string \n this.options[key] = value; \n \n //disabled\n if(key === 'disabled') {\n return value ? this.disable() : this.enable();\n } \n \n //value\n if(key === 'value') {\n this.setValue(value);\n }\n \n //transfer new option to container! \n if(this.container) {\n this.container.option(key, value); \n }\n \n //pass option to input directly (as it points to the same in form)\n if(this.input.option) {\n this.input.option(key, value);\n }\n \n }, \n \n /*\n * set emptytext if element is empty\n */\n handleEmpty: function (isEmpty) {\n //do not handle empty if we do not display anything\n if(this.options.display === false) {\n return;\n }\n\n /* \n isEmpty may be set directly as param of method.\n It is required when we enable/disable field and can't rely on content \n as node content is text: \"Empty\" that is not empty %)\n */\n if(isEmpty !== undefined) { \n this.isEmpty = isEmpty;\n } else {\n //detect empty\n //for some inputs we need more smart check\n //e.g. wysihtml5 may have , ,
$(this).data('editable') to access to editable instance\n \n @event save \n @param {Object} event event object\n @param {Object} params additional params\n @param {mixed} params.newValue submitted value\n @param {Object} params.response ajax response\n @example\n $('#username').on('save', function(e, params) {\n alert('Saved value: ' + params.newValue);\n });\n **/\n //event itself is triggered by editableContainer. Description here is only for documentation \n },\n\n validate: function () {\n if (typeof this.options.validate === 'function') {\n return this.options.validate.call(this, this.value);\n }\n },\n \n /**\n Sets new value of editable\n @method setValue(value, convertStr)\n @param {mixed} value new value \n @param {boolean} convertStr whether to convert value from string to internal format\n **/ \n setValue: function(value, convertStr, response) {\n if(convertStr) {\n this.value = this.input.str2value(value);\n } else {\n this.value = value;\n }\n if(this.container) {\n this.container.option('value', this.value);\n }\n $.when(this.render(response))\n .then($.proxy(function() {\n this.handleEmpty();\n }, this));\n },\n \n /**\n Activates input of visible container (e.g. set focus)\n @method activate()\n **/ \n activate: function() {\n if(this.container) {\n this.container.activate(); \n }\n },\n \n /**\n Removes editable feature from element\n @method destroy()\n **/ \n destroy: function() {\n this.disable();\n \n if(this.container) {\n this.container.destroy(); \n }\n \n this.input.destroy();\n\n if(this.options.toggle !== 'manual') {\n this.$element.removeClass('editable-click');\n this.$element.off(this.options.toggle + '.editable');\n } \n \n this.$element.off(\"save.internal\");\n \n this.$element.removeClass('editable editable-open editable-disabled');\n this.$element.removeData('editable');\n } \n };\n\n /* EDITABLE PLUGIN DEFINITION\n * ======================= */\n\n /**\n jQuery method to initialize editable element.\n \n @method $().editable(options)\n @params {Object} options\n @example\n $('#username').editable({\n type: 'text',\n url: '/post',\n pk: 1\n });\n **/\n $.fn.editable = function (option) {\n //special API methods returning non-jquery object\n var result = {}, args = arguments, datakey = 'editable';\n switch (option) {\n /**\n Runs client-side validation for all matched editables\n \n @method validate()\n @returns {Object} validation errors map\n @example\n $('#username, #fullname').editable('validate');\n // possible result:\n {\n username: \"username is required\",\n fullname: \"fullname should be minimum 3 letters length\"\n }\n **/\n case 'validate':\n this.each(function () {\n var $this = $(this), data = $this.data(datakey), error;\n if (data && (error = data.validate())) {\n result[data.options.name] = error;\n }\n });\n return result;\n\n /**\n Returns current values of editable elements. \n Note that it returns an **object** with name-value pairs, not a value itself. It allows to get data from several elements. \n If value of some editable is `null` or `undefined` it is excluded from result object.\n When param `isSingle` is set to **true** - it is supposed you have single element and will return value of editable instead of object. \n \n @method getValue()\n @param {bool} isSingle whether to return just value of single element\n @returns {Object} object of element names and values\n @example\n $('#username, #fullname').editable('getValue');\n //result:\n {\n username: \"superuser\",\n fullname: \"John\"\n }\n //isSingle = true\n $('#username').editable('getValue', true);\n //result \"superuser\" \n **/\n case 'getValue':\n if(arguments.length === 2 && arguments[1] === true) { //isSingle = true\n result = this.eq(0).data(datakey).value;\n } else {\n this.each(function () {\n var $this = $(this), data = $this.data(datakey);\n if (data && data.value !== undefined && data.value !== null) {\n result[data.options.name] = data.input.value2submit(data.value);\n }\n });\n }\n return result;\n\n /**\n This method collects values from several editable elements and submit them all to server. \n Internally it runs client-side validation for all fields and submits only in case of success. \n See creating new records for details. \n Since 1.5.1 `submit` can be applied to single element to send data programmatically. In that case\n `url`, `success` and `error` is taken from initial options and you can just call `$('#username').editable('submit')`. \n \n @method submit(options)\n @param {object} options \n @param {object} options.url url to submit data \n @param {object} options.data additional data to submit\n @param {object} options.ajaxOptions additional ajax options\n @param {function} options.error(obj) error handler \n @param {function} options.success(obj,config) success handler\n @returns {Object} jQuery object\n **/\n case 'submit': //collects value, validate and submit to server for creating new record\n var config = arguments[1] || {},\n $elems = this,\n errors = this.editable('validate');\n\n // validation ok\n if($.isEmptyObject(errors)) {\n var ajaxOptions = {};\n \n // for single element use url, success etc from options\n if($elems.length === 1) {\n var editable = $elems.data('editable');\n //standard params\n var params = {\n name: editable.options.name || '',\n value: editable.input.value2submit(editable.value),\n pk: (typeof editable.options.pk === 'function') ? \n editable.options.pk.call(editable.options.scope) : \n editable.options.pk \n };\n\n //additional params\n if(typeof editable.options.params === 'function') {\n params = editable.options.params.call(editable.options.scope, params); \n } else {\n //try parse json in single quotes (from data-params attribute)\n editable.options.params = $.fn.editableutils.tryParseJson(editable.options.params, true); \n $.extend(params, editable.options.params);\n }\n\n ajaxOptions = {\n url: editable.options.url,\n data: params,\n type: 'POST' \n };\n \n // use success / error from options \n config.success = config.success || editable.options.success;\n config.error = config.error || editable.options.error;\n \n // multiple elements\n } else {\n var values = this.editable('getValue'); \n \n ajaxOptions = {\n url: config.url,\n data: values, \n type: 'POST'\n }; \n } \n\n // ajax success callabck (response 200 OK)\n ajaxOptions.success = typeof config.success === 'function' ? function(response) {\n config.success.call($elems, response, config);\n } : $.noop;\n \n // ajax error callabck\n ajaxOptions.error = typeof config.error === 'function' ? function() {\n config.error.apply($elems, arguments);\n } : $.noop;\n \n // extend ajaxOptions \n if(config.ajaxOptions) { \n $.extend(ajaxOptions, config.ajaxOptions);\n }\n \n // extra data \n if(config.data) {\n $.extend(ajaxOptions.data, config.data);\n } \n \n // perform ajax request\n $.ajax(ajaxOptions);\n } else { //client-side validation error\n if(typeof config.error === 'function') {\n config.error.call($elems, errors);\n }\n }\n return this;\n }\n\n //return jquery object\n return this.each(function () {\n var $this = $(this), \n data = $this.data(datakey), \n options = typeof option === 'object' && option;\n\n //for delegated targets do not store `editable` object for element\n //it's allows several different selectors.\n //see: https://github.com/vitalets/x-editable/issues/312 \n if(options && options.selector) {\n data = new Editable(this, options);\n return; \n } \n \n if (!data) {\n $this.data(datakey, (data = new Editable(this, options)));\n }\n\n if (typeof option === 'string') { //call method \n data[option].apply(data, Array.prototype.slice.call(args, 1));\n } \n });\n }; \n \n\n $.fn.editable.defaults = {\n /**\n Type of input. Can be text|textarea|select|date|checklist and more\n\n @property type \n @type string\n @default 'text'\n **/\n type: 'text', \n /**\n Sets disabled state of editable\n\n @property disabled \n @type boolean\n @default false\n **/ \n disabled: false,\n /**\n How to toggle editable. Can be click|dblclick|mouseenter|manual. \n When set to manual you should manually call show/hide methods of editable. \n **Note**: if you call show or toggle inside **click** handler of some DOM element, \n you need to apply e.stopPropagation() because containers are being closed on any click on document.\n \n @example\n $('#edit-button').click(function(e) {\n e.stopPropagation();\n $('#username').editable('toggle');\n });\n\n @property toggle \n @type string\n @default 'click'\n **/ \n toggle: 'click',\n /**\n Text shown when element is empty.\n\n @property emptytext \n @type string\n @default 'Empty'\n **/ \n emptytext: 'Empty',\n /**\n Allows to automatically set element's text based on it's value. Can be auto|always|never. Useful for select and date.\n For example, if dropdown list is {1: 'a', 2: 'b'} and element's value set to 1, it's html will be automatically set to 'a'. \n auto - text will be automatically set only if element is empty. \n always|never - always(never) try to set element's text.\n\n @property autotext \n @type string\n @default 'auto'\n **/ \n autotext: 'auto', \n /**\n Initial value of input. If not set, taken from element's text. \n Note, that if element's text is empty - text is automatically generated from value and can be customized (see `autotext` option). \n For example, to display currency sign:\n @example\n \n \n \n @property value \n @type mixed\n @default element's text\n **/\n value: null,\n /**\n Callback to perform custom displaying of value in element's text. \n If `null`, default input's display used. \n If `false`, no displaying methods will be called, element's text will never change. \n Runs under element's scope. \n _**Parameters:**_ \n \n * `value` current value to be displayed\n * `response` server response (if display called after ajax submit), since 1.4.0\n \n For _inputs with source_ (select, checklist) parameters are different: \n \n * `value` current value to be displayed\n * `sourceData` array of items for current input (e.g. dropdown items) \n * `response` server response (if display called after ajax submit), since 1.4.0\n \n To get currently selected items use `$.fn.editableutils.itemsByValue(value, sourceData)`.\n \n @property display \n @type function|boolean\n @default null\n @since 1.2.0\n @example\n display: function(value, sourceData) {\n //display checklist as comma-separated values\n var html = [],\n checked = $.fn.editableutils.itemsByValue(value, sourceData);\n \n if(checked.length) {\n $.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });\n $(this).html(html.join(', '));\n } else {\n $(this).empty(); \n }\n }\n **/ \n display: null,\n /**\n Css class applied when editable text is empty.\n\n @property emptyclass \n @type string\n @since 1.4.1 \n @default editable-empty\n **/ \n emptyclass: 'editable-empty',\n /**\n Css class applied when value was stored but not sent to server (`pk` is empty or `send = 'never'`). \n You may set it to `null` if you work with editables locally and submit them together. \n\n @property unsavedclass \n @type string\n @since 1.4.1 \n @default editable-unsaved\n **/ \n unsavedclass: 'editable-unsaved',\n /**\n If selector is provided, editable will be delegated to the specified targets. \n Usefull for dynamically generated DOM elements. \n **Please note**, that delegated targets can't be initialized with `emptytext` and `autotext` options, \n as they actually become editable only after first click. \n You should manually set class `editable-click` to these elements. \n Also, if element originally empty you should add class `editable-empty`, set `data-value=\"\"` and write emptytext into element:\n\n @property selector \n @type string\n @since 1.4.1 \n @default null\n @example\n \n \n \n **/ \n selector: null,\n /**\n Color used to highlight element after update. Implemented via CSS3 transition, works in modern browsers.\n \n @property highlight \n @type string|boolean\n @since 1.4.5 \n @default #FFFF80 \n **/\n highlight: '#FFFF80'\n };\n \n}(window.jQuery));\n\n/**\nAbstractInput - base class for all editable inputs.\nIt defines interface to be implemented by any input type.\nTo create your own input you can inherit from this class.\n\n@class abstractinput\n**/\n(function ($) {\n \"use strict\";\n\n //types\n $.fn.editabletypes = {};\n\n var AbstractInput = function () { };\n\n AbstractInput.prototype = {\n /**\n Initializes input\n\n @method init() \n **/\n init: function(type, options, defaults) {\n this.type = type;\n this.options = $.extend({}, defaults, options);\n },\n\n /*\n this method called before render to init $tpl that is inserted in DOM\n */\n prerender: function() {\n this.$tpl = $(this.options.tpl); //whole tpl as jquery object \n this.$input = this.$tpl; //control itself, can be changed in render method\n this.$clear = null; //clear button\n this.error = null; //error message, if input cannot be rendered \n },\n \n /**\n Renders input from tpl. Can return jQuery deferred object.\n Can be overwritten in child objects\n\n @method render()\n **/\n render: function() {\n\n }, \n\n /**\n Sets element's html by value. \n\n @method value2html(value, element)\n @param {mixed} value\n @param {DOMElement} element\n **/\n value2html: function(value, element) {\n $(element)[this.options.escape ? 'text' : 'html']($.trim(value));\n },\n\n /**\n Converts element's html to value\n\n @method html2value(html)\n @param {string} html\n @returns {mixed}\n **/\n html2value: function(html) {\n return $('').html(html).text();\n },\n\n /**\n Converts value to string (for internal compare). For submitting to server used value2submit().\n\n @method value2str(value) \n @param {mixed} value\n @returns {string}\n **/\n value2str: function(value) {\n return String(value);\n }, \n\n /**\n Converts string received from server into value. Usually from `data-value` attribute.\n\n @method str2value(str)\n @param {string} str\n @returns {mixed}\n **/\n str2value: function(str) {\n return str;\n }, \n \n /**\n Converts value for submitting to server. Result can be string or object.\n\n @method value2submit(value) \n @param {mixed} value\n @returns {mixed}\n **/\n value2submit: function(value) {\n return value;\n },\n\n /**\n Sets value of input.\n\n @method value2input(value) \n @param {mixed} value\n **/\n value2input: function(value) {\n this.$input.val(value);\n },\n\n /**\n Returns value of input. Value can be object (e.g. datepicker)\n\n @method input2value() \n **/\n input2value: function() { \n return this.$input.val();\n }, \n\n /**\n Activates input. For text it sets focus.\n\n @method activate() \n **/\n activate: function() {\n if(this.$input.is(':visible')) {\n this.$input.focus();\n }\n },\n\n /**\n Creates input.\n\n @method clear() \n **/ \n clear: function() {\n this.$input.val(null);\n },\n\n /**\n method to escape html.\n **/\n escape: function(str) {\n return $('
').text(str).html();\n },\n \n /**\n attach handler to automatically submit form when value changed (useful when buttons not shown)\n **/\n autosubmit: function() {\n \n },\n \n /**\n Additional actions when destroying element \n **/\n destroy: function() {\n },\n\n // -------- helper functions --------\n setClass: function() { \n if(this.options.inputclass) {\n this.$input.addClass(this.options.inputclass); \n } \n },\n\n setAttr: function(attr) {\n if (this.options[attr] !== undefined && this.options[attr] !== null) {\n this.$input.attr(attr, this.options[attr]);\n } \n },\n \n option: function(key, value) {\n this.options[key] = value;\n }\n \n };\n \n AbstractInput.defaults = { \n /**\n HTML template of input. Normally you should not change it.\n\n @property tpl \n @type string\n @default ''\n **/ \n tpl: '',\n /**\n CSS class automatically applied to input\n \n @property inputclass \n @type string\n @default null\n **/ \n inputclass: null,\n \n /**\n If `true` - html will be escaped in content of element via $.text() method. \n If `false` - html will not be escaped, $.html() used. \n When you use own `display` function, this option obviosly has no effect.\n \n @property escape \n @type boolean\n @since 1.5.0\n @default true\n **/ \n escape: true,\n \n //scope for external methods (e.g. source defined as function)\n //for internal use only\n scope: null,\n \n //need to re-declare showbuttons here to get it's value from common config (passed only options existing in defaults)\n showbuttons: true \n };\n \n $.extend($.fn.editabletypes, {abstractinput: AbstractInput});\n \n}(window.jQuery));\n\n/**\nList - abstract class for inputs that have source option loaded from js array or via ajax\n\n@class list\n@extends abstractinput\n**/\n(function ($) {\n \"use strict\";\n \n var List = function (options) {\n \n };\n\n $.fn.editableutils.inherit(List, $.fn.editabletypes.abstractinput);\n\n $.extend(List.prototype, {\n render: function () {\n var deferred = $.Deferred();\n\n this.error = null;\n this.onSourceReady(function () {\n this.renderList();\n deferred.resolve();\n }, function () {\n this.error = this.options.sourceError;\n deferred.resolve();\n });\n\n return deferred.promise();\n },\n\n html2value: function (html) {\n return null; //can't set value by text\n },\n \n value2html: function (value, element, display, response) {\n var deferred = $.Deferred(),\n success = function () {\n if(typeof display === 'function') {\n //custom display method\n display.call(element, value, this.sourceData, response); \n } else {\n this.value2htmlFinal(value, element);\n }\n deferred.resolve();\n };\n \n //for null value just call success without loading source\n if(value === null) {\n success.call(this); \n } else {\n this.onSourceReady(success, function () { deferred.resolve(); });\n }\n\n return deferred.promise();\n }, \n\n // ------------- additional functions ------------\n\n onSourceReady: function (success, error) {\n //run source if it function\n var source;\n if ($.isFunction(this.options.source)) {\n source = this.options.source.call(this.options.scope);\n this.sourceData = null;\n //note: if function returns the same source as URL - sourceData will be taken from cahce and no extra request performed\n } else {\n source = this.options.source;\n } \n \n //if allready loaded just call success\n if(this.options.sourceCache && $.isArray(this.sourceData)) {\n success.call(this);\n return; \n }\n\n //try parse json in single quotes (for double quotes jquery does automatically)\n try {\n source = $.fn.editableutils.tryParseJson(source, false);\n } catch (e) {\n error.call(this);\n return;\n }\n\n //loading from url\n if (typeof source === 'string') {\n //try to get sourceData from cache\n if(this.options.sourceCache) {\n var cacheID = source,\n cache;\n\n if (!$(document).data(cacheID)) {\n $(document).data(cacheID, {});\n }\n cache = $(document).data(cacheID);\n\n //check for cached data\n if (cache.loading === false && cache.sourceData) { //take source from cache\n this.sourceData = cache.sourceData;\n this.doPrepend();\n success.call(this);\n return;\n } else if (cache.loading === true) { //cache is loading, put callback in stack to be called later\n cache.callbacks.push($.proxy(function () {\n this.sourceData = cache.sourceData;\n this.doPrepend();\n success.call(this);\n }, this));\n\n //also collecting error callbacks\n cache.err_callbacks.push($.proxy(error, this));\n return;\n } else { //no cache yet, activate it\n cache.loading = true;\n cache.callbacks = [];\n cache.err_callbacks = [];\n }\n }\n \n //ajaxOptions for source. Can be overwritten bt options.sourceOptions\n var ajaxOptions = $.extend({\n url: source,\n type: 'get',\n cache: false,\n dataType: 'json',\n success: $.proxy(function (data) {\n if(cache) {\n cache.loading = false;\n }\n this.sourceData = this.makeArray(data);\n if($.isArray(this.sourceData)) {\n if(cache) {\n //store result in cache\n cache.sourceData = this.sourceData;\n //run success callbacks for other fields waiting for this source\n $.each(cache.callbacks, function () { this.call(); }); \n }\n this.doPrepend();\n success.call(this);\n } else {\n error.call(this);\n if(cache) {\n //run error callbacks for other fields waiting for this source\n $.each(cache.err_callbacks, function () { this.call(); }); \n }\n }\n }, this),\n error: $.proxy(function () {\n error.call(this);\n if(cache) {\n cache.loading = false;\n //run error callbacks for other fields\n $.each(cache.err_callbacks, function () { this.call(); }); \n }\n }, this)\n }, this.options.sourceOptions);\n \n //loading sourceData from server\n $.ajax(ajaxOptions);\n \n } else { //options as json/array\n this.sourceData = this.makeArray(source);\n \n if($.isArray(this.sourceData)) {\n this.doPrepend();\n success.call(this); \n } else {\n error.call(this);\n }\n }\n },\n\n doPrepend: function () {\n if(this.options.prepend === null || this.options.prepend === undefined) {\n return; \n }\n \n if(!$.isArray(this.prependData)) {\n //run prepend if it is function (once)\n if ($.isFunction(this.options.prepend)) {\n this.options.prepend = this.options.prepend.call(this.options.scope);\n }\n \n //try parse json in single quotes\n this.options.prepend = $.fn.editableutils.tryParseJson(this.options.prepend, true);\n \n //convert prepend from string to object\n if (typeof this.options.prepend === 'string') {\n this.options.prepend = {'': this.options.prepend};\n }\n \n this.prependData = this.makeArray(this.options.prepend);\n }\n\n if($.isArray(this.prependData) && $.isArray(this.sourceData)) {\n this.sourceData = this.prependData.concat(this.sourceData);\n }\n },\n\n /*\n renders input list\n */\n renderList: function() {\n // this method should be overwritten in child class\n },\n \n /*\n set element's html by value\n */\n value2htmlFinal: function(value, element) {\n // this method should be overwritten in child class\n }, \n\n /**\n * convert data to array suitable for sourceData, e.g. [{value: 1, text: 'abc'}, {...}]\n */\n makeArray: function(data) {\n var count, obj, result = [], item, iterateItem;\n if(!data || typeof data === 'string') {\n return null; \n }\n\n if($.isArray(data)) { //array\n /* \n function to iterate inside item of array if item is object.\n Caclulates count of keys in item and store in obj. \n */\n iterateItem = function (k, v) {\n obj = {value: k, text: v};\n if(count++ >= 2) {\n return false;// exit from `each` if item has more than one key.\n }\n };\n \n for(var i = 0; i < data.length; i++) {\n item = data[i]; \n if(typeof item === 'object') {\n count = 0; //count of keys inside item\n $.each(item, iterateItem);\n //case: [{val1: 'text1'}, {val2: 'text2} ...]\n if(count === 1) { \n result.push(obj); \n //case: [{value: 1, text: 'text1'}, {value: 2, text: 'text2'}, ...]\n } else if(count > 1) {\n //removed check of existance: item.hasOwnProperty('value') && item.hasOwnProperty('text')\n if(item.children) {\n item.children = this.makeArray(item.children); \n }\n result.push(item);\n }\n } else {\n //case: ['text1', 'text2' ...]\n result.push({value: item, text: item}); \n }\n }\n } else { //case: {val1: 'text1', val2: 'text2, ...}\n $.each(data, function (k, v) {\n result.push({value: k, text: v});\n }); \n }\n return result;\n },\n \n option: function(key, value) {\n this.options[key] = value;\n if(key === 'source') {\n this.sourceData = null;\n }\n if(key === 'prepend') {\n this.prependData = null;\n } \n } \n\n }); \n\n List.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {\n /**\n Source data for list. \n If **array** - it should be in format: `[{value: 1, text: \"text1\"}, {value: 2, text: \"text2\"}, ...]` \n For compability, object format is also supported: `{\"1\": \"text1\", \"2\": \"text2\" ...}` but it does not guarantee elements order.\n \n If **string** - considered ajax url to load items. In that case results will be cached for fields with the same source and name. See also `sourceCache` option.\n \n If **function**, it should return data in format above (since 1.4.0).\n \n Since 1.4.1 key `children` supported to render OPTGROUP (for **select** input only): \n @example\n [\n {text: \"group1\", children: [\n {value: 1, text: \"text1\"}, \n {value: 2, text: \"text2\"}\n ]}, \n ...\n ] \n\n\t\t\n @property source \n @type string | array | object | function\n @default null\n **/ \n source: null, \n /**\n Data automatically prepended to the beginning of dropdown list.\n \n @property prepend \n @type string | array | object | function\n @default false\n **/ \n prepend: false,\n /**\n Error message when list cannot be loaded (e.g. ajax error)\n \n @property sourceError \n @type string\n @default Error when loading list\n **/ \n sourceError: 'Error when loading list',\n /**\n if `true` and source is **string url** - results will be cached for fields with the same source. \n Usefull for editable column in grid to prevent extra requests.\n \n @property sourceCache \n @type boolean\n @default true\n @since 1.2.0\n **/ \n sourceCache: true,\n /**\n Additional ajax options to be used in $.ajax() when loading list from server.\n Useful to send extra parameters or change request method.\n \n @property sourceOptions \n @type object|function\n @default null\n @since 1.5.0\n @example\n sourceOptions: {\n data: {param: 123},\n type: 'post'\n }\n \n **/ \n sourceOptions: null\n });\n\n $.fn.editabletypes.list = List; \n\n}(window.jQuery));\n\n/**\nText input\n\n@class text\n@extends abstractinput\n@final\n@example\nawesome\n\n**/\n(function ($) {\n \"use strict\";\n\n var Text = function (options) {\n this.init('text', options, Text.defaults);\n };\n\n $.fn.editableutils.inherit(Text, $.fn.editabletypes.abstractinput);\n\n $.extend(Text.prototype, {\n render: function() {\n this.renderClear();\n this.setClass();\n this.setAttr('placeholder');\n },\n\n activate: function() {\n if(this.$input.is(':visible')) {\n this.$input.focus();\n// if (this.$input.is('input,textarea') && !this.$input.is('[type=\"checkbox\"],[type=\"range\"],[type=\"number\"],[type=\"email\"]')) {\n if (this.$input.is('input,textarea') && !this.$input.is('[type=\"checkbox\"],[type=\"range\"]')) {\n $.fn.editableutils.setCursorPosition(this.$input.get(0), this.$input.val().length);\n }\n\n if(this.toggleClear) {\n this.toggleClear();\n }\n }\n },\n\n //render clear button\n renderClear: function() {\n if (this.options.clear) {\n this.$clear = $('');\n this.$input.after(this.$clear)\n .css('padding-right', 24)\n .keyup($.proxy(function(e) {\n //arrows, enter, tab, etc\n if(~$.inArray(e.keyCode, [40,38,9,13,27])) {\n return;\n }\n\n clearTimeout(this.t);\n var that = this;\n this.t = setTimeout(function() {\n that.toggleClear(e);\n }, 100);\n\n }, this))\n .parent().css('position', 'relative');\n\n this.$clear.click($.proxy(this.clear, this));\n }\n },\n\n postrender: function() {\n /*\n //now `clear` is positioned via css\n if(this.$clear) {\n //can position clear button only here, when form is shown and height can be calculated\n// var h = this.$input.outerHeight(true) || 20,\n var h = this.$clear.parent().height(),\n delta = (h - this.$clear.height()) / 2;\n\n //this.$clear.css({bottom: delta, right: delta});\n }\n */\n },\n\n //show / hide clear button\n toggleClear: function(e) {\n if(!this.$clear) {\n return;\n }\n\n var len = this.$input.val().length,\n visible = this.$clear.is(':visible');\n\n if(len && !visible) {\n this.$clear.show();\n }\n\n if(!len && visible) {\n this.$clear.hide();\n }\n },\n\n clear: function() {\n this.$clear.hide();\n this.$input.val('').focus();\n }\n });\n\n Text.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {\n /**\n @property tpl\n @default \n **/\n tpl: '',\n /**\n Placeholder attribute of input. Shown when input is empty.\n\n @property placeholder\n @type string\n @default null\n **/\n placeholder: null,\n\n /**\n Whether to show `clear` button\n\n @property clear\n @type boolean\n @default true\n **/\n clear: true\n });\n\n $.fn.editabletypes.text = Text;\n\n}(window.jQuery));\n\n/**\nTextarea input\n\n@class textarea\n@extends abstractinput\n@final\n@example\nawesome comment!\n\n**/\n(function ($) {\n \"use strict\";\n \n var Textarea = function (options) {\n this.init('textarea', options, Textarea.defaults);\n };\n\n $.fn.editableutils.inherit(Textarea, $.fn.editabletypes.abstractinput);\n\n $.extend(Textarea.prototype, {\n render: function () {\n this.setClass();\n this.setAttr('placeholder');\n this.setAttr('rows'); \n \n //ctrl + enter\n this.$input.keydown(function (e) {\n if (e.ctrlKey && e.which === 13) {\n $(this).closest('form').submit();\n }\n });\n },\n \n //using `white-space: pre-wrap` solves \\n <--> BR conversion very elegant!\n /* \n value2html: function(value, element) {\n var html = '', lines;\n if(value) {\n lines = value.split(\"\\n\");\n for (var i = 0; i < lines.length; i++) {\n lines[i] = $('
').text(lines[i]).html();\n }\n html = lines.join('
');\n }\n $(element).html(html);\n },\n \n html2value: function(html) {\n if(!html) {\n return '';\n }\n\n var regex = new RegExp(String.fromCharCode(10), 'g');\n var lines = html.split(//i);\n for (var i = 0; i < lines.length; i++) {\n var text = $('
');\n }\n $(element).html(html);\n },\n \n html2value: function(html) {\n if(!html) {\n return '';\n }\n\n var regex = new RegExp(String.fromCharCode(10), 'g');\n var lines = html.split(/
').html(lines[i]).text();\n\n // Remove newline characters (\\n) to avoid them being converted by value2html() method\n // thus adding extra
tags\n text = text.replace(regex, '');\n\n lines[i] = text;\n }\n return lines.join(\"\\n\");\n },\n */\n activate: function() {\n $.fn.editabletypes.text.prototype.activate.call(this);\n }\n });\n\n Textarea.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {\n /**\n @property tpl\n @default \n **/\n tpl:'',\n /**\n @property inputclass\n @default input-large\n **/\n inputclass: 'input-large',\n /**\n Placeholder attribute of input. Shown when input is empty.\n\n @property placeholder\n @type string\n @default null\n **/\n placeholder: null,\n /**\n Number of rows in textarea\n\n @property rows\n @type integer\n @default 7\n **/ \n rows: 7 \n });\n\n $.fn.editabletypes.textarea = Textarea;\n\n}(window.jQuery));\n\n/**\nSelect (dropdown)\n\n@class select\n@extends list\n@final\n@example\n\n\n**/\n(function ($) {\n \"use strict\";\n \n var Select = function (options) {\n this.init('select', options, Select.defaults);\n };\n\n $.fn.editableutils.inherit(Select, $.fn.editabletypes.list);\n\n $.extend(Select.prototype, {\n renderList: function() {\n this.$input.empty();\n var escape = this.options.escape;\n\n var fillItems = function($el, data) {\n var attr;\n if($.isArray(data)) {\n for(var i=0; i', attr), data[i].children)); \n } else {\n attr.value = data[i].value;\n if(data[i].disabled) {\n attr.disabled = true;\n }\n var $option = $('
tags\n text = text.replace(regex, '');\n\n lines[i] = text;\n }\n return lines.join(\"\\n\");\n },\n */\n activate: function() {\n $.fn.editabletypes.text.prototype.activate.call(this);\n }\n });\n\n Textarea.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {\n /**\n @property tpl\n @default \n **/\n tpl:'',\n /**\n @property inputclass\n @default input-large\n **/\n inputclass: 'input-large',\n /**\n Placeholder attribute of input. Shown when input is empty.\n\n @property placeholder\n @type string\n @default null\n **/\n placeholder: null,\n /**\n Number of rows in textarea\n\n @property rows\n @type integer\n @default 7\n **/ \n rows: 7 \n });\n\n $.fn.editabletypes.textarea = Textarea;\n\n}(window.jQuery));\n\n/**\nSelect (dropdown)\n\n@class select\n@extends list\n@final\n@example\n\n\n**/\n(function ($) {\n \"use strict\";\n \n var Select = function (options) {\n this.init('select', options, Select.defaults);\n };\n\n $.fn.editableutils.inherit(Select, $.fn.editabletypes.list);\n\n $.extend(Select.prototype, {\n renderList: function() {\n this.$input.empty();\n var escape = this.options.escape;\n\n var fillItems = function($el, data) {\n var attr;\n if($.isArray(data)) {\n for(var i=0; i