174 lines
4.7 KiB
JavaScript
174 lines
4.7 KiB
JavaScript
// vim: et:ts=4:sw=4:sts=4:ft=js
|
|
|
|
/*@
|
|
Ox.ItemInput <f:Ox.Element> ItemInput Object
|
|
() -> <f> ItemInput Object
|
|
(options) -> <f> ItemInput Object
|
|
(options, self) -> <f> ItemInput Object
|
|
options <o> Options object
|
|
type <s|textarea> can be textare
|
|
value <s> default value
|
|
height <n|300> height
|
|
width <n|100> width
|
|
self <o> shared private variable
|
|
cancel <!> triggered if cancel button is pressed
|
|
save <!> triggered if save button is pressed
|
|
@*/
|
|
|
|
Ox.ItemInput = function(options, self) {
|
|
|
|
self = self || {};
|
|
var that = Ox.Element({}, self)
|
|
.defaults({
|
|
type: 'textarea',
|
|
value: '',
|
|
height: 300,
|
|
width: 100
|
|
})
|
|
.options(options || {});
|
|
|
|
self.$input = Ox.Input({
|
|
changeOnKeypress: true,
|
|
height: self.options.height,
|
|
style: 'square',
|
|
type: self.options.type,
|
|
value: self.options.value,
|
|
width: self.options.width + 6
|
|
})
|
|
.bind({
|
|
mousedown: function(e) {
|
|
// keep mousedown from reaching list
|
|
e.stopPropagation();
|
|
}
|
|
})
|
|
.bindEvent({
|
|
change: function(data) {
|
|
self.options.height = data.value.split('\n').length * 13;
|
|
Ox.print('HEIGHT', self.options.height)
|
|
self.$input.options({
|
|
height: self.options.height
|
|
});
|
|
that.css({
|
|
height: self.options.height + 16 + 'px'
|
|
});
|
|
that.parent().css({
|
|
height: self.options.height + 24 + 'px'
|
|
});
|
|
self.$bar.css({
|
|
marginTop: 8 + 'px'
|
|
});
|
|
}
|
|
})
|
|
.appendTo(that);
|
|
|
|
self.$bar = Ox.Bar({
|
|
size: 16
|
|
})
|
|
.css({
|
|
marginTop: self.options.height - 8 + 'px'
|
|
})
|
|
.appendTo(that);
|
|
|
|
Ox.Button({
|
|
style: 'symbol',
|
|
title: 'delete',
|
|
tooltip: 'Remove',
|
|
type: 'image'
|
|
})
|
|
.css({float: 'left'})
|
|
.bindEvent({
|
|
click: function() {
|
|
that.triggerEvent('remove');
|
|
}
|
|
})
|
|
.appendTo(self.$bar);
|
|
|
|
Ox.Button({
|
|
style: 'symbol',
|
|
title: 'check',
|
|
tooltip: 'Save',
|
|
type: 'image'
|
|
})
|
|
.css({float: 'right'})
|
|
.bindEvent({
|
|
click: function() {
|
|
that.triggerEvent('save', {
|
|
value: self.$input.value()
|
|
});
|
|
}
|
|
})
|
|
.appendTo(self.$bar);
|
|
|
|
Ox.Button({
|
|
style: 'symbol',
|
|
title: 'view',
|
|
tooltip: 'Preview',
|
|
type: 'image'
|
|
})
|
|
.css({float: 'right'})
|
|
.bindEvent({
|
|
click: function() {
|
|
that.triggerEvent('preview');
|
|
}
|
|
})
|
|
.appendTo(self.$bar);
|
|
|
|
Ox.Button({
|
|
style: 'symbol',
|
|
title: 'close',
|
|
tooltip: 'Cancel',
|
|
type: 'image'
|
|
})
|
|
.css({float: 'right'})
|
|
.bindEvent({
|
|
click: function() {
|
|
that.triggerEvent('cancel');
|
|
}
|
|
})
|
|
.appendTo(self.$bar);
|
|
|
|
/*
|
|
that.append(
|
|
$input = Ox.Input({
|
|
height: self.options.height,
|
|
style: 'square',
|
|
type: self.options.type,
|
|
value: self.options.value,
|
|
width: self.options.width + 6
|
|
})
|
|
.bind({
|
|
mousedown: function(e) {
|
|
// keep mousedown from reaching list
|
|
e.stopPropagation();
|
|
}
|
|
})
|
|
)
|
|
.append(Ox.Element()
|
|
.append(Ox.Button({type: 'text', title: 'Cancel'})
|
|
.css('width', '42%')
|
|
.bindEvent({
|
|
'click': function() {
|
|
that.triggerEvent('cancel');
|
|
}
|
|
}))
|
|
.append(Ox.Button({type: 'text', title: 'Save'})
|
|
.css('width', '42%')
|
|
.bindEvent({
|
|
'click': function() {
|
|
that.triggerEvent('save', {
|
|
value: $input.value()
|
|
});
|
|
}
|
|
}))
|
|
.css({
|
|
'margin-top': self.options.height-8,
|
|
'height': '16px',
|
|
'text-align': 'right',
|
|
})
|
|
);
|
|
Ox.print($input);
|
|
*/
|
|
|
|
return that;
|
|
|
|
};
|