sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

use Ox.Editable in Ox.AnnotationPanel

Browse source
This commit is contained in:
rlx 2011-10-27 13:13:28 +00:00
commit a949ad2cf4
5 changed files with 53 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -27,7 +27,7 @@ Ox.Editable = function(options, self) {
placeholder: '',
tooltip: '',
value: '',
width: 256,
width: 0,
type: 'input'
})
.options(options || {})
@ -81,11 +81,13 @@ Ox.Editable = function(options, self) {
}, self.options.type == 'textarea' ? {
width: self.options.width
} : {}))
.css({display: 'none'})
.css({
display: 'none',
})
.bindEvent({
blur: submit,
cancel: cancel,
change: change,
change: change
//submit: submit
})
//[self.options.editing ? 'show' : 'hide']()
@ -98,9 +100,13 @@ Ox.Editable = function(options, self) {
}
function cancel() {
self.$input.hide();
self.$value.show();
self.options.editing = false;
self.options.value = self.originalValue;
self.$input.options({value: formatInputValue()}).hide();
self.$test.html(formatTestValue());
self.$value.html(formatValue()).show();
that.triggerEvent('submit', {
value: self.options.value
});
}
function change(event) {
@ -109,10 +115,8 @@ Ox.Editable = function(options, self) {
self.$value.html(formatValue);
self.$test.html(formatTestValue());
height = self.options.height || self.$test.height();
//height = Math.max(self.$test.height(), 14);
width = Math.max(self.$test.width() + 2, 8);
width = Ox.limit(self.$test.width() + 2, self.minWidth, self.maxWidth)
Ox.print('wxh', width, height)
width = self.options.width || Ox.limit(self.$test.width() + 2, self.minWidth, self.maxWidth)
Ox.print(self.options.width, self.$test.width(), 'wxh', width, height)
if (self.options.type == 'input') {
self.$input.options({
width: width
@ -141,6 +145,7 @@ Ox.Editable = function(options, self) {
function edit() {
var height, width;
if (self.options.editable && !self.options.editing) {
self.originalValue = self.options.value;
self.minWidth = 8
self.maxWidth = that.parent().width();
Ox.print('MAX WIDTH', self.maxWidth);
@ -169,6 +174,7 @@ Ox.Editable = function(options, self) {
self.$input.focusInput(false);
}, 0);
self.options.editing = true;
that.triggerEvent('edit', {editing: true});
}
}
@ -179,14 +185,10 @@ Ox.Editable = function(options, self) {
}
function formatTestValue() {
Ox.print('TEST VALUE =', self.options.type == 'input'
? self.options.value.replace(/ /g, ' ')
: self.options.value.replace(/\n$/, '<br/>&nbsp;')
.replace(/\n/g, '<br/>'));
return self.options.type == 'input'
? self.options.value.replace(/ /g, '&nbsp;')
: self.options.value.replace(/\n$/, '<br/>&nbsp;')
.replace(/\n/g, '<br/>');
: Ox.parseHTML(self.options.value || '&nbsp;')
.replace(/<br\/?>$/, '<br/>&nbsp;');
}
function formatValue() {
@ -197,9 +199,10 @@ Ox.Editable = function(options, self) {
function submit() {
self.options.value = Ox.parseHTML(self.$input.value());
self.$input.value(formatInputValue());
self.$value.html(formatValue());
cancel();
self.$input.options({value: formatInputValue()}).hide();
self.$test.html(formatTestValue());
self.$value.html(formatValue()).show();
self.options.editing = false;
that.triggerEvent('submit', {
value: self.options.value
});