add unified Ox.Layer object for dialogs and menus

source/Ox.UI/css/Ox.UI.css

@@ -1016,26 +1016,11 @@ Layers
     overflow: hidden;
     z-index: 10;
 }
-.OxLayer.OxFront {
-    z-index: 100;
+.OxLayer.OxDialogLayer {
+    z-index: 10;
 }
-.OxMainMenuLayer {
-    position: absolute;
-    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;
+.OxLayer.OxMenuLayer {
+    z-index: 11;
 }
 
 /*

source/Ox.UI/js/List/Ox.TextList.js

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

source/Ox.UI/js/Menu/Ox.Menu.js

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

source/Ox.UI/js/Window/Ox.Dialog.js

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

source/Ox.UI/js/Window/Ox.Layer.js

@@ -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;
+
+}