0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

Ox.Editable: delay expensive creation of extra elements until actual edit

Browse source
This commit is contained in:
rlx 2011-10-30 08:32:57 +00:00
parent 17b9d0ff73
commit abb1c73214
1 changed files with 35 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
source/Ox.UI/js/Form/Ox.Editable.js
View file

@ -51,53 +51,14 @@ Ox.Editable = function(options, self) {
self.options.value = self.options.value.toString();
self.css = {};
self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>')
.addClass('OxValue')
.css(self.options.type == 'input' ? {
//height: '14px',
//padding: '1px 4px 1px 4px',
//border: '1px solid transparent'
} : {
//padding: '0 4px 0 4px'
//width: self.options.width + 'px'
})
//.css({background: 'red'})
.html(formatValue())
//[self.options.editing ? 'hide' : 'show']()
.appendTo(that);
self.$test = self.$value.$element.clone()
.css({
display: 'inline-block',
//position: 'absolute',
//left: 200,
//top: 200
})
.html(formatTestValue())
.hide()
.appendTo(that.$element);
self.$input = Ox.Input(Ox.extend({
changeOnKeypress: true,
style: 'square',
type: self.options.type,
value: formatInputValue()
}, self.options.type == 'textarea' ? {
width: self.options.width
} : {}))
.css({
display: 'none',
})
.bindEvent({
blur: submit,
cancel: cancel,
change: change
//submit: submit
})
//[self.options.editing ? 'show' : 'hide']()
.hide()
.appendTo(that.$element);
if (self.options.editing) {
self.options.editing = false;
edit();
@ -137,9 +98,7 @@ Ox.Editable = function(options, self) {
width: width /*+ Ox.UI.SCROLLBAR_SIZE*/ + 'px'
});
}
//self.$input.find('input').css({width: width + 2})
/*
that.triggerEvent('change', {
value: event.value
@ -158,13 +117,34 @@ Ox.Editable = function(options, self) {
height = self.options.height || self.$value.height();
width = self.options.width || self.$value.width();
self.$value.hide();
Ox.print("H:::", self.options.height, self.maxHeight, height)
Ox.print('H:::', self.options.height, height)
if (!self.$test) {
self.$test = self.$value.$element.clone()
.css(Ox.extend({display: 'inline-block'}, self.css))
.html(formatTestValue())
.hide()
.appendTo(that.$element);
self.$input = Ox.Input({
changeOnKeypress: true,
style: 'square',
type: self.options.type,
value: formatInputValue(),
})
.css(self.css)
.bindEvent({
blur: submit,
cancel: cancel,
change: change
//submit: submit
})
.appendTo(that.$element);
self.$input.find('input').css(self.css);
}
self.$input.options({
height: height,
width: width
}).show();
width: width,
height: height
})
.show();
if (self.options.type == 'input') {
self.$input.find('input').css({
height: height + 'px',
@ -217,15 +197,13 @@ Ox.Editable = function(options, self) {
});
}
that.css = function(obj) {
that.$element.css(obj);
self.$value.css(obj);
self.$test.css(obj).hide();
self.$input.css(obj).hide();
self.$input.find('input').css(obj);
//self.$value.css.apply(this, arguments);
//self.$input.css.apply(this, arguments);
return that
that.css = function(css) {
self.css = css;
that.$element.css(css);
self.$value.css(css);
self.$test && self.$test.css(css);
self.$input && self.$input.css(css);
return that;
};
return that;