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

datefield ready, need tests

Browse Source
This commit is contained in:
vitalets 2013-01-04 16:08:00 +04:00
parent e10f1d8eb6
commit 5dfa8bb218
7 changed files with 155 additions and 54 deletions

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

@ -146,7 +146,34 @@
/*jslint eqeq: false*/
return result;
}
},
/*
Returns input by options: type, mode.
*/
createInput: function(options) {
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';
}
}
//create input of specified type. Input will be used for converting value, not in form
if(typeof $.fn.editabletypes[type] === 'function') {
TypeConstructor = $.fn.editabletypes[type];
typeOptions = this.sliceObj(options, this.objectKeys(TypeConstructor.defaults));
input = new TypeConstructor(typeOptions);
return input;
} else {
$.error('Unknown type: '+ type);
return false;
}
}
};
}(window.jQuery));
}(window.jQuery));

15
src/editable-form/editable-form.js

@ -21,18 +21,13 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
EditableForm.prototype = {
constructor: EditableForm,
initInput: function() { //called once
var TypeConstructor, typeOptions;
//create input of specified type
if(typeof $.fn.editabletypes[this.options.type] === 'function') {
TypeConstructor = $.fn.editabletypes[this.options.type];
typeOptions = $.fn.editableutils.sliceObj(this.options, $.fn.editableutils.objectKeys(TypeConstructor.defaults));
this.input = new TypeConstructor(typeOptions);
} else {
$.error('Unknown type: '+ this.options.type);
this.input = $.fn.editableutils.createInput(this.options);
if(!this.input) {
return;
}
}
//set initial value
this.value = this.input.str2value(this.options.value);
},
initTemplate: function() {

20
src/element/editable-element.js

@ -15,27 +15,15 @@ Makes editable any HTML element on the page. Applied as jQuery method.
Editable.prototype = {
constructor: Editable,
init: function () {
var TypeConstructor,
isValueByText = false,
doAutotext,
finalize;
var isValueByText = false,
doAutotext, finalize;
//editableContainer must be defined
if(!$.fn.editableContainer) {
$.error('You must define $.fn.editableContainer via including corresponding file (e.g. editable-popover.js)');
return;
}
//name
this.options.name = this.options.name || this.$element.attr('id');
//create input of specified type. Input will be used for converting value, not in form
if(typeof $.fn.editabletypes[this.options.type] === 'function') {
TypeConstructor = $.fn.editabletypes[this.options.type];
this.typeOptions = $.fn.editableutils.sliceObj(this.options, $.fn.editableutils.objectKeys(TypeConstructor.defaults));
this.input = new TypeConstructor(this.typeOptions);
} else {
$.error('Unknown type: '+ this.options.type);
this.input = $.fn.editableutils.createInput(this.options);
if(!this.input) {
return;
}

47
src/inputs/date/date.js

@ -26,32 +26,37 @@ $(function(){
var Date = function (options) {
this.init('date', options, Date.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({}, Date.defaults.datepicker, directOptions, options.datepicker);
//by default viewformat equals to format
if(!this.options.viewformat) {
this.options.viewformat = this.options.datepicker.format;
}
//language
this.options.datepicker.language = this.options.datepicker.language || 'en';
//store DPglobal
this.dpg = $.fn.datepicker.DPGlobal;
//store parsed formats
this.parsedFormat = this.dpg.parseFormat(this.options.datepicker.format);
this.parsedViewFormat = this.dpg.parseFormat(this.options.viewformat);
this.initPicker();
};
$.fn.editableutils.inherit(Date, $.fn.editabletypes.abstractinput);
$.extend(Date.prototype, {
initPicker: function() {
//'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({}, Date.defaults.datepicker, this.options.datepicker, {
format: this.options.viewformat
});
//language
this.options.datepicker.language = this.options.datepicker.language || 'en';
//store DPglobal
this.dpg = $.fn.datepicker.DPGlobal;
//store parsed formats
this.parsedFormat = this.dpg.parseFormat(this.options.format);
this.parsedViewFormat = this.dpg.parseFormat(this.options.viewformat);
},
render: function () {
Date.superclass.render.call(this);
this.$input.datepicker(this.options.datepicker);

85
src/inputs/date/datefield.js Normal file

@ -0,0 +1,85 @@
/**
Bootstrap datefield input - modification for inline mode.
Shows normal <input type="text"> and binds popup datepicker.
Automatically shown in inline mode.
**/
(function ($) {
var DateField = function (options) {
this.init('datefield', options, DateField.defaults);
this.initPicker();
};
$.fn.editableutils.inherit(DateField, $.fn.editabletypes.date);
$.extend(DateField.prototype, {
render: function () {
this.$input = $(this.options.tpl);
this.$field = this.$input.find('input');
if(this.options.inputclass) {
this.$field.addClass(this.options.inputclass);
}
if (this.options.placeholder) {
this.$field.attr('placeholder', this.options.placeholder);
}
this.$input.datepicker(this.options.datepicker);
//need to disable original event handlers
this.$field.off('focus keyup keydown');
//shadow update value of datepicker
this.$field.keyup($.proxy(function(){
this.$input.data('datepicker').date = this.input2value();
}, this));
},
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.$input.datepicker('update');
},
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
}
});
DateField.defaults = $.extend({}, $.fn.editabletypes.date.defaults, {
/**
@property tpl
@default <input type="text">
**/
tpl:'<div class="input-append date"><input class="input-small" type="text"/><span class="add-on"><i class="icon-th"></i></span></div>',
/**
@property inputclass
@default ''
**/
inputclass: '',
datepicker: {autoclose: true},
clear: false
});
$.fn.editabletypes.datefield = DateField;
}(window.jQuery));

6
test/loader.js

@ -75,6 +75,9 @@ define(function () {
loadCss(require.toUrl("./bootstrap-datepicker/css/datepicker.css"));
}
},
//datefield
'inputs/date/datefield': ['inputs/date/date'],
//jqueryui
'jqueryui/js/jquery-ui-1.9.1.custom': {
@ -128,7 +131,8 @@ define(function () {
if(f === 'bootstrap') {
//bootstrap
shim['editable-form/editable-form'].deps.push('inputs/date/date');
// shim['editable-form/editable-form'].deps.push('inputs/date/date');
shim['editable-form/editable-form'].deps.push('inputs/date/datefield');
shim['element/editable-element'].deps.push('editable-form/editable-form-bootstrap');
shim['element/editable-element'].deps.push('containers/editable-popover');
} else if(f === 'jqueryui') {

5
test/unit/date.js

@ -109,10 +109,7 @@ $(function () {
test("viewformat, init by value", function () {
var dview = '15/05/1984',
d = '1984-05-15',
e = $('<a href="#" data-type="date" data-pk="1" data-weekstart="1" data-value="'+d+'"></a>').appendTo('#qunit-fixture').editable({
format: 'yyyy-mm-dd',
viewformat: 'dd/mm/yyyy'
});
e = $('<a href="#" data-type="date" data-pk="1" data-format="yyyy-mm-dd" data-viewformat="dd/mm/yyyy" data-value="'+d+'"></a>').appendTo('#qunit-fixture').editable();
equal(frmt(e.data('editable').value, 'yyyy-mm-dd'), d, 'value correct');
equal(e.text(), dview, 'text correct');