From ff2490e3b4638b421c381946d8b1ebb30e51141b Mon Sep 17 00:00:00 2001
From: jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68>
Date: Sun, 17 Apr 2011 22:14:11 +0000
Subject: Cleanup HTML pages. Improvements and a few fixes to get consistent
 behavior across browsers including Safari/iOS.

git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@1094209 13f79535-47bb-0310-9956-ffa450edef68
---
 sca-cpp/trunk/modules/js/htdocs/scdl.js    |  7 +++
 sca-cpp/trunk/modules/js/htdocs/ui.css     | 24 +++++++++--
 sca-cpp/trunk/modules/js/htdocs/ui.js      | 68 ++++++++++++++++++++++++++----
 sca-cpp/trunk/modules/js/htdocs/uicyan.css | 26 ++++++++++--
 sca-cpp/trunk/modules/js/htdocs/util.js    | 24 ++++++++++-
 5 files changed, 132 insertions(+), 17 deletions(-)

(limited to 'sca-cpp/trunk/modules/js')

diff --git a/sca-cpp/trunk/modules/js/htdocs/scdl.js b/sca-cpp/trunk/modules/js/htdocs/scdl.js
index b2e1464b9e..417bb37dfc 100644
--- a/sca-cpp/trunk/modules/js/htdocs/scdl.js
+++ b/sca-cpp/trunk/modules/js/htdocs/scdl.js
@@ -89,6 +89,13 @@ scdl.title = function(l) {
     return namedAttributeValue("'t:title", l);
 };
 
+/**
+ * Returns the display style of a component, componentType, reference or property.
+ */
+scdl.style = function(l) {
+    return namedAttributeValue("'t:style", l);
+};
+
 /**
  * Returns the color of a component or componentType.
  */
diff --git a/sca-cpp/trunk/modules/js/htdocs/ui.css b/sca-cpp/trunk/modules/js/htdocs/ui.css
index 7800217060..ca1f42fa0f 100644
--- a/sca-cpp/trunk/modules/js/htdocs/ui.css
+++ b/sca-cpp/trunk/modules/js/htdocs/ui.css
@@ -53,6 +53,11 @@ border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4; bo
 overflow: hidden;
 }
 
+.text {
+padding-top: 3px; padding-bottom: 4px; vertical-align: text-top;
+vertical-align: text-top;
+}
+
 .thl {
 border-left: 0px;
 }
@@ -81,6 +86,10 @@ border-left: 1px; border-style: solid; border-color: #a2bae7;
 padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: normal; vertical-align: text-top;
 }
 
+.datatd {
+border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; width: 10px; vertical-align: top;
+}
+
 .datatdl {
 border-right: 1px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; width: 10px; vertical-align: top;
 }
@@ -100,6 +109,10 @@ opacity: .6;
 filter: alpha(opacity=60);
 }
 
+.guide {
+border: 1px; border-style: solid; border-color: #c0c0c0;
+}
+
 iframe {
 border: 0px; margin: 0px; padding: 0px;
 }
@@ -177,17 +190,22 @@ cursor: pointer; cursor: hand;
 }
 
 .tbar {
-margin: 0px;
+margin: 0px; width: 100%;
 padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 3px;
 border-bottom: 1px solid #a2bae7; border-collapse: separate;
 }
 
 .ltbar {
-padding-left: 0px; padding-top: 0px; padding-right: 8px; white-space: nowrap; vertical-align: top;
+padding-left: 0px; padding-top: 0px; padding-right: 6px; white-space: nowrap; vertical-align: top;
+}
+
+.dtbar {
+padding-left: 0px; padding-right: 0px; padding-top: 0px; white-space: nowrap; vertical-align: top;
+text-align: right;
 }
 
 .rtbar {
-padding-left: 8px; padding-right: 0px; padding-top: 0px; white-space: nowrap; vertical-align: top;
+padding-left: 6px; padding-right: 0px; padding-top: 0px; white-space: nowrap; vertical-align: top;
 text-align: right;
 }
 
diff --git a/sca-cpp/trunk/modules/js/htdocs/ui.js b/sca-cpp/trunk/modules/js/htdocs/ui.js
index 5c1f45e244..20b2cd0579 100644
--- a/sca-cpp/trunk/modules/js/htdocs/ui.js
+++ b/sca-cpp/trunk/modules/js/htdocs/ui.js
@@ -33,6 +33,20 @@ ui.isIE = function() {
     return ui.isIE.detected;
 };
 
