A bit more prep work on rendering protograph nodes.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@78 7d457c2a-affb-35e4-300a-418c747d4874

src/main/webapp/scripts/project/schema-alignment.js

@@ -91,10 +91,10 @@ SchemaAlignment._cleanName = function(s) {
 }
 
 function SchemaAlignmentDialog(protograph) {
-    var protograph = {
+    this._originalProtograph = {
         rootNodes: [
             {
-                nodeType: "existing",
+                nodeType: "cell-as-topic",
                 column: "name",
                 linkages: [
                 ]
@@ -138,4 +138,94 @@ SchemaAlignmentDialog.prototype._renderBody = function(body) {
     var self = this;
     
     this._canvas = $('<div></div>').addClass("schema-alignment-dialog-canvas").appendTo(body);
+    this._nodeTable = $('<table></table>').appendTo(this._canvas)[0];
+    
+    for (var i = 0; i < this._originalProtograph.rootNodes.length; i++) {
+        new SchemaAlignmentDialog.UINode(
+            this._originalProtograph.rootNodes[i], 
+            this._nodeTable, 
+            true
+        );
+    }
+};
+
+SchemaAlignmentDialog.UINode = function(node, table, expanded) {
+    this._originalNode = node;
+    this._newNode = {
+        nodeType: node.nodeType
+    };
+    this._detailsRendered = false;
+    
+    this._tr = table.insertRow(table.rows.length);
+    this._tdMain = this._tr.insertCell(0);
+    this._tdToggle = this._tr.insertCell(1);
+    this._tdDetails = this._tr.insertCell(2);
+    
+    $(this._tdMain).addClass("schema-alignment-node-main").attr("width", "250");
+    $(this._tdToggle).addClass("schema-alignment-node-toggle").attr("width", "1%").hide();
+    $(this._tdDetails).addClass("schema-alignment-node-details").attr("width", "90%").hide();
+    
+    this._renderMain();
+    
+    this._expanded = expanded;
+    if (this._isExpandable()) {
+        this._showExpandable();
+    }
+};
+
+SchemaAlignmentDialog.UINode.prototype._isExpandable = function() {
+    return this._newNode.nodeType != "existing-content" && this._newNode.nodeType != "cell-as-content";
+};
+
+SchemaAlignmentDialog.UINode.prototype._renderMain = function() {
+    $(this._tdMain).empty().html(this._newNode.nodeType);
+};
+
+SchemaAlignmentDialog.UINode.prototype._showExpandable = function() {
+    $(this._tdToggle).show();
+    $(this._tdDetails).show();
+    
+    if (this._detailsRendered) {
+        return;
+    }
+    this._detailsRendered = true;
+    
+    this._collapsedDetailDiv = $('<div></div>').appendTo(this._tdDetails).html("...");
+    this._expandedDetailDiv = $('<div></div>').appendTo(this._tdDetails).html("details");
+    
+    this._renderDetails();
+    
+    var self = this;
+    var show = function() {
+        if (self._expanded) {
+            self._collapsedDetailDiv.hide();
+            self._expandedDetailDiv.show();
+        } else {
+            self._collapsedDetailDiv.show();
+            self._expandedDetailDiv.hide();
+        }
+    };
+    show();
+    
+    $(this._tdToggle).html("&nbsp;");
+    
+    $('<img />')
+        .attr("src", this._expanded ? "images/down-arrow.png" : "images/right-arrow.png")
+        .appendTo(this._tdToggle)
+        .click(function() {
+            self._expanded = !self._expanded;
+            
+            $(this).attr("src", self._expanded ? "images/down-arrow.png" : "images/right-arrow.png");
+            
+            show();
+        });
+};
+
+SchemaAlignmentDialog.UINode.prototype._hideExpandable = function() {
+    $(this._tdToggle).hide();
+    $(this._tdDetails).hide();
+};
+
+SchemaAlignmentDialog.UINode.prototype._renderDetails = function() {
+    var tableDetails = $('<table></table>').appendTo(this._tdDetails)[0];
 };

src/main/webapp/styles/schema-alignment-dialog.css

@@ -3,3 +3,24 @@
     overflow: auto;
     border: 1px solid #aaa;
 }
+
+td.schema-alignment-node-main {
+    white-space: pre;
+    width: 300px;
+}
+
+td.schema-alignment-node-toggle {
+    white-space: pre;
+    width: 1%;
+}
+
+td.schema-alignment-node-toggle img {
+    cursor: pointer;
+    vertical-align: middle;
+    padding: 2px;
+}
+
+td.schema-alignment-node-details {
+    width: 90%;
+}
+