oxjs/source/Ox.UI/js/Form/Ox.Editable.js

186 lines
5.3 KiB
JavaScript
Raw Normal View History

2011-08-12 21:01:19 +00:00
/*@
Ox.Editable <f> Editable element
() -> <f> Input Element
(options) -> <f> Input Element
(options, self) -> <f> Input Element
options <o> Options object
editing <b|false> If true, loads in editing state
format <f|null> Format function
(value) -> <s> Formatted value
value <s> Input value
self <o> Shared private variable
@*/
Ox.Editable = function(options, self) {
self = self || {};
that = Ox.Element('<div>', self)
.defaults({
editing: false,
format: null,
value: '',
2011-08-15 16:41:54 +00:00
width: 256,
2011-08-12 21:01:19 +00:00
type: 'input'
})
.options(options || {})
.addClass('OxEditable')
.bindEvent({
doubleclick: edit
});
2011-08-15 16:41:54 +00:00
self.options.value = self.options.value.toString();
2011-08-12 21:01:19 +00:00
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'
} : {
2011-08-15 16:41:54 +00:00
//padding: '0 4px 0 4px'
width: self.options.width + 'px'
2011-08-12 21:01:19 +00:00
})
.html(
self.options.format
? self.options.format(self.options.value)
: self.options.value
)
//[self.options.editing ? 'hide' : 'show']()
.appendTo(that);
2011-08-15 16:41:54 +00:00
self.$test = self.$value.$element.clone()
.html(self.options.value.replace(/ /g, '&nbsp;'))
.css({
display: 'table-cell',
//position: 'absolute',
//left: 200,
//top: 200
})
.hide()
.appendTo(that.$element);
self.$input = Ox.Input(Ox.extend({
2011-08-12 21:01:19 +00:00
changeOnKeypress: true,
style: 'square',
type: self.options.type,
value: self.options.value
2011-08-15 16:41:54 +00:00
}, self.options.type == 'textarea' ? {
width: self.options.width
} : {}))
2011-08-12 21:01:19 +00:00
.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();
}
function cancel() {
self.$input.hide();
self.$value.show();
self.options.editing = false;
}
function change(event) {
var height, width;
2011-08-15 16:41:54 +00:00
self.options.value = formatValue(event.value);
2011-08-12 21:01:19 +00:00
self.$value.html(
self.options.format
? self.options.format(self.options.value)
: self.options.value
);
2011-08-15 16:41:54 +00:00
self.$test.html(self.options.value.replace(/ /g, '&nbsp;'));
height = self.$test.height();
height = Math.max(self.$test.height(), 14);
width = Math.max(self.$test.width() + 2, 8);
Ox.print('wxh', width, height)
2011-08-12 21:01:19 +00:00
if (self.options.type == 'input') {
self.$input.options({
2011-08-15 16:41:54 +00:00
width: width
2011-08-12 21:01:19 +00:00
});
2011-08-15 16:41:54 +00:00
self.$input.find('input').css({width: width + 'px'});
2011-08-12 21:01:19 +00:00
} else {
self.$input.options({
height: height,
width: width + Ox.UI.SCROLLBAR_SIZE
});
self.$input.find('textarea').css({
height: height + 'px',
width: width + Ox.UI.SCROLLBAR_SIZE + 'px'
});
}
2011-08-15 16:41:54 +00:00
//self.$input.find('input').css({width: width + 2})
2011-08-12 21:01:19 +00:00
/*
that.triggerEvent('change', {
value: event.value
});
*/
}
function edit() {
var height, width;
if (!self.options.editing) {
height = self.$value.height();
width = self.$value.width();
self.$value.hide();
self.$input.options({
height: height,
width: width
}).show();
if (self.options.type == 'input') {
self.$input.find('input').css({width: width + 'px'});
} else {
self.$input.find('textarea').css({
height: height + 'px',
width: width + Ox.UI.SCROLLBAR_SIZE + 'px'
});
}
// fixme: why can't this be chained?
setTimeout(function() {
self.$input.focusInput(false);
}, 0);
self.options.editing = true;
}
}
2011-08-15 16:41:54 +00:00
function formatValue(value) {
if (self.options.type == 'input') {
value = value.replace(/ /g, '&nbsp;');
} else {
value = value.replace(/\n/g, '<br/>')
.replace(/<br\/>$/, '<br/>&nbsp;');
}
return value;
}
2011-08-12 21:01:19 +00:00
function submit() {
self.options.value = self.$input.value();
self.$value.html(
self.options.format
? self.options.format(self.options.value)
: self.options.value
);
cancel();
}
that.css = function(obj) {
that.$element.css(obj);
self.$value.css(obj);
self.$input.css(obj);
self.$input.find('input').css(obj);
//self.$value.css.apply(this, arguments);
//self.$input.css.apply(this, arguments);
return that
};
return that;
};