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

requests, errors, dialogs

Browse source
This commit is contained in:
Rolux 2010-01-31 15:02:41 +05:30
parent 68a09563cb
commit 06852ed89c
3 changed files with 96 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -95,16 +95,16 @@ Dialog
.OxDialog > .OxContent { .OxDialog > .OxContent {
top: 24px; top: 24px;
//bottom: 32px;
height: 100%; height: 100%;
padding: 16px;
} }
.OxDialog > .OxButtonsBar { .OxDialog > .OxButtonsBar {
left: 0px; left: 0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
height: 24px; height: 32px;
padding: 8px; padding: 0 4px 0 4px;
text-align: right; text-align: right;
-moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px; -moz-border-radius-bottomright: 8px;
@ -112,6 +112,10 @@ Dialog
-webkit-border-bottom-right-radius: 8px; -webkit-border-bottom-right-radius: 8px;
} }
.OxDialog > .OxButtonsBar > .OxButton {
margin: 8px 4px 0 4px;
}
/* /*
================================================================================ ================================================================================
Forms Forms

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

@ -448,8 +448,36 @@ requires
callback(data); callback(data);
} }
function debug(request) {
var $iframe = $("<iframe>")
.css({ // fixme: should go into a class
width: 768,
height: 384
}),
$dialog = new Ox.Dialog({
title: "Application Error",
buttons: [
{
value: "Close",
click: function() {
$dialog.close();
}
}
],
width: 800,
height: 400
})
.append($iframe)
.open(),
iframe = $iframe[0].contentDocument || $iframe[0].contentWindow.document;
iframe.open();
iframe.write(request.responseText);
iframe.close();
}
function error(request, status, error) { function error(request, status, error) {
var result; var result;
console.log("error", request, status, error);
try { try {
result = JSON.parse(request.responseText); result = JSON.parse(request.responseText);
} catch(e) { } catch(e) {
@ -463,44 +491,28 @@ requires
options.callback(result); options.callback(result);
if (result.status.code >= 500) { if (result.status.code >= 500) {
var $dialog = new Ox.Dialog({ var $dialog = new Ox.Dialog({
title: "Error: Remote request failed.", title: "Application Error",
buttons: [ buttons: [
new Ox.Button({ {
value: "Details", value: "Details",
click: function() { click: function() {
var $iframe = $("<iframe>"); $dialog.close(function() {
var iframe = $iframe[0].contentWindow; debug(request);
iframe.document.open(); });
iframe.document.write(request.responseText); }
iframe.document.close(); },
$dialog.close(); {
$dialog = new Ox.Dialog({ value: "Close",
title: "Error: Remote request failed.", click: function() {
buttons: [ $dialog.close();
new Ox.Button({ }
value: "Close", }
click: function() { ],
$dialog.close(); width: 400,
} height: 100
}) })
], .append(request.status + " " + request.statusText)
width: 800, .open();
height: 400
})
.append($iframe)
.open();
}
}),
new Ox.Button({
value: "Close",
click: function() {
$dialog.close();
}
})
]
})
.append(request.status + " " + request.statusText)
.open();
Ox.print({ Ox.print({
request: request, request: request,
status: status, status: status,
@ -516,7 +528,13 @@ requires
try { try {
data = JSON.parse(data); data = JSON.parse(data);
} catch(error) { } catch(error) {
data = {
status: {
code: 500,
text: "Internal Server Error"
},
data: {}
};
} }
cache[req] = { cache[req] = {
data: data, data: data,
@ -1013,9 +1031,9 @@ requires
.addClass("OxDialog") .addClass("OxDialog")
.css({ .css({
left: (($(document).width() - options.width) / 2) + "px", left: (($(document).width() - options.width) / 2) + "px",
top: (($(document).height() - options.height - 48) / 2) + "px", top: (($(document).height() - options.height - 92) / 2) + "px",
width: options.width + "px", width: options.width + "px",
height: (options.height + 60) + "px" height: (options.height + 92) + "px"
}); });
that.$titlebar = new Ox.Bar({ that.$titlebar = new Ox.Bar({
size: "medium" size: "medium"
@ -1059,13 +1077,16 @@ requires
that.$buttonsbar = new Ox.Element() that.$buttonsbar = new Ox.Element()
.addClass("OxButtonsBar") .addClass("OxButtonsBar")
.appendTo(that); .appendTo(that);
//that.$buttons = []; that.$buttons = [];
$.each(options.buttons, function(i, v) { $.each(options.buttons, function(i, button) {
v.appendTo(that.$buttonsbar); console.log(button)
that.$buttons[i] = new Ox.Button({
size: "medium",
value: button.value
}).click(button.click).appendTo(that.$buttonsbar);
}); });
options.buttons[0].focus(); that.$buttons[0].focus();
that.$layer = $(".OxLayer"); // fixme: lazy loading of layer is fine, but save in var, dont look up that.$layer = $(".OxLayer"); // fixme: lazy loading of layer is fine, but save in var, dont look up
that.$buttons = options.buttons; // fixme: publicy accessible buttons, or dialog methods for manipulation?
self.onChange = function(key, value) { self.onChange = function(key, value) {
if (key == "title") { if (key == "title") {
that.$title.html(value); that.$title.html(value);
@ -1075,12 +1096,14 @@ requires
that.$content.append($element); that.$content.append($element);
return that; return that;
} }
that.close = function() { that.close = function(callback) {
callback = callback || function() {};
that.animate({ that.animate({
opacity: 0 opacity: 0
}, 200, function() { }, 200, function() {
that.remove(); that.remove();
that.$layer.remove(); that.$layer.remove();
callback();
}) })
} }
that.open = function() { that.open = function() {

38
demos/test/app.js
View file

@ -3,24 +3,24 @@ $(function() {
requestURL: "http://blackbook.local:8000/api/" requestURL: "http://blackbook.local:8000/api/"
}), }),
$dialog = new Ox.Dialog({ $dialog = new Ox.Dialog({
title: "Login failed", title: "Application Error",
buttons: [ buttons: [
new Ox.Button({ {
size: "medium", value: "Change Title",
value: "Change Title" click: function() {
}).click(function() { console.log("click to change title")
console.log("click to change title") $dialog.options({
$dialog.options({ title: "New Title"
title: "New Title" });
}); $dialog.$buttons[0].toggleDisabled();
$dialog.$buttons[0].toggleDisabled(); }
}), },
new Ox.Button({ {
size: "medium",
value: "Close", value: "Close",
}).click(function() { click: function() {
$dialog.close(); $dialog.close();
}) }
}
] ]
}); });
app.request("error"); app.request("error");
@ -34,9 +34,9 @@ $(function() {
}); });
} }
else if (result.status.code == 403) { else if (result.status.code == 403) {
$dialog.open(); alert(403);
} else { //$dialog.open();
Ox.print("broken"); } else if (result.status.code == 500) {
} }
}); });
}); });