oxjs/source/Ox.UI/js/List/Ox.ItemInput.js

177 lines
4.7 KiB
JavaScript
Raw Normal View History

2011-07-29 18:48:43 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-05-16 10:49:48 +00:00
2011-11-05 16:46:53 +00:00
'use strict';
2011-05-16 10:49:48 +00:00
/*@
Ox.ItemInput <f:Ox.Element> ItemInput Object
() -> <f> ItemInput Object
(options) -> <f> ItemInput Object
(options, self) -> <f> ItemInput Object
options <o> Options object
2011-12-22 07:24:20 +00:00
type <s|textarea> can be textarea
2011-05-16 10:49:48 +00:00
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
@*/
2011-04-22 22:03:10 +00:00
Ox.ItemInput = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
type: 'textarea',
value: '',
height: 300,
width: 100
})
2011-05-19 10:18:39 +00:00
.options(options || {});
2011-04-22 22:03:10 +00:00
2011-05-19 10:18:39 +00:00
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;
2011-11-04 15:54:28 +00:00
Ox.Log('List', 'HEIGHT', self.options.height)
2011-05-19 10:18:39 +00:00
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);
/*
2011-04-22 22:03:10 +00:00
that.append(
$input = Ox.Input({
2011-04-22 22:03:10 +00:00
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'})
2011-04-22 22:03:10 +00:00
.css('width', '42%')
.bindEvent({
'click': function() {
that.triggerEvent('cancel');
}
}))
.append(Ox.Button({type: 'text', title: 'Save'})
2011-04-22 22:03:10 +00:00
.css('width', '42%')
.bindEvent({
'click': function() {
that.triggerEvent('save', {
value: $input.value()
});
}
}))
.css({
'margin-top': self.options.height-8,
'height': '16px',
'text-align': 'right',
})
);
2011-11-04 15:54:28 +00:00
Ox.Log('List', $input);
2011-05-19 10:18:39 +00:00
*/
2011-04-22 22:03:10 +00:00
return that;
2011-05-19 10:18:39 +00:00
};