0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

use MenuButton

Browse source
This commit is contained in:
rolux 2011-12-20 12:50:37 +05:30
parent 9f151e2e60
commit 96b206de1a
4 changed files with 24 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
source/Ox.UI/js/Form/Ox.Select.js
View file

@ -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,15 +76,13 @@ 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, self.options.max
self.options.max );
); 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,19 +147,15 @@ 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( self.options.title ? self.options.title : data.checked[0].title
self.options.title ? self.options.title : data.checked[0].title );
); that.triggerEvent('change', {
that.triggerEvent('change', { 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
}; };
}) : []; });
}; };
/*@ /*@

6
source/Ox.UI/js/Form/Ox.Spreadsheet.js
View file

@ -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: [

3
source/Ox.UI/js/Map/Ox.Map.js
View file

@ -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
}) })

3
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -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'