This commit is contained in:
vitalets 2013-06-23 18:51:05 +04:00
parent 21c1dec3bc
commit dd11d00b70
9 changed files with 335 additions and 330 deletions

@ -185,11 +185,11 @@ a.editable-click.editable-disabled:hover {
}
.editable-bg-transition {
-webkit-transition: background-color 1400ms ease-in;
-moz-transition: background-color 1400ms ease-in;
-o-transition: background-color 1400ms ease-in;
-ms-transition: background-color 1400ms ease-in;
transition: background-color 1400ms ease-in;
-webkit-transition: background-color 1400ms ease-out;
-moz-transition: background-color 1400ms ease-out;
-o-transition: background-color 1400ms ease-out;
-ms-transition: background-color 1400ms ease-out;
transition: background-color 1400ms ease-out;
}
/*see https://github.com/vitalets/x-editable/issues/139 */

@ -1817,7 +1817,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
$e.addClass('editable-bg-transition');
setTimeout(function(){
$e.removeClass('editable-bg-transition');
}, 1500);
}, 1700);
}, 0);
}
@ -4468,311 +4468,6 @@ Editableform based on Twitter Bootstrap
}
});
}(window.jQuery));
/**
Bootstrap-datepicker.
Description and examples: https://github.com/eternicode/bootstrap-datepicker.
For **i18n** you should include js file from here: https://github.com/eternicode/bootstrap-datepicker/tree/master/js/locales
and set `language` option.
Since 1.4.0 date has different appearance in **popup** and **inline** modes.
@class date
@extends abstractinput
@final
@example
<a href="#" id="dob" data-type="date" data-pk="1" data-url="/post" data-original-title="Select date">15/05/1984</a>
<script>
$(function(){
$('#dob').editable({
format: 'yyyy-mm-dd',
viewformat: 'dd/mm/yyyy',
datepicker: {
weekStart: 1
}
}
});
});
</script>
**/
(function ($) {
"use strict";
//store bootstrap-datepicker as bdateicker to exclude conflict with jQuery UI one
$.fn.bdatepicker = $.fn.datepicker.noConflict();
var Date = function (options) {
this.init('date', options, Date.defaults);
this.initPicker(options, Date.defaults);
};
$.fn.editableutils.inherit(Date, $.fn.editabletypes.abstractinput);
$.extend(Date.prototype, {
initPicker: function(options, defaults) {
//'format' is set directly from settings or data-* attributes
//by default viewformat equals to format
if(!this.options.viewformat) {
this.options.viewformat = this.options.format;
}
//overriding datepicker config (as by default jQuery extend() is not recursive)
//since 1.4 datepicker internally uses viewformat instead of format. Format is for submit only
this.options.datepicker = $.extend({}, defaults.datepicker, options.datepicker, {
format: this.options.viewformat
});
//language
this.options.datepicker.language = this.options.datepicker.language || 'en';
//store DPglobal
this.dpg = $.fn.bdatepicker.DPGlobal;
//store parsed formats
this.parsedFormat = this.dpg.parseFormat(this.options.format);
this.parsedViewFormat = this.dpg.parseFormat(this.options.viewformat);
},
render: function () {
this.$input.bdatepicker(this.options.datepicker);
//"clear" link
if(this.options.clear) {
this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
e.preventDefault();
e.stopPropagation();
this.clear();
}, this));
this.$tpl.parent().append($('<div class="editable-clear">').append(this.$clear));
}
},
value2html: function(value, element) {
var text = value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '';
Date.superclass.value2html(text, element);
},
html2value: function(html) {
return this.parseDate(html, this.parsedViewFormat);
},
value2str: function(value) {
return value ? this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language) : '';
},
str2value: function(str) {
return this.parseDate(str, this.parsedFormat);
},
value2submit: function(value) {
return this.value2str(value);
},
value2input: function(value) {
this.$input.bdatepicker('update', value);
},
input2value: function() {
return this.$input.data('datepicker').date;
},
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();
}
},
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){
var $form = $(this).closest('form');
setTimeout(function() {
$form.submit();
}, 200);
});
*/
},
/*
For incorrect date bootstrap-datepicker returns current date that is not suitable
for datefield.
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;
}
});
Date.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
/**
@property tpl
@default <div></div>
**/
tpl:'<div class="editable-date well"></div>',
/**
@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,
/**
Configuration of datepicker.
Full list of options: http://vitalets.github.com/bootstrap-datepicker
@property datepicker
@type object
@default {
weekStart: 0,
startView: 0,
minViewMode: 0,
autoclose: false
}
**/
datepicker:{
weekStart: 0,
startView: 0,
minViewMode: 0,
autoclose: false
},
/**
Text shown as clear date button.
If <code>false</code> clear button will not be rendered.
@property clear
@type boolean|string
@default 'x clear'
**/
clear: '&times; clear'
});
$.fn.editabletypes.date = Date;
}(window.jQuery));
/**
Bootstrap datefield input - modification for inline mode.
Shows normal <input type="text"> and binds popup datepicker.
Automatically shown in inline mode.
@class datefield
@extends date
@since 1.4.0
**/
(function ($) {
"use strict";
var DateField = function (options) {
this.init('datefield', options, DateField.defaults);
this.initPicker(options, DateField.defaults);
};
$.fn.editableutils.inherit(DateField, $.fn.editabletypes.date);
$.extend(DateField.prototype, {
render: function () {
this.$input = this.$tpl.find('input');
this.setClass();
this.setAttr('placeholder');
//bootstrap-datepicker is set `bdateicker` to exclude conflict with jQuery UI one. (in date.js)
this.$tpl.bdatepicker(this.options.datepicker);
//need to disable original event handlers
this.$input.off('focus keydown');
//update value of datepicker
this.$input.keyup($.proxy(function(){
this.$tpl.removeData('date');
this.$tpl.bdatepicker('update');
}, this));
},
value2input: function(value) {
this.$input.val(value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '');
this.$tpl.bdatepicker('update');
},
input2value: function() {
return this.html2value(this.$input.val());
},
activate: function() {
$.fn.editabletypes.text.prototype.activate.call(this);
},
autosubmit: function() {
//reset autosubmit to empty
}
});
DateField.defaults = $.extend({}, $.fn.editabletypes.date.defaults, {
/**
@property tpl
**/
tpl:'<div class="input-append date"><input type="text"/><span class="add-on"><i class="icon-th"></i></span></div>',
/**
@property inputclass
@default 'input-small'
**/
inputclass: 'input-small',
/* datepicker config */
datepicker: {
weekStart: 0,
startView: 0,
minViewMode: 0,
autoclose: true
}
});
$.fn.editabletypes.datefield = DateField;
}(window.jQuery));
/* =========================================================
* bootstrap-datepicker.js
@ -5734,7 +5429,7 @@ Automatically shown in inline mode.
}
var old = $.fn.datepicker;
$.fn.datepicker = function ( option ) {
var datepicker = $.fn.datepicker = function ( option ) {
var args = Array.apply(null, arguments);
args.shift();
var internal_return,
@ -6018,15 +5713,325 @@ Automatically shown in inline mode.
if ($this.data('datepicker')) return;
e.preventDefault();
// component click requires us to explicitly show it
$this.datepicker('show');
datepicker.call($this, 'show');
}
);
$(function(){
$('[data-provide="datepicker-inline"]').datepicker();
//$('[data-provide="datepicker-inline"]').datepicker();
//vit: changed to support noConflict()
datepicker.call($('[data-provide="datepicker-inline"]'));
});
}( window.jQuery ));
/**
Bootstrap-datepicker.
Description and examples: https://github.com/eternicode/bootstrap-datepicker.
For **i18n** you should include js file from here: https://github.com/eternicode/bootstrap-datepicker/tree/master/js/locales
and set `language` option.
Since 1.4.0 date has different appearance in **popup** and **inline** modes.
@class date
@extends abstractinput
@final
@example
<a href="#" id="dob" data-type="date" data-pk="1" data-url="/post" data-original-title="Select date">15/05/1984</a>
<script>
$(function(){
$('#dob').editable({
format: 'yyyy-mm-dd',
viewformat: 'dd/mm/yyyy',
datepicker: {
weekStart: 1
}
}
});
});
</script>
**/
(function ($) {
"use strict";
//store bootstrap-datepicker as bdateicker to exclude conflict with jQuery UI one
$.fn.bdatepicker = $.fn.datepicker.noConflict();
if(!$.fn.datepicker) { //if there were no other datepickers, keep also original name
$.fn.datepicker = $.fn.bdatepicker;
}
var Date = function (options) {
this.init('date', options, Date.defaults);
this.initPicker(options, Date.defaults);
};
$.fn.editableutils.inherit(Date, $.fn.editabletypes.abstractinput);
$.extend(Date.prototype, {
initPicker: function(options, defaults) {
//'format' is set directly from settings or data-* attributes
//by default viewformat equals to format
if(!this.options.viewformat) {
this.options.viewformat = this.options.format;
}
//overriding datepicker config (as by default jQuery extend() is not recursive)
//since 1.4 datepicker internally uses viewformat instead of format. Format is for submit only
this.options.datepicker = $.extend({}, defaults.datepicker, options.datepicker, {
format: this.options.viewformat
});
//language
this.options.datepicker.language = this.options.datepicker.language || 'en';
//store DPglobal
this.dpg = $.fn.bdatepicker.DPGlobal;
//store parsed formats
this.parsedFormat = this.dpg.parseFormat(this.options.format);
this.parsedViewFormat = this.dpg.parseFormat(this.options.viewformat);
},
render: function () {
this.$input.bdatepicker(this.options.datepicker);
//"clear" link
if(this.options.clear) {
this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
e.preventDefault();
e.stopPropagation();
this.clear();
}, this));
this.$tpl.parent().append($('<div class="editable-clear">').append(this.$clear));
}
},
value2html: function(value, element) {
var text = value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '';
Date.superclass.value2html(text, element);
},
html2value: function(html) {
return this.parseDate(html, this.parsedViewFormat);
},
value2str: function(value) {
return value ? this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language) : '';
},
str2value: function(str) {
return this.parseDate(str, this.parsedFormat);
},
value2submit: function(value) {
return this.value2str(value);
},
value2input: function(value) {
this.$input.bdatepicker('update', value);
},
input2value: function() {
return this.$input.data('datepicker').date;
},
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();
}
},
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){
var $form = $(this).closest('form');
setTimeout(function() {
$form.submit();
}, 200);
});
*/
},
/*
For incorrect date bootstrap-datepicker returns current date that is not suitable
for datefield.
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;
}
});
Date.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
/**
@property tpl
@default <div></div>
**/
tpl:'<div class="editable-date well"></div>',
/**
@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,
/**
Configuration of datepicker.
Full list of options: http://vitalets.github.com/bootstrap-datepicker
@property datepicker
@type object
@default {
weekStart: 0,
startView: 0,
minViewMode: 0,
autoclose: false
}
**/
datepicker:{
weekStart: 0,
startView: 0,
minViewMode: 0,
autoclose: false
},
/**
Text shown as clear date button.
If <code>false</code> clear button will not be rendered.
@property clear
@type boolean|string
@default 'x clear'
**/
clear: '&times; clear'
});
$.fn.editabletypes.date = Date;
}(window.jQuery));
/**
Bootstrap datefield input - modification for inline mode.
Shows normal <input type="text"> and binds popup datepicker.
Automatically shown in inline mode.
@class datefield
@extends date
@since 1.4.0
**/
(function ($) {
"use strict";
var DateField = function (options) {
this.init('datefield', options, DateField.defaults);
this.initPicker(options, DateField.defaults);
};
$.fn.editableutils.inherit(DateField, $.fn.editabletypes.date);
$.extend(DateField.prototype, {
render: function () {
this.$input = this.$tpl.find('input');
this.setClass();
this.setAttr('placeholder');
//bootstrap-datepicker is set `bdateicker` to exclude conflict with jQuery UI one. (in date.js)
this.$tpl.bdatepicker(this.options.datepicker);
//need to disable original event handlers
this.$input.off('focus keydown');
//update value of datepicker
this.$input.keyup($.proxy(function(){
this.$tpl.removeData('date');
this.$tpl.bdatepicker('update');
}, this));
},
value2input: function(value) {
this.$input.val(value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '');
this.$tpl.bdatepicker('update');
},
input2value: function() {
return this.html2value(this.$input.val());
},
activate: function() {
$.fn.editabletypes.text.prototype.activate.call(this);
},
autosubmit: function() {
//reset autosubmit to empty
}
});
DateField.defaults = $.extend({}, $.fn.editabletypes.date.defaults, {
/**
@property tpl
**/
tpl:'<div class="input-append date"><input type="text"/><span class="add-on"><i class="icon-th"></i></span></div>',
/**
@property inputclass
@default 'input-small'
**/
inputclass: 'input-small',
/* datepicker config */
datepicker: {
weekStart: 0,
startView: 0,
minViewMode: 0,
autoclose: true
}
});
$.fn.editabletypes.datefield = DateField;
}(window.jQuery));
/**
Bootstrap-datetimepicker.
Based on [smalot bootstrap-datetimepicker plugin](https://github.com/smalot/bootstrap-datetimepicker).

File diff suppressed because one or more lines are too long

@ -185,11 +185,11 @@ a.editable-click.editable-disabled:hover {
}
.editable-bg-transition {
-webkit-transition: background-color 1400ms ease-in;
-moz-transition: background-color 1400ms ease-in;
-o-transition: background-color 1400ms ease-in;
-ms-transition: background-color 1400ms ease-in;
transition: background-color 1400ms ease-in;
-webkit-transition: background-color 1400ms ease-out;
-moz-transition: background-color 1400ms ease-out;
-o-transition: background-color 1400ms ease-out;
-ms-transition: background-color 1400ms ease-out;
transition: background-color 1400ms ease-out;
}
/*see https://github.com/vitalets/x-editable/issues/139 */

