diff --git a/src/containers/editable-container.js b/src/containers/editable-container.js
index 439f708..17d4e64 100644
--- a/src/containers/editable-container.js
+++ b/src/containers/editable-container.js
@@ -141,13 +141,13 @@ Applied as jQuery method.
nochange: $.proxy(function(){ this.hide('nochange'); }, this), //click on submit button (value NOT changed)
cancel: $.proxy(function(){ this.hide('cancel'); }, this), //click on calcel button
show: $.proxy(function() {
- if(this.delayedHide) {
- this.hide(this.delayedHide.reason);
- this.delayedHide = false;
- } else {
- this.setPosition();
- }
- }, this), //re-position container every time form is shown (occurs each time after loading state)
+ if(this.delayedHide) {
+ this.hide(this.delayedHide.reason);
+ this.delayedHide = false;
+ } else {
+ this.setPosition();
+ }
+ }, this), //re-position container every time form is shown (occurs each time after loading state)
rendering: $.proxy(this.setPosition, this), //this allows to place container correctly when loading shown
resize: $.proxy(this.setPosition, this), //this allows to re-position container when form size is changed
rendered: $.proxy(function(){
@@ -230,16 +230,16 @@ Applied as jQuery method.
//if form is saving value, schedule hide
if(this.$form.data('editableform').isSaving) {
- this.delayedHide = {reason: reason};
- return;
- } else {
- this.delayedHide = false;
- }
-
+ this.delayedHide = {reason: reason};
+ return;
+ } else {
+ this.delayedHide = false;
+ }
+
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.
@@ -253,20 +253,20 @@ Applied as jQuery method.
//auto-open next editable
$(this).closest('tr').next().find('.editable').editable('show');
}
- });
- **/
+ });
+ **/
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)
diff --git a/src/editable-form/editable-form-utils.js b/src/editable-form/editable-form-utils.js
index 21e7994..2c9457d 100644
--- a/src/editable-form/editable-form-utils.js
+++ b/src/editable-form/editable-form-utils.js
@@ -222,16 +222,21 @@
//see http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr
supportsTransitions: function () {
- var b = document.body || document.documentElement;
- var s = b.style;
- var p = 'transition';
- if(typeof s[p] == 'string') {return true; }
+ var b = document.body || document.documentElement,
+ s = b.style,
+ p = 'transition',
+ v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'];
+
+ if(typeof s[p] === 'string') {
+ return true;
+ }
// Tests for vendor specific prop
- v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
p = p.charAt(0).toUpperCase() + p.substr(1);
for(var i=0; i<v.length; i++) {
- if(typeof s[v[i] + p] == 'string') { return true; }
+ if(typeof s[v[i] + p] === 'string') {
+ return true;
+ }
}
return false;
}
diff --git a/src/editable-form/editable-form.js b/src/editable-form/editable-form.js
index 7ab89d9..602be5f 100644
--- a/src/editable-form/editable-form.js
+++ b/src/editable-form/editable-form.js
@@ -224,30 +224,30 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
//sending data to server
$.when(this.save(submitValue))
.done($.proxy(function(response) {
- this.isSaving = false;
-
+ this.isSaving = false;
+
//run success callback
var res = typeof this.options.success === 'function' ? this.options.success.call(this.options.scope, response, newValue) : null;
-
+
//if success callback returns false --> keep form open and do not activate input
if(res === false) {
this.error(false);
this.showForm(false);
return;
- }
-
+ }
+
//if success callback returns string --> keep form open, show error and activate input
if(typeof res === 'string') {
this.error(res);
this.showForm();
return;
- }
-
+ }
+
//if success callback returns object like {newValue: <something>} --> use that value instead of submitted
//it is usefull if you want to chnage value in url-function
if(res && typeof res === 'object' && res.hasOwnProperty('newValue')) {
newValue = res.newValue;
- }
+ }
//clear error message
this.error(false);
@@ -264,20 +264,20 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
@example
$('#form-div').on('save'), function(e, params){
if(params.newValue === 'username') {...}
- });
- **/
+ });
+ **/
this.$div.triggerHandler('save', {newValue: newValue, submitValue: submitValue, response: response});
}, this))
.fail($.proxy(function(xhr) {
- this.isSaving = false;
-
+ this.isSaving = false;
+
var msg;
if(typeof this.options.error === 'function') {
msg = this.options.error.call(this.options.scope, xhr, newValue);
} else {
msg = typeof xhr === 'string' ? xhr : xhr.responseText || xhr.statusText || 'Unknown error!';
}
-
+
this.error(msg);
this.showForm();
}, this));
diff --git a/src/element/editable-element.js b/src/element/editable-element.js
index 29d29ca..1879a41 100644
--- a/src/element/editable-element.js
+++ b/src/element/editable-element.js
@@ -89,7 +89,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
//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'
+ this.options.autotext = 'always';
}
//check conditions for autotext:
@@ -277,17 +277,17 @@ Makes editable any HTML element on the page. Applied as jQuery method.
*/
if(isEmpty !== undefined) {
this.isEmpty = isEmpty;
- } else {
- //detect empty
- if($.trim(this.$element.html()) === '') {
- this.isEmpty = true;
- } else if($.trim(this.$element.text()) !== '') {
- this.isEmpty = false;
- } else {
- //e.g. '<img>'
- this.isEmpty = !this.$element.height() || !this.$element.width();
- }
- }
+ } else {
+ //detect empty
+ if($.trim(this.$element.html()) === '') {
+ this.isEmpty = true;
+ } else if($.trim(this.$element.text()) !== '') {
+ this.isEmpty = false;
+ } else {
+ //e.g. '<img>'
+ this.isEmpty = !this.$element.height() || !this.$element.width();
+ }
+ }
//emptytext shown only for enabled
if(!this.options.disabled) {
@@ -546,18 +546,18 @@ Makes editable any HTML element on the page. Applied as jQuery method.
**/
case 'getValue':
if(arguments.length === 2 && arguments[1] === true) { //isSingle = true
- result = this.eq(0).data(datakey).value;
- } else {
- this.each(function () {
- var $this = $(this), data = $this.data(datakey);
- if (data && data.value !== undefined && data.value !== null) {
- result[data.options.name] = data.input.value2submit(data.value);
- }
- });
- }
+ result = this.eq(0).data(datakey).value;
+ } else {
+ this.each(function () {
+ var $this = $(this), data = $this.data(datakey);
+ if (data && data.value !== undefined && data.value !== null) {
+ result[data.options.name] = data.input.value2submit(data.value);
+ }
+ });
+ }
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 <a href="#newrecord">creating new records</a> for details.
diff --git a/src/inputs/abstract.js b/src/inputs/abstract.js
index 1314332..547ba10 100644
--- a/src/inputs/abstract.js
+++ b/src/inputs/abstract.js
@@ -7,23 +7,23 @@ To create your own input you can inherit from this class.
**/
(function ($) {
"use strict";
-
+
//types
$.fn.editabletypes = {};
-
+
var AbstractInput = function () { };
AbstractInput.prototype = {
/**
Initializes input
-
+
@method init()
**/
init: function(type, options, defaults) {
this.type = type;
this.options = $.extend({}, defaults, options);
},
-
+
/*
this method called before render to init $tpl that is inserted in DOM
*/
@@ -37,107 +37,107 @@ To create your own input you can inherit from this class.
/**
Renders input from tpl. Can return jQuery deferred object.
Can be overwritten in child objects
-
- @method render()
- **/
+
+ @method render()
+ **/
render: function() {
},
/**
Sets element's html by value.
-
- @method value2html(value, element)
+
+ @method value2html(value, element)
@param {mixed} value
@param {DOMElement} element
- **/
+ **/
value2html: function(value, element) {
$(element).text($.trim(value));
},
-
+
/**
Converts element's html to value
-
- @method html2value(html)
+
+ @method html2value(html)
@param {string} html
@returns {mixed}
- **/
+ **/
html2value: function(html) {
return $('<div>').html(html).text();
},
-
+
/**
Converts value to string (for internal compare). For submitting to server used value2submit().
-
+
@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.
-
- @method str2value(str)
+
+ @method str2value(str)
@param {string} str
@returns {mixed}
- **/
+ **/
str2value: function(str) {
return str;
},
/**
Converts value for submitting to server. Result can be string or object.
-
+
@method value2submit(value)
@param {mixed} value
@returns {mixed}
- **/
+ **/
value2submit: function(value) {
return value;
- },
-
+ },
+
/**
Sets value of input.
-
+
@method value2input(value)
@param {mixed} value
- **/
+ **/
value2input: function(value) {
this.$input.val(value);
},
-
+
/**
Returns value of input. Value can be object (e.g. datepicker)
-
+
@method input2value()
- **/
+ **/
input2value: function() {
return this.$input.val();
},
/**
Activates input. For text it sets focus.
-
+
@method activate()
- **/
+ **/
activate: function() {
if(this.$input.is(':visible')) {
this.$input.focus();
}
},
-
+
/**
Creates input.
-
+
@method clear()
**/
clear: function() {
this.$input.val(null);
},
-
+
/**
method to escape html.
**/
@@ -147,7 +147,7 @@ To create your own input you can inherit from this class.
/**
attach handler to automatically submit form when value changed (useful when buttons not shown)
- **/
+ **/
autosubmit: function() {
},
@@ -155,16 +155,16 @@ To create your own input you can inherit from this class.
/**
Additional actions when destroying element
**/
- destroy: function() {
- },
-
+ destroy: function() {
+ },
+
// -------- helper functions --------
setClass: function() {
if(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]);
diff --git a/src/inputs/date/date.js b/src/inputs/date/date.js
index 0960f1b..b558a49 100644
--- a/src/inputs/date/date.js
+++ b/src/inputs/date/date.js
@@ -82,51 +82,51 @@ $(function(){
Date.superclass.value2html(text, element);
},
- html2value: function(html) {
- return this.parseDate(html, this.parsedViewFormat);
- },
+ html2value: function(html) {
+ return this.parseDate(html, this.parsedViewFormat);
+ },
- value2str: function(value) {
- return value ? this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language) : '';
- },
+ value2str: function(value) {
+ return value ? this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language) : '';
+ },
- str2value: function(str) {
- return this.parseDate(str, this.parsedFormat);
- },
+ str2value: function(str) {
+ return this.parseDate(str, this.parsedFormat);
+ },
- value2submit: function(value) {
- return this.value2str(value);
- },
+ value2submit: function(value) {
+ return this.value2str(value);
+ },
- value2input: function(value) {
- this.$input.bdatepicker('update', value);
- },
+ value2input: function(value) {
+ this.$input.bdatepicker('update', value);
+ },
- input2value: function() {
- return this.$input.data('datepicker').date;
- },
+ input2value: function() {
+ return this.$input.data('datepicker').date;
+ },
- activate: function() {
- },
+ activate: function() {
+ },
- clear: function() {
- this.$input.data('datepicker').date = null;
- this.$input.find('.active').removeClass('active');
- if(!this.options.showbuttons) {
- this.$input.closest('form').submit();
- }
- },
+ clear: function() {
+ this.$input.data('datepicker').date = null;
+ this.$input.find('.active').removeClass('active');
+ if(!this.options.showbuttons) {
+ this.$input.closest('form').submit();
+ }
+ },
- autosubmit: function() {
- this.$input.on('mouseup', '.day', function(e){
- if($(e.currentTarget).is('.old') || $(e.currentTarget).is('.new')) {
- return;
- }
- var $form = $(this).closest('form');
- setTimeout(function() {
- $form.submit();
- }, 200);
- });
+ autosubmit: function() {
+ this.$input.on('mouseup', '.day', function(e){
+ if($(e.currentTarget).is('.old') || $(e.currentTarget).is('.new')) {
+ return;
+ }
+ var $form = $(this).closest('form');
+ setTimeout(function() {
+ $form.submit();
+ }, 200);
+ });
//changedate is not suitable as it triggered when showing datepicker. see #149
/*
this.$input.on('changeDate', function(e){
@@ -144,21 +144,21 @@ $(function(){
This function returns null for incorrect date.
*/
parseDate: function(str, format) {
- var date = null, formattedBack;
- if(str) {
- date = this.dpg.parseDate(str, format, this.options.datepicker.language);
- if(typeof str === 'string') {
- formattedBack = this.dpg.formatDate(date, format, this.options.datepicker.language);
- if(str !== formattedBack) {
- date = null;
- }
- }
- }
- return date;
- }
+ var date = null, formattedBack;
+ if(str) {
+ date = this.dpg.parseDate(str, format, this.options.datepicker.language);
+ if(typeof str === 'string') {
+ formattedBack = this.dpg.formatDate(date, format, this.options.datepicker.language);
+ if(str !== formattedBack) {
+ date = null;
+ }
+ }
+ }
+ return date;
+ }
});
-
+
Date.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
/**
@property tpl
@@ -168,30 +168,30 @@ $(function(){
/**
@property inputclass
@default null
- **/
+ **/
inputclass: null,
/**
Format used for sending value to server. Also applied when converting date from <code>data-value</code> attribute.<br>
Possible tokens are: <code>d, dd, m, mm, yy, yyyy</code>
-
+
@property format
@type string
@default yyyy-mm-dd
- **/
+ **/
format:'yyyy-mm-dd',
/**
Format used for displaying date. Also applied when converting date from element's text on init.
If not specified equals to <code>format</code>
-
+
@property viewformat
@type string
@default null
- **/
- viewformat: null,
+ **/
+ viewformat: null,
/**
Configuration of datepicker.
Full list of options: http://vitalets.github.com/bootstrap-datepicker
-
+
@property datepicker
@type object
@default {
@@ -210,14 +210,14 @@ $(function(){
/**
Text shown as clear date button.
If <code>false</code> clear button will not be rendered.
-
+
@property clear
@type boolean|string
- @default 'x clear'
+ @default 'x clear'
**/
clear: '× clear'
- });
+ });
$.fn.editabletypes.date = Date;
-}(window.jQuery));
\ No newline at end of file
+}(window.jQuery));
diff --git a/src/inputs/datetime/datetime.js b/src/inputs/datetime/datetime.js
index 03e2494..786fe40 100644
--- a/src/inputs/datetime/datetime.js
+++ b/src/inputs/datetime/datetime.js
@@ -5,7 +5,7 @@ Before usage you should manually include dependent js and css:
<link href="css/datetimepicker.css" rel="stylesheet" type="text/css"></link>
<script src="js/bootstrap-datetimepicker.js"></script>
-
+
For **i18n** you should include js file from here: https://github.com/smalot/bootstrap-datetimepicker/tree/master/js/locales
and set `language` option.
@@ -30,14 +30,14 @@ $(function(){
**/
(function ($) {
"use strict";
-
+
var DateTime = function (options) {
this.init('datetime', options, DateTime.defaults);
this.initPicker(options, DateTime.defaults);
};
$.fn.editableutils.inherit(DateTime, $.fn.editabletypes.abstractinput);
-
+
$.extend(DateTime.prototype, {
initPicker: function(options, defaults) {
//'format' is set directly from settings or data-* attributes
@@ -46,13 +46,13 @@ $(function(){
if(!this.options.viewformat) {
this.options.viewformat = this.options.format;
}
-
+
//overriding datetimepicker config (as by default jQuery extend() is not recursive)
//since 1.4 datetimepicker internally uses viewformat instead of format. Format is for submit only
this.options.datetimepicker = $.extend({}, defaults.datetimepicker, options.datetimepicker, {
format: this.options.viewformat
});
-
+
//language
this.options.datetimepicker.language = this.options.datetimepicker.language || 'en';
@@ -63,10 +63,10 @@ $(function(){
this.parsedFormat = this.dpg.parseFormat(this.options.format, this.options.formatType);
this.parsedViewFormat = this.dpg.parseFormat(this.options.viewformat, this.options.formatType);
},
-
+
render: function () {
this.$input.datetimepicker(this.options.datetimepicker);
-
+
//adjust container position when viewMode changes
//see https://github.com/smalot/bootstrap-datetimepicker/pull/80
this.$input.on('changeMode', function(e) {
@@ -75,8 +75,8 @@ $(function(){
setTimeout(function(){
f.triggerHandler('resize');
}, 0);
- });
-
+ });
+
//"clear" link
if(this.options.clear) {
this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
@@ -84,11 +84,11 @@ $(function(){
e.stopPropagation();
this.clear();
}, this));
-
+
this.$tpl.parent().append($('<div class="editable-clear">').append(this.$clear));
- }
+ }
},
-
+
value2html: function(value, element) {
//formatDate works with UTCDate!
var text = value ? this.dpg.formatDate(this.toUTC(value), this.parsedViewFormat, this.options.datetimepicker.language, this.options.formatType) : '';
@@ -96,45 +96,45 @@ $(function(){
DateTime.superclass.value2html(text, element);
} else {
return text;
- }
+ }
},
html2value: function(html) {
//parseDate return utc date!
var value = this.parseDate(html, this.parsedViewFormat);
return value ? this.fromUTC(value) : null;
- },
-
+ },
+
value2str: function(value) {
//formatDate works with UTCDate!
return value ? this.dpg.formatDate(this.toUTC(value), this.parsedFormat, this.options.datetimepicker.language, this.options.formatType) : '';
- },
-
+ },
+
str2value: function(str) {
//parseDate return utc date!
var value = this.parseDate(str, this.parsedFormat);
return value ? this.fromUTC(value) : null;
- },
-
+ },
+
value2submit: function(value) {
return this.value2str(value);
- },
+ },
value2input: function(value) {
if(value) {
this.$input.data('datetimepicker').setDate(value);
}
},
-
+
input2value: function() {
//date may be cleared, in that case getDate() triggers error
var dt = this.$input.data('datetimepicker');
return dt.date ? dt.getDate() : null;
- },
-
+ },
+
activate: function() {
},
-
+
clear: function() {
this.$input.data('datetimepicker').date = null;
this.$input.find('.active').removeClass('active');
@@ -142,7 +142,7 @@ $(function(){
this.$input.closest('form').submit();
}
},
-
+
autosubmit: function() {
this.$input.on('mouseup', '.minute', function(e){
var $form = $(this).closest('form');
@@ -151,38 +151,38 @@ $(function(){
}, 200);
});
},
-
+
//convert date from local to utc
toUTC: function(value) {
return value ? new Date(value.valueOf() - value.getTimezoneOffset() * 60000) : value;
},
-
+
//convert date from utc to local
fromUTC: function(value) {
return value ? new Date(value.valueOf() + value.getTimezoneOffset() * 60000) : value;
},
-
+
/*
For incorrect date bootstrap-datetimepicker returns current date that is not suitable
for datetimefield.
This function returns null for incorrect date.
*/
parseDate: function(str, format) {
- var date = null, formattedBack;
- if(str) {
- date = this.dpg.parseDate(str, format, this.options.datetimepicker.language, this.options.formatType);
- if(typeof str === 'string') {
- formattedBack = this.dpg.formatDate(date, format, this.options.datetimepicker.language, this.options.formatType);
- if(str !== formattedBack) {
- date = null;
- }
- }
- }
- return date;
- }
+ var date = null, formattedBack;
+ if(str) {
+ date = this.dpg.parseDate(str, format, this.options.datetimepicker.language, this.options.formatType);
+ if(typeof str === 'string') {
+ formattedBack = this.dpg.formatDate(date, format, this.options.datetimepicker.language, this.options.formatType);
+ if(str !== formattedBack) {
+ date = null;
+ }
+ }
+ }
+ return date;
+ }
});
-
+
DateTime.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
/**
@property tpl
@@ -192,7 +192,7 @@ $(function(){
/**
@property inputclass
@default null
- **/
+ **/
inputclass: null,
/**
Format used for sending value to server. Also applied when converting date from <code>data-value</code> attribute.<br>
@@ -211,12 +211,12 @@ $(function(){
@property viewformat
@type string
@default null
- **/
- viewformat: null,
+ **/
+ viewformat: null,
/**
Configuration of datetimepicker.
Full list of options: https://github.com/smalot/bootstrap-datetimepicker
-
+
@property datetimepicker
@type object
@default { }
@@ -228,13 +228,13 @@ $(function(){
/**
Text shown as clear date button.
If <code>false</code> clear button will not be rendered.
-
+
@property clear
@type boolean|string
- @default 'x clear'
+ @default 'x clear'
**/
clear: '× clear'
- });
+ });
$.fn.editabletypes.datetime = DateTime;