prevent dialog from being dragged off-screen in webkit; make layer transparent even if mouseup occurs outside it

build/css/ox.ui.classic.css

@@ -66,6 +66,9 @@ Forms
     //border: 1px solid rgb(160, 160, 160);
     color: rgb(64, 64, 64);
 }
+.OxThemeClassic .OxInputLabel {
+    color: rgb(64, 64, 64);
+}
 .OxThemeClassic .OxButton,
 .OxThemeClassic div.OxInput,
 .OxThemeClassic .OxRange {

build/css/ox.ui.css

@@ -11,14 +11,17 @@ Base
 body {
     margin: 0;
     overflow: hidden;
-    //-webkit-user-select: none
+    -webkit-user-select: none
+}
+div {
+    -webkit-user-select: none
 }
 div, input, textarea {
     font-family: Lucida Grande, Lucida Sans Unicode, Segoe UI;
     font-size: 11px;
 }
 td {
-    padding: 0px;
+    padding: 0;
 }
 
 /*

build/js/ox.ui.js

@@ -1241,6 +1241,8 @@ requires
     Ox.Dialog = function(options, self) {
 
         // fixme: dialog should be derived from a generic draggable
+        // fixme: to prevent dragging off-screen in safari,
+        //        append dialog to (currently non-existing) viewport
         var self = self || {},
             that = new Ox.Element("div", self)
                 .defaults({
@@ -1317,26 +1319,30 @@ requires
         }
 
         function drag(event) {
-            var documentWidth = $document.width(),
+            var bodyWidth = $body.width(),
-                documentHeight = $document.height(),
+                bodyHeight = $document.height(),
                 elementWidth = that.width(),
                 offset = that.offset(),
                 x = event.clientX,
                 y = event.clientY;                
             $window.mousemove(function(event) {
+                /*
                 $("*").css({
                     WebkitUserSelect: "none"
                 });
+                */
                 that.css({
                     margin: 0
                 });
                 var left = Ox.limit(
                         offset.left - x + event.clientX,
-                        24 - elementWidth, documentWidth - 24
+                        24 - elementWidth, bodyWidth - 24
+                        //0, documentWidth - elementWidth
                     ),
                     top = Ox.limit(
                         offset.top - y + event.clientY,
-                        24, documentHeight - 24
+                        24, bodyHeight - 24
+                        //24, documentHeight - elementHeight
                     );
                 that.css({
                     left: left + "px",
@@ -1345,23 +1351,24 @@ requires
             });
             $window.one("mouseup", function() {
                 $window.unbind("mousemove");
+                /*
                 $("*").css({
                     WebkitUserSelect: "auto"
                 });
-            });
+                */
-            
+            });            
         }
 
         function mousedownLayer() {
             that.$layer.stop().animate({
                 opacity: 0.5
-            }, 50);
+            }, 0);
         }
 
         function mouseupLayer() {
             that.$layer.stop().animate({
                 opacity: 0
-            }, 50);
+            }, 0);
         }
 
         function reset() {
@@ -1383,9 +1390,11 @@ requires
                 x = event.clientX,
                 y = event.clientY;
             $window.mousemove(function(event) {
+                /*
                 $("*").css({
                     WebkitUserSelect: "none"
                 });
+                */
                 that.css({
                     left: offset.left,
                     top: offset.top,
@@ -1405,9 +1414,11 @@ requires
             });
             $window.one("mouseup", function() {
                 $window.unbind("mousemove");
+                /*
                 $("*").css({
                     WebkitUserSelect: "auto"
                 });
+                */
             });            
         }
 
@@ -1431,6 +1442,7 @@ requires
                 that.$layer.remove();
                 callback();
             });
+            $window.unbind("mouseup", mouseupLayer)
             return that;
         }
 
@@ -1451,9 +1463,10 @@ requires
             reset();
             that.css({
                 opacity: 0
-            }).appendTo($body).animate({
+            }).appendTo($("body > div")).animate({
                 opacity: 1
             }, 200);
+            $window.bind("mouseup", mouseupLayer)
             return that;
         }