@ -1817,7 +1817,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
$e.addClass('editable-bg-transition');
setTimeout(function(){
$e.removeClass('editable-bg-transition');
}, 1500);
}, 1700);
}, 0);
}
@ -4377,7 +4377,7 @@ $(function(){
this.call('update', $content);
this.call('show');
this.tip().addClass('editable-container');
this.tip().addClass(this.containerClass);
this.$form.data('editableform').input.activate();
},

File diff suppressed because one or more lines are too long

@ -185,11 +185,11 @@ a.editable-click.editable-disabled:hover {
}
.editable-bg-transition {
-webkit-transition: background-color 1400ms ease-in;
-moz-transition: background-color 1400ms ease-in;
-o-transition: background-color 1400ms ease-in;
-ms-transition: background-color 1400ms ease-in;
transition: background-color 1400ms ease-in;
-webkit-transition: background-color 1400ms ease-out;
-moz-transition: background-color 1400ms ease-out;
-o-transition: background-color 1400ms ease-out;
-ms-transition: background-color 1400ms ease-out;
transition: background-color 1400ms ease-out;
}
/*see https://github.com/vitalets/x-editable/issues/139 */

@ -1817,7 +1817,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
$e.addClass('editable-bg-transition');
setTimeout(function(){
$e.removeClass('editable-bg-transition');
}, 1500);
}, 1700);
}, 0);
}

File diff suppressed because one or more lines are too long