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

MainMenu in demos/test/index.html

Browse source
This commit is contained in:
Rolux 2010-02-08 15:05:24 +05:30
parent 81d27621bf
commit a279bc7f6e
5 changed files with 281 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
build/css/ox.ui.classic.css
View file

@ -100,6 +100,11 @@ Menus
================================================================================
*/
.OxThemeClassic .OxMainMenu > .OxTitle.OxSelected {
background: -moz-linear-gradient(top, rgb(176, 176, 176), rgb(144, 144, 144));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(176, 176, 176)), to(rgb(144, 144, 144)));
}
.OxThemeClassic .OxMenu {
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);

47
build/css/ox.ui.css
View file

@ -334,6 +334,53 @@ Menus
================================================================================
*/
.OxMainMenu {
z-index: 10;
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}
.OxMainMenu.OxLarge {
height: 24px;
padding-left: 8px;
}
.OxMainMenu.OxMedium {
height: 20px;
padding-left: 6px;
}
.OxMainMenu.OxSmall {
height: 16px;
padding-left: 4px;
}
.OxMainMenu > .OxTitle {
float: left;
cursor: default;
}
.OxMainMenu.OxLarge > .OxTitle {
height: 21px;
padding-left: 8px;
padding-right: 8px;
padding-top: 3px;
font-size: 14px;
}
.OxMainMenu.OxMedium > .OxTitle {
height: 17px;
padding-left: 6px;
padding-right: 6px;
padding-top: 3px;
font-size: 11px;
}
.OxMainMenu.OxSmall > .OxTitle {
height: 14px;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
font-size: 9px;
}
.OxMainMenu .OxTitle.OxSelected {
background: rgb(48, 48, 48);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(80, 80, 80)), color-stop(1, rgb(48, 48, 48)));
}
.OxMenu {
position: absolute;
display: none;

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

@ -799,7 +799,7 @@ requires
ret = that.$element[v](args[0], args[1], args[2], args[3]);
}
if (v == "data") {
Ox.print("data ret", ret, $(ret))
// Ox.print("data ret", ret, $(ret))
}
// if the $element of an ox object was returned
// then return the ox object instead
@ -905,12 +905,12 @@ requires
/*
triggerEvent(event, fn) or triggerEvent({event0: fn0, event1: fn1, ...})
*/
if (arguments.length == 1) {
if (Ox.isObject(arguments[0])) {
$.each(arguments[0], function(event, fn) {
Ox.Event.trigger(event + "." + that.id, fn);
Ox.Event.trigger(event + "_" + that.id, fn);
});
} else {
Ox.Event.trigger(arguments[0] + "." + that.id, arguments[1]);
Ox.Event.trigger(arguments[0] + "_" + that.id, arguments[1] || {});
}
return that;
}
@ -1162,15 +1162,14 @@ requires
.options(options || {})
.addClass("OxTabbar");
(function() {
Ox.ButtonGroup({
selectable: true,
selected: self.options.selected,
size: "medium",
style: "tab",
values: self.options.values
}).appendTo(that);
})();
Ox.ButtonGroup({
group: true,
selectable: true,
selected: self.options.selected,
size: "medium",
style: "tab",
values: self.options.values
}).appendTo(that);
return that;
@ -1308,10 +1307,8 @@ requires
var self = self || {},
that = new Ox.Element("input", self)
.defaults({
buttonId: null,
//click: function() {},
disabled: false,
groupId: null,
group: false,
selectable: false,
selected: false,
size: "medium",
@ -1362,10 +1359,9 @@ requires
}
}
function click() {
if (self.options.selectable && !(self.options.groupId !== null && self.options.selected)) {
if (self.options.selectable && !(self.options.group && self.options.selected)) {
that.toggleSelected();
}
Ox.print(self.options);
if (self.options.values.length == 2) {
Ox.print("2 values")
that.options({
@ -1379,9 +1375,10 @@ requires
//Ox.print("setOption", option, value)
Ox.print("OxButton onChange", key, value)
if (key == "selected") {
if (value != that.hasClass("OxSelected")) {
if (value != that.hasClass("OxSelected")) { // fixme: neccessary?
that.toggleClass("OxSelected");
}
that.triggerEvent(value ? "select" : "deselect", {});
} else if (key == "value") {
Ox.print("OxButton onChange value", value)
if (self.options.type == "image") {
@ -1391,7 +1388,7 @@ requires
});
} else {
that.val(value);
Ox.Event.trigger("change." + that.id, {
that.triggerEvent("change", {
value: value
});
}
@ -1406,7 +1403,6 @@ requires
that.options({
selected: !self.options.selected
});
that.trigger("OxButtonToggle", self.options);
}
that.options("value", self.options.value);
return that;
@ -1419,10 +1415,11 @@ requires
*/
Ox.ButtonGroup = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
groupId: Ox.uid(),
group: false,
selectable: false,
selected: -1,
size: "medium",
@ -1432,31 +1429,37 @@ requires
})
.options(options || {})
.addClass("OxButtonGroup");
(function() {
that.$buttons = [];
$.each(self.options.values, function(i, v) {
that.$buttons[i] = Ox.Button({
buttonId: i,
groupId: self.options.groupId,
selectable: self.options.selectable,
selected: i == self.options.selected,
size: self.options.size,
style: self.options.style,
type: self.options.type,
value: v
}).appendTo(that);
self.position = {};
that.$buttons = [];
$.each(self.options.values, function(position, value) {
that.$buttons[position] = Ox.Button({
group: self.options.group,
selectable: self.options.selectable,
selected: position == self.options.selected,
size: self.options.size,
style: self.options.style,
type: self.options.type,
value: value
}).appendTo(that);
self.position[that.$buttons.id] = position;
Ox.print("binding", "select_" + that.$buttons[position].id);
that.bindEvent("select_" + that.$buttons[position].id, select);
});
function select(event, data) {
console.log("event", event, "data", data)
var id = event.split("_")[1];
Ox.print("OK")
if (self.options.selected > -1) {
that.$buttons[self.options.selected].toggleSelected();
}
self.options.selected = self.position[id];
that.triggerEvent("change", {
value: id
});
that.$element.bind("OxButtonToggle", function(e, data) {
if (data.groupId = self.options.groupId) {
if (data.selected) {
if (self.options.selected > -1) {
that.$buttons[self.options.selected].toggleSelected();
}
self.options.selected = data.buttonId;
}
}
});
})();
}
return that;
};
@ -1785,11 +1788,11 @@ requires
size: self.options.size
});
that.bindEvent("change." + that.$button.id, changeButton);
that.bindEvent("click." + that.$menu.id, clickMenu);
that.bindEvent("change_" + that.$button.id, changeButton);
that.bindEvent("click_" + that.$menu.id, clickMenu);
function changeButton(event, data) {
that.triggerEvent("change." + that.id, data);
that.triggerEvent("change_" + that.id, data);
}
function clickButton() {
@ -1828,9 +1831,98 @@ requires
var self = self || {},
that = new Ox.Bar({}, self)
.options
.defaults({
menus: [],
size: "medium"
})
.options(options || {})
.addClass("OxMainMenu Ox" + Ox.toTitleCase(self.options.size)) // fixme: bar should accept small/medium/large
.click(click)
.mousemove(mousemove);
}
self.focused = false;
self.selected = -1;
that.titles = [];
that.menus = [];
$.each(options.menus, function(position, menu) {
that.titles[position] = $("<div>")
.addClass("OxTitle")
.html(menu.title)
.data("position", position)
.appendTo(that.$element);
that.menus[position] = new Ox.Menu($.extend(menu, {
element: that.titles[position],
mainmenu: that,
size: self.options.size
}));
Ox.print("binding", "click_" + that.menus[position].id)
that.bindEvent("click_" + that.menus[position].id, clickMenu);
});
function click(event) {
var $target = $(event.target),
position = $target.data("position");
if ($target.is(".OxTitle")) {
clickTitle(position);
} else {
self.focused = false;
}
}
function mousemove(event) {
var $target = $(event.target),
position = $target.data("position");
if (self.focused && position != self.selected) {
clickTitle(position);
}
}
function clickMenu() {
Ox.print("clickMenu!!")
that.titles[self.selected].removeClass("OxSelected");
self.selected = -1;
self.focused = false;
}
function clickTitle(position) {
Ox.print("clickMenu", position)
var title = that.titles[position],
menu = that.menus[position];
if (self.selected > -1) {
that.menus[self.selected].hideMenu();
that.titles[self.selected].removeClass("OxSelected")
}
if (self.selected == position) {
self.focused = false;
self.selected = -1;
} else {
self.focused = true;
self.selected = position;
that.titles[self.selected].addClass("OxSelected");
that.menus[self.selected].showMenu();
}
}
self.onChange = function(key, value) {
};
that.selectNextMenu = function() {
if (self.selected < self.options.menus.length - 1) {
clickTitle(self.selected + 1);
}
};
that.selectPreviousMenu = function() {
if (self.selected) {
clickTitle(self.selected - 1);
}
};
return that;
};
Ox.Menu = function(options, self) {
@ -1840,6 +1932,7 @@ requires
element: null,
id: "",
items: [],
mainmenu: null,
offset: {
left: 0,
top: 0
@ -1920,23 +2013,25 @@ requires
if ($target.is(".OxCell")) {
position = $target.parent().data("position");
item = that.items[position];
Ox.print("...", position, item)
if (!item.options("disabled")) {
clickItem(position);
}
}
that.triggerEvent("click");
}
function clickItem(position) {
var item = that.items[position];
if (that.options("parent")) {
that.options("parent").hideMenu();
}
if (!item.options("items").length) {
if (that.options("parent")) {
that.options("parent").hideMenu().triggerEvent("click");
}
if (item.options("checked") !== null && (!item.options("group") || !item.options("checked"))) {
item.options({
checked: !item.options("checked")
});
Ox.Event.trigger("click." + that.id, {
Ox.Event.trigger("click_" + that.id, {
id: item.options("id"),
value: item.options("title")[0] // fixme: value or title?
});
@ -2103,6 +2198,7 @@ requires
function selectItem(position) {
var item;
Ox.print("selectItem", position)
if (self.options.selected > -1) {
that.items[self.options.selected].removeClass("OxSelected");
}
@ -2114,6 +2210,7 @@ requires
return false;
}
});
Ox.print("length", item.options("items").length)
item.options("items").length && that.submenus[item.options("id")].showMenu(); // fixme: do we want to switch to this style?
item.addClass("OxSelected");
}
@ -2188,18 +2285,23 @@ requires
if (self.options.selected > -1) {
var submenu = that.submenus[that.items[self.options.selected].options("id")];
if (submenu && submenu.hasEnabledItems()) {
//that.loseFocus();
submenu.gainFocus();
submenu.selectFirstItem();
} else if (self.options.mainmenu) {
self.options.mainmenu.selectNextMenu();
}
} else if (self.options.mainmenu) {
self.options.mainmenu.selectNextMenu();
}
}
function selectSupermenu() {
if (self.options.parent) {
that.items[self.options.selected].trigger("mouseleave");
// that.loseFocus();
self.options.parent.gainFocus();
} else if (self.options.mainmenu) {
Ox.print("previousMenu")
self.options.mainmenu.selectPreviousMenu();
}
}
@ -2225,11 +2327,9 @@ requires
return false;
}
});
self.options.selected = -1;
scrollMenuUp();
that.hide();
if (self.options.selected > -1) {
that.items[self.options.selected].trigger("mouseleave");
}
if (self.options.parent) {
self.options.element.removeClass("OxSelected");
}
@ -2243,10 +2343,11 @@ requires
key_enter: clickItem
});
$document.unbind("click", click);
return that;
//that.triggerEvent("hide");
};
that.selectFirstItem = function() {
Ox.print("selectFirstItem")
selectNextItem();
};
@ -2290,6 +2391,8 @@ requires
setTimeout(function() {
$document.bind("click", click);
}, 100);
return that;
//that.triggerEvent("show");
};
that.toggleMenu = function() {
@ -2548,6 +2651,7 @@ requires
dimensions = oxui.getDimensions(self.options.orientation),
edges = oxui.getEdges(self.options.orientation);
$.each(self.options.elements, function(i, v) {
Ox.print("v", v);
var element = v.element
.css({
position: "absolute" // fixme: this can go into a class

74
demos/test/index.html
View file

@ -59,17 +59,67 @@
borderBottom: "1px solid rgb(160, 160, 160)"
})*/;
var topPanel = Ox.Toolbar({size: "small"})
.css({
zIndex: 2,
MozBoxShadow: "0 0 4px rgb(0, 0, 0)",
WebkitBoxShadow: "0 0 4px rgb(0, 0, 0)"
})
.append(
$("<div/>")
.addClass("top")
.html("Ox.js")
);
var mainMenu = new Ox.MainMenu({
menus: [
{
id: "oxjs",
title: "Ox.js",
items: [
{ id: "about", title: "About" },
{},
{ id: "contact", title: "Contact"}
]
},
{
id: "file",
title: "File",
items: [
{ id: "load", title: "Load" },
{ id: "save", title: "Save" },
{ id: "save_ad", title: "Save As..."}
]
},
{
id: "edit",
title: "Edit",
items: [
{ id: "undo", title: "Undo" },
{ id: "redo", title: "Redo" },
{},
{ id: "cut", title: "Cut" },
{ id: "copy", title: "Copy" },
{ id: "paste", title: "Paste"},
{ id: "delete", title: "Delete"},
{},
{ id: "select_all", title: "Select All" },
{ id: "select_none", title: "Select None" },
{ id: "invert_selection", title: "Invert Selection" },
]
},
{
id: "sort",
title: "Sort",
items: [
{ id: "sort_movies", title: "Sort Movies by", items: [
{ checked: true, group: "sort_movies", id: "title", title: "Title"},
{ checked: false, group: "sort_movies", id: "director", title: "Director" },
] },
{ id: "order_movies", title: "Order Movies", items: [
{ checked: false, group: "order_movies", id: "ascending", title: "Ascending"},
{ checked: true, group: "order_movies", id: "descending", title: "Descending" },
] }
]
},
{
id: "help",
title: "Help",
items: [
{ id: "help", title: "Help" }
]
}
],
size: "large"
});
var bottomPanel = Ox.Toolbar({size: "small"})
.css({
zIndex: 2,
@ -84,7 +134,7 @@
var mainSplitPanel = Ox.SplitPanel({
elements: [
{
element: topPanel,
element: mainMenu,
size: 24
},
{

2
demos/test/test.js
View file

@ -220,7 +220,7 @@ Ox = {
.defaults({
bar: "xyz"
})
.options(options || {}),
.options(options || {});
(function() {
self.time = 0;
})();