oxjs/source/UI/js/Form/Picker.js

111 lines
2.7 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2012-05-21 10:38:18 +00:00
2011-05-16 08:24:46 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.Picker <f> Picker Object
2011-05-16 08:24:46 +00:00
options <o> Options object
2011-05-16 10:49:48 +00:00
element <o|null> picker element
elementHeight <n|128> height
elemementWidth <n|256> width
id <s> picker id
overlap <s|none> select button overlap value
self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> Picker Object
show <!> picker is shown
hide <!> picker is hidden
2011-05-16 08:24:46 +00:00
@*/
2011-04-22 22:03:10 +00:00
Ox.Picker = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
element: null,
elementHeight: 128,
elementWidth: 256,
overlap: 'right', // 'none'
2011-04-22 22:03:10 +00:00
})
.options(options || {});
self.$selectButton = Ox.Button({
2011-04-22 22:03:10 +00:00
overlap: self.options.overlap,
title: 'select',
type: 'image'
})
.bindEvent({
click: showMenu
})
2011-04-22 22:03:10 +00:00
.appendTo(that);
self.$menu = Ox.Element()
2011-04-22 22:03:10 +00:00
.addClass('OxPicker')
.css({
width: self.options.elementWidth + 'px',
height: (self.options.elementHeight + 24) + 'px'
});
self.options.element.css({
2011-04-22 22:03:10 +00:00
width: self.options.elementWidth + 'px',
height: self.options.elementHeight + 'px'
})
.appendTo(self.$menu);
self.$bar = Ox.Bar({
2011-04-22 22:03:10 +00:00
orientation: 'horizontal',
size: 24
})
.appendTo(self.$menu);
that.$label = Ox.Label({
2011-04-22 22:03:10 +00:00
width: self.options.elementWidth - 60
})
.appendTo(self.$bar);
self.$doneButton = Ox.Button({
2013-05-09 13:03:33 +00:00
title: Ox._('Done'),
2011-04-22 22:03:10 +00:00
width: 48
})
.bindEvent({
click: hideMenu
})
2011-04-22 22:03:10 +00:00
.appendTo(self.$bar);
self.$layer = Ox.$('<div>')
2011-04-22 22:03:10 +00:00
.addClass('OxLayer')
.on({
click: hideMenu
});
2011-04-22 22:03:10 +00:00
function hideMenu() {
self.$menu.detach();
self.$layer.detach();
self.$selectButton
.removeClass('OxSelected')
.css({
borderRadius: '8px'
2011-04-22 22:03:10 +00:00
});
that.triggerEvent('hide');
}
2011-04-22 22:03:10 +00:00
function showMenu() {
var offset = that.offset(),
left = offset.left,
top = offset.top + 15;
self.$selectButton
.addClass('OxSelected')
.css({
borderRadius: '8px 8px 0 0'
2011-04-22 22:03:10 +00:00
});
self.$layer.appendTo(Ox.Fullscreen.element ? Ox.Fullscreen.element : Ox.$body);
2011-04-22 22:03:10 +00:00
self.$menu
.css({
left: left + 'px',
top: top + 'px'
})
.appendTo(Ox.$body);
2011-04-22 22:03:10 +00:00
that.triggerEvent('show');
}
2011-04-22 22:03:10 +00:00
return that;
};