add unified Ox.Layer object for dialogs and menus
This commit is contained in:
parent
3aa10edec8
commit
1720d2a184
5 changed files with 73 additions and 51 deletions
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
|
@ -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
|
||||||
});
|
});
|
||||||
|
|
|
@ -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');
|
||||||
};
|
};
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
55
source/Ox.UI/js/Window/Ox.Layer.js
Normal file
55
source/Ox.UI/js/Window/Ox.Layer.js
Normal 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;
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in a new issue