simplifying menu
This commit is contained in:
Rolux
parent
73ea43ec01
commit
1cfaacd79e
3 changed files with 89 additions and 80 deletions
|
|
@ -58,14 +58,6 @@ Dialog
|
||||||
================================================================================
|
================================================================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.OxLayer {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.OxDialog {
|
.OxDialog {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
-moz-border-radius: 8px;
|
-moz-border-radius: 8px;
|
||||||
|
|
@ -328,6 +320,27 @@ OxSelect
|
||||||
.OxSelect.OxMedium > .OxSymbol {
|
.OxSelect.OxMedium > .OxSymbol {
|
||||||
margin: -16px 8px 0 8px;
|
margin: -16px 8px 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
================================================================================
|
||||||
|
Layers
|
||||||
|
================================================================================
|
||||||
|
*/
|
||||||
|
.OxLayer {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.OxMainMenuLayer {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
top: 24px;
|
||||||
|
bottom: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
/*
|
/*
|
||||||
================================================================================
|
================================================================================
|
||||||
Menus
|
Menus
|
||||||
|
|
@ -335,7 +348,7 @@ Menus
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.OxMainMenu {
|
.OxMainMenu {
|
||||||
z-index: 10;
|
z-index: 9;
|
||||||
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
||||||
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
||||||
}
|
}
|
||||||
|
|
@ -383,6 +396,8 @@ Menus
|
||||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(80, 80, 80)), color-stop(1, 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 {
|
.OxMenu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
||||||
|
|
@ -842,12 +842,14 @@ requires
|
||||||
};
|
};
|
||||||
that.gainFocus = function() {
|
that.gainFocus = function() {
|
||||||
Ox.Focus.focus(that.id);
|
Ox.Focus.focus(that.id);
|
||||||
|
return that;
|
||||||
};
|
};
|
||||||
that.hasFocus = function() {
|
that.hasFocus = function() {
|
||||||
return Ox.Focus.focused() == that.id;
|
return Ox.Focus.focused() == that.id;
|
||||||
};
|
};
|
||||||
that.loseFocus = function() {
|
that.loseFocus = function() {
|
||||||
Ox.Focus.blur(that.id);
|
Ox.Focus.blur(that.id);
|
||||||
|
return that;
|
||||||
};
|
};
|
||||||
that.options = function() { // fixme: use Ox.getset
|
that.options = function() { // fixme: use Ox.getset
|
||||||
/*
|
/*
|
||||||
|
|
@ -1237,7 +1239,10 @@ requires
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
that.$title = new Ox.Element().addClass("OxTitle").html(options.title).appendTo(that.$titlebar);
|
that.$title = new Ox.Element()
|
||||||
|
.addClass("OxTitle")
|
||||||
|
.html(options.title)
|
||||||
|
.appendTo(that.$titlebar);
|
||||||
that.$content = new Ox.Container()
|
that.$content = new Ox.Container()
|
||||||
.addClass("OxContent")
|
.addClass("OxContent")
|
||||||
.css({
|
.css({
|
||||||
|
|
@ -1279,7 +1284,7 @@ requires
|
||||||
if (!that.$layer.length) {
|
if (!that.$layer.length) {
|
||||||
that.$layer = new Ox.Element()
|
that.$layer = new Ox.Element()
|
||||||
.addClass("OxLayer")
|
.addClass("OxLayer")
|
||||||
.appendTo($("body"));
|
.appendTo($body);
|
||||||
}
|
}
|
||||||
that.css({
|
that.css({
|
||||||
opacity: 0
|
opacity: 0
|
||||||
|
|
@ -1843,8 +1848,9 @@ requires
|
||||||
|
|
||||||
self.focused = false;
|
self.focused = false;
|
||||||
self.selected = -1;
|
self.selected = -1;
|
||||||
that.titles = [];
|
|
||||||
that.menus = [];
|
that.menus = [];
|
||||||
|
that.titles = [];
|
||||||
|
that.layer = $("<div>").addClass("OxLayer");
|
||||||
|
|
||||||
$.each(options.menus, function(position, menu) {
|
$.each(options.menus, function(position, menu) {
|
||||||
var event =
|
var event =
|
||||||
|
|
@ -1858,65 +1864,56 @@ requires
|
||||||
mainmenu: that,
|
mainmenu: that,
|
||||||
size: self.options.size
|
size: self.options.size
|
||||||
}));
|
}));
|
||||||
that.bindEvent("click_" + that.menus[position].options("id"), clickMenu);
|
that.bindEvent("hide_" + that.menus[position].options("id"), onHideMenu);
|
||||||
});
|
});
|
||||||
|
|
||||||
function click(event) {
|
function click(event) {
|
||||||
var $target = $(event.target),
|
var $target = $(event.target),
|
||||||
position = $target.data("position");
|
position = typeof $target.data("position") != "undefined" ?
|
||||||
if ($target.is(".OxTitle")) {
|
$target.data("position") : -1;
|
||||||
clickTitle(position);
|
clickTitle(position);
|
||||||
} else {
|
}
|
||||||
self.focused = false;
|
|
||||||
|
function clickTitle(position) {
|
||||||
|
var selected = self.selected;
|
||||||
|
if (self.selected > -1) {
|
||||||
|
that.menus[self.selected].hideMenu();
|
||||||
|
}
|
||||||
|
if (position > -1) {
|
||||||
|
Ox.print("position", position, "self.selected", self.selected)
|
||||||
|
if (position != selected) {
|
||||||
|
self.focused = true;
|
||||||
|
self.selected = position;
|
||||||
|
Ox.print("position", position, "setting self.selected", self.selected)
|
||||||
|
that.titles[self.selected].addClass("OxSelected");
|
||||||
|
that.menus[self.selected].showMenu();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function mousemove(event) {
|
function mousemove(event) {
|
||||||
var $target = $(event.target),
|
var $target = $(event.target),
|
||||||
position = typeof $target.data("position") != "undefined" ? $target.data("position") : -1;
|
focused,
|
||||||
if (self.focused) {
|
position = typeof $target.data("position") != "undefined" ?
|
||||||
if (self.focused && position != self.selected) {
|
$target.data("position") : -1;
|
||||||
clickTitle(position);
|
if (self.focused && position != self.selected) {
|
||||||
}
|
if (position > -1) {
|
||||||
}
|
clickTitle(position);
|
||||||
}
|
|
||||||
|
|
||||||
function clickMenu() {
|
|
||||||
Ox.print("self.selected", self.selected)
|
|
||||||
that.titles[self.selected].removeClass("OxSelected");
|
|
||||||
self.selected = -1;
|
|
||||||
self.focused = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function clickTitle(position) {
|
|
||||||
var menu, title;
|
|
||||||
if (position == -1) {
|
|
||||||
if (self.selected > -1) {
|
|
||||||
that.menus[self.selected].hideMenu();
|
|
||||||
that.titles[self.selected].removeClass("OxSelected");
|
|
||||||
self.selected = -1;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
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 {
|
} else {
|
||||||
Ox.print("pos", position)
|
focused = self.focused;
|
||||||
self.focused = true;
|
that.menus[self.selected].hideMenu();
|
||||||
self.selected = position;
|
self.focused = focused;
|
||||||
Ox.print("s.s", self.selected)
|
|
||||||
that.titles[self.selected].addClass("OxSelected");
|
|
||||||
that.menus[self.selected].showMenu();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onHideMenu() {
|
||||||
|
Ox.print("hideMenu self.selected", self.selected)
|
||||||
|
that.titles[self.selected].removeClass("OxSelected");
|
||||||
|
self.focused = false;
|
||||||
|
self.selected = -1;
|
||||||
|
}
|
||||||
|
|
||||||
self.onChange = function(key, value) {
|
self.onChange = function(key, value) {
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
@ -2029,24 +2026,21 @@ requires
|
||||||
that.$bottom = $("<div>")
|
that.$bottom = $("<div>")
|
||||||
.addClass("OxBottom")
|
.addClass("OxBottom")
|
||||||
.appendTo(that.$element);
|
.appendTo(that.$element);
|
||||||
|
that.$layer = $("<div>")
|
||||||
|
.addClass(self.options.mainmenu ? "OxMainMenuLayer" : "OxLayer");
|
||||||
|
|
||||||
function click(event) {
|
function click(event) {
|
||||||
var item,
|
var item,
|
||||||
position,
|
position,
|
||||||
$target = $(event.target);
|
$target = $(event.target);
|
||||||
that.hideMenu();
|
|
||||||
if ($target.is(".OxCell")) {
|
if ($target.is(".OxCell")) {
|
||||||
position = $target.parent().data("position");
|
position = $target.parent().data("position");
|
||||||
item = that.items[position];
|
item = that.items[position];
|
||||||
Ox.print("...", position, item)
|
|
||||||
if (!item.options("disabled")) {
|
if (!item.options("disabled")) {
|
||||||
clickItem(position);
|
clickItem(position);
|
||||||
} else {
|
|
||||||
that.triggerEvent("click");
|
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
that.triggerEvent("click");
|
|
||||||
}
|
}
|
||||||
|
that.hideMenu();
|
||||||
}
|
}
|
||||||
|
|
||||||
function clickItem(position) {
|
function clickItem(position) {
|
||||||
|
|
@ -2068,10 +2062,10 @@ requires
|
||||||
item.toggleTitle();
|
item.toggleTitle();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
closeMenu();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function clickSelectedItem() {
|
function clickSelectedItem() {
|
||||||
|
// called on key.enter
|
||||||
if (self.options.selected > -1) {
|
if (self.options.selected > -1) {
|
||||||
clickItem(self.options.selected);
|
clickItem(self.options.selected);
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -2079,11 +2073,6 @@ requires
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeMenu() {
|
|
||||||
that.triggerEvent("click");
|
|
||||||
that.hideMenu();
|
|
||||||
}
|
|
||||||
|
|
||||||
function constructLine() {
|
function constructLine() {
|
||||||
return $("<tr>").append(
|
return $("<tr>").append(
|
||||||
$("<td>", {
|
$("<td>", {
|
||||||
|
|
@ -2371,19 +2360,21 @@ requires
|
||||||
});
|
});
|
||||||
selectItem(-1);
|
selectItem(-1);
|
||||||
scrollMenuUp();
|
scrollMenuUp();
|
||||||
that.hide();
|
|
||||||
if (self.options.parent) {
|
if (self.options.parent) {
|
||||||
self.options.element.removeClass("OxSelected");
|
self.options.element.removeClass("OxSelected");
|
||||||
}
|
}
|
||||||
that.loseFocus();
|
that.hide()
|
||||||
that.unbindEvent({
|
.loseFocus()
|
||||||
key_up: selectPreviousItem,
|
.unbindEvent({
|
||||||
key_down: selectNextItem,
|
key_up: selectPreviousItem,
|
||||||
key_left: selectSupermenu,
|
key_down: selectNextItem,
|
||||||
key_right: selectSubmenu,
|
key_left: selectSupermenu,
|
||||||
key_escape: that.hideMenu,
|
key_right: selectSubmenu,
|
||||||
key_enter: clickItem
|
key_escape: that.hideMenu,
|
||||||
});
|
key_enter: clickItem
|
||||||
|
})
|
||||||
|
.triggerEvent("hide");
|
||||||
|
that.$layer.hide();
|
||||||
$document.unbind("click", click);
|
$document.unbind("click", click);
|
||||||
return that;
|
return that;
|
||||||
//that.triggerEvent("hide");
|
//that.triggerEvent("hide");
|
||||||
|
|
@ -2399,6 +2390,9 @@ requires
|
||||||
|
|
||||||
that.showMenu = function() {
|
that.showMenu = function() {
|
||||||
Ox.print("showMenu")
|
Ox.print("showMenu")
|
||||||
|
if (!self.options.parent && !that.$layer.parent().length) {
|
||||||
|
that.$layer.appendTo($body);
|
||||||
|
}
|
||||||
that.parent().length || that.appendTo($body);
|
that.parent().length || that.appendTo($body);
|
||||||
var offset = self.options.element.offset(),
|
var offset = self.options.element.offset(),
|
||||||
width = self.options.element.outerWidth(),
|
width = self.options.element.outerWidth(),
|
||||||
|
|
@ -2431,7 +2425,7 @@ requires
|
||||||
key_down: selectNextItem,
|
key_down: selectNextItem,
|
||||||
key_left: selectSupermenu,
|
key_left: selectSupermenu,
|
||||||
key_right: selectSubmenu,
|
key_right: selectSubmenu,
|
||||||
key_escape: closeMenu,
|
key_escape: that.hideMenu,
|
||||||
key_enter: clickSelectedItem
|
key_enter: clickSelectedItem
|
||||||
});
|
});
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
|
|
|
||||||
BIN
demos/.DS_Store
vendored
BIN
demos/.DS_Store
vendored
Binary file not shown.
Loading…
Reference in a new issue