93 lines
2.3 KiB
JavaScript
93 lines
2.3 KiB
JavaScript
// vim: et:ts=4:sw=4:sts=4:ft=js
|
|
Ox.Picker = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self)
|
|
.defaults({
|
|
element: null,
|
|
elementHeight: 128,
|
|
elementWidth: 256,
|
|
id: '',
|
|
overlap: 'none'
|
|
})
|
|
.options(options || {});
|
|
|
|
self.$selectButton = new Ox.Button({
|
|
overlap: self.options.overlap,
|
|
title: 'select',
|
|
type: 'image'
|
|
})
|
|
.click(showMenu)
|
|
.appendTo(that);
|
|
|
|
self.$menu = new Ox.Element()
|
|
.addClass('OxPicker')
|
|
.css({
|
|
width: self.options.elementWidth + 'px',
|
|
height: (self.options.elementHeight + 24) + 'px'
|
|
});
|
|
|
|
self.options.element
|
|
.css({
|
|
width: self.options.elementWidth + 'px',
|
|
height: self.options.elementHeight + 'px'
|
|
})
|
|
.appendTo(self.$menu);
|
|
|
|
self.$bar = new Ox.Bar({
|
|
orientation: 'horizontal',
|
|
size: 24
|
|
})
|
|
.appendTo(self.$menu);
|
|
|
|
that.$label = new Ox.Label({
|
|
width: self.options.elementWidth - 60
|
|
})
|
|
.appendTo(self.$bar);
|
|
|
|
self.$doneButton = new Ox.Button({
|
|
title: 'Done',
|
|
width: 48
|
|
})
|
|
.click(hideMenu)
|
|
.appendTo(self.$bar);
|
|
|
|
self.$layer = $('<div>')
|
|
.addClass('OxLayer')
|
|
.click(hideMenu);
|
|
|
|
function hideMenu() {
|
|
self.$menu.detach();
|
|
self.$layer.detach();
|
|
self.$selectButton
|
|
.removeClass('OxSelected')
|
|
.css({
|
|
MozBorderRadius: '8px',
|
|
WebkitBorderRadius: '8px'
|
|
});
|
|
that.triggerEvent('hide');
|
|
};
|
|
|
|
function showMenu() {
|
|
var offset = that.offset(),
|
|
left = offset.left,
|
|
top = offset.top + 15;
|
|
self.$selectButton
|
|
.addClass('OxSelected')
|
|
.css({
|
|
MozBorderRadius: '8px 8px 0 0',
|
|
WebkitBorderRadius: '8px 8px 0 0'
|
|
});
|
|
self.$layer.appendTo(Ox.UI.$body);
|
|
self.$menu
|
|
.css({
|
|
left: left + 'px',
|
|
top: top + 'px'
|
|
})
|
|
.appendTo(Ox.UI.$body);
|
|
that.triggerEvent('show');
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|