forked from 0x2620/oxjs
form elements rewrite, part 1
This commit is contained in:
rlx
parent
cf567e5608
commit
7f83cd3141
30 changed files with 1061 additions and 958 deletions
|
|
@ -31,56 +31,54 @@ Ox.Menu = function(options, self) {
|
|||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
element: null,
|
||||
id: '',
|
||||
items: [],
|
||||
mainmenu: null,
|
||||
maxWidth: 0,
|
||||
offset: {
|
||||
left: 0,
|
||||
top: 0
|
||||
},
|
||||
parent: null,
|
||||
selected: -1,
|
||||
side: 'bottom', // FIXME: should be 'edge'
|
||||
size: 'medium' // fixme: remove
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass(
|
||||
'OxMenu Ox' + Ox.toTitleCase(self.options.side) +
|
||||
' Ox' + Ox.toTitleCase(self.options.size)
|
||||
)
|
||||
.bind({
|
||||
click: click,
|
||||
mouseenter: mouseenter,
|
||||
mouseleave: mouseleave,
|
||||
mousemove: mousemove,
|
||||
mousewheel: mousewheel
|
||||
})
|
||||
.bindEvent({
|
||||
key_up: selectPreviousItem,
|
||||
key_down: selectNextItem,
|
||||
key_left: selectSupermenu,
|
||||
key_right: selectSubmenu,
|
||||
key_escape: hideMenu,
|
||||
key_enter: clickSelectedItem
|
||||
}),
|
||||
// menuHeight,
|
||||
$item; // fixme: used?
|
||||
.defaults({
|
||||
element: null,
|
||||
id: '',
|
||||
items: [],
|
||||
mainmenu: null,
|
||||
maxWidth: 0,
|
||||
offset: {
|
||||
left: 0,
|
||||
top: 0
|
||||
},
|
||||
parent: null,
|
||||
selected: -1,
|
||||
side: 'bottom', // FIXME: should be 'edge'
|
||||
size: 'medium' // fixme: remove
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass(
|
||||
'OxMenu Ox' + Ox.toTitleCase(self.options.side) +
|
||||
' Ox' + Ox.toTitleCase(self.options.size)
|
||||
)
|
||||
.bind({
|
||||
click: click,
|
||||
mouseenter: mouseenter,
|
||||
mouseleave: mouseleave,
|
||||
mousemove: mousemove,
|
||||
mousewheel: mousewheel
|
||||
})
|
||||
.bindEvent({
|
||||
key_up: selectPreviousItem,
|
||||
key_down: selectNextItem,
|
||||
key_left: selectSupermenu,
|
||||
key_right: selectSubmenu,
|
||||
key_escape: hideMenu,
|
||||
key_enter: clickSelectedItem
|
||||
});
|
||||
|
||||
self.itemHeight = self.options.size == 'small'
|
||||
? 12 : self.options.size == 'medium' ? 16 : 20;
|
||||
self.scrollSpeed = 1;
|
||||
|
||||
// construct
|
||||
// render
|
||||
that.items = [];
|
||||
that.submenus = {};
|
||||
that.$scrollbars = [];
|
||||
that.$top = $('<div>')
|
||||
.addClass('OxTop')
|
||||
.appendTo(that.$element);
|
||||
that.$scrollbars.up = constructScrollbar('up')
|
||||
that.$scrollbars.up = renderScrollbar('up')
|
||||
.appendTo(that.$element);
|
||||
that.$container = $('<div>')
|
||||
.addClass('OxContainer')
|
||||
|
|
@ -88,8 +86,8 @@ Ox.Menu = function(options, self) {
|
|||
that.$content = $('<table>')
|
||||
.addClass('OxContent')
|
||||
.appendTo(that.$container);
|
||||
constructItems(self.options.items);
|
||||
that.$scrollbars.down = constructScrollbar('down')
|
||||
renderItems(self.options.items);
|
||||
that.$scrollbars.down = renderScrollbar('down')
|
||||
.appendTo(that.$element);
|
||||
that.$bottom = $('<div>')
|
||||
.addClass('OxBottom')
|
||||
|
|
@ -179,130 +177,6 @@ Ox.Menu = function(options, self) {
|
|||
}
|
||||
}
|
||||
|
||||
function constructItems(items) {
|
||||
|
||||
that.$content.empty();
|
||||
scrollMenuUp();
|
||||
|
||||
self.optionGroups = {};
|
||||
items.forEach(function(item, i) {
|
||||
if (item.group) {
|
||||
items[i] = item.items.map(function(v) {
|
||||
return Ox.extend(v, {
|
||||
group: item.group
|
||||
});
|
||||
});
|
||||
self.optionGroups[item.group] = new Ox.OptionGroup(
|
||||
items[i].filter(function(v) {
|
||||
return 'id' in v;
|
||||
}),
|
||||
'min' in item ? item.min : 1,
|
||||
'max' in item ? item.max : 1
|
||||
);
|
||||
}
|
||||
});
|
||||
items = Ox.flatten(items);
|
||||
|
||||
that.items = [];
|
||||
items.forEach(function(item) {
|
||||
var position;
|
||||
if ('id' in item) {
|
||||
that.items.push(
|
||||
Ox.MenuItem(Ox.extend(item, {
|
||||
maxWidth: self.options.maxWidth,
|
||||
menu: that,
|
||||
position: position = that.items.length
|
||||
}))
|
||||
.data('position', position)
|
||||
.appendTo(that.$content)
|
||||
); // fixme: jquery bug when passing {position: position}? does not return the object?;
|
||||
if (item.items) {
|
||||
that.submenus[item.id] = Ox.Menu({
|
||||
element: that.items[position],
|
||||
id: Ox.toCamelCase(self.options.id + '/' + item.id),
|
||||
items: item.items,
|
||||
mainmenu: self.options.mainmenu,
|
||||
offset: {
|
||||
left: 0,
|
||||
top: -4
|
||||
},
|
||||
parent: that,
|
||||
side: 'right',
|
||||
size: self.options.size,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
that.$content.append(constructSpace());
|
||||
that.$content.append(constructLine());
|
||||
that.$content.append(constructSpace());
|
||||
}
|
||||
});
|
||||
|
||||
if (!that.is(':hidden')) {
|
||||
that.hideMenu();
|
||||
that.showMenu();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function constructLine() {
|
||||
return $('<tr>').append(
|
||||
$('<td>', {
|
||||
'class': 'OxLine',
|
||||
colspan: 5
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function constructScrollbar(direction) {
|
||||
var interval,
|
||||
speed = direction == 'up' ? -1 : 1;
|
||||
return $('<div/>', {
|
||||
'class': 'OxScrollbar Ox' + Ox.toTitleCase(direction),
|
||||
html: Ox.UI.symbols['triangle_' + direction],
|
||||
click: function() { // fixme: do we need to listen to click event?
|
||||
return false;
|
||||
},
|
||||
mousedown: function() {
|
||||
self.scrollSpeed = 2;
|
||||
return false;
|
||||
},
|
||||
mouseenter: function() {
|
||||
self.scrollSpeed = 1;
|
||||
var $otherScrollbar = that.$scrollbars[direction == 'up' ? 'down' : 'up'];
|
||||
$(this).addClass('OxSelected');
|
||||
if ($otherScrollbar.is(':hidden')) {
|
||||
$otherScrollbar.show();
|
||||
that.$container.height(that.$container.height() - self.itemHeight);
|
||||
if (direction == 'down') {
|
||||
that.$content.css({
|
||||
top: -self.itemHeight + 'px'
|
||||
});
|
||||
}
|
||||
}
|
||||
scrollMenu(speed);
|
||||
interval = setInterval(function() {
|
||||
scrollMenu(speed);
|
||||
}, 100);
|
||||
},
|
||||
mouseleave: function() {
|
||||
self.scrollSpeed = 1;
|
||||
$(this).removeClass('OxSelected');
|
||||
clearInterval(interval);
|
||||
},
|
||||
mouseup: function() {
|
||||
self.scrollSpeed = 1;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function constructSpace() {
|
||||
return $('<tr>').append(
|
||||
$('<td>', {'class': 'OxSpace', colspan: 5})
|
||||
);
|
||||
}
|
||||
|
||||
function getElement(id) {
|
||||
// fixme: needed?
|
||||
return $('#' + Ox.toCamelCase(options.id + '/' + id));
|
||||
|
|
@ -387,6 +261,130 @@ Ox.Menu = function(options, self) {
|
|||
}
|
||||
}
|
||||
|
||||
function renderItems(items) {
|
||||
|
||||
that.$content.empty();
|
||||
scrollMenuUp();
|
||||
|
||||
self.optionGroups = {};
|
||||
items.forEach(function(item, i) {
|
||||
if (item.group) {
|
||||
items[i] = item.items.map(function(v) {
|
||||
return Ox.extend(v, {
|
||||
group: item.group
|
||||
});
|
||||
});
|
||||
self.optionGroups[item.group] = new Ox.OptionGroup(
|
||||
items[i].filter(function(v) {
|
||||
return 'id' in v;
|
||||
}),
|
||||
'min' in item ? item.min : 1,
|
||||
'max' in item ? item.max : 1
|
||||
);
|
||||
}
|
||||
});
|
||||
items = Ox.flatten(items);
|
||||
|
||||
that.items = [];
|
||||
items.forEach(function(item) {
|
||||
var position;
|
||||
if (!Ox.isEmpty(item)) {
|
||||
that.items.push(
|
||||
Ox.MenuItem(Ox.extend(item, {
|
||||
maxWidth: self.options.maxWidth,
|
||||
menu: that,
|
||||
position: position = that.items.length
|
||||
}))
|
||||
.data('position', position)
|
||||
.appendTo(that.$content)
|
||||
); // fixme: jquery bug when passing {position: position}? does not return the object?;
|
||||
if (item.items) {
|
||||
that.submenus[item.id] = Ox.Menu({
|
||||
element: that.items[position],
|
||||
id: Ox.toCamelCase(self.options.id + '/' + item.id),
|
||||
items: item.items,
|
||||
mainmenu: self.options.mainmenu,
|
||||
offset: {
|
||||
left: 0,
|
||||
top: -4
|
||||
},
|
||||
parent: that,
|
||||
side: 'right',
|
||||
size: self.options.size,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
that.$content.append(renderSpace());
|
||||
that.$content.append(renderLine());
|
||||
that.$content.append(renderSpace());
|
||||
}
|
||||
});
|
||||
|
||||
if (!that.is(':hidden')) {
|
||||
that.hideMenu();
|
||||
that.showMenu();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function renderLine() {
|
||||
return $('<tr>').append(
|
||||
$('<td>', {
|
||||
'class': 'OxLine',
|
||||
colspan: 5
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function renderScrollbar(direction) {
|
||||
var interval,
|
||||
speed = direction == 'up' ? -1 : 1;
|
||||
return $('<div/>', {
|
||||
'class': 'OxScrollbar Ox' + Ox.toTitleCase(direction),
|
||||
html: Ox.UI.symbols['triangle_' + direction],
|
||||
click: function() { // fixme: do we need to listen to click event?
|
||||
return false;
|
||||
},
|
||||
mousedown: function() {
|
||||
self.scrollSpeed = 2;
|
||||
return false;
|
||||
},
|
||||
mouseenter: function() {
|
||||
self.scrollSpeed = 1;
|
||||
var $otherScrollbar = that.$scrollbars[direction == 'up' ? 'down' : 'up'];
|
||||
$(this).addClass('OxSelected');
|
||||
if ($otherScrollbar.is(':hidden')) {
|
||||
$otherScrollbar.show();
|
||||
that.$container.height(that.$container.height() - self.itemHeight);
|
||||
if (direction == 'down') {
|
||||
that.$content.css({
|
||||
top: -self.itemHeight + 'px'
|
||||
});
|
||||
}
|
||||
}
|
||||
scrollMenu(speed);
|
||||
interval = setInterval(function() {
|
||||
scrollMenu(speed);
|
||||
}, 100);
|
||||
},
|
||||
mouseleave: function() {
|
||||
self.scrollSpeed = 1;
|
||||
$(this).removeClass('OxSelected');
|
||||
clearInterval(interval);
|
||||
},
|
||||
mouseup: function() {
|
||||
self.scrollSpeed = 1;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function renderSpace() {
|
||||
return $('<tr>').append(
|
||||
$('<td>', {'class': 'OxSpace', colspan: 5})
|
||||
);
|
||||
}
|
||||
|
||||
function scrollMenu(speed) {
|
||||
var containerHeight = that.$container.height(),
|
||||
contentHeight = that.$content.height(),
|
||||
|
|
@ -550,7 +548,7 @@ Ox.Menu = function(options, self) {
|
|||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'items') {
|
||||
constructItems(value);
|
||||
renderItems(value);
|
||||
} else if (key == 'selected') {
|
||||
that.$content.find('.OxSelected').removeClass('OxSelected');
|
||||
selectItem(value);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue