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

add wysi input, refactor all inputs to append $tpl to form before render()

Browse Source
This commit is contained in:
vitalets
2013-01-07 01:03:09 +04:00
parent cf9b9dea9d
commit ee79d5cec4
23 changed files with 10223 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/editable-form/editable-form-utils.js
View File

@@ -152,39 +152,44 @@
Returns input by options: type, mode.
*/
createInput: function(options) {
var TypeConstructor, typeOptions, input,
type = options.type;
//`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') {
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;
}
var TypeConstructor, typeOptions, input,
type = options.type;
//`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';
}
}
}
//change wysihtml5 to textarea for jquery UI and plain versions
if(type === 'wysihtml5' && !$.fn.editabletypes[type]) {
type = 'textarea';
}
//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;
}
}
};

10
src/editable-form/editable-form.css
View File

@@ -83,6 +83,12 @@
white-space: nowrap;
}
/* set exact width of textarea to fit buttons toolbar */
.editable-wysihtml5 {
width: 566px;
}
/* clear button shown as link in date inputs */
.editable-clear {
clear: both;
font-size: 0.9em;
@@ -90,13 +96,13 @@
text-align: right;
}
/* IOS-style clear button for text inputs */
.editable-clear-x {
background: url('../img/clear.png') center center no-repeat;
display: block;
width: 13px;
height: 13px;
position: absolute;
right: 7px;
opacity: 0.6;
z-index: 100;
}
@@ -117,4 +123,4 @@
position: relative;
margin-left: -20px;
}
*/
*/

50
src/editable-form/editable-form.js
View File

@@ -42,12 +42,12 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
@method render
**/
render: function() {
//init loader
this.$loading = $($.fn.editableform.loading);
this.$div.empty().append(this.$loading);
this.showLoading();
//init form template and buttons
this.initTemplate();
this.initTemplate();
if(this.options.showbuttons) {
this.initButtons();
} else {
@@ -61,32 +61,25 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
**/
this.$div.triggerHandler('rendering');
//show loading state
this.showLoading();
//append input to form
this.$form.find('div.editable-input').append(this.input.$tpl);
//append form to container
this.$div.append(this.$form);
//render input
$.when(this.input.render())
.then($.proxy(function () {
//insert input in form
this.$form.find('div.editable-input').append(this.input.$tpl);
//automatically submit inputs when no buttons shown
//setup input to submit automatically when no buttons shown
if(!this.options.showbuttons) {
this.input.autosubmit();
}
//"clear" link
// if(this.input.$clear) {
// this.$form.find('div.editable-input').append($('<div class="editable-clear">').append(this.input.$clear));
// }
//append form to container
this.$div.append(this.$form);
//attach 'cancel' handler
this.$form.find('.editable-cancel').click($.proxy(this.cancel, this));
//call postrender to perform actions, required when input is in DOM
if(this.input.postrender) {
this.input.postrender();
}
if(this.input.error) {
this.error(this.input.error);
@@ -111,6 +104,11 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
this.$div.triggerHandler('rendered');
this.showForm();
//call shown method to perform actions required form to be shown
if(this.input.shown) {
this.input.shown();
}
}, this));
},
cancel: function() {
@@ -122,11 +120,17 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
this.$div.triggerHandler('cancel');
},
showLoading: function() {
var w;
var w, h;
if(this.$form) {
//set loading size equal to form
this.$loading.width(this.$form.outerWidth());
this.$loading.height(this.$form.outerHeight());
//set loading size equal to form
w = this.$form.outerWidth();
h = this.$form.outerHeight();
if(w) {
this.$loading.width(w);
}
if(h) {
this.$loading.height(h);
}
this.$form.hide();
} else {
//stretch loading to fill container width