improvements in the UI

doc_root/css/style.css

@@ -1,65 +1,131 @@
 
 body {
     font-family : sans-serif;
-    margin      : 0px;
 }
 
-.navigator_container {
-    margin : 10px;    
-    border        : 2px solid #336699;       
+
+.window {
+    border  : 1px solid black;
+    padding : 2px;
 }
 
-.navigator_handle {
-    background    : #6699AA;
-    border-bottom : 2px solid #336699; 
-    color         : white;
-    padding-left  : 5px;
-    font-weight   : bold;    
-    cursor: hand; cursor: pointer;    
+.window .handle {
+    background : #666666;
+    color      : #ffffff;
+    text-align : right;
+    padding    : 2px;
 }
 
-.navigator_handle a {
-    color           : white;
+.window .handle a {
+    color : #ffffff;
     text-decoration : none;
 }
 
-.object_container {
-    margin-left  : 15px;
-    margin-right : 15px;    
-    padding-left : 0px;
+.window .body {
+    padding : 2px;
 }
 
-ul {
-    list-style : none;
-    border     : 1px dotted grey;    
+.window .body .object {
+    border  : 1px dotted black;
+    padding : 2px;
 }
 
-li {
-    border: 1px solid grey;
+.window .body .object .header {
+    background : white;
+    padding    : 2px;
 }
 
-.label {
+.window .body .object .header .__CLASS__ {
+    font-weight : bold;
+    font-size   : 1.5em;
+}
+
+.window .body .object .header .id {
+    font-style : italic;
+    font-size  : 0.8em;
+}
+
+.window .body .object .data {
+    padding    : 5px;
+    background : #dddddd;
+    border     : 1px dotted black;
+}
+
+.window .body .object .data ul {
+    list-style   : none;
+    padding-left : 5px;
+}
+
+.window .body .object .data li {
+    clear: both;
+}
+
+.window .body .object .data li .label {
+    font-style   : italic;
     float        : left;
-    width        : 150px;
-    padding-left : 2px;
+    width        : 250px;
+    color        : #666666;
 }
 
-.collection {
+.window .body .object .data li .value {
+
 }
 
-.value a {
-    text-decoration : none;
+.window .body .object .data li .value a {
+    color      : #336699;
+    font-size  : 0.8em;
 }
 
-.value {
+/* sub objects */
 
+.window .body .sub_object {
+    margin-left   : 30px;
+    margin-top    : 5px;
+    margin-bottom : 10px;
 }
 
-.value ul {
-    clear : both;
+.window .body .sub_object .header {
+    background : white;
+    padding    : 2px;
 }
 
-.hidden {    
+.window .body .sub_object .header .__CLASS__ {
+    font-weight : bold;
+    font-size   : 1.2em;
+}
+
+.window .body .sub_object .header .id {
+    font-style : italic;
+    font-size  : 0.8em;
+}
+
+.window .body .sub_object .data {
+    padding    : 5px;
+    background : #dddddd;
+    border     : 1px dotted black;
+}
+
+.window .body .sub_object .data ul {
+    list-style   : none;
+    padding-left : 5px;
+}
+
+.window .body .sub_object .data li {
+}
+
+.window .body .sub_object .data li .label {
+    font-style   : italic;
+    float        : left;
+    width        : 250px;
+    color        : #666666;
+}
+
+.window .body .sub_object .data li .value {
+
+}
+
+
+.hidden {
     display : none;
 }
 
@@ -81,11 +147,11 @@ li {
 .widget_control {
     background    : #6699AA;
     border-left   : 2px solid #336699;
-    border-right  : 2px solid #336699;    
-    border-bottom : 2px solid #336699;    
+    border-right  : 2px solid #336699;
+    border-bottom : 2px solid #336699;
     color         : white;
     padding-left  : 5px;
-    font-weight   : bold;    
+    font-weight   : bold;
     cursor: hand; cursor: pointer;
 }
 

doc_root/index.html

@@ -35,13 +35,13 @@
 });
 
 
-function create_object_link (ref_id, label) {
+function create_object_link (ref_id) {
     if (ref_id.indexOf('.data') != -1) {
         ref_id = ref_id.substring(0, ref_id.indexOf('.data'));
     }
     return '<a id="' + ref_id + '" class="loader" href="javascript:void(0)">'
-         + label
-         + '</a><ul class="hidden"></ul>';
+         + ref_id
+         + '</a><div class="sub_object hidden"></div>';
 }
 
 function is_ref_id (id) {
@@ -51,96 +51,135 @@
     return false;
 }
 
-function create_object_repr (obj) {
+// This is the entry point for the
+// recursive object representation
+// functions
+
+function create_entity_repr (obj) {
     var out = '';
-    for (var prop in obj) {
-        if (prop == '$ref') {
-            out += create_object_link( obj[prop], '[ + ]' );
+    if (obj.constructor == Array) {
+        // this will handle KiokuDB::Set objects
+        for (var i = 0; i < obj.length; i++) {
+            out += '<li>' + create_repr( obj[i] ) + '</li>';
         }
-        else {
+    }
+    else {
+        // this should handle everything else ...
+        for (var prop in obj) {
             out += '<li><div class="label">' + prop + '</div><div class="value">';
-            switch (obj[prop].constructor) {
-                case Object:
-                    out += '<ul>' + create_object_repr( obj[prop] ) + '</ul>';
-                    break;
-                case Array:
-                    out += '<ul class="collection">';
-                    for (var i = 0; i < obj[prop].length; i++) {
-                        switch (obj[prop][i].constructor) {
-                            case Object:
-                                out += '<li><div class="value">'
-                                if (obj[prop][i]['$ref'] == undefined) {
-                                    out += '<ul>' + create_object_repr( obj[prop][i] ) + '</ul>';
-                                }
-                                else {
-                                    out += create_object_link( obj[prop][i]['$ref'], '[ ' + i + ' ]' );
-                                }
-                                out += '</div></li>';
-                                break;
-                            case String:
-                                if (is_ref_id(obj[prop][i])) {
-                                    out += "<div>" + create_object_link( obj[prop][i], '[ ' + i + ' ]' ) + "</div>";
-                                }
-                                else {
-                                    out += "<div>" + obj[prop][i] + "</div>";
-                                }
-                                break;
-                        }
-                    }
-                    out += '</ul>';
-                    break;
-                default:
-                    if (prop == 'id') {
-                        out += obj[prop]
-                            + '&nbsp;<a href="#" onclick="load_object( undefined, \''
-                            + obj[prop]
-                            + '\')">[ ⇗ ]</a>';
-                    }
-                    else {
-                        out += obj[prop];
-                    }
-            }
+            out += create_repr(obj[prop]);
             out += "</div></li>"
         }
     }
     return out;
 }
 
+function create_repr (x) {
+    var out = '';
+    switch (x.constructor) {
+        case Object:
+            out += create_object_repr(x);
+            break;
+        case Array:
+            out += create_array_repr(x);
+            break;
+        case String:
+            // if we find a string which
+            // looks a lot like a ref then
+            // we make an assumption and
+            // just make it a link
+            if (is_ref_id(x)) {
+                out += create_object_link( x );
+            }
+            else {
+                out += x;
+            }
+            break;
+        default:
+            out += x;
+    }
+    return out;
+}
+
+function create_object_repr (obj) {
+    if (obj['$ref']) {
+        // we are assuming here that
+        // an object with a $ref key
+        // will be a jspon object and
+        // so be nothing more then a ref
+        return create_object_link( obj['$ref'] )
+    }
+    else {
+        var out = '<ul>';
+        for (var prop in obj) {
+            out += '<li>' + prop + " => " + create_repr( obj[prop] ) + '</li>';
+        }
+        out += '</ul>';
+        return out;
+    }
+}
+
+function create_array_repr (arr) {
+    var out = '<ul>';
+    for (var i = 0; i < arr.length; i++) {
+        out += '<li>' + create_repr( arr[i] ) + '</li>';
+    }
+    out += '</ul>';
+    return out;
+}
+
 function load_object (container, id) {
 
-    if (container == undefined) {
-        var holder = $(
-            '<div class="navigator_container">'
-            + '<div class="navigator_handle">'
-            + '<a href="#" onclick="$(this).parent().parent().remove()">[ x ]</a>&nbsp;'
-            + (id == '' ? 'root' : id)
-            + '</div>'
-            + '<ul class="object_container" id="' + id + '"></ul>'
-            + '</div>'
+    lookup(id, function (obj) {
+
+        var object_container = (
+             '<div class="object">'
+            +    '<div class="header">'
+            +        '<div class="__CLASS__">' + obj['__CLASS__'] + '</div>'
+            +        '<div class="id">'  + (id == '' ? 'root' : id) +  '</div>'
+            +    '</div>'
+            +    '<div class="data">'
+            +        '<ul id="' + id + '"></ul>'
+            +    '</div>'
+            +'</div>'
         );
 
-        $(document.body).append(holder);
+        if (container == undefined) {
+            container = $(
+                '<div class="window">'
+                +     '<div class="handle">'
+                +         '<a class="navigator_handle" href="#">[ _ ]</a>'
+                +         '&nbsp;'
+                +         '<a href="#" onclick="$(this).parent().parent().remove()">[ x ]</a>'
+                +     '</div>'
+                +     '<div class="body">'
+                +        object_container
+                +     '</div>'
+                + '</div>'
+            );
+            $(document.body).append(container);
+        }
+        else {
+            container.html(object_container);
+        }
 
-        $('.navigator_handle', holder).toggle(
-            function () { $('.object_container', $(this).parent()).hide() },
-            function () { $('.object_container', $(this).parent()).show() }
+        $('.navigator_handle', container).toggle(
+            function () { $('.data', $(this).parent().parent()).hide() },
+            function () { $('.data', $(this).parent().parent()).show() }
         );
 
-        container = $('.object_container', holder);
-    }
-
-    lookup(id, function (obj) {
-        $(container).html( create_object_repr( obj ) );
+        $('.data ul', container).html( create_entity_repr( obj['data'] ) );
 
         $('.loader', container).click(function () {
             var id = $(this).attr('id');
-            load_object( $(this).siblings('ul'), id );
-            $(this).siblings('ul').removeClass('hidden');
+            load_object( $(this).siblings('.sub_object'), id );
+            $(this).siblings('.sub_object').removeClass('hidden');
             $(this).unbind('click');
             $(this).click(function () {
-                $(this).siblings('ul').toggle()
+                $(this).siblings('.sub_object').toggle()
             });
         })
+
     });
 }