');
-
+
//insert form into container body
if(this.tip().is(this.innerCss)) {
//for inline container
- this.tip().append(this.$form);
+ this.tip().append(this.$form);
} else {
this.tip().find(this.innerCss).append(this.$form);
- }
-
+ }
+
//render form
this.renderForm();
},
@@ -1123,79 +1123,79 @@ Applied as jQuery method.
Hides container with form
@method hide()
@param {string} reason Reason caused hiding. Can be
, ,![]()
if(typeof(this.input.isEmpty) === 'function') {
- this.isEmpty = this.input.isEmpty(this.$element);
+ this.isEmpty = this.input.isEmpty(this.$element);
} else {
this.isEmpty = $.trim(this.$element.html()) === '';
}
- }
-
+ }
+
//emptytext shown only for enabled
if(!this.options.disabled) {
if (this.isEmpty) {
@@ -1772,18 +1772,18 @@ Makes editable any HTML element on the page. Applied as jQuery method.
}
}
}
- },
-
+ },
+
/**
Shows container with form
@method show()
@param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true.
- **/
+ **/
show: function (closeAll) {
if(this.options.disabled) {
return;
}
-
+
//init editableContainer: popover, tooltip, inline, etc..
if(!this.container) {
var containerOptions = $.extend({}, this.options, {
@@ -1791,32 +1791,32 @@ Makes editable any HTML element on the page. Applied as jQuery method.
input: this.input //pass input to form (as it is already created)
});
this.$element.editableContainer(containerOptions);
- //listen `save` event
+ //listen `save` Events
this.$element.on("save.internal", $.proxy(this.save, this));
- this.container = this.$element.data('editableContainer');
+ this.container = this.$element.data('editableContainer');
} else if(this.container.tip().is(':visible')) {
return;
- }
-
+ }
+
//show container
this.container.show(closeAll);
},
-
+
/**
Hides container with form
@method hide()
- **/
- hide: function () {
- if(this.container) {
+ **/
+ hide: function () {
+ if(this.container) {
this.container.hide();
}
},
-
+
/**
Toggles container visibility (show / hide)
@method toggle()
@param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true.
- **/
+ **/
toggle: function(closeAll) {
if(this.container && this.container.tip().is(':visible')) {
this.hide();
@@ -1824,59 +1824,59 @@ Makes editable any HTML element on the page. Applied as jQuery method.
this.show(closeAll);
}
},
-
+
/*
* called when form was submitted
- */
+ */
save: function(e, params) {
//mark element with unsaved class if needed
if(this.options.unsavedclass) {
/*
Add unsaved css to element if:
- - url is not user's function
+ - url is not user's function
- value was not sent to server
- params.response === undefined, that means data was not sent
- - value changed
+ - value changed
*/
var sent = false;
sent = sent || typeof this.options.url === 'function';
- sent = sent || this.options.display === false;
- sent = sent || params.response !== undefined;
- sent = sent || (this.options.savenochange && this.input.value2str(this.value) !== this.input.value2str(params.newValue));
-
+ sent = sent || this.options.display === false;
+ sent = sent || params.response !== undefined;
+ sent = sent || (this.options.savenochange && this.input.value2str(this.value) !== this.input.value2str(params.newValue));
+
if(sent) {
- this.$element.removeClass(this.options.unsavedclass);
+ this.$element.removeClass(this.options.unsavedclass);
} else {
- this.$element.addClass(this.options.unsavedclass);
+ this.$element.addClass(this.options.unsavedclass);
}
}
-
+
//highlight when saving
if(this.options.highlight) {
var $e = this.$element,
bgColor = $e.css('background-color');
-
+
$e.css('background-color', this.options.highlight);
setTimeout(function(){
if(bgColor === 'transparent') {
- bgColor = '';
+ bgColor = '';
}
$e.css('background-color', bgColor);
$e.addClass('editable-bg-transition');
setTimeout(function(){
- $e.removeClass('editable-bg-transition');
+ $e.removeClass('editable-bg-transition');
}, 1700);
}, 10);
}
-
+
//set new value
this.setValue(params.newValue, false, params.response);
-
- /**
+
+ /**
Fired when new value was submitted. You can use
+
- **/
+ **/
selector: null,
/**
Color used to highlight element after update. Implemented via CSS3 transition, works in modern browsers.
-
- @property highlight
+
+ @property highlight
@type string|boolean
- @since 1.4.5
- @default #FFFF80
+ @since 1.4.5
+ @default #FFFF80
**/
highlight: '#FFFF80'
};
-
+
}(window.jQuery));
/**
@@ -2336,7 +2336,7 @@ To create your own input you can inherit from this class.
/**
Initializes input
- @method init()
+ @method init()
**/
init: function(type, options, defaults) {
this.type = type;
@@ -2347,12 +2347,12 @@ To create your own input you can inherit from this class.
this method called before render to init $tpl that is inserted in DOM
*/
prerender: function() {
- this.$tpl = $(this.options.tpl); //whole tpl as jquery object
+ this.$tpl = $(this.options.tpl); //whole tpl as jquery object
this.$input = this.$tpl; //control itself, can be changed in render method
this.$clear = null; //clear button
- this.error = null; //error message, if input cannot be rendered
+ this.error = null; //error message, if input cannot be rendered
},
-
+
/**
Renders input from tpl. Can return jQuery deferred object.
Can be overwritten in child objects
@@ -2361,10 +2361,10 @@ To create your own input you can inherit from this class.
**/
render: function() {
- },
+ },
/**
- Sets element's html by value.
+ Sets element's html by value.
@method value2html(value, element)
@param {mixed} value
@@ -2388,13 +2388,13 @@ To create your own input you can inherit from this class.
/**
Converts value to string (for internal compare). For submitting to server used value2submit().
- @method value2str(value)
+ @method value2str(value)
@param {mixed} value
@returns {string}
**/
value2str: function(value) {
return value;
- },
+ },
/**
Converts string received from server into value. Usually from `data-value` attribute.
@@ -2405,12 +2405,12 @@ To create your own input you can inherit from this class.
**/
str2value: function(str) {
return str;
- },
-
+ },
+
/**
Converts value for submitting to server. Result can be string or object.
- @method value2submit(value)
+ @method value2submit(value)
@param {mixed} value
@returns {mixed}
**/
@@ -2421,7 +2421,7 @@ To create your own input you can inherit from this class.
/**
Sets value of input.
- @method value2input(value)
+ @method value2input(value)
@param {mixed} value
**/
value2input: function(value) {
@@ -2431,16 +2431,16 @@ To create your own input you can inherit from this class.
/**
Returns value of input. Value can be object (e.g. datepicker)
- @method input2value()
+ @method input2value()
**/
- input2value: function() {
+ input2value: function() {
return this.$input.val();
- },
+ },
/**
Activates input. For text it sets focus.
- @method activate()
+ @method activate()
**/
activate: function() {
if(this.$input.is(':visible')) {
@@ -2451,8 +2451,8 @@ To create your own input you can inherit from this class.
/**
Creates input.
- @method clear()
- **/
+ @method clear()
+ **/
clear: function() {
this.$input.val(null);
},
@@ -2463,79 +2463,79 @@ To create your own input you can inherit from this class.
escape: function(str) {
return $('save|cancel|onblur|nochange|undefined (=manual)
- **/
- hide: function(reason) {
+ **/
+ hide: function(reason) {
if(!this.tip() || !this.tip().is(':visible') || !this.$element.hasClass('editable-open')) {
return;
}
-
+
//if form is saving value, schedule hide
if(this.$form.data('editableform').isSaving) {
this.delayedHide = {reason: reason};
- return;
+ return;
} else {
this.delayedHide = false;
}
- this.$element.removeClass('editable-open');
+ this.$element.removeClass('editable-open');
this.innerHide();
/**
- Fired when container was hidden. It occurs on both save or cancel.
- **Note:** Bootstrap popover has own `hidden` event that now cannot be separated from x-editable's one.
- The workaround is to check `arguments.length` that is always `2` for x-editable.
+ Fired when container was hidden. It occurs on both save or cancel.
+ **Note:** Bootstrap popover has own `hidden` Events that now cannot be separated from x-editable's one.
+ The workaround is to check `arguments.length` that is always `2` for x-editable.
- @event hidden
- @param {object} event event object
+ @Events hidden
+ @param {object} Events Events object
@param {string} reason Reason caused hiding. Can be save|cancel|onblur|nochange|manual
@example
$('#username').on('hidden', function(e, reason) {
if(reason === 'save' || reason === 'cancel') {
//auto-open next editable
$(this).closest('tr').next().find('.editable').editable('show');
- }
+ }
});
**/
- this.$element.triggerHandler('hidden', reason || 'manual');
+ this.$element.triggerHandler('hidden', reason || 'manual');
},
/* internal show method. To be overwritten in child classes */
innerShow: function () {
-
- },
+
+ },
/* internal hide method. To be overwritten in child classes */
innerHide: function () {
},
-
+
/**
Toggles container visibility (show / hide)
@method toggle()
@param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true.
- **/
+ **/
toggle: function(closeAll) {
if(this.container() && this.tip() && this.tip().is(':visible')) {
this.hide();
} else {
this.show(closeAll);
- }
+ }
},
/*
Updates the position of container when content changed.
@method setPosition()
- */
+ */
setPosition: function() {
//tbd in child class
},
save: function(e, params) {
- /**
+ /**
Fired when new value was submitted. You can use $(this).data('editableContainer') inside handler to access to editableContainer instance
-
- @event save
- @param {Object} event event object
+
+ @Events save
+ @param {Object} Events Events object
@param {Object} params additional params
@param {mixed} params.newValue submitted value
@param {Object} params.response ajax response
@@ -1206,36 +1206,36 @@ Applied as jQuery method.
if(params.response && params.response.success) {
alert('value: ' + params.newValue + ' with pk: ' + pk + ' saved!');
} else {
- alert('error!');
- }
+ alert('error!');
+ }
});
- **/
+ **/
this.$element.triggerHandler('save', params);
-
+
//hide must be after trigger, as saving value may require methods of plugin, applied to input
this.hide('save');
},
/**
Sets new option
-
+
@method option(key, value)
- @param {string} key
- @param {mixed} value
- **/
+ @param {string} key
+ @param {mixed} value
+ **/
option: function(key, value) {
this.options[key] = value;
if(key in this.containerOptions) {
this.containerOptions[key] = value;
- this.setContainerOption(key, value);
+ this.setContainerOption(key, value);
} else {
this.formOptions[key] = value;
if(this.$form) {
- this.$form.editableform('option', key, value);
+ this.$form.editableform('option', key, value);
}
}
},
-
+
setContainerOption: function(key, value) {
this.call('option', key, value);
},
@@ -1243,21 +1243,21 @@ Applied as jQuery method.
/**
Destroys the container instance
@method destroy()
- **/
+ **/
destroy: function() {
this.hide();
this.innerDestroy();
this.$element.off('destroyed');
this.$element.removeData('editableContainer');
},
-
+
/* to be overwritten in child classes */
innerDestroy: function() {
-
- },
-
+
+ },
+
/*
- Closes other containers except one related to passed element.
+ Closes other containers except one related to passed element.
Other containers can be cancelled or submitted (depends on onblur option)
*/
closeOthers: function(element) {
@@ -1267,14 +1267,14 @@ Applied as jQuery method.
return;
}
- //otherwise cancel or submit all open containers
+ //otherwise cancel or submit all open containers
var $el = $(el),
ec = $el.data('editableContainer');
if(!ec) {
- return;
+ return;
}
-
+
if(ec.options.onblur === 'cancel') {
$el.data('editableContainer').hide('onblur');
} else if(ec.options.onblur === 'submit') {
@@ -1283,22 +1283,22 @@ Applied as jQuery method.
});
},
-
+
/**
Activates input of visible container (e.g. set focus)
@method activate()
- **/
+ **/
activate: function() {
if(this.tip && this.tip().is(':visible') && this.$form) {
- this.$form.data('editableform').input.activate();
+ this.$form.data('editableform').input.activate();
}
- }
+ }
};
/**
jQuery method to initialize editableContainer.
-
+
@method $().editableContainer(options)
@params {Object} options
@example
@@ -1308,25 +1308,25 @@ Applied as jQuery method.
pk: 1,
value: 'hello'
});
- **/
+ **/
$.fn.editableContainer = function (option) {
var args = arguments;
return this.each(function () {
var $this = $(this),
- dataKey = 'editableContainer',
+ dataKey = 'editableContainer',
data = $this.data(dataKey),
options = typeof option === 'object' && option,
- Constructor = (options.mode === 'inline') ? Inline : Popup;
+ Constructor = (options.mode === 'inline') ? Inline : Popup;
if (!data) {
$this.data(dataKey, (data = new Constructor(this, options)));
}
- if (typeof option === 'string') { //call method
+ if (typeof option === 'string') { //call method
data[option].apply(data, Array.prototype.slice.call(args, 1));
- }
+ }
});
- };
+ };
//store constructors
$.fn.editableContainer.Popup = Popup;
@@ -1337,61 +1337,61 @@ Applied as jQuery method.
/**
Initial value of form input
- @property value
+ @property value
@type mixed
@default null
@private
- **/
+ **/
value: null,
/**
Placement of container relative to element. Can be top|right|bottom|left. Not used for inline container.
- @property placement
+ @property placement
@type string
@default 'top'
- **/
+ **/
placement: 'top',
/**
Whether to hide container on save/cancel.
- @property autohide
+ @property autohide
@type boolean
@default true
- @private
- **/
+ @private
+ **/
autohide: true,
/**
- Action when user clicks outside the container. Can be cancel|submit|ignore.
- Setting ignore allows to have several containers open.
+ Action when user clicks outside the container. Can be cancel|submit|ignore.
+ Setting ignore allows to have several containers open.
- @property onblur
+ @property onblur
@type string
@default 'cancel'
@since 1.1.1
- **/
+ **/
onblur: 'cancel',
-
+
/**
Animation speed (inline mode only)
- @property anim
+ @property anim
@type string
@default false
- **/
+ **/
anim: false,
-
+
/**
- Mode of editable, can be `popup` or `inline`
-
- @property mode
- @type string
+ Mode of editable, can be `popup` or `inline`
+
+ @property mode
+ @type string
@default 'popup'
- @since 1.4.0
- **/
- mode: 'popup'
+ @since 1.4.0
+ **/
+ mode: 'popup'
};
- /*
- * workaround to have 'destroyed' event to destroy popover when element is destroyed
+ /*
+ * workaround to have 'destroyed' Events to destroy popover when element is destroyed
* see http://stackoverflow.com/questions/2200494/jquery-trigger-event-when-an-element-is-removed-from-the-dom
*/
jQuery.event.special.destroyed = {
@@ -1400,61 +1400,61 @@ Applied as jQuery method.
o.handler();
}
}
- };
+ };
}(window.jQuery));
/**
-* Editable Inline
+* Editable Inline
* ---------------------
*/
(function ($) {
"use strict";
-
+
//copy prototype from EditableContainer
//extend methods
$.extend($.fn.editableContainer.Inline.prototype, $.fn.editableContainer.Popup.prototype, {
containerName: 'editableform',
innerCss: '.editable-inline',
containerClass: 'editable-container editable-inline', //css class applied to container element
-
+
initContainer: function(){
//container is element
this.$tip = $('');
-
+
//convert anim to miliseconds (int)
if(!this.options.anim) {
this.options.anim = 0;
- }
+ }
},
-
+
splitOptions: function() {
//all options are passed to form
this.containerOptions = {};
this.formOptions = this.options;
},
-
+
tip: function() {
- return this.$tip;
+ return this.$tip;
},
-
+
innerShow: function () {
this.$element.hide();
this.tip().insertAfter(this.$element).show();
- },
-
+ },
+
innerHide: function () {
this.$tip.hide(this.options.anim, $.proxy(function() {
this.$element.show();
this.innerDestroy();
- }, this));
+ }, this));
},
-
+
innerDestroy: function() {
if(this.tip()) {
this.tip().empty().remove();
}
- }
+ }
});
}(window.jQuery));
@@ -1469,14 +1469,14 @@ Makes editable any HTML element on the page. Applied as jQuery method.
var Editable = function (element, options) {
this.$element = $(element);
- //data-* has more priority over js options: because dynamically created elements may change data-*
- this.options = $.extend({}, $.fn.editable.defaults, options, $.fn.editableutils.getConfigData(this.$element));
+ //data-* has more priority over js options: because dynamically created elements may change data-*
+ this.options = $.extend({}, $.fn.editable.defaults, options, $.fn.editableutils.getConfigData(this.$element));
if(this.options.selector) {
this.initLive();
} else {
this.init();
}
-
+
//check for transition support
if(this.options.highlight && !$.fn.editableutils.supportsTransitions()) {
this.options.highlight = false;
@@ -1484,21 +1484,21 @@ Makes editable any HTML element on the page. Applied as jQuery method.
};
Editable.prototype = {
- constructor: Editable,
+ constructor: Editable,
init: function () {
- var isValueByText = false,
+ var isValueByText = false,
doAutotext, finalize;
//name
this.options.name = this.options.name || this.$element.attr('id');
-
+
//create input of specified type. Input needed already here to convert value for initial display (e.g. show text by id for select)
//also we set scope option to have access to element inside input specific callbacks (e. g. source as function)
- this.options.scope = this.$element[0];
+ this.options.scope = this.$element[0];
this.input = $.fn.editableutils.createInput(this.options);
if(!this.input) {
- return;
- }
+ return;
+ }
//set value from settings or by element's text
if (this.options.value === undefined || this.options.value === null) {
@@ -1507,25 +1507,25 @@ Makes editable any HTML element on the page. Applied as jQuery method.
} else {
/*
value can be string when received from 'data-value' attribute
- for complext objects value can be set as json string in data-value attribute,
+ for complext objects value can be set as json string in data-value attribute,
e.g. data-value="{city: 'Moscow', street: 'Lenina'}"
*/
- this.options.value = $.fn.editableutils.tryParseJson(this.options.value, true);
+ this.options.value = $.fn.editableutils.tryParseJson(this.options.value, true);
if(typeof this.options.value === 'string') {
this.value = this.input.str2value(this.options.value);
} else {
this.value = this.options.value;
}
}
-
+
//add 'editable' class to every editable element
this.$element.addClass('editable');
-
+
//specifically for "textarea" add class .editable-pre-wrapped to keep linebreaks
if(this.input.type === 'textarea') {
this.$element.addClass('editable-pre-wrapped');
}
-
+
//attach handler activating editable. In disabled mode it just prevent default action (useful for links)
if(this.options.toggle !== 'manual') {
this.$element.addClass('editable-click');
@@ -1534,10 +1534,10 @@ Makes editable any HTML element on the page. Applied as jQuery method.
if(!this.options.disabled) {
e.preventDefault();
}
-
- //stop propagation not required because in document click handler it checks event target
+
+ //stop propagation not required because in document click handler it checks Events target
//e.stopPropagation();
-
+
if(this.options.toggle === 'mouseenter') {
//for hover only show container
this.show();
@@ -1550,13 +1550,13 @@ Makes editable any HTML element on the page. Applied as jQuery method.
} else {
this.$element.attr('tabindex', -1); //do not stop focus on element when toggled manually
}
-
+
//if display is function it's far more convinient to have autotext = always to render correctly on init
//see https://github.com/vitalets/x-editable-yii/issues/34
if(typeof this.options.display === 'function') {
this.options.autotext = 'always';
}
-
+
//check conditions for autotext:
switch(this.options.autotext) {
case 'always':
@@ -1575,14 +1575,14 @@ Makes editable any HTML element on the page. Applied as jQuery method.
if(this.options.disabled) {
this.disable();
} else {
- this.enable();
+ this.enable();
}
- /**
- Fired when element was initialized by `$().editable()` method.
- Please note that you should setup `init` handler **before** applying `editable`.
-
- @event init
- @param {Object} event event object
+ /**
+ Fired when element was initialized by `$().editable()` method.
+ Please note that you should setup `init` handler **before** applying `editable`.
+
+ @Events init
+ @param {Object} Events Events object
@param {Object} editable editable instance (as here it cannot accessed via data('editable'))
@since 1.2.0
@example
@@ -1590,142 +1590,142 @@ Makes editable any HTML element on the page. Applied as jQuery method.
alert('initialized ' + editable.options.name);
});
$('#username').editable();
- **/
+ **/
this.$element.triggerHandler('init', this);
}, this));
},
/*
- Initializes parent element for live editables
+ Initializes parent element for live editables
*/
initLive: function() {
- //store selector
+ //store selector
var selector = this.options.selector;
//modify options for child elements
- this.options.selector = false;
+ this.options.selector = false;
this.options.autotext = 'never';
//listen toggle events
this.$element.on(this.options.toggle + '.editable', selector, $.proxy(function(e){
var $target = $(e.target);
if(!$target.data('editable')) {
//if delegated element initially empty, we need to clear it's text (that was manually set to `empty` by user)
- //see https://github.com/vitalets/x-editable/issues/137
+ //see https://github.com/vitalets/x-editable/issues/137
if($target.hasClass(this.options.emptyclass)) {
$target.empty();
}
$target.editable(this.options).trigger(e);
}
- }, this));
+ }, this));
},
-
+
/*
Renders value into element's text.
Can call custom display method from options.
Can return deferred object.
@method render()
@param {mixed} response server response (if exist) to pass into display function
- */
+ */
render: function(response) {
//do not display anything
if(this.options.display === false) {
return;
}
-
+
//if input has `value2htmlFinal` method, we pass callback in third param to be called when source is loaded
if(this.input.value2htmlFinal) {
- return this.input.value2html(this.value, this.$element[0], this.options.display, response);
- //if display method defined --> use it
+ return this.input.value2html(this.value, this.$element[0], this.options.display, response);
+ //if display method defined --> use it
} else if(typeof this.options.display === 'function') {
return this.options.display.call(this.$element[0], this.value, response);
- //else use input's original value2html() method
+ //else use input's original value2html() method
} else {
- return this.input.value2html(this.value, this.$element[0]);
+ return this.input.value2html(this.value, this.$element[0]);
}
},
-
+
/**
Enables editable
@method enable()
- **/
+ **/
enable: function() {
this.options.disabled = false;
this.$element.removeClass('editable-disabled');
this.handleEmpty(this.isEmpty);
if(this.options.toggle !== 'manual') {
- if(this.$element.attr('tabindex') === '-1') {
- this.$element.removeAttr('tabindex');
+ if(this.$element.attr('tabindex') === '-1') {
+ this.$element.removeAttr('tabindex');
}
}
},
-
+
/**
Disables editable
@method disable()
- **/
+ **/
disable: function() {
- this.options.disabled = true;
- this.hide();
+ this.options.disabled = true;
+ this.hide();
this.$element.addClass('editable-disabled');
this.handleEmpty(this.isEmpty);
//do not stop focus on this element
- this.$element.attr('tabindex', -1);
+ this.$element.attr('tabindex', -1);
},
-
+
/**
Toggles enabled / disabled state of editable element
@method toggleDisabled()
- **/
+ **/
toggleDisabled: function() {
if(this.options.disabled) {
this.enable();
- } else {
- this.disable();
+ } else {
+ this.disable();
}
- },
-
+ },
+
/**
Sets new option
-
+
@method option(key, value)
@param {string|object} key option name or object with several options
@param {mixed} value option new value
@example
$('.editable').editable('option', 'pk', 2);
- **/
+ **/
option: function(key, value) {
//set option(s) by object
if(key && typeof key === 'object') {
$.each(key, $.proxy(function(k, v){
- this.option($.trim(k), v);
- }, this));
+ this.option($.trim(k), v);
+ }, this));
return;
}
- //set option by string
- this.options[key] = value;
-
+ //set option by string
+ this.options[key] = value;
+
//disabled
if(key === 'disabled') {
return value ? this.disable() : this.enable();
- }
-
+ }
+
//value
if(key === 'value') {
this.setValue(value);
}
-
- //transfer new option to container!
+
+ //transfer new option to container!
if(this.container) {
- this.container.option(key, value);
+ this.container.option(key, value);
}
-
+
//pass option to input directly (as it points to the same in form)
if(this.input.option) {
this.input.option(key, value);
}
-
- },
-
+
+ },
+
/*
* set emptytext if element is empty
*/
@@ -1735,24 +1735,24 @@ Makes editable any HTML element on the page. Applied as jQuery method.
return;
}
- /*
+ /*
isEmpty may be set directly as param of method.
- It is required when we enable/disable field and can't rely on content
+ It is required when we enable/disable field and can't rely on content
as node content is text: "Empty" that is not empty %)
*/
- if(isEmpty !== undefined) {
+ if(isEmpty !== undefined) {
this.isEmpty = isEmpty;
} else {
//detect empty
//for some inputs we need more smart check
//e.g. wysihtml5 may have , ,
$(this).data('editable') to access to editable instance
-
- @event save
- @param {Object} event event object
+
+ @Events save
+ @param {Object} Events Events object
@param {Object} params additional params
@param {mixed} params.newValue submitted value
@param {Object} params.response ajax response
@@ -1885,7 +1885,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
alert('Saved value: ' + params.newValue);
});
**/
- //event itself is triggered by editableContainer. Description here is only for documentation
+ //Events itself is triggered by editableContainer. Description here is only for documentation
},
validate: function () {
@@ -1893,13 +1893,13 @@ Makes editable any HTML element on the page. Applied as jQuery method.
return this.options.validate.call(this, this.value);
}
},
-
+
/**
Sets new value of editable
@method setValue(value, convertStr)
- @param {mixed} value new value
+ @param {mixed} value new value
@param {boolean} convertStr whether to convert value from string to internal format
- **/
+ **/
setValue: function(value, convertStr, response) {
if(convertStr) {
this.value = this.input.str2value(value);
@@ -1914,40 +1914,40 @@ Makes editable any HTML element on the page. Applied as jQuery method.
this.handleEmpty();
}, this));
},
-
+
/**
Activates input of visible container (e.g. set focus)
@method activate()
- **/
+ **/
activate: function() {
if(this.container) {
- this.container.activate();
+ this.container.activate();
}
},
-
+
/**
Removes editable feature from element
@method destroy()
- **/
+ **/
destroy: function() {
this.disable();
-
+
if(this.container) {
- this.container.destroy();
+ this.container.destroy();
}
-
+
this.input.destroy();
if(this.options.toggle !== 'manual') {
this.$element.removeClass('editable-click');
this.$element.off(this.options.toggle + '.editable');
- }
-
+ }
+
this.$element.off("save.internal");
-
+
this.$element.removeClass('editable editable-open editable-disabled');
this.$element.removeData('editable');
- }
+ }
};
/* EDITABLE PLUGIN DEFINITION
@@ -1955,7 +1955,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
/**
jQuery method to initialize editable element.
-
+
@method $().editable(options)
@params {Object} options
@example
@@ -1971,7 +1971,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
switch (option) {
/**
Runs client-side validation for all matched editables
-
+
@method validate()
@returns {Object} validation errors map
@example
@@ -1992,11 +1992,11 @@ Makes editable any HTML element on the page. Applied as jQuery method.
return result;
/**
- Returns current values of editable elements.
- Note that it returns an **object** with name-value pairs, not a value itself. It allows to get data from several elements.
+ Returns current values of editable elements.
+ Note that it returns an **object** with name-value pairs, not a value itself. It allows to get data from several elements.
If value of some editable is `null` or `undefined` it is excluded from result object.
- When param `isSingle` is set to **true** - it is supposed you have single element and will return value of editable instead of object.
-
+ When param `isSingle` is set to **true** - it is supposed you have single element and will return value of editable instead of object.
+
@method getValue()
@param {bool} isSingle whether to return just value of single element
@returns {Object} object of element names and values
@@ -2009,7 +2009,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
}
//isSingle = true
$('#username').editable('getValue', true);
- //result "superuser"
+ //result "superuser"
**/
case 'getValue':
if(arguments.length === 2 && arguments[1] === true) { //isSingle = true
@@ -2025,18 +2025,18 @@ Makes editable any HTML element on the page. Applied as jQuery method.
return result;
/**
- This method collects values from several editable elements and submit them all to server.
- Internally it runs client-side validation for all fields and submits only in case of success.
- See creating new records for details.
+ This method collects values from several editable elements and submit them all to server.
+ Internally it runs client-side validation for all fields and submits only in case of success.
+ See creating new records for details.
Since 1.5.1 `submit` can be applied to single element to send data programmatically. In that case
- `url`, `success` and `error` is taken from initial options and you can just call `$('#username').editable('submit')`.
-
+ `url`, `success` and `error` is taken from initial options and you can just call `$('#username').editable('submit')`.
+
@method submit(options)
- @param {object} options
- @param {object} options.url url to submit data
+ @param {object} options
+ @param {object} options.url url to submit data
@param {object} options.data additional data to submit
@param {object} options.ajaxOptions additional ajax options
- @param {function} options.error(obj) error handler
+ @param {function} options.error(obj) error handler
@param {function} options.success(obj,config) success handler
@returns {Object} jQuery object
**/
@@ -2048,7 +2048,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
// validation ok
if($.isEmptyObject(errors)) {
var ajaxOptions = {};
-
+
// for single element use url, success etc from options
if($elems.length === 1) {
var editable = $elems.data('editable');
@@ -2056,61 +2056,61 @@ Makes editable any HTML element on the page. Applied as jQuery method.
var params = {
name: editable.options.name || '',
value: editable.input.value2submit(editable.value),
- pk: (typeof editable.options.pk === 'function') ?
- editable.options.pk.call(editable.options.scope) :
- editable.options.pk
+ pk: (typeof editable.options.pk === 'function') ?
+ editable.options.pk.call(editable.options.scope) :
+ editable.options.pk
};
//additional params
if(typeof editable.options.params === 'function') {
- params = editable.options.params.call(editable.options.scope, params);
+ params = editable.options.params.call(editable.options.scope, params);
} else {
//try parse json in single quotes (from data-params attribute)
- editable.options.params = $.fn.editableutils.tryParseJson(editable.options.params, true);
+ editable.options.params = $.fn.editableutils.tryParseJson(editable.options.params, true);
$.extend(params, editable.options.params);
}
ajaxOptions = {
url: editable.options.url,
data: params,
- type: 'POST'
+ type: 'POST'
};
-
- // use success / error from options
+
+ // use success / error from options
config.success = config.success || editable.options.success;
config.error = config.error || editable.options.error;
-
+
// multiple elements
} else {
- var values = this.editable('getValue');
-
+ var values = this.editable('getValue');
+
ajaxOptions = {
url: config.url,
- data: values,
+ data: values,
type: 'POST'
- };
- }
+ };
+ }
// ajax success callabck (response 200 OK)
ajaxOptions.success = typeof config.success === 'function' ? function(response) {
config.success.call($elems, response, config);
} : $.noop;
-
+
// ajax error callabck
ajaxOptions.error = typeof config.error === 'function' ? function() {
config.error.apply($elems, arguments);
} : $.noop;
-
- // extend ajaxOptions
- if(config.ajaxOptions) {
+
+ // extend ajaxOptions
+ if(config.ajaxOptions) {
$.extend(ajaxOptions, config.ajaxOptions);
}
-
- // extra data
+
+ // extra data
if(config.data) {
$.extend(ajaxOptions.data, config.data);
- }
-
+ }
+
// perform ajax request
$.ajax(ajaxOptions);
} else { //client-side validation error
@@ -2123,85 +2123,85 @@ Makes editable any HTML element on the page. Applied as jQuery method.
//return jquery object
return this.each(function () {
- var $this = $(this),
- data = $this.data(datakey),
+ var $this = $(this),
+ data = $this.data(datakey),
options = typeof option === 'object' && option;
//for delegated targets do not store `editable` object for element
//it's allows several different selectors.
- //see: https://github.com/vitalets/x-editable/issues/312
+ //see: https://github.com/vitalets/x-editable/issues/312
if(options && options.selector) {
data = new Editable(this, options);
- return;
- }
-
+ return;
+ }
+
if (!data) {
$this.data(datakey, (data = new Editable(this, options)));
}
- if (typeof option === 'string') { //call method
+ if (typeof option === 'string') { //call method
data[option].apply(data, Array.prototype.slice.call(args, 1));
- }
+ }
});
- };
-
+ };
+
$.fn.editable.defaults = {
/**
Type of input. Can be text|textarea|select|date|checklist and more
- @property type
+ @property type
@type string
@default 'text'
**/
- type: 'text',
+ type: 'text',
/**
Sets disabled state of editable
- @property disabled
+ @property disabled
@type boolean
@default false
- **/
+ **/
disabled: false,
/**
- How to toggle editable. Can be click|dblclick|mouseenter|manual.
- When set to manual you should manually call show/hide methods of editable.
- **Note**: if you call show or toggle inside **click** handler of some DOM element,
+ How to toggle editable. Can be click|dblclick|mouseenter|manual.
+ When set to manual you should manually call show/hide methods of editable.
+ **Note**: if you call show or toggle inside **click** handler of some DOM element,
you need to apply e.stopPropagation() because containers are being closed on any click on document.
-
+
@example
$('#edit-button').click(function(e) {
e.stopPropagation();
$('#username').editable('toggle');
});
- @property toggle
+ @property toggle
@type string
@default 'click'
- **/
+ **/
toggle: 'click',
/**
Text shown when element is empty.
- @property emptytext
+ @property emptytext
@type string
@default 'Empty'
- **/
+ **/
emptytext: 'Empty',
/**
Allows to automatically set element's text based on it's value. Can be auto|always|never. Useful for select and date.
- 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'.
- auto - text will be automatically set only if element is empty.
+ 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'.
+ auto - text will be automatically set only if element is empty.
always|never - always(never) try to set element's text.
- @property autotext
+ @property autotext
@type string
@default 'auto'
- **/
- autotext: 'auto',
+ **/
+ autotext: 'auto',
/**
- Initial value of input. If not set, taken from element's text.
- Note, that if element's text is empty - text is automatically generated from value and can be customized (see `autotext` option).
+ Initial value of input. If not set, taken from element's text.
+ Note, that if element's text is empty - text is automatically generated from value and can be customized (see `autotext` option).
For example, to display currency sign:
@example
@@ -2210,34 +2210,34 @@ Makes editable any HTML element on the page. Applied as jQuery method.
...
display: function(value) {
$(this).text(value + '$');
- }
- })
+ }
+ })
-
- @property value
+
+ @property value
@type mixed
@default element's text
**/
value: null,
/**
- Callback to perform custom displaying of value in element's text.
- If `null`, default input's display used.
- If `false`, no displaying methods will be called, element's text will never change.
- Runs under element's scope.
- _**Parameters:**_
-
+ Callback to perform custom displaying of value in element's text.
+ If `null`, default input's display used.
+ If `false`, no displaying methods will be called, element's text will never change.
+ Runs under element's scope.
+ _**Parameters:**_
+
* `value` current value to be displayed
* `response` server response (if display called after ajax submit), since 1.4.0
-
- For _inputs with source_ (select, checklist) parameters are different:
-
+
+ For _inputs with source_ (select, checklist) parameters are different:
+
* `value` current value to be displayed
- * `sourceData` array of items for current input (e.g. dropdown items)
+ * `sourceData` array of items for current input (e.g. dropdown items)
* `response` server response (if display called after ajax submit), since 1.4.0
-
+
To get currently selected items use `$.fn.editableutils.itemsByValue(value, sourceData)`.
-
- @property display
+
+ @property display
@type function|boolean
@default null
@since 1.2.0
@@ -2246,46 +2246,46 @@ Makes editable any HTML element on the page. Applied as jQuery method.
//display checklist as comma-separated values
var html = [],
checked = $.fn.editableutils.itemsByValue(value, sourceData);
-
+
if(checked.length) {
$.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
$(this).html(html.join(', '));
} else {
- $(this).empty();
+ $(this).empty();
}
}
- **/
+ **/
display: null,
/**
Css class applied when editable text is empty.
- @property emptyclass
+ @property emptyclass
@type string
- @since 1.4.1
+ @since 1.4.1
@default editable-empty
- **/
+ **/
emptyclass: 'editable-empty',
/**
- Css class applied when value was stored but not sent to server (`pk` is empty or `send = 'never'`).
- You may set it to `null` if you work with editables locally and submit them together.
+ Css class applied when value was stored but not sent to server (`pk` is empty or `send = 'never'`).
+ You may set it to `null` if you work with editables locally and submit them together.
- @property unsavedclass
+ @property unsavedclass
@type string
- @since 1.4.1
+ @since 1.4.1
@default editable-unsaved
- **/
+ **/
unsavedclass: 'editable-unsaved',
/**
- If selector is provided, editable will be delegated to the specified targets.
- Usefull for dynamically generated DOM elements.
- **Please note**, that delegated targets can't be initialized with `emptytext` and `autotext` options,
- as they actually become editable only after first click.
- You should manually set class `editable-click` to these elements.
+ If selector is provided, editable will be delegated to the specified targets.
+ Usefull for dynamically generated DOM elements.
+ **Please note**, that delegated targets can't be initialized with `emptytext` and `autotext` options,
+ as they actually become editable only after first click.
+ You should manually set class `editable-click` to these elements.
Also, if element originally empty you should add class `editable-empty`, set `data-value=""` and write emptytext into element:
- @property selector
+ @property selector
@type string
- @since 1.4.1
+ @since 1.4.1
@default null
@example
-
+ ').text(str).html();
},
-
+
/**
attach handler to automatically submit form when value changed (useful when buttons not shown)
**/
autosubmit: function() {
-
+
},
-
+
/**
- Additional actions when destroying element
+ Additional actions when destroying element
**/
destroy: function() {
},
// -------- helper functions --------
- setClass: function() {
+ setClass: function() {
if(this.options.inputclass) {
- this.$input.addClass(this.options.inputclass);
- }
+ this.$input.addClass(this.options.inputclass);
+ }
},
setAttr: function(attr) {
if (this.options[attr] !== undefined && this.options[attr] !== null) {
this.$input.attr(attr, this.options[attr]);
- }
+ }
},
-
+
option: function(key, value) {
this.options[key] = value;
}
-
+
};
-
- AbstractInput.defaults = {
+
+ AbstractInput.defaults = {
/**
HTML template of input. Normally you should not change it.
- @property tpl
+ @property tpl
@type string
@default ''
- **/
+ **/
tpl: '',
/**
CSS class automatically applied to input
-
- @property inputclass
+
+ @property inputclass
@type string
@default null
- **/
+ **/
inputclass: null,
-
+
/**
- If `true` - html will be escaped in content of element via $.text() method.
- If `false` - html will not be escaped, $.html() used.
+ If `true` - html will be escaped in content of element via $.text() method.
+ If `false` - html will not be escaped, $.html() used.
When you use own `display` function, this option obviosly has no effect.
-
- @property escape
+
+ @property escape
@type boolean
@since 1.5.0
@default true
- **/
+ **/
escape: true,
-
+
//scope for external methods (e.g. source defined as function)
//for internal use only
scope: null,
-
+
//need to re-declare showbuttons here to get it's value from common config (passed only options existing in defaults)
- showbuttons: true
+ showbuttons: true
};
-
+
$.extend($.fn.editabletypes, {abstractinput: AbstractInput});
-
+
}(window.jQuery));
/**
@@ -2546,9 +2546,9 @@ List - abstract class for inputs that have source option loaded from js array or
**/
(function ($) {
"use strict";
-
+
var List = function (options) {
-
+
};
$.fn.editableutils.inherit(List, $.fn.editabletypes.abstractinput);
@@ -2572,28 +2572,28 @@ List - abstract class for inputs that have source option loaded from js array or
html2value: function (html) {
return null; //can't set value by text
},
-
+
value2html: function (value, element, display, response) {
var deferred = $.Deferred(),
success = function () {
if(typeof display === 'function') {
//custom display method
- display.call(element, value, this.sourceData, response);
+ display.call(element, value, this.sourceData, response);
} else {
this.value2htmlFinal(value, element);
}
deferred.resolve();
};
-
+
//for null value just call success without loading source
if(value === null) {
- success.call(this);
+ success.call(this);
} else {
this.onSourceReady(success, function () { deferred.resolve(); });
}
return deferred.promise();
- },
+ },
// ------------- additional functions ------------
@@ -2606,12 +2606,12 @@ List - abstract class for inputs that have source option loaded from js array or
//note: if function returns the same source as URL - sourceData will be taken from cahce and no extra request performed
} else {
source = this.options.source;
- }
-
+ }
+
//if allready loaded just call success
if(this.options.sourceCache && $.isArray(this.sourceData)) {
success.call(this);
- return;
+ return;
}
//try parse json in single quotes (for double quotes jquery does automatically)
@@ -2656,7 +2656,7 @@ List - abstract class for inputs that have source option loaded from js array or
cache.err_callbacks = [];
}
}
-
+
//ajaxOptions for source. Can be overwritten bt options.sourceOptions
var ajaxOptions = $.extend({
url: source,
@@ -2673,7 +2673,7 @@ List - abstract class for inputs that have source option loaded from js array or
//store result in cache
cache.sourceData = this.sourceData;
//run success callbacks for other fields waiting for this source
- $.each(cache.callbacks, function () { this.call(); });
+ $.each(cache.callbacks, function () { this.call(); });
}
this.doPrepend();
success.call(this);
@@ -2681,7 +2681,7 @@ List - abstract class for inputs that have source option loaded from js array or
error.call(this);
if(cache) {
//run error callbacks for other fields waiting for this source
- $.each(cache.err_callbacks, function () { this.call(); });
+ $.each(cache.err_callbacks, function () { this.call(); });
}
}
}, this),
@@ -2690,20 +2690,20 @@ List - abstract class for inputs that have source option loaded from js array or
if(cache) {
cache.loading = false;
//run error callbacks for other fields
- $.each(cache.err_callbacks, function () { this.call(); });
+ $.each(cache.err_callbacks, function () { this.call(); });
}
}, this)
}, this.options.sourceOptions);
-
+
//loading sourceData from server
$.ajax(ajaxOptions);
-
+
} else { //options as json/array
this.sourceData = this.makeArray(source);
-
+
if($.isArray(this.sourceData)) {
this.doPrepend();
- success.call(this);
+ success.call(this);
} else {
error.call(this);
}
@@ -2712,23 +2712,23 @@ List - abstract class for inputs that have source option loaded from js array or
doPrepend: function () {
if(this.options.prepend === null || this.options.prepend === undefined) {
- return;
+ return;
}
-
+
if(!$.isArray(this.prependData)) {
//run prepend if it is function (once)
if ($.isFunction(this.options.prepend)) {
this.options.prepend = this.options.prepend.call(this.options.scope);
}
-
+
//try parse json in single quotes
this.options.prepend = $.fn.editableutils.tryParseJson(this.options.prepend, true);
-
+
//convert prepend from string to object
if (typeof this.options.prepend === 'string') {
this.options.prepend = {'': this.options.prepend};
}
-
+
this.prependData = this.makeArray(this.options.prepend);
}
@@ -2743,13 +2743,13 @@ List - abstract class for inputs that have source option loaded from js array or
renderList: function() {
// this method should be overwritten in child class
},
-
+
/*
set element's html by value
*/
value2htmlFinal: function(value, element) {
// this method should be overwritten in child class
- },
+ },
/**
* convert data to array suitable for sourceData, e.g. [{value: 1, text: 'abc'}, {...}]
@@ -2757,13 +2757,13 @@ List - abstract class for inputs that have source option loaded from js array or
makeArray: function(data) {
var count, obj, result = [], item, iterateItem;
if(!data || typeof data === 'string') {
- return null;
+ return null;
}
if($.isArray(data)) { //array
- /*
+ /*
function to iterate inside item of array if item is object.
- Caclulates count of keys in item and store in obj.
+ Caclulates count of keys in item and store in obj.
*/
iterateItem = function (k, v) {
obj = {value: k, text: v};
@@ -2771,36 +2771,36 @@ List - abstract class for inputs that have source option loaded from js array or
return false;// exit from `each` if item has more than one key.
}
};
-
+
for(var i = 0; i < data.length; i++) {
- item = data[i];
+ item = data[i];
if(typeof item === 'object') {
count = 0; //count of keys inside item
$.each(item, iterateItem);
//case: [{val1: 'text1'}, {val2: 'text2} ...]
- if(count === 1) {
- result.push(obj);
+ if(count === 1) {
+ result.push(obj);
//case: [{value: 1, text: 'text1'}, {value: 2, text: 'text2'}, ...]
} else if(count > 1) {
//removed check of existance: item.hasOwnProperty('value') && item.hasOwnProperty('text')
if(item.children) {
- item.children = this.makeArray(item.children);
+ item.children = this.makeArray(item.children);
}
result.push(item);
}
} else {
//case: ['text1', 'text2' ...]
- result.push({value: item, text: item});
+ result.push({value: item, text: item});
}
}
} else { //case: {val1: 'text1', val2: 'text2, ...}
$.each(data, function (k, v) {
result.push({value: k, text: v});
- });
+ });
}
return result;
},
-
+
option: function(key, value) {
this.options[key] = value;
if(key === 'source') {
@@ -2808,69 +2808,69 @@ List - abstract class for inputs that have source option loaded from js array or
}
if(key === 'prepend') {
this.prependData = null;
- }
- }
+ }
+ }
- });
+ });
List.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
/**
- Source data for list.
- If **array** - it should be in format: `[{value: 1, text: "text1"}, {value: 2, text: "text2"}, ...]`
+ Source data for list.
+ If **array** - it should be in format: `[{value: 1, text: "text1"}, {value: 2, text: "text2"}, ...]`
For compability, object format is also supported: `{"1": "text1", "2": "text2" ...}` but it does not guarantee elements order.
-
- 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.
-
- If **function**, it should return data in format above (since 1.4.0).
-
- Since 1.4.1 key `children` supported to render OPTGROUP (for **select** input only).
- `[{text: "group1", children: [{value: 1, text: "text1"}, {value: 2, text: "text2"}]}, ...]`
-
- @property source
+ 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.
+
+ If **function**, it should return data in format above (since 1.4.0).
+
+ Since 1.4.1 key `children` supported to render OPTGROUP (for **select** input only).
+ `[{text: "group1", children: [{value: 1, text: "text1"}, {value: 2, text: "text2"}]}, ...]`
+
+
+ @property source
@type string | array | object | function
@default null
- **/
- source: null,
+ **/
+ source: null,
/**
Data automatically prepended to the beginning of dropdown list.
-
- @property prepend
+
+ @property prepend
@type string | array | object | function
@default false
- **/
+ **/
prepend: false,
/**
Error message when list cannot be loaded (e.g. ajax error)
-
- @property sourceError
+
+ @property sourceError
@type string
@default Error when loading list
- **/
+ **/
sourceError: 'Error when loading list',
/**
- if
true and source is **string url** - results will be cached for fields with the same source.
+ if true and source is **string url** - results will be cached for fields with the same source.
Usefull for editable column in grid to prevent extra requests.
-
- @property sourceCache
+
+ @property sourceCache
@type boolean
@default true
@since 1.2.0
- **/
+ **/
sourceCache: true,
/**
Additional ajax options to be used in $.ajax() when loading list from server.
Useful to send extra parameters (`data` key) or change request method (`type` key).
-
- @property sourceOptions
+
+ @property sourceOptions
@type object|function
@default null
@since 1.5.0
- **/
+ **/
sourceOptions: null
});
- $.fn.editabletypes.list = List;
+ $.fn.editabletypes.list = List;
}(window.jQuery));
@@ -2893,7 +2893,7 @@ $(function(){
**/
(function ($) {
"use strict";
-
+
var Text = function (options) {
this.init('text', options, Text.defaults);
};
@@ -2906,7 +2906,7 @@ $(function(){
this.setClass();
this.setAttr('placeholder');
},
-
+
activate: function() {
if(this.$input.is(':visible')) {
this.$input.focus();
@@ -2916,7 +2916,7 @@ $(function(){
}
}
},
-
+
//render clear button
renderClear: function() {
if (this.options.clear) {
@@ -2927,21 +2927,21 @@ $(function(){
//arrows, enter, tab, etc
if(~$.inArray(e.keyCode, [40,38,9,13,27])) {
return;
- }
+ }
clearTimeout(this.t);
var that = this;
this.t = setTimeout(function() {
that.toggleClear(e);
}, 100);
-
+
}, this))
.parent().css('position', 'relative');
-
- this.$clear.click($.proxy(this.clear, this));
- }
+
+ this.$clear.click($.proxy(this.clear, this));
+ }
},
-
+
postrender: function() {
/*
//now `clear` is positioned via css
@@ -2950,57 +2950,57 @@ $(function(){
// var h = this.$input.outerHeight(true) || 20,
var h = this.$clear.parent().height(),
delta = (h - this.$clear.height()) / 2;
-
+
//this.$clear.css({bottom: delta, right: delta});
}
- */
+ */
},
-
+
//show / hide clear button
toggleClear: function(e) {
if(!this.$clear) {
return;
}
-
+
var len = this.$input.val().length,
visible = this.$clear.is(':visible');
-
+
if(len && !visible) {
this.$clear.show();
- }
-
+ }
+
if(!len && visible) {
this.$clear.hide();
- }
+ }
},
-
+
clear: function() {
this.$clear.hide();
this.$input.val('').focus();
- }
+ }
});
Text.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
/**
- @property tpl
+ @property tpl
@default
- **/
+ **/
tpl: '',
/**
Placeholder attribute of input. Shown when input is empty.
- @property placeholder
+ @property placeholder
@type string
@default null
- **/
+ **/
placeholder: null,
-
+
/**
- Whether to show `clear` button
-
- @property clear
+ Whether to show `clear` button
+
+ @property clear
@type boolean
- @default true
+ @default true
**/
clear: true
});
@@ -3029,7 +3029,7 @@ $(function(){
**/
(function ($) {
"use strict";
-
+
var Textarea = function (options) {
this.init('textarea', options, Textarea.defaults);
};
@@ -3040,8 +3040,8 @@ $(function(){
render: function () {
this.setClass();
this.setAttr('placeholder');
- this.setAttr('rows');
-
+ this.setAttr('rows');
+
//ctrl + enter
this.$input.keydown(function (e) {
if (e.ctrlKey && e.which === 13) {
@@ -3049,9 +3049,9 @@ $(function(){
}
});
},
-
+
//using `white-space: pre-wrap` solves \n <--> BR conversion very elegant!
- /*
+ /*
value2html: function(value, element) {
var html = '', lines;
if(value) {
@@ -3063,7 +3063,7 @@ $(function(){
}
$(element).html(html);
},
-
+
html2value: function(html) {
if(!html) {
return '';
@@ -3113,8 +3113,8 @@ $(function(){
@property rows
@type integer
@default 7
- **/
- rows: 7
+ **/
+ rows: 7
});
$.fn.editabletypes.textarea = Textarea;
@@ -3132,7 +3132,7 @@ Select (dropdown)
-
-To make it **bootstrap-styled** you can use css from [here](https://github.com/t0m/select2-bootstrap-css):
+You should manually download and include select2 distributive:
-
-
-**Note:** currently `autotext` feature does not work for select2 with `ajax` remote source.
-You need initially put both `data-value` and element's text youself:
+
+
+
+To make it **bootstrap-styled** you can use css from [here](https://github.com/t0m/select2-bootstrap-css):
+
+
+
+**Note:** currently `autotext` feature does not work for select2 with `ajax` remote source.
+You need initially put both `data-value` and element's text youself:
Text1
-
-
+
+
@class select2
@extends abstractinput
@since 1.4.1
@@ -3669,34 +3669,34 @@ $(function(){
return $.get('/getCountryById', { query: element.val() }, function (data) {
callback(data);
});
- }
- }
+ }
+ }
});
});
**/
(function ($) {
"use strict";
-
+
var Constructor = function (options) {
this.init('select2', options, Constructor.defaults);
options.select2 = options.select2 || {};
this.sourceData = null;
-
+
//placeholder
if(options.placeholder) {
options.select2.placeholder = options.placeholder;
}
-
+
//if not `tags` mode, use source
if(!options.select2.tags && options.source) {
var source = options.source;
//if source is function, call it (once!)
if ($.isFunction(options.source)) {
source = options.source.call(options.scope);
- }
+ }
if (typeof source === 'string') {
options.select2.ajax = options.select2.ajax || {};
@@ -3713,7 +3713,7 @@ $(function(){
this.sourceData = this.convertSource(source);
options.select2.data = this.sourceData;
}
- }
+ }
//overriding objects in config (as by default jQuery extend() is not recursive)
this.options.select2 = $.extend({}, Constructor.defaults.select2, options.select2);
@@ -3743,14 +3743,14 @@ $(function(){
render: function() {
this.setClass();
- //can not apply select2 here as it calls initSelection
+ //can not apply select2 here as it calls initSelection
//over input that does not have correct value yet.
//apply select2 only in value2input
//this.$input.select2(this.options.select2);
//when data is loaded via ajax, we need to know when it's done to populate listData
if(this.isRemote) {
- //listen to loaded event to populate data
+ //listen to loaded Events to populate data
this.$input.on('select2-loaded', $.proxy(function(e) {
this.sourceData = e.items.results;
}, this));
@@ -3769,12 +3769,12 @@ $(function(){
that = this;
if(this.options.select2.tags) { //in tags mode just assign value
- data = value;
+ data = value;
//data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc);
} else if(this.sourceData) {
- data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
+ data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
} else {
- //can not get list of possible values
+ //can not get list of possible values
//(e.g. autotext for select2 with ajax source)
}
@@ -3792,7 +3792,7 @@ $(function(){
text = $.isArray(text) ? text.join(this.options.viewseparator) : text;
//$(element).text(text);
- Constructor.superclass.value2html.call(this, text, element);
+ Constructor.superclass.value2html.call(this, text, element);
},
html2value: function(html) {
@@ -3810,14 +3810,14 @@ $(function(){
this.$input.val(value);
this.$input.select2(this.options.select2);
} else {
- //second argument needed to separate initial change from user's click (for autosubmit)
- this.$input.val(value).trigger('change', true);
+ //second argument needed to separate initial change from user's click (for autosubmit)
+ this.$input.val(value).trigger('change', true);
//Uncaught Error: cannot call val() if initSelection() is not defined
//this.$input.select2('val', value);
}
- // if defined remote source AND no multiple mode AND no user's initSelection provided -->
+ // if defined remote source AND no multiple mode AND no user's initSelection provided -->
// we should somehow get text for provided id.
// The solution is to use element's text as text for that id (exclude empty)
if(this.isRemote && !this.isMultiple && !this.options.select2.initSelection) {
@@ -3831,13 +3831,13 @@ $(function(){
var $el = $(this.options.scope);
if (!$el.data('editable').isEmpty) {
var data = {id: value, text: $el.text()};
- this.$input.select2('data', data);
+ this.$input.select2('data', data);
}
}
}
},
-
- input2value: function() {
+
+ input2value: function() {
return this.$input.select2('val');
},
@@ -3888,25 +3888,25 @@ $(function(){
}
return source;
},
-
+
destroy: function() {
if(this.$input.data('select2')) {
this.$input.select2('destroy');
}
}
-
+
});
Constructor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
/**
- @property tpl
+ @property tpl
@default
**/
tpl:'',
/**
Configuration of select2. [Full list of options](http://ivaynberg.github.com/select2).
- @property select2
+ @property select2
@type object
@default null
**/
@@ -3914,7 +3914,7 @@ $(function(){
/**
Placeholder attribute of select
- @property placeholder
+ @property placeholder
@type string
@default null
**/
@@ -3924,17 +3924,17 @@ $(function(){
Please note, that format is different from simple `select` input: use 'id' instead of 'value'.
E.g. `[{id: 1, text: "text1"}, {id: 2, text: "text2"}, ...]`.
- @property source
+ @property source
@type array|string|function
- @default null
+ @default null
**/
source: null,
/**
Separator used to display tags.
- @property viewseparator
+ @property viewseparator
@type string
- @default ', '
+ @default ', '
**/
viewseparator: ', '
});
@@ -3948,18 +3948,18 @@ $(function(){
* Dropdown date and time picker.
* Converts text input into dropdowns to pick day, month, year, hour, minute and second.
* Uses momentjs as datetime library http://momentjs.com.
-* For i18n include corresponding file from https://github.com/timrwood/moment/tree/master/lang
+* For i18n include corresponding file from https://github.com/timrwood/moment/tree/master/lang
*
* Confusion at noon and midnight - see http://en.wikipedia.org/wiki/12-hour_clock#Confusion_at_noon_and_midnight
-* In combodate:
+* In combodate:
* 12:00 pm --> 12:00 (24-h format, midday)
* 12:00 am --> 00:00 (24-h format, midnight, start of day)
-*
+*
* Differs from momentjs parse rules:
* 00:00 pm, 12:00 pm --> 12:00 (24-h format, day not change)
* 00:00 am, 12:00 am --> 00:00 (24-h format, day not change)
-*
-*
+*
+*
* Author: Vitaliy Potapov
* Project page: http://github.com/vitalets/combodate
* Copyright (c) 2012 Vitaliy Potapov. Released under MIT License.
@@ -3973,28 +3973,28 @@ $(function(){
return;
}
this.options = $.extend({}, $.fn.combodate.defaults, options, this.$element.data());
- this.init();
+ this.init();
};
Combodate.prototype = {
- constructor: Combodate,
+ constructor: Combodate,
init: function () {
this.map = {
//key regexp moment.method
- day: ['D', 'date'],
- month: ['M', 'month'],
- year: ['Y', 'year'],
+ day: ['D', 'date'],
+ month: ['M', 'month'],
+ year: ['Y', 'year'],
hour: ['[Hh]', 'hours'],
- minute: ['m', 'minutes'],
+ minute: ['m', 'minutes'],
second: ['s', 'seconds'],
- ampm: ['[Aa]', '']
+ ampm: ['[Aa]', '']
};
-
+
this.$widget = $('').html(this.getTemplate());
-
+
this.initCombos();
-
- //update original input on change
+
+ //update original input on change
this.$widget.on('change', 'select', $.proxy(function(e) {
this.$element.val(this.getValue()).change();
// update days count if month or year changes
@@ -4004,28 +4004,28 @@ $(function(){
}
}
}, this));
-
+
this.$widget.find('select').css('width', 'auto');
-
- // hide original input and insert widget
+
+ // hide original input and insert widget
this.$element.hide().after(this.$widget);
-
+
// set initial value
this.setValue(this.$element.val() || this.options.value);
},
-
+
/*
- Replace tokens in template with