fix some Select/MenuButton bugs
This commit is contained in:
parent
96b206de1a
commit
cf567e5608
2 changed files with 31 additions and 23 deletions
|
@ -17,6 +17,7 @@ Ox.Select <f:Ox.Element> Select Object
|
|||
maxWidth <n|0> Maximum menu width
|
||||
min <n|1> Minimum number of selected items
|
||||
overlap <s|'none'> Can be 'none', 'left' or 'right'
|
||||
selectable <b|true> is selectable
|
||||
size <s|'medium'> Size, can be small, medium, large
|
||||
style <s|'rounded'> Style ('rounded' or 'square')
|
||||
title <s|''> Select title
|
||||
|
@ -47,6 +48,7 @@ Ox.Select = function(options, self) {
|
|||
maxWidth: 0,
|
||||
min: 1,
|
||||
overlap: 'none', // can be none, left or right
|
||||
selectable: true,
|
||||
size: 'medium',
|
||||
style: 'rounded',
|
||||
title: '',
|
||||
|
@ -69,20 +71,22 @@ Ox.Select = function(options, self) {
|
|||
width: self.options.width - 2 + 'px'
|
||||
})
|
||||
.bindEvent({
|
||||
click: showMenu,
|
||||
anyclick: showMenu,
|
||||
key_escape: loseFocus,
|
||||
key_down: showMenu
|
||||
});
|
||||
|
||||
Ox.Log('Form', 'Ox.Select', self.options);
|
||||
|
||||
self.optionGroup = new Ox.OptionGroup(
|
||||
self.options.items,
|
||||
self.options.min,
|
||||
self.options.max
|
||||
);
|
||||
self.options.items = self.optionGroup.init();
|
||||
self.checked = self.optionGroup.checked();
|
||||
if (self.options.selectable) {
|
||||
self.optionGroup = new Ox.OptionGroup(
|
||||
self.options.items,
|
||||
self.options.min,
|
||||
self.options.max
|
||||
);
|
||||
self.options.items = self.optionGroup.init();
|
||||
self.checked = self.optionGroup.checked();
|
||||
}
|
||||
|
||||
if (self.options.label) {
|
||||
self.$label = Ox.Label({
|
||||
|
@ -123,12 +127,12 @@ Ox.Select = function(options, self) {
|
|||
self.$menu = Ox.Menu({
|
||||
element: self.$title || self.$button,
|
||||
id: self.options.id + 'Menu',
|
||||
items: [{
|
||||
items: [self.options.selectable ? {
|
||||
group: self.options.id + 'Group',
|
||||
items: self.options.items,
|
||||
max: self.options.max,
|
||||
min: self.options.min
|
||||
}],
|
||||
} : self.options.items],
|
||||
maxWidth: self.options.maxWidth,
|
||||
side: 'bottom', // FIXME: should be edge
|
||||
size: self.options.size
|
||||
|
@ -147,15 +151,19 @@ Ox.Select = function(options, self) {
|
|||
|
||||
function changeMenu(data) {
|
||||
//Ox.Log('Form', 'clickMenu: ', self.options.id, data)
|
||||
self.checked = self.optionGroup.checked();
|
||||
self.options.value = data.checked.length ? data.checked[0].id : '';
|
||||
self.$title && self.$title.html(
|
||||
self.options.title ? self.options.title : data.checked[0].title
|
||||
);
|
||||
that.triggerEvent('change', {
|
||||
selected: data.checked,
|
||||
value: self.options.value
|
||||
});
|
||||
if (self.options.selectable) {
|
||||
self.checked = self.optionGroup.checked();
|
||||
self.options.value = data.checked.length ? data.checked[0].id : '';
|
||||
self.$title && self.$title.html(
|
||||
self.options.title ? self.options.title : data.checked[0].title
|
||||
);
|
||||
that.triggerEvent('change', {
|
||||
selected: data.checked,
|
||||
value: self.options.value
|
||||
});
|
||||
} else {
|
||||
that.triggerEvent('click', data);
|
||||
}
|
||||
}
|
||||
|
||||
function getTitleWidth() {
|
||||
|
@ -224,12 +232,12 @@ Ox.Select = function(options, self) {
|
|||
() -> <o> returns object of selected items with id, title
|
||||
@*/
|
||||
that.selected = function() {
|
||||
return self.optionGroup.checked().map(function(v) {
|
||||
return self.options.selectable ? self.optionGroup.checked().map(function(v) {
|
||||
return {
|
||||
id: self.options.items[v].id,
|
||||
title: self.options.items[v].title
|
||||
};
|
||||
});
|
||||
}) : [];
|
||||
};
|
||||
|
||||
/*@
|
||||
|
|
|
@ -39,13 +39,13 @@ Ox.MenuButton = function(options, self) {
|
|||
})
|
||||
.options(options || {})
|
||||
.addClass(
|
||||
'OxMenuButton Ox' + Ox.toTitleCase(self.options.style)
|
||||
'OxSelect Ox' + Ox.toTitleCase(self.options.style)
|
||||
)
|
||||
.css(self.options.width == 'auto' ? {} : {
|
||||
width: self.options.width - 2 + 'px'
|
||||
})
|
||||
.bindEvent({
|
||||
click: showMenu
|
||||
anyclick: showMenu
|
||||
});
|
||||
|
||||
if (self.options.type == 'text') {
|
||||
|
|
Loading…
Reference in a new issue