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

menu demo with select-like element

Browse source
This commit is contained in:
Rolux 2010-02-04 13:32:23 +05:30
commit eb2decae42
6 changed files with 217 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

129
build/js/ox.ui.js
View file

@ -203,9 +203,22 @@ requires
// use dom elements / jquery instead
$eventHandler = $("<div>");
Ox.Event = function() {
var $eventHandler = $("<div>");
return {
bind: function(event, callback) {
$eventHandler.bind(event, callback);
},
trigger: function(event, data) {
$eventHandler.trigger(event, data);
},
unbind: function(event) {
$eventHandler.unbind(event, callback);
}
}
}
Ox.Event_ = function() {
var events = {};
return {
// make these bind, trigger, unbind
@ -1630,6 +1643,7 @@ requires
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
element: null,
id: "",
items: [],
offset: {
@ -1650,9 +1664,9 @@ requires
$item;
// construct
that.$items = [];
that.items = [];
that.submenus = {};
that.$scrollbars = [];
that.$submenus = {};
that.$top = $("<div>")
.addClass("OxTop")
.appendTo(that.$element);
@ -1665,14 +1679,18 @@ requires
.addClass("OxContent")
.appendTo(that.$container);
$.each(self.options.items, function(i, item) {
$.extend(item, {
menu: that
});
if (item.id) {
$item = new Ox.MenuItem(item)
if (!$.isEmptyObject(item.submenu)) {
that.submenus[item.id] = new Ox.Menu(item.submenu);
}
$.extend(item, {
menu: that,
submenu: that.submenus[item.id] || null
});
item = new Ox.MenuItem(item)
.data("pos", i)
.appendTo(that.$content);
that.$items.push($item);
that.items.push(item);
that.$content.append($item);
} else {
that.$content.append(constructSpace());
@ -1688,10 +1706,9 @@ requires
function constructLine() {
return $("<tr>").append(
$("<td>").addClass("OxLine", {
attr: {
colspan: 5
}
$("<td>", {
"class": "OxLine",
colspan: 5
})
);
}
@ -1699,7 +1716,7 @@ requires
function constructScrollbar(direction) {
var interval;
return $("<div/>", {
addClass: "OxScrollBar Ox" + Ox.toTitleCase(direction),
addClass: "OxScrollbar Ox" + Ox.toTitleCase(direction),
html: oxui.symbols["triangle_" + direction],
click: function() { // fixme: do we need to listen to click event?
return false;
@ -1738,10 +1755,9 @@ requires
function constructSpace() {
return $("<tr>").append(
$("<td>").addClass("OxSpace", {
attr: {
colspan: 5
}
$("<td>", {
"class": "OxSpace",
colspan: 5
})
);
}
@ -1787,9 +1803,10 @@ requires
}
that.hideMenu = function() {
$.each(that.$submenus, function(i, $submenu) {
if (!$submenu.is(":hidden")) {
$submenu.hideMenu();
Ox.print("hideMenu")
$.each(that.submenus, function(i, submenu) {
if (!submenu.is(":hidden")) {
submenu.hideMenu();
return false;
}
});
@ -1799,21 +1816,17 @@ requires
that.showMenu = function() {
Ox.print("showMenu")
var offset = that.$element.offset(),
padding = {
left: parseInt(that.$element.css("padding-left")),
top: parseInt(that.$element.css("padding-top")),
},
width = that.$element.width(),
height = that.$element.height(),
left = offset.left + self.options.offset.left + (self.options.side == "bottom" ? 0 : width + padding.left),
top = offset.top + self.options.offset.top + (self.options.side == "bottom" ? height + padding.top : 0),
that.parent().length || that.appendTo($body);
var offset = self.options.element.offset(),
width = self.options.element.outerWidth(),
height = self.options.element.outerHeight(),
left = offset.left + self.options.offset.left + (self.options.side == "bottom" ? 0 : width),
top = offset.top + self.options.offset.top + (self.options.side == "bottom" ? height : 0),
maxHeight = Math.floor(($window.height() - top - 12) / itemHeight) * itemHeight;
that.css({
left: left + "px",
top: top + "px"
}).show();
that.parent().length || that.appendTo($body);
if (height > maxHeight) {
that.$container.height(maxHeight - itemHeight);
that.$scrollbars.down.show();
@ -1835,8 +1848,7 @@ requires
that = new Ox.Element("tr", self)
.defaults({
bind: [],
checked: false,
click: function() {},
checked: null,
disabled: false,
group: "",
icon: "",
@ -1850,9 +1862,9 @@ requires
keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
title: Ox.makeArray(options.title || self.defaults.title)
}))
.addClass("OxMenuItem " + (self.options.disabled ? "OxDisabled" : ""))
.addClass("OxItem" + (self.options.disabled ? " OxDisabled" : ""))
.attr({
id: Ox.toCamelCase(self.options.menu + "/" + self.options.id)
id: Ox.toCamelCase(self.options.menu.id + "/" + self.options.id)
})
.click(click)
.data("group", self.options.group)
@ -1862,31 +1874,29 @@ requires
// construct
that.append(
that.$status = $("<td>", {
addClass: "OxCell OxStatus",
"class": "OxCell OxStatus",
html: self.options.checked ? oxui.symbols.check : ""
})
)
.append(
that.$icon = $("<td>", {
"addClass": "OxCell OxIcon"
"class": "OxCell OxIcon"
})
.append(self.options.icon ?
$("<img>", {
attr: {
src: self.options.icon
}
src: self.options.icon
}) : null
)
)
.append(
that.$title = $("<td>", {
addClass: "OxCell OxTitle",
"class": "OxCell OxTitle",
html: self.options.title[0]
})
)
.append(
$("<td>", {
addClass: "OxCell OxModifiers",
"class": "OxCell OxModifiers",
html: $.map(self.options.keyboard.modifiers, function(modifier) {
return oxui.symbol[modifier];
}).join("")
@ -1894,7 +1904,7 @@ requires
)
.append(
$("<td>", {
addClass: "OxCell Ox" + (self.options.submenu ? "Submenu" : "Key"),
"class": "OxCell Ox" + (self.options.submenu ? "Submenu" : "Key"),
html: self.options.submenu ? oxui.symbols.triangle_right :
oxui.symbols[self.options.keyboard.key] || self.options.keyboard.key
})
@ -1902,17 +1912,19 @@ requires
function click() {
if (!that.hasClass("OxDisabled") && !self.options.submenu) {
menu.hideMenu();
self.options.click();
if (self.options.group && !self.options.checked) {
self.options.menu.hideMenu();
if (self.options.checked !== null && (!self.options.group || !self.options.checked)) {
that.options({
checked: true
})
checked: !self.options.checked
});
}
if (self.options.title.length == 2) {
that.toggleTitle();
}
$eventHandler.trigger("clickMenu", self.options.id);
$("*").trigger("OxClickMenu", {
id: self.options.id,
value: self.options.title // fixme: value or title?
});
return false;
}
}
@ -1922,7 +1934,7 @@ requires
$.each(self.options.menu.submenus, function(id, submenu) {
submenu.hideMenu();
});
$(".OxMenu .OxMenuItem[id!=" + self.options.id + "]").removeClass("selected");
$(".OxMenu .OxItem[id!=" + self.options.id + "]").removeClass("selected");
self.options.submenu && self.options.submenu.showMenu(); // fixme: do we want to switch to this style?
that.addClass("OxSelected");
}
@ -1944,8 +1956,23 @@ requires
}
self.onChange = function(key, value) {
Ox.print("MenuItem", self.options.id, "onChange", key, value);
if (key == "checked") {
that.$status.html(oxui.symbols.checked);
if (value && self.options.group) {
$.each(self.options.menu.items, function(i, item) {
if (
item.options("id") != self.options.id &&
item.options("group") == self.options.group &&
item.options("checked")
) {
item.options({
checked: false
});
return false;
}
});
}
that.$status.html(value ? oxui.symbols.check : "")
} else if (key == "disabled") {
that.toggleClass("disabled"); // fixme: this will only work if onChange is only invoked on actual change
}