form elements rewrite, part 1
This commit is contained in:
rlx
parent
cf567e5608
commit
7f83cd3141
30 changed files with 1061 additions and 958 deletions
|
|
@ -10,7 +10,7 @@ Ox.Select <f:Ox.Element> Select Object
|
|||
options <o> Options object
|
||||
disabled <b|false> If true, select is disabled
|
||||
id <s> Element id
|
||||
items <a|[]> Items
|
||||
items <a|[]> Items (array of {id, title} or strings)
|
||||
label <s|''> Label
|
||||
labelWidth <n|64> Label width
|
||||
max <n|1> Maximum number of selected items
|
||||
|
|
@ -25,6 +25,7 @@ Ox.Select <f:Ox.Element> Select Object
|
|||
(e) -> <string> Tooltip title
|
||||
e <object> Mouse event
|
||||
type <s|'text'> Type ('text' or 'image')
|
||||
value <a|s> Selected id, or array of selected ids
|
||||
width <s|n|'auto'> Width in px, or 'auto'
|
||||
self <o> Shared private variable
|
||||
click <!> Click event
|
||||
|
|
@ -33,8 +34,6 @@ Ox.Select <f:Ox.Element> Select Object
|
|||
|
||||
Ox.Select = function(options, self) {
|
||||
|
||||
// fixme: make selected a separate option
|
||||
// fixme: selected item needs attribute "checked", not "selected" ... that's strange
|
||||
self = self || {};
|
||||
var that = Ox.Element({
|
||||
tooltip: options.tooltip || ''
|
||||
|
|
@ -47,18 +46,15 @@ Ox.Select = function(options, self) {
|
|||
max: 1,
|
||||
maxWidth: 0,
|
||||
min: 1,
|
||||
overlap: 'none', // can be none, left or right
|
||||
selectable: true,
|
||||
overlap: 'none',
|
||||
size: 'medium',
|
||||
style: 'rounded',
|
||||
title: '',
|
||||
type: 'text', // can be 'text' or 'image'
|
||||
value: '',
|
||||
type: 'text',
|
||||
value: options.max != 1 ? [] : '',
|
||||
width: 'auto'
|
||||
})
|
||||
// fixme: make default selection restorable
|
||||
// or allow for extra action items below options
|
||||
// fixme: passing value has no effect
|
||||
.options(options)
|
||||
.addClass(
|
||||
'OxSelect Ox' + Ox.toTitleCase(self.options.size)
|
||||
|
|
@ -78,15 +74,22 @@ Ox.Select = function(options, self) {
|
|||
|
||||
Ox.Log('Form', 'Ox.Select', self.options);
|
||||
|
||||
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();
|
||||
}
|
||||
self.options.items = self.options.items.map(function(item) {
|
||||
return {
|
||||
id: item.id || item,
|
||||
title: item.title || item,
|
||||
checked: Ox.toArray(self.options.value).indexOf(item.id || item) > -1
|
||||
};
|
||||
});
|
||||
|
||||
self.optionGroup = new Ox.OptionGroup(
|
||||
self.options.items,
|
||||
self.options.min,
|
||||
self.options.max,
|
||||
'checked'
|
||||
);
|
||||
self.options.items = self.optionGroup.init();
|
||||
self.options.value = self.optionGroup.value();
|
||||
|
||||
if (self.options.label) {
|
||||
self.$label = Ox.Label({
|
||||
|
|
@ -95,14 +98,11 @@ Ox.Select = function(options, self) {
|
|||
title: self.options.label,
|
||||
width: self.options.labelWidth
|
||||
})
|
||||
.click(function() {
|
||||
// fixme: ???
|
||||
// that.focus();
|
||||
})
|
||||
.appendTo(that);
|
||||
}
|
||||
|
||||
if (self.options.type == 'text') {
|
||||
Ox.Log('Form', 'S.O.V.', self.options.value)
|
||||
self.$title = $('<div>')
|
||||
.addClass('OxTitle')
|
||||
.css({
|
||||
|
|
@ -110,7 +110,7 @@ Ox.Select = function(options, self) {
|
|||
})
|
||||
.html(
|
||||
self.options.title
|
||||
|| self.options.items[self.checked[0]].title
|
||||
|| getItem(self.options.value).title
|
||||
)
|
||||
.appendTo(that);
|
||||
}
|
||||
|
|
@ -127,12 +127,12 @@ Ox.Select = function(options, self) {
|
|||
self.$menu = Ox.Menu({
|
||||
element: self.$title || self.$button,
|
||||
id: self.options.id + 'Menu',
|
||||
items: [self.options.selectable ? {
|
||||
items: [{
|
||||
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
|
||||
|
|
@ -150,20 +150,18 @@ Ox.Select = function(options, self) {
|
|||
}
|
||||
|
||||
function changeMenu(data) {
|
||||
//Ox.Log('Form', 'clickMenu: ', self.options.id, data)
|
||||
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);
|
||||
}
|
||||
self.options.value = self.optionGroup.value();
|
||||
Ox.Log('Form', 'changeMenu: ', data, 'value:', self.options.value, 'checked:', self.optionGroup.checked())
|
||||
self.$title && self.$title.html(
|
||||
self.options.title ? self.options.title : getItem(self.options.value).title
|
||||
);
|
||||
that.triggerEvent('change', {
|
||||
value: self.options.value
|
||||
});
|
||||
}
|
||||
|
||||
function getItem(id) {
|
||||
return Ox.getObjectById(self.options.items, id);
|
||||
}
|
||||
|
||||
function getTitleWidth() {
|
||||
|
|
@ -174,16 +172,18 @@ Ox.Select = function(options, self) {
|
|||
}
|
||||
|
||||
function hideMenu() {
|
||||
//Ox.Log('Form', '%% hideMenu that', that, 'self', self)
|
||||
that.loseFocus();
|
||||
that.removeClass('OxSelected');
|
||||
// self.$button.removeClass('OxSelected');
|
||||
//Ox.Log('Form', '%% hideMenu end')
|
||||
}
|
||||
|
||||
function loseFocus() {
|
||||
that.loseFocus();
|
||||
}
|
||||
|
||||
function selectItem() {
|
||||
|
||||
}
|
||||
|
||||
function showMenu() {
|
||||
that.gainFocus();
|
||||
that.addClass('OxSelected');
|
||||
|
|
@ -202,12 +202,18 @@ Ox.Select = function(options, self) {
|
|||
self.$button.options({title: value});
|
||||
}
|
||||
} else if (key == 'width') {
|
||||
Ox.Log('Form', 'SETTING WIDTH OPTION', value)
|
||||
Ox.Log('Form', 'SETTING WIDTH OPTION', value);
|
||||
that.css({width: value - 2 + 'px'});
|
||||
self.$title.css({width: getTitleWidth() + 'px'});
|
||||
} else if (key == 'value') {
|
||||
Ox.Log('Form', 'SETTING VALUE OPTION', value)
|
||||
that.selectItem(value);
|
||||
Ox.Log('Form', 'SETTING VALUE OPTION', value);
|
||||
if (self.options.type == 'text' && !self.options.title) {
|
||||
self.$title.html(getItem(value).title);
|
||||
}
|
||||
Ox.toArray(value).forEach(function(value) {
|
||||
self.$menu.checkItem(value);
|
||||
});
|
||||
self.options.value = self.optionGroup.value();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -225,33 +231,17 @@ Ox.Select = function(options, self) {
|
|||
self.superRemove();
|
||||
};
|
||||
|
||||
// FIXME: selected() _and_ selectItem() _and_ value() ???
|
||||
|
||||
/*@
|
||||
selected <f> gets selected item
|
||||
() -> <o> returns object of selected items with id, title
|
||||
() -> <o> returns array of selected items with id and title
|
||||
@*/
|
||||
that.selected = function() {
|
||||
return self.options.selectable ? self.optionGroup.checked().map(function(v) {
|
||||
return Ox.toArray(self.optionGroup.value()).map(function(id) {
|
||||
return {
|
||||
id: self.options.items[v].id,
|
||||
title: self.options.items[v].title
|
||||
id: id,
|
||||
title: getItem(id).title
|
||||
};
|
||||
}) : [];
|
||||
};
|
||||
|
||||
/*@
|
||||
selectItem <f> select item in group
|
||||
(id) -> <u> select item by id
|
||||
id <s> item id
|
||||
@*/
|
||||
that.selectItem = function(id) {
|
||||
Ox.Log('Form', 'selectItem', id, self.options.items, self.options.items.length, Ox.getObjectById(self.options.items, id))
|
||||
self.options.type == 'text' && self.$title.html(
|
||||
Ox.getObjectById(self.options.items, id).title
|
||||
);
|
||||
self.$menu.checkItem(id);
|
||||
self.checked = self.optionGroup.checked();
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
@ -264,22 +254,6 @@ Ox.Select = function(options, self) {
|
|||
};
|
||||
*/
|
||||
|
||||
that.value = function() {
|
||||
var selected;
|
||||
if (arguments.length == 0) {
|
||||
selected = that.selected();
|
||||
return selected.length ? that.selected()[0].id : '';
|
||||
} else {
|
||||
that.selectItem(arguments[0]);
|
||||
return that;
|
||||
/*
|
||||
Ox.Log('Form', 'ELSE');
|
||||
that.selectItem(arguments[0]);
|
||||
return that;
|
||||
*/
|
||||
}
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue