From b823342af2736200b8b992b819bd329c854a67df Mon Sep 17 00:00:00 2001
From: Rolux <rolux@Rolux.local>
Date: Sun, 31 Jan 2010 15:02:41 +0530
Subject: [PATCH] requests, errors, dialogs

---
 build/css/ox.ui.css |  10 ++--
 build/js/ox.ui.js   | 117 ++++++++++++++++++++++++++------------------
 demos/test/app.js   |  38 +++++++-------
 3 files changed, 96 insertions(+), 69 deletions(-)

diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css
index 3f895d7..876a829 100644
--- a/build/css/ox.ui.css
+++ b/build/css/ox.ui.css
@@ -95,16 +95,16 @@ Dialog
 
 .OxDialog > .OxContent {
     top: 24px;
-    //bottom: 32px;
     height: 100%;
+    padding: 16px;
 }
 
 .OxDialog > .OxButtonsBar {
     left: 0px;
     right: 0px;
     bottom: 0px;
-    height: 24px;
-    padding: 8px;
+    height: 32px;
+    padding: 0 4px 0 4px;
     text-align: right;
     -moz-border-radius-bottomleft: 8px;
     -moz-border-radius-bottomright: 8px;
@@ -112,6 +112,10 @@ Dialog
     -webkit-border-bottom-right-radius: 8px;
 }
 
+.OxDialog > .OxButtonsBar > .OxButton {
+    margin: 8px 4px 0 4px;
+}
+
 /*
 ================================================================================
 Forms
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index e02952e..746f05e 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -448,8 +448,36 @@ requires
                     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) {
                     var result;
+                    console.log("error", request, status, error);
                     try {
                         result = JSON.parse(request.responseText);
                     } catch(e) {
@@ -463,44 +491,28 @@ requires
                     options.callback(result);
                     if (result.status.code >= 500) {
                         var $dialog = new Ox.Dialog({
-                                    title: "Error: Remote request failed.",
-                                    buttons: [
-                                        new Ox.Button({
-                                            value: "Details",
-                                            click: function() {
-                                                var $iframe = $("<iframe>");
-                                                var iframe = $iframe[0].contentWindow;
-                                                iframe.document.open();
-                                                iframe.document.write(request.responseText);
-                                                iframe.document.close();
-                                                $dialog.close();
-                                                $dialog = new Ox.Dialog({
-                                                        title: "Error: Remote request failed.",
-                                                        buttons: [
-                                                            new Ox.Button({
-                                                                value: "Close",
-                                                                click: function() {
-                                                                    $dialog.close();
-                                                                }
-                                                            })
-                                                        ],
-                                                        width: 800,
-                                                        height: 400
-                                                    })
-                                                    .append($iframe)
-                                                    .open();
-                                            }
-                                        }),
-                                        new Ox.Button({
-                                            value: "Close",
-                                            click: function() {
-                                                $dialog.close();
-                                            }
-                                        })
-                                    ]
-                                })
-                                .append(request.status + " " + request.statusText)
-                                .open();
+                                title: "Application Error",
+                                buttons: [
+                                    {
+                                        value: "Details",
+                                        click: function() {
+                                            $dialog.close(function() {
+                                                debug(request);                                                
+                                            });
+                                        }
+                                    },
+                                    {
+                                        value: "Close",
+                                        click: function() {
+                                            $dialog.close();
+                                        }
+                                    }
+                                ],
+                                width: 400,
+                                height: 100
+                            })
+                            .append(request.status + " " + request.statusText)
+                            .open();
                         Ox.print({
                             request: request,
                             status: status,
@@ -516,7 +528,13 @@ requires
                     try {
                         data = JSON.parse(data);                                    
                     } catch(error) {
-
+                        data = {
+                            status: {
+                                code: 500,
+                                text: "Internal Server Error"
+                            },
+                            data: {}
+                        };
                     }
                     cache[req] = {
                         data: data,
@@ -1013,9 +1031,9 @@ requires
                 .addClass("OxDialog")
                 .css({
                     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",
-                    height: (options.height + 60) + "px"
+                    height: (options.height + 92) + "px"
                 });
         that.$titlebar = new Ox.Bar({
                 size: "medium"
@@ -1059,13 +1077,16 @@ requires
         that.$buttonsbar = new Ox.Element()
             .addClass("OxButtonsBar")
             .appendTo(that);
-        //that.$buttons = [];
-        $.each(options.buttons, function(i, v) {
-            v.appendTo(that.$buttonsbar);
+        that.$buttons = [];
+        $.each(options.buttons, function(i, button) {
+            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.$buttons = options.buttons; // fixme: publicy accessible buttons, or dialog methods for manipulation?
         self.onChange = function(key, value) {
             if (key == "title") {
                 that.$title.html(value);
@@ -1075,12 +1096,14 @@ requires
             that.$content.append($element);
             return that;
         }
-        that.close = function() {
+        that.close = function(callback) {
+            callback = callback || function() {};
             that.animate({
                 opacity: 0
             }, 200, function() {
                 that.remove();
                 that.$layer.remove();
+                callback();
             })
         }
         that.open = function() {
diff --git a/demos/test/app.js b/demos/test/app.js
index 2ccc03a..e764618 100644
--- a/demos/test/app.js
+++ b/demos/test/app.js
@@ -3,24 +3,24 @@ $(function() {
             requestURL: "http://blackbook.local:8000/api/"
         }),
         $dialog = new Ox.Dialog({
-            title: "Login failed",
+            title: "Application Error",
             buttons: [
-                new Ox.Button({
-                    size: "medium",
-                    value: "Change Title"
-                }).click(function() {
-                    console.log("click to change title")
-                    $dialog.options({
-                        title: "New Title"
-                    });
-                    $dialog.$buttons[0].toggleDisabled();
-                }),
-                new Ox.Button({
-                    size: "medium",
+                {
+                    value: "Change Title",
+                    click: function() {
+                        console.log("click to change title")
+                        $dialog.options({
+                            title: "New Title"
+                        });
+                        $dialog.$buttons[0].toggleDisabled();
+                    }
+                },
+                {
                     value: "Close",
-                }).click(function() {
-                    $dialog.close();
-                })
+                    click: function() {
+                        $dialog.close();
+                    }
+                }
             ]
         });
     app.request("error");
@@ -34,9 +34,9 @@ $(function() {
             });
         }
         else if (result.status.code == 403) {
-            $dialog.open();
-        } else {
-            Ox.print("broken");
+            alert(403);
+            //$dialog.open();
+        } else if (result.status.code == 500) {
         }
     });
 });