diff --git a/src/main/webapp/scripts/project/schema-alignment.js b/src/main/webapp/scripts/project/schema-alignment.js index 020bdcbf9..db19719d2 100644 --- a/src/main/webapp/scripts/project/schema-alignment.js +++ b/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 = $('
').addClass("schema-alignment-dialog-canvas").appendTo(body); + this._nodeTable = $('
').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 = $('
').appendTo(this._tdDetails).html("..."); + this._expandedDetailDiv = $('
').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(" "); + + $('') + .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 = $('
').appendTo(this._tdDetails)[0]; }; diff --git a/src/main/webapp/styles/schema-alignment-dialog.css b/src/main/webapp/styles/schema-alignment-dialog.css index 48517e2dc..e94db0a41 100644 --- a/src/main/webapp/styles/schema-alignment-dialog.css +++ b/src/main/webapp/styles/schema-alignment-dialog.css @@ -2,4 +2,25 @@ height: 500px; overflow: auto; border: 1px solid #aaa; -} \ No newline at end of file +} + +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%; +} +