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