+/**
+ * Build a portable href attribute.
+ */
+ui.href = function(loc, target) {
+    return 'javascript:window.open(\'' + loc + '\', \'' + target + '\');';
+};
+
+/**
+ * Build a portable <a href> tag.
+ */
+ui.ahref = function(loc, target, html) {
+    return '<a href="' + ui.href(loc, target) + '">' + html + '</a>';
+};
+
 /**
  * Build a menu bar.
  */ 
@@ -55,23 +69,23 @@ ui.menu = function(name, href, target) {
             }
 
             if (complete(this.href) != complete(window.top.location.pathname))
-                return '<a href="' + this.href + '" target="' + this.target + '"><span class=amenu>' + this.name + '</span></a>';
-            return '<a href="' + this.href + '" target="' + this.target + '"><span class=smenu>' + this.name + '</span></a>';
+                return ui.ahref(this.href, this.target, '<span class="amenu">' + this.name + '</span>');
+            return ui.ahref(this.href, this.target, '<span class="smenu">' + this.name + '</span>');
         };
     }
     return new Menu(name, href, target);
 };
 
 ui.menubar = function(left, right) {
-    var bar = '<table cellpadding="0" cellspacing="0" width="100%" class=tbar><tr>' +
-    '<td class=ltbar><table border="0" cellspacing="0" cellpadding="0"><tr>';
+    var bar = '<table cellpadding="0" cellspacing="0" width="100%" class="tbar"><tr>' +
+    '<td class="dtbar"><table border="0" cellspacing="0" cellpadding="0"><tr>';
     for (i in left)
-        bar = bar + '<td class=ltbar>' + left[i].content() + '</td>'
+        bar = bar + '<td class="ltbar">' + left[i].content() + '</td>'
 
     bar = bar + '</tr></table></td>' +
-    '<td class=rtbar><table border="0" cellpadding="0" cellspacing="0" align="right"><tr>';
+    '<td class="dtbar"><table border="0" cellpadding="0" cellspacing="0" align="right"><tr>';
     for (i in right)
-        bar = bar + '<td class=rtbar>' + right[i].content() + '</td>'
+        bar = bar + '<td class="' + (i == 0? 'dtbar' : 'rtbar') + '">' + right[i].content() + '</td>'
 
     bar = bar + '</tr></table></td></tr></table>';
     return bar;
@@ -135,7 +149,7 @@ ui.suggest = function(input, suggestFunction) {
             if (values[i].indexOf(this.value) == -1)
                 continue;
             if (items.length == 0)
-                items += '<table class=suggestTable>';
+                items += '<table class="suggestTable">';
             items += '<tr><td class="suggestItem" ' +
             'onmouseover="ui.hilightSuggestion(this, true)" onmouseout="ui.hilightSuggestion(this, false)" ' +
             'onmousedown="ui.selectSuggestion(this, \'' + values[i] + '\')">' + values[i] + '</td></tr>';
@@ -321,7 +335,7 @@ ui.datatable = function(l) {
             var v = elementValue(e);
             if (!isList(v)) {
                 return '<tr><td class="datatdl">' + indent(i) + elementName(e).slice(1) + '</td>' +
-                    '<td class="datatdr tdw">' + v + '</td></tr>' +
+                    '<td class="datatdr tdw">' + (v != null? v : '') + '</td></tr>' +
                     rows(cdr(l), i);
             }
 
@@ -338,3 +352,39 @@ ui.datatable = function(l) {
     return '<table class="datatable ' + (window.name == 'dataFrame'? ' databg' : '') + '" style="width: 100%;">' + rows(l, 0) + '</table>';
 }
 
+/**
+ * Convert a list of elements to an HTML single column table.
+ */
+ui.datalist = function(l) {
+
+    function rows(l, i) {
+        if (isNil(l))
+            return '';
+        var e = car(l);
+
+        // Convert a list of simple values into a list of name value pairs
+        if (!isList(e))
+            return rows(expandElementValues("'value", l), i);
+
+        // Convert a list of complex values into a list of name value pairs
+        if (isList(car(e)))
+            return rows(expandElementValues("'value", l), i);
+
+        // Generate table row for a simple element value
+        if (elementHasValue(e)) {
+            var v = elementValue(e);
+            if (!isList(v)) {
+                return '<tr><td class="datatd tdw">' + (v != null? v : '') + '</td></tr>' +
+                    rows(cdr(l), i);
+            }
+
+            return rows(expandElementValues(elementName(e), v), i) + rows(cdr(l), i);
+        }
+
+        // Generate rows for an element's children
+        return rows(elementChildren(e), i + 1) + rows(cdr(l), i);
+    }
+
+    return '<table class="datatable ' + (window.name == 'dataFrame'? ' databg' : '') + '" style="width: 100%;">' + rows(l, 0) + '</table>';
+}
+
diff --git a/sca-cpp/trunk/modules/js/htdocs/uicyan.css b/sca-cpp/trunk/modules/js/htdocs/uicyan.css
index d3089c8ff3..ca1f42fa0f 100644
--- a/sca-cpp/trunk/modules/js/htdocs/uicyan.css
+++ b/sca-cpp/trunk/modules/js/htdocs/uicyan.css
@@ -53,6 +53,11 @@ border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4; bo
 overflow: hidden;
 }
 
+.text {
+padding-top: 3px; padding-bottom: 4px; vertical-align: text-top;
+vertical-align: text-top;
+}
+
 .thl {
 border-left: 0px;
 }
@@ -81,6 +86,10 @@ border-left: 1px; border-style: solid; border-color: #a2bae7;
 padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: normal; vertical-align: text-top;
 }
 
+.datatd {
+border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; width: 10px; vertical-align: top;
+}
+
 .datatdl {
 border-right: 1px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; width: 10px; vertical-align: top;
 }
@@ -100,6 +109,10 @@ opacity: .6;
 filter: alpha(opacity=60);
 }
 
+.guide {
+border: 1px; border-style: solid; border-color: #c0c0c0;
+}
+
 iframe {
 border: 0px; margin: 0px; padding: 0px;
 }
@@ -177,17 +190,22 @@ cursor: pointer; cursor: hand;
 }
 
 .tbar {
-margin: 0px;
+margin: 0px; width: 100%;
 padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 3px;
 border-bottom: 1px solid #a2bae7; border-collapse: separate;
 }
 
 .ltbar {
-padding-left: 0px; padding-top: 0px; padding-right: 8px; white-space: nowrap; vertical-align: top;
+padding-left: 0px; padding-top: 0px; padding-right: 6px; white-space: nowrap; vertical-align: top;
+}
+
+.dtbar {
+padding-left: 0px; padding-right: 0px; padding-top: 0px; white-space: nowrap; vertical-align: top;
+text-align: right;
 }
 
 .rtbar {
-padding-left: 8px; padding-right: 0px; padding-top: 0px; white-space: nowrap; vertical-align: top;
+padding-left: 6px; padding-right: 0px; padding-top: 0px; white-space: nowrap; vertical-align: top;
 text-align: right;
 }
 
@@ -218,8 +236,10 @@ padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; ve
 background-color: #598edd; color: #e5ecf9;
 }
 
+/*
 v\: * {
 behavior:url(#default#VML);
 display:inline-block; 
 }
+*/
 
diff --git a/sca-cpp/trunk/modules/js/htdocs/util.js b/sca-cpp/trunk/modules/js/htdocs/util.js
index 3719a9cecc..69359fa167 100644
--- a/sca-cpp/trunk/modules/js/htdocs/util.js
+++ b/sca-cpp/trunk/modules/js/htdocs/util.js
@@ -207,6 +207,13 @@ function debug(o) {
     return true;
 }
 
+/**
+ * External build configuration.
+ */
+var config;
+if (isNil(config))
+    config = {}
+
 /**
  * Simple assert function.
  */
@@ -301,9 +308,22 @@ function issubdomain(host) {
 }
 
 /**
- * Convert a host name to a domain name title.
+ * Convert a host name to a home page title.
+ */
+function hometitle(host) {
+    if (!isNil(config.hometitle))
+        return config.hometitle;
+    var h = reverse(host.split('.'));
+    var d = isNil(cdr(h))? car(h) : cadr(h);
+    return d.substr(0, 1).toUpperCase() + d.substr(1);
+}
+
+/**
+ * Convert a host name to a window title.
  */
-function domaintitle(host) {
+function windowtitle(host) {
+    if (!isNil(config.windowtitle))
+        return config.windowtitle;
     var h = reverse(host.split('.'));
     var d = isNil(cdr(h))? car(h) : cadr(h);
     return d.substr(0, 1).toUpperCase() + d.substr(1);
-- 
cgit v1.2.3