use MenuButton
This commit is contained in:
parent
9f151e2e60
commit
96b206de1a
4 changed files with 24 additions and 36 deletions
|
@ -17,7 +17,6 @@ Ox.Select <f:Ox.Element> Select Object
|
||||||
maxWidth <n|0> Maximum menu width
|
maxWidth <n|0> Maximum menu width
|
||||||
min <n|1> Minimum number of selected items
|
min <n|1> Minimum number of selected items
|
||||||
overlap <s|'none'> Can be 'none', 'left' or 'right'
|
overlap <s|'none'> Can be 'none', 'left' or 'right'
|
||||||
selectable <b|true> is selectable
|
|
||||||
size <s|'medium'> Size, can be small, medium, large
|
size <s|'medium'> Size, can be small, medium, large
|
||||||
style <s|'rounded'> Style ('rounded' or 'square')
|
style <s|'rounded'> Style ('rounded' or 'square')
|
||||||
title <s|''> Select title
|
title <s|''> Select title
|
||||||
|
@ -48,7 +47,6 @@ Ox.Select = function(options, self) {
|
||||||
maxWidth: 0,
|
maxWidth: 0,
|
||||||
min: 1,
|
min: 1,
|
||||||
overlap: 'none', // can be none, left or right
|
overlap: 'none', // can be none, left or right
|
||||||
selectable: true,
|
|
||||||
size: 'medium',
|
size: 'medium',
|
||||||
style: 'rounded',
|
style: 'rounded',
|
||||||
title: '',
|
title: '',
|
||||||
|
@ -78,7 +76,6 @@ Ox.Select = function(options, self) {
|
||||||
|
|
||||||
Ox.Log('Form', 'Ox.Select', self.options);
|
Ox.Log('Form', 'Ox.Select', self.options);
|
||||||
|
|
||||||
if (self.options.selectable) {
|
|
||||||
self.optionGroup = new Ox.OptionGroup(
|
self.optionGroup = new Ox.OptionGroup(
|
||||||
self.options.items,
|
self.options.items,
|
||||||
self.options.min,
|
self.options.min,
|
||||||
|
@ -86,7 +83,6 @@ Ox.Select = function(options, self) {
|
||||||
);
|
);
|
||||||
self.options.items = self.optionGroup.init();
|
self.options.items = self.optionGroup.init();
|
||||||
self.checked = self.optionGroup.checked();
|
self.checked = self.optionGroup.checked();
|
||||||
}
|
|
||||||
|
|
||||||
if (self.options.label) {
|
if (self.options.label) {
|
||||||
self.$label = Ox.Label({
|
self.$label = Ox.Label({
|
||||||
|
@ -127,12 +123,12 @@ Ox.Select = function(options, self) {
|
||||||
self.$menu = Ox.Menu({
|
self.$menu = Ox.Menu({
|
||||||
element: self.$title || self.$button,
|
element: self.$title || self.$button,
|
||||||
id: self.options.id + 'Menu',
|
id: self.options.id + 'Menu',
|
||||||
items: [self.options.selectable ? {
|
items: [{
|
||||||
group: self.options.id + 'Group',
|
group: self.options.id + 'Group',
|
||||||
items: self.options.items,
|
items: self.options.items,
|
||||||
max: self.options.max,
|
max: self.options.max,
|
||||||
min: self.options.min
|
min: self.options.min
|
||||||
} : self.options.items],
|
}],
|
||||||
maxWidth: self.options.maxWidth,
|
maxWidth: self.options.maxWidth,
|
||||||
side: 'bottom', // FIXME: should be edge
|
side: 'bottom', // FIXME: should be edge
|
||||||
size: self.options.size
|
size: self.options.size
|
||||||
|
@ -151,7 +147,6 @@ Ox.Select = function(options, self) {
|
||||||
|
|
||||||
function changeMenu(data) {
|
function changeMenu(data) {
|
||||||
//Ox.Log('Form', 'clickMenu: ', self.options.id, data)
|
//Ox.Log('Form', 'clickMenu: ', self.options.id, data)
|
||||||
if (self.options.selectable) {
|
|
||||||
self.checked = self.optionGroup.checked();
|
self.checked = self.optionGroup.checked();
|
||||||
self.options.value = data.checked.length ? data.checked[0].id : '';
|
self.options.value = data.checked.length ? data.checked[0].id : '';
|
||||||
self.$title && self.$title.html(
|
self.$title && self.$title.html(
|
||||||
|
@ -161,9 +156,6 @@ Ox.Select = function(options, self) {
|
||||||
selected: data.checked,
|
selected: data.checked,
|
||||||
value: self.options.value
|
value: self.options.value
|
||||||
});
|
});
|
||||||
} else {
|
|
||||||
that.triggerEvent('click', data);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTitleWidth() {
|
function getTitleWidth() {
|
||||||
|
@ -232,12 +224,12 @@ Ox.Select = function(options, self) {
|
||||||
() -> <o> returns object of selected items with id, title
|
() -> <o> returns object of selected items with id, title
|
||||||
@*/
|
@*/
|
||||||
that.selected = function() {
|
that.selected = function() {
|
||||||
return self.options.selectable ? self.optionGroup.checked().map(function(v) {
|
return self.optionGroup.checked().map(function(v) {
|
||||||
return {
|
return {
|
||||||
id: self.options.items[v].id,
|
id: self.options.items[v].id,
|
||||||
title: self.options.items[v].title
|
title: self.options.items[v].title
|
||||||
};
|
};
|
||||||
}) : [];
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
|
|
|
@ -107,8 +107,7 @@ Ox.Spreadsheet = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
} else {
|
} else {
|
||||||
Ox.Select({
|
Ox.MenuButton({
|
||||||
selectable: false,
|
|
||||||
style: 'square',
|
style: 'square',
|
||||||
type: 'image',
|
type: 'image',
|
||||||
items: [
|
items: [
|
||||||
|
@ -146,8 +145,7 @@ Ox.Spreadsheet = function(options, self) {
|
||||||
} else {
|
} else {
|
||||||
if (c == -1) {
|
if (c == -1) {
|
||||||
if (r < self.rows) {
|
if (r < self.rows) {
|
||||||
Ox.Select({
|
Ox.MenuButton({
|
||||||
selectable: false,
|
|
||||||
style: 'square',
|
style: 'square',
|
||||||
type: 'image',
|
type: 'image',
|
||||||
items: [
|
items: [
|
||||||
|
|
|
@ -213,7 +213,7 @@ Ox.Map = function(options, self) {
|
||||||
size: 24
|
size: 24
|
||||||
})
|
})
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
self.$select = Ox.Select({
|
self.$select = Ox.MenuButton({
|
||||||
items: Ox.merge(
|
items: Ox.merge(
|
||||||
self.options.editable
|
self.options.editable
|
||||||
? [{id: 'new Place', title: 'New Place...', keyboard: 'n'}, {}]
|
? [{id: 'new Place', title: 'New Place...', keyboard: 'n'}, {}]
|
||||||
|
@ -235,7 +235,6 @@ Ox.Map = function(options, self) {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
),
|
),
|
||||||
selectable: false,
|
|
||||||
title: 'Options...',
|
title: 'Options...',
|
||||||
width: 96
|
width: 96
|
||||||
})
|
})
|
||||||
|
|
|
@ -384,7 +384,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$videoMenuButton = Ox.Select({
|
self.$videoMenuButton = Ox.MenuButton({
|
||||||
items: Ox.merge(
|
items: Ox.merge(
|
||||||
[
|
[
|
||||||
{id: 'toggleSize', title: 'Large Player', selected: self.options.playerSize == 'large', keyboard: 'shift +'},
|
{id: 'toggleSize', title: 'Large Player', selected: self.options.playerSize == 'large', keyboard: 'shift +'},
|
||||||
|
@ -403,7 +403,6 @@ Ox.VideoEditor = function(options, self) {
|
||||||
{id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'}
|
{id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'}
|
||||||
]
|
]
|
||||||
),
|
),
|
||||||
selectable: false,
|
|
||||||
title: 'set',
|
title: 'set',
|
||||||
tooltip: 'Actions and Settings',
|
tooltip: 'Actions and Settings',
|
||||||
type: 'image'
|
type: 'image'
|
||||||
|
|
Loading…
Reference in a new issue