tracer/x-editable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

date-ui-field ready, need tests

Browse Source
This commit is contained in:
vitalets 2013-01-05 00:02:40 +04:00
parent af9d11364e
commit 9b9bea9c54
7 changed files with 131 additions and 47 deletions

26
src/editable-form/editable-form-utils.js

@ -155,13 +155,25 @@
var TypeConstructor, typeOptions, input,
type = options.type;
if(type === 'date' && options.mode === 'inline') {
if($.fn.editabletypes.datefield) {
type = 'datefield';
} else if($.fn.editabletypes.dateuifield) {
type = 'dateuifield';
}
}
//`date` is some kind of virtual type that is transformed to one of exact types
//depending on mode and core lib
if(type === 'date') {
//inline
if(options.mode === 'inline') {
if($.fn.editabletypes.datefield) {
type = 'datefield';
} else if($.fn.editabletypes.dateuifield) {
type = 'dateuifield';
}
//popup
} else {
if($.fn.editabletypes.date) {
type = 'date';
} else if($.fn.editabletypes.dateui) {
type = 'dateui';
}
}
}
//create input of specified type. Input will be used for converting value, not in form
if(typeof $.fn.editabletypes[type] === 'function') {

2
src/editable-form/editable-form.js

@ -60,7 +60,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
@param {Object} event event object
**/
this.$div.triggerHandler('rendering');
//render input
$.when(this.input.render())
.then($.proxy(function () {

4
src/inputs/abstract.js

@ -76,7 +76,7 @@ To create your own input you can inherit from this class.
},
/**
Converts string received from server into value.
Converts string received from server into value. Usually from `data-value` attribute.
@method str2value(str)
@param {string} str
@ -87,7 +87,7 @@ To create your own input you can inherit from this class.
},
/**
Converts value for submitting to server
Converts value for submitting to server. Result can be string or object.
@method value2submit(value)
@param {mixed} value

19
src/inputs/date/datefield.js

@ -38,16 +38,8 @@ Automatically shown in inline mode.
},
value2str: function(value) {
return value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '';
},
value2submit: function(value) {
return value ? this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language) : null;
},
value2input: function(value) {
this.$field.val(this.value2str(value));
this.$field.val(value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '');
this.$input.datepicker('update');
},
@ -70,7 +62,7 @@ Automatically shown in inline mode.
DateField.defaults = $.extend({}, $.fn.editabletypes.date.defaults, {
/**
@property tpl
@default <input type="text">
@default
**/
tpl:'<div class="input-append date"><input class="input-small" type="text"/><span class="add-on"><i class="icon-th"></i></span></div>',
/**
@ -79,13 +71,14 @@ Automatically shown in inline mode.
**/
inputclass: '',
/* datepicker config */
datepicker: {
weekStart: 0,
startView: 0,
autoclose: true,
keyboardNavigation: false
autoclose: true
},
/* disable clear link */
clear: false
});

44
src/inputs/dateui/dateui.js

@ -26,30 +26,29 @@ $(function(){
var DateUI = function (options) {
this.init('dateui', options, DateUI.defaults);
//set popular options directly from settings or data-* attributes
var directOptions = $.fn.editableutils.sliceObj(this.options, ['format']);
//overriding datepicker config (as by default jQuery extend() is not recursive)
this.options.datepicker = $.extend({}, DateUI.defaults.datepicker, directOptions, options.datepicker);
//by default viewformat equals to format
if(!this.options.viewformat) {
this.options.viewformat = this.options.datepicker.format;
}
//correct formats: replace yyyy with yy
this.options.viewformat = this.options.viewformat.replace('yyyy', 'yy');
this.options.datepicker.format = this.options.datepicker.format.replace('yyyy', 'yy');
//copy format to dateFormat (dateFormat option required for ui datepicker).
//This allows common option 'format' for all datepickers
this.options.datepicker.dateFormat = this.options.datepicker.format;
this.initPicker(options, DateUI.defaults);
};
$.fn.editableutils.inherit(DateUI, $.fn.editabletypes.abstractinput);
$.extend(DateUI.prototype, {
initPicker: function(options, defaults) {
//by default viewformat equals to format
if(!this.options.viewformat) {
this.options.viewformat = this.options.format;
}
//correct formats: replace yyyy with yy (for compatibility with bootstrap datepicker)
this.options.viewformat = this.options.viewformat.replace('yyyy', 'yy');
this.options.format = this.options.format.replace('yyyy', 'yy');
//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, {
dateFormat: this.options.viewformat
});
},
render: function () {
DateUI.superclass.render.call(this);
this.$input.datepicker(this.options.datepicker);
@ -83,7 +82,7 @@ $(function(){
},
value2str: function(value) {
return $.datepicker.formatDate(this.options.datepicker.dateFormat, value);
return $.datepicker.formatDate(this.options.format, value);
},
str2value: function(str) {
@ -94,13 +93,13 @@ $(function(){
//if string does not match format, UI datepicker throws exception
var d;
try {
d = $.datepicker.parseDate(this.options.datepicker.dateFormat, str);
d = $.datepicker.parseDate(this.options.format, str);
} catch(e) {}
return d;
},
value2submit: function(value) {
value2submit: function(value) {
return this.value2str(value);
},
@ -189,6 +188,5 @@ $(function(){
});
$.fn.editabletypes.dateui = DateUI;
$.fn.editabletypes.date = DateUI;
}(window.jQuery));

80
src/inputs/dateui/dateuifield.js Normal file

@ -0,0 +1,80 @@
/**
jQuery UI datefield input - modification for inline mode.
Shows normal <input type="text"> and binds popup datepicker.
Automatically shown in inline mode.
**/
(function ($) {
var DateUIField = function (options) {
this.init('dateuifield', options, DateUIField.defaults);
this.initPicker(options, DateUIField.defaults);
};
$.fn.editableutils.inherit(DateUIField, $.fn.editabletypes.dateui);
$.extend(DateUIField.prototype, {
render: function () {
$.fn.editabletypes.dateui.superclass.render.call(this);
this.$field = this.$input.find('input');
this.$field.datepicker(this.options.datepicker);
/*
if(this.options.clear) {
this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
e.preventDefault();
e.stopPropagation();
this.clear();
}, this));
}
*/
},
value2input: function(value) {
this.$field.val($.datepicker.formatDate(this.options.viewformat, value));
},
input2value: function() {
return this.html2value(this.$field.val());
},
activate: function() {
if(this.$field.is(':visible')) {
this.$field.focus();
$.fn.editableutils.setCursorPosition(this.$field.get(0), this.$field.val().length);
}
},
autosubmit: function() {
//reset autosubmit to empty
}
});
DateUIField.defaults = $.extend({}, $.fn.editabletypes.dateui.defaults, {
/**
@property tpl
@default <input type="text">
**/
tpl: '<div><input type="text" /></div>',
/**
@property inputclass
@default ''
**/
inputclass: '',
/* datepicker config */
datepicker: {
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
firstDay: 0,
changeYear: true,
changeMonth: true
},
/* disable clear link */
clear: false
});
$.fn.editabletypes.dateuifield = DateUIField;
}(window.jQuery));

3
test/loader.js

@ -95,6 +95,7 @@ define(function () {
'jqueryui/js/jquery-ui-1.9.1.custom'
],
'inputs/dateui/dateui': ['inputs/abstract'],
'inputs/dateui/dateuifield': ['inputs/dateui/dateui'],
//plain
//'inputs/dateui/dateui': ['inputs/abstract', 'inputs/date/bootstrap-datepicker/js/bootstrap-datepicker'],
@ -136,7 +137,7 @@ define(function () {
shim['element/editable-element'].deps.push('containers/editable-popover');
} else if(f === 'jqueryui') {
//jqueryui
shim['editable-form/editable-form'].deps.push('inputs/dateui/dateui');
shim['editable-form/editable-form'].deps.push('inputs/dateui/dateuifield');
shim['element/editable-element'].deps.push('editable-form/editable-form-jqueryui');
shim['element/editable-element'].deps.push('containers/editable-tooltip');
} else {