add unified Ox.Layer object for dialogs and menus

This commit is contained in:
rlx 2011-11-01 14:16:27 +00:00
parent 3aa10edec8
commit 1720d2a184
5 changed files with 73 additions and 51 deletions

View file

@ -1016,26 +1016,11 @@ Layers
overflow: hidden; overflow: hidden;
z-index: 10; z-index: 10;
} }
.OxLayer.OxFront { .OxLayer.OxDialogLayer {
z-index: 100; z-index: 10;
} }
.OxMainMenuLayer { .OxLayer.OxMenuLayer {
position: absolute; z-index: 11;
width: 100%;
top: 20px;
bottom: 0px;
overflow: hidden;
z-index: 12;
}
.OxMenuLayer {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
overflow: hidden;
z-index: 12;
} }
/* /*

View file

@ -299,7 +299,7 @@ Ox.TextList = function(options, self) {
setTimeout(function() { setTimeout(function() {
that.$body.options({sort: self.options.sort}); that.$body.options({sort: self.options.sort});
}, 10); }, 10);
that.triggerEvent('sort', { that.gainFocus().triggerEvent('sort', {
key: self.options.sort[0].key, key: self.options.sort[0].key,
operator: self.options.sort[0].operator operator: self.options.sort[0].operator
}); });

View file

@ -88,9 +88,6 @@ Ox.Menu = function(options, self) {
that.$bottom = $('<div>') that.$bottom = $('<div>')
.addClass('OxBottom') .addClass('OxBottom')
.appendTo(that.$element); .appendTo(that.$element);
that.$layer = $('<div>')
.addClass(self.options.mainmenu ? 'OxMainMenuLayer' : 'OxMenuLayer')
.click(click);
function click(event) { function click(event) {
var item, var item,
@ -161,6 +158,10 @@ Ox.Menu = function(options, self) {
} }
} }
function clickLayer() {
that.hideMenu();
}
function clickSelectedItem() { function clickSelectedItem() {
// called on key.enter // called on key.enter
if (self.options.selected > -1) { if (self.options.selected > -1) {
@ -654,8 +655,8 @@ Ox.Menu = function(options, self) {
}); });
hideParent && self.options.parent.hideMenu(true); hideParent && self.options.parent.hideMenu(true);
} }
that.$layer && that.$layer.hide();
that.hide().loseFocus().triggerEvent('hide'); that.hide().loseFocus().triggerEvent('hide');
that.$layer.hide();
return that; return that;
}; };
@ -681,9 +682,6 @@ Ox.Menu = function(options, self) {
if (!that.is(':hidden')) { if (!that.is(':hidden')) {
return; return;
} }
if (!self.options.parent && !that.$layer.parent().length) {
that.$layer.appendTo(Ox.UI.$body);
}
that.parent().length == 0 && that.appendTo(Ox.UI.$body); that.parent().length == 0 && that.appendTo(Ox.UI.$body);
that.css({ that.css({
left: '-1000px', left: '-1000px',
@ -717,8 +715,11 @@ Ox.Menu = function(options, self) {
} }
if (!self.options.parent) { if (!self.options.parent) {
that.gainFocus(); that.gainFocus();
that.$layer = Ox.Layer({type: 'menu'})
.css({top: self.options.mainmenu ? '20px' : 0})
.bindEvent({click: clickLayer})
.show();
} }
that.$layer.show();
return that; return that;
//that.triggerEvent('show'); //that.triggerEvent('show');
}; };

View file

@ -61,12 +61,7 @@ Ox.Dialog = function(options, self) {
+ (self.options.maximizeButton ? 20 : 0); + (self.options.maximizeButton ? 20 : 0);
if (self.options.focus) { if (self.options.focus) {
self.$layer = Ox.Element() // fixme: Layer widget that would handle click? self.$layer = Ox.Layer({type: 'dialog'});
.addClass('OxLayer')
.mousedown(mousedownLayer)
.mouseup(mouseupLayer)
.hide()
.appendTo(Ox.UI.$body);
} }
self.$box = $('<div>') self.$box = $('<div>')
@ -303,18 +298,6 @@ Ox.Dialog = function(options, self) {
}); });
} }
function mousedownLayer() {
self.$layer.stop().animate({
opacity: 0.5
}, 0);
}
function mouseupLayer() {
self.$layer.stop().animate({
opacity: 0
}, 0);
}
function reset(animate) { function reset(animate) {
var offset, left, top; var offset, left, top;
if (!self.centered) { if (!self.centered) {
@ -665,8 +648,8 @@ Ox.Dialog = function(options, self) {
that.close = function(callback) { that.close = function(callback) {
that.animate({ that.animate({
opacity: 0 opacity: 0
}, 100, function() { }, 250, function() {
//that.removeElement(); // that.removeElement();
that.hide(); that.hide();
callback && callback(); callback && callback();
}); });
@ -677,7 +660,6 @@ Ox.Dialog = function(options, self) {
if (self.options.focus) { if (self.options.focus) {
self.$layer.hide(); self.$layer.hide();
that.loseFocus(); that.loseFocus();
Ox.UI.$window.unbind({mouseup: mouseupLayer});
} }
that.triggerEvent('close'); that.triggerEvent('close');
return that; return that;
@ -715,11 +697,10 @@ Ox.Dialog = function(options, self) {
opacity: 0 opacity: 0
}).show().animate({ }).show().animate({
opacity: 1 opacity: 1
}, 100); }, 250);
if (self.options.focus) { if (self.options.focus) {
self.$layer.show(); self.$layer.show();
that.gainFocus(); that.gainFocus();
Ox.UI.$window.bind({mouseup: mouseupLayer});
} }
Ox.UI.$window.bind({ Ox.UI.$window.bind({
resize: function() { resize: function() {

View file

@ -0,0 +1,55 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
/*@
Ox.Layer <o> Background layer for dialogs and menus
(options, self) -> <o> Layer
options <o> Options
type <s|'dialog'> Layer type ('dialog' or 'menu')
self <o> Shared private variable
@*/
Ox.Layer = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
type: 'dialog'
})
.options(options || {})
.addClass('OxLayer Ox' + Ox.toTitleCase(self.options.type) + 'Layer')
.bind(self.options.type == 'dialog' ? {
mousedown: mousedown,
} : {
click: click
});
function click() {
Ox.print('CLICK!!!!!!!')
that.triggerEvent('click').removeElement();
}
function mousedown() {
that.stop().animate({opacity: 0.5}, 0);
}
function mouseup() {
that.stop().animate({opacity: 0}, 250);
}
that.hide = function() {
if (self.options.type == 'dialog') {
Ox.UI.$window.unbind({mouseup: mouseup});
}
that.removeElement();
};
that.show = function() {
if (self.options.type == 'dialog') {
Ox.UI.$window.bind({mouseup: mouseup});
}
that.appendTo(Ox.UI.$body);
}
return that;
}