0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

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

Browse source
This commit is contained in:
Rolux 2010-03-06 13:59:13 +01:00
parent f5488c6c57
commit 1b84855dde
3 changed files with 30 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
build/css/ox.ui.classic.css
View file

@ -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 {

7
build/css/ox.ui.css
View file

@ -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;
}
/*

31
build/js/ox.ui.js
View file

@ -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(),
documentHeight = $document.height(),
var bodyWidth = $body.width(),
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;
}