163 lines
4.8 KiB
JavaScript
163 lines
4.8 KiB
JavaScript
// vim: et:ts=4:sw=4:sts=4:ft=js
|
|
Ox.Select = function(options, self) {
|
|
|
|
// fixme: selected item needs attribute "checked", not "selected" ... that's strange
|
|
var self = self || {},
|
|
that = new Ox.Element({}, self) // fixme: do we use 'div', or {}, or '', by default?
|
|
.defaults({
|
|
id: '',
|
|
items: [],
|
|
max: 1,
|
|
min: 1,
|
|
overlap: 'none', // can be none, left or right
|
|
selectable: true,
|
|
size: 'medium',
|
|
title: '',
|
|
type: 'text', // can be 'text' or 'image'
|
|
width: 'auto'
|
|
})
|
|
// fixme: make default selection restorable
|
|
// or allow for extra action items below options
|
|
.options(options)
|
|
.addClass(
|
|
'OxSelect Ox' + Ox.toTitleCase(self.options.size) +
|
|
(self.options.overlap == 'none' ? '' : ' OxOverlap' +
|
|
Ox.toTitleCase(self.options.overlap))
|
|
)
|
|
.css(self.options.width == 'auto' ? {} : {
|
|
width: self.options.width + 'px'
|
|
})
|
|
.bindEvent({
|
|
key_escape: loseFocus,
|
|
key_down: showMenu
|
|
});
|
|
|
|
Ox.print('Ox.Select', self.options)
|
|
|
|
$.extend(self, {
|
|
buttonId: self.options.id + 'Button',
|
|
groupId: self.options.id + 'Group',
|
|
menuId: self.options.id + 'Menu'
|
|
});
|
|
|
|
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.type == 'text') {
|
|
self.$title = $('<div>')
|
|
.addClass('OxTitle')
|
|
.css({
|
|
width: (self.options.width - 22) + 'px'
|
|
})
|
|
.html(
|
|
self.options.title ? self.options.title :
|
|
self.options.items[self.checked[0]].title
|
|
)
|
|
.click(showMenu)
|
|
.appendTo(that.$element);
|
|
}
|
|
|
|
self.$button = new Ox.Button({
|
|
id: self.buttonId,
|
|
style: 'symbol',
|
|
title: 'select',
|
|
type: 'image'
|
|
})
|
|
.bindEvent('click', showMenu)
|
|
.appendTo(that);
|
|
|
|
self.$menu = new Ox.Menu({
|
|
element: self.$title || self.$button,
|
|
id: self.menuId,
|
|
items: [self.options.selectable ? {
|
|
group: self.groupId,
|
|
items: self.options.items,
|
|
max: self.options.max,
|
|
min: self.options.min
|
|
} : self.options.items],
|
|
side: 'bottom',
|
|
size: self.options.size
|
|
})
|
|
.bindEvent({
|
|
change: changeMenu,
|
|
click: clickMenu,
|
|
hide: hideMenu
|
|
});
|
|
|
|
self.options.type == 'image' && self.$menu.addClass('OxRight');
|
|
|
|
function clickMenu(event, data) {
|
|
that.triggerEvent('click', data);
|
|
}
|
|
|
|
function changeMenu(event, data) {
|
|
//Ox.print('clickMenu: ', self.options.id, data)
|
|
self.checked = self.optionGroup.checked();
|
|
self.$title && self.$title.html(
|
|
self.options.title ? self.options.title :
|
|
data.checked[0].title
|
|
);
|
|
that.triggerEvent('change', {
|
|
selected: data.checked
|
|
});
|
|
}
|
|
|
|
function hideMenu() {
|
|
//Ox.print('%% hideMenu that', that, 'self', self)
|
|
that.removeClass('OxSelected');
|
|
// self.$button.removeClass('OxSelected');
|
|
//Ox.print('%% hideMenu end')
|
|
}
|
|
|
|
function loseFocus() {
|
|
that.loseFocus();
|
|
}
|
|
|
|
function showMenu() {
|
|
that.gainFocus();
|
|
that.addClass('OxSelected');
|
|
self.$menu.showMenu();
|
|
}
|
|
|
|
self.setOption = function(key, value) {
|
|
|
|
};
|
|
|
|
that.selected = function() {
|
|
return $.map(/*self.checked*/self.optionGroup.checked(), function(v) {
|
|
return {
|
|
id: self.options.items[v].id,
|
|
title: self.options.items[v].title
|
|
};
|
|
});
|
|
};
|
|
|
|
that.selectItem = function(id) {
|
|
//Ox.print('selectItem', id, Ox.getObjectById(self.options.items, id).title)
|
|
self.options.type == 'text' && self.$title.html(
|
|
Ox.getObjectById(self.options.items, id).title[0] // fixme: title should not have become an array
|
|
);
|
|
self.$menu.checkItem(id);
|
|
self.checked = self.optionGroup.checked();
|
|
};
|
|
|
|
/*
|
|
that.width = function(val) {
|
|
// fixme: silly hack, and won't work for css() ... remove!
|
|
that.$element.width(val + 16);
|
|
that.$button.width(val);
|
|
//that.$symbol.width(val);
|
|
return that;
|
|
};
|
|
*/
|
|
|
|
return that;
|
|
|
|
};
|