forked from 0x2620/oxjs
MainMenu in demos/test/index.html
This commit is contained in:
Rolux
parent
81d27621bf
commit
a279bc7f6e
5 changed files with 281 additions and 75 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue