Factored data table out to its own file.

More work on the menu system to support sub-menus. Data table columns can now be collapsed/expanded. git-svn-id: http://google-refine.googlecode.com/svn/trunk@6 7d457c2a-affb-35e4-300a-418c747d4874
2010-01-26 19:54:14 +00:00 · 2010-01-26 19:54:14 +00:00 · e240cb4daf
commit e240cb4daf
parent 083d06830d
7 changed files with 322 additions and 131 deletions
--- a/src/main/webapp/images/right-arrow.png
+++ b/src/main/webapp/images/right-arrow.png
--- a/src/main/webapp/project.html
+++ b/src/main/webapp/project.html
@ -1 +1 @@
-<html>
<head>
    <title>Gridlock</title>
    <link rel="stylesheet" href="/styles/common.css" />
    <link rel="stylesheet" href="/styles/project.css" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    
    <script type="text/javascript" src="scripts/util/url.js"></script>
    <script type="text/javascript" src="scripts/util/string.js"></script>
    <script type="text/javascript" src="scripts/util/ajax.js"></script>
    <script type="text/javascript" src="scripts/util/menu.js"></script>
    
    <script type="text/javascript" src="scripts/project.js"></script>
</head>
<body>
    <div id="header">
        <h1 id="title">Gridlock</h1>
    </div>
    
    <div id="body">
        Loading ...
    </div>
</body>
</html>
+<html>
<head>
    <title>Gridlock</title>
    <link rel="stylesheet" href="/styles/common.css" />
    <link rel="stylesheet" href="/styles/project.css" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    
    <script type="text/javascript" src="scripts/util/url.js"></script>
    <script type="text/javascript" src="scripts/util/string.js"></script>
    <script type="text/javascript" src="scripts/util/ajax.js"></script>
    <script type="text/javascript" src="scripts/util/menu.js"></script>
    
    <script type="text/javascript" src="scripts/project.js"></script>
    <script type="text/javascript" src="scripts/project/data-table-view.js"></script>
</head>
<body>
    <div id="header">
        <h1 id="title">Gridlock</h1>
    </div>
    
    <div id="body">
        Loading ...
    </div>
</body>
</html>
--- a/src/main/webapp/scripts/project.js
+++ b/src/main/webapp/scripts/project.js
@ -19,6 +19,9 @@ function onLoad() {
            "/command/get-column-model?" + $.param({ project: theProject.id }), null,
            function(data) {
                theProject.columnModel = data;
+                for (var i = 0; i < theProject.columnModel.columns.length; i++) {
+                    theProject.columnModel.columns[i].collapsed = false;
+                }
            },
            "/command/get-rows?" + $.param({ project: theProject.id, start: 0, limit: 25 }), null,
            function(data) {
@ -26,7 +29,6 @@ function onLoad() {
            },
            function() {
                initializeUI();
-                renderView();
            }
        );
    }
@ -52,126 +54,6 @@ function initializeUI() {
    
    ui.viewPanel = $('<div></div>').appendTo(tdLeft).css("width", tdLeft.offsetWidth + "px").css("overflow-x", "auto");
    ui.facetPanel = $('<div></div>').appendTo(tdRight);
-}
-
-function renderView() {
-    ui.viewPanel.empty();
    
-    var divSummary = $('<div></div>').addClass("viewPanel-summary").appendTo(ui.viewPanel);
-    $('<span>' + 
-            (theProject.rowModel.start + 1) + " to " + 
-            (theProject.rowModel.start + theProject.rowModel.limit) + " of " + 
-            (theProject.rowModel.total) + 
-            " rows total" + 
-        '</span>'
-    ).appendTo(divSummary);
-    
-    var pagingControls = $('<div></div>').addClass("viewPanel-pagingControls").appendTo(ui.viewPanel);
-    var firstPage = $('<a href="javascript:{}">&laquo; first</a>').appendTo(pagingControls);
-    var previousPage = $('<a href="javascript:{}">&laquo; previous</a>').appendTo(pagingControls);
-    if (theProject.rowModel.start > 0) {
-        firstPage.addClass("action").click(onClickFirstPage);
-        previousPage.addClass("action").click(onClickPreviousPage);
-    } else {
-        firstPage.addClass("inaction");
-        previousPage.addClass("inaction");
-    }
-    $('<span> &bull; </span>').appendTo(pagingControls);
-    var nextPage = $('<a href="javascript:{}">next page &raquo;</a>').appendTo(pagingControls);
-    var lastPage = $('<a href="javascript:{}">last &raquo;</a>').appendTo(pagingControls);
-    if (theProject.rowModel.start + theProject.rowModel.limit < theProject.rowModel.total) {
-        nextPage.addClass("action").click(onClickNextPage);
-        lastPage.addClass("action").click(onClickLastPage);
-    } else {
-        nextPage.addClass("inaction");
-        lastPage.addClass("inaction");
-    }
-    
-    var table = document.createElement("table");
-    table.className = "data-table";
-    ui.viewPanel.append(table);
-    
-    var trHead = table.insertRow(0);
-    var td = trHead.insertCell(trHead.cells.length);
-    var createColumnHeader = function(column, index) {
-        var td = trHead.insertCell(trHead.cells.length);
-        $(td).addClass("column-header");
-        
-        var headerTable = document.createElement("table");
-        $(headerTable).attr("cellspacing", "0").attr("cellpadding", "0").attr("width", "100%").appendTo(td);
-        
-        var headerTableRow = headerTable.insertRow(0);
-        var headerLeft = headerTableRow.insertCell(0);
-        var headerRight = headerTableRow.insertCell(1);
-        $(headerRight).attr("width", "1%");
-        
-        $('<span></span>').html(column.headerLabel).appendTo(headerLeft);
-        $('<img src="/images/menu-dropdown.png" />').addClass("column-header-menu").appendTo(headerRight).click(function() {
-            createMenuForColumnHeader(column, index, this);
-        });
-    };
-        
-    var columns = theProject.columnModel.columns;
-    for (var i = 0; i < columns.length; i++) {
-        createColumnHeader(columns[i], i);
-    }
-    
-    var rows = theProject.rowModel.rows;
-    for (var r = 0; r < rows.length; r++) {
-        var row = rows[r];
-        var cells = row.cells;
-        
-        var tr = table.insertRow(table.rows.length);
-        tr.className = (r % 2) == 1 ? "odd" : "even";
-        
-        var td = tr.insertCell(tr.cells.length);
-        $(td).html((theProject.rowModel.start + r + 1) + ".");
-        
-        for (var i = 0; i < columns.length; i++) {
-            var column = columns[i];
-            var td = tr.insertCell(tr.cells.length);
-            
-            if (column.cellIndex < cells.length) {
-                var cell = cells[column.cellIndex];
-                if (cell.v != null) {
-                    $(td).html(cell.v);
-                }
-            }
-        }
-    }
-}
-
-function showRows(start, onDone) {
-    Ajax.chainGetJSON(
-        "/command/get-rows?" + $.param({ project: theProject.id, start: start, limit: theProject.view.pageSize }), null,
-        function(data) {
-            theProject.rowModel = data;
-            renderView();
-        }
-    );
-}
-
-function onClickPreviousPage() {
-    showRows(theProject.rowModel.start - theProject.view.pageSize);
-}
-
-function onClickNextPage() {
-    showRows(theProject.rowModel.start + theProject.view.pageSize);
-}
-
-function onClickFirstPage() {
-    showRows(0, theProject.view.pageSize);
-}
-
-function onClickLastPage() {
-    showRows(Math.floor(theProject.rowModel.total / theProject.view.pageSize) * theProject.view.pageSize);
-}
-
-function createMenuForColumnHeader(column, index, elmt) {
-    var menu = MenuSystem.createMenu();
-    MenuSystem.createMenuItem().html("Reconcile").appendTo(menu);
-    
-    MenuSystem.showMenu(menu);
-    MenuSystem.positionMenuAboveBelow(menu, $(elmt));
-
+    ui.dataTableView = new DataTableView(ui.viewPanel);
 }
--- a/src/main/webapp/scripts/project/data-table-view.js
+++ b/src/main/webapp/scripts/project/data-table-view.js
@ -0,0 +1,253 @@
+function DataTableView(div) {
+    this._div = div;
+    this.render();
+}
+
+DataTableView.prototype.render = function() {
+    var self = this;
+    var container = this._div.empty();
+    
+    var divSummary = $('<div></div>').addClass("viewPanel-summary").appendTo(container);
+    $('<span>' + 
+            (theProject.rowModel.start + 1) + " to " + 
+            (theProject.rowModel.start + theProject.rowModel.limit) + " of " + 
+            (theProject.rowModel.total) + 
+            " rows total" + 
+        '</span>'
+    ).appendTo(divSummary);
+    
+    var pagingControls = $('<div></div>').addClass("viewPanel-pagingControls").appendTo(container);
+    var firstPage = $('<a href="javascript:{}">&laquo; first</a>').appendTo(pagingControls);
+    var previousPage = $('<a href="javascript:{}">&laquo; previous</a>').appendTo(pagingControls);
+    if (theProject.rowModel.start > 0) {
+        firstPage.addClass("action").click(function(evt) { self._onClickFirstPage(this, evt); });
+        previousPage.addClass("action").click(function(evt) { self._onClickPreviousPage(this, evt); });
+    } else {
+        firstPage.addClass("inaction");
+        previousPage.addClass("inaction");
+    }
+    $('<span> &bull; </span>').appendTo(pagingControls);
+    var nextPage = $('<a href="javascript:{}">next page &raquo;</a>').appendTo(pagingControls);
+    var lastPage = $('<a href="javascript:{}">last &raquo;</a>').appendTo(pagingControls);
+    if (theProject.rowModel.start + theProject.rowModel.limit < theProject.rowModel.total) {
+        nextPage.addClass("action").click(function(evt) { self._onClickNextPage(this, evt); });
+        lastPage.addClass("action").click(function(evt) { self._onClickLastPage(this, evt); });
+    } else {
+        nextPage.addClass("inaction");
+        lastPage.addClass("inaction");
+    }
+    
+    var table = document.createElement("table");
+    table.className = "data-table";
+    container.append(table);
+    
+    var trHead = table.insertRow(0);
+    
+    var td = trHead.insertCell(trHead.cells.length);
+    $('<img src="/images/menu-dropdown.png" />').addClass("column-header-menu").appendTo(td).click(function() {
+        self._createMenuForAllColumns(this);
+    });
+    
+    var createColumnHeader = function(column, index) {
+        var td = trHead.insertCell(trHead.cells.length);
+        $(td).addClass("column-header");
+        
+        if (column.collapsed) {
+            $(td).html("&nbsp;").attr("title", column.headerLabel).click(function(evt) {
+                column.collapsed = false;
+                self.render();
+            });
+        } else {
+            var headerTable = document.createElement("table");
+            $(headerTable).addClass("column-header-layout").attr("cellspacing", "0").attr("cellpadding", "0").attr("width", "100%").appendTo(td);
+            
+            var headerTableRow = headerTable.insertRow(0);
+            var headerLeft = headerTableRow.insertCell(0);
+            var headerRight = headerTableRow.insertCell(1);
+            
+            $('<span></span>').html(column.headerLabel).appendTo(headerLeft);
+            
+            $(headerRight).attr("width", "1%");
+            $('<img src="/images/menu-dropdown.png" />').addClass("column-header-menu").appendTo(headerRight).click(function() {
+                self._createMenuForColumnHeader(column, index, this);
+            });
+        }
+    };
+    
+    var columns = theProject.columnModel.columns;
+    for (var i = 0; i < columns.length; i++) {
+        createColumnHeader(columns[i], i);
+    }
+    
+    var rows = theProject.rowModel.rows;
+    for (var r = 0; r < rows.length; r++) {
+        var row = rows[r];
+        var cells = row.cells;
+        
+        var tr = table.insertRow(table.rows.length);
+        tr.className = (r % 2) == 1 ? "odd" : "even";
+        
+        var td = tr.insertCell(tr.cells.length);
+        $(td).html((theProject.rowModel.start + r + 1) + ".");
+        
+        for (var i = 0; i < columns.length; i++) {
+            var column = columns[i];
+            var td = tr.insertCell(tr.cells.length);
+            if (column.collapsed) {
+                td.innerHTML = "&nbsp;";
+            } else if (column.cellIndex < cells.length) {
+                var cell = cells[column.cellIndex];
+                if (cell.v != null) {
+                    $(td).html(cell.v);
+                }
+            }
+        }
+    }
+};
+
+DataTableView.prototype._showRows = function(start, onDone) {
+    var self = this;
+    Ajax.chainGetJSON(
+        "/command/get-rows?" + $.param({ project: theProject.id, start: start, limit: theProject.view.pageSize }), null,
+        function(data) {
+            theProject.rowModel = data;
+            self.render();
+        }
+    );
+};
+
+DataTableView.prototype._onClickPreviousPage = function(elmt, evt) {
+    this._showRows(theProject.rowModel.start - theProject.view.pageSize);
+};
+
+DataTableView.prototype._onClickNextPage = function(elmt, evt) {
+    this._showRows(theProject.rowModel.start + theProject.view.pageSize);
+};
+
+DataTableView.prototype._onClickFirstPage = function(elmt, evt) {
+    this._showRows(0, theProject.view.pageSize);
+};
+
+DataTableView.prototype._onClickLastPage = function(elmt, evt) {
+    this._showRows(Math.floor(theProject.rowModel.total / theProject.view.pageSize) * theProject.view.pageSize);
+};
+
+DataTableView.prototype._createMenuForAllColumns = function(elmt) {
+    self = this;
+    MenuSystem.createAndShowStandardMenu([
+        {
+            label: "Collapse All Columns",
+            click: function() {
+                for (var i = 0; i < theProject.columnModel.columns.length; i++) {
+                    theProject.columnModel.columns[i].collapsed = true;
+                }
+                self.render();
+            }
+        },
+        {
+            label: "Expand All Columns",
+            click: function() {
+                for (var i = 0; i < theProject.columnModel.columns.length; i++) {
+                    theProject.columnModel.columns[i].collapsed = false;
+                }
+                self.render();
+            }
+        }
+    ], elmt);
+};
+
+DataTableView.prototype._createMenuForColumnHeader = function(column, index, elmt) {
+    self = this;
+    MenuSystem.createAndShowStandardMenu([
+        {
+            label: "Filter",
+            submenu: [
+                {
+                    label: "By Nominal Choices",
+                    click: function() {}
+                },
+                {
+                    label: "By Simple Text Search",
+                    click: function() {}
+                },
+                {
+                    label: "By Regular Expression",
+                    click: function() {}
+                },
+                {
+                    label: "By Reconciliation Features",
+                    click: function() {}
+                }
+            ]
+        },
+        {
+            label: "Collapse/Expand",
+            submenu: [
+                {
+                    label: "Collapse This Column",
+                    click: function() {
+                        theProject.columnModel.columns[index].collapsed = true;
+                        self.render();
+                    }
+                },
+                {
+                    label: "Collapse All Other Columns",
+                    click: function() {
+                        for (var i = 0; i < theProject.columnModel.columns.length; i++) {
+                            if (i != index) {
+                                theProject.columnModel.columns[i].collapsed = true;
+                            }
+                        }
+                        self.render();
+                    }
+                },
+                {
+                    label: "Collapse All Columns To Right",
+                    click: function() {
+                        for (var i = index + 1; i < theProject.columnModel.columns.length; i++) {
+                            theProject.columnModel.columns[i].collapsed = true;
+                        }
+                        self.render();
+                    }
+                }
+            ]
+        },
+        {},
+        {
+            label: "Text Transform",
+            submenu: [
+                {
+                    label: "To Titlecase",
+                    click: function() {}
+                },
+                {
+                    label: "To Uppercase",
+                    click: function() {}
+                },
+                {
+                    label: "To Lowercase",
+                    click: function() {}
+                },
+                {},
+                {
+                    label: "Find &amp; Replace ...",
+                    click: function() {}
+                }
+            ]
+        },
+        {
+            label: "Reconcile",
+            submenu: [
+                {
+                    label: "Initiate on Filtered Rows...",
+                    click: function() {}
+                },
+                {},
+                {
+                    label: "Approve Filtered Rows",
+                    click: function() {}
+                }
+            ]
+        }
+    ], elmt);
+};
--- a/src/main/webapp/scripts/util/menu.js
+++ b/src/main/webapp/scripts/util/menu.js
@ -21,19 +21,20 @@ MenuSystem.showMenu = function(elmt) {
    
    var level = MenuSystem._layers.length;
    
-    elmt.mouseout(function() { MenuSystem._dismissUtil(level); });
    elmt.click(MenuSystem.dismissAll);
+    
+    return level;
 };

 MenuSystem.dismissAll = function() {
-    MenuSystem._dismissUtil(0);
+    MenuSystem.dismissUntil(0);
    if (MenuSystem._overlay != null) {
        MenuSystem._overlay.remove();
        MenuSystem._overlay = null;
    }
 };

-MenuSystem._dismissUtil = function(level) {
+MenuSystem.dismissUntil = function(level) {
    for (var i = MenuSystem._layers.length - 1; i >= level; i--) {
        MenuSystem._layers[i].elmt.remove();
    }
@ -59,3 +60,38 @@ MenuSystem.positionMenuLeftRight = function(menu, elmt) {
    menu.css("top", offset.top + "px")
        .css("left", (offset.left + elmt.width()) + "px");
 };
+
+MenuSystem.createAndShowStandardMenu = function(items, elmt, options) {
+    options = options || {
+        horizontal: false
+    };
+    
+    var menu = MenuSystem.createMenu();
+    var createMenuItem = function(item) {
+        if ("label" in item) {
+            var menuItem = MenuSystem.createMenuItem().appendTo(menu);
+            if ("submenu" in item) {
+                menuItem.html('<table width="100%" cellspacing="0" cellpadding="0"><tr><td>' + item.label + '</td><td width="1%"><img src="/images/right-arrow.png" /></td></tr></table>');
+                menuItem.mouseover(function() {
+                    MenuSystem.dismissUntil(level);
+                    MenuSystem.createAndShowStandardMenu(item.submenu, this, { horizontal: true });
+                });
+            } else {
+                menuItem.html(item.label).click(item.click);
+            }
+        } else {
+            $('<hr />').appendTo(menu);
+        }
+    };
+    
+    for (var i = 0; i < items.length; i++) {
+        createMenuItem(items[i]);
+    }
+    
+    var level = MenuSystem.showMenu(menu);
+    if (options.horizontal) {
+        MenuSystem.positionMenuLeftRight(menu, $(elmt));
+    } else {
+        MenuSystem.positionMenuAboveBelow(menu, $(elmt));
+    }
+};
--- a/src/main/webapp/styles/common.css
+++ b/src/main/webapp/styles/common.css
@ -65,12 +65,27 @@ a.inaction {
    border: 1px solid #ddd;
 }

+.menu-container hr {
+    height: 1px;
+    border: none;
+    border-top: 1px solid #ccc;
+    padding: 0px;
+    margin: 2px 0px;
+}
+
 a.menu-item {
    display: block;
-    padding: 2px 5px;
+    padding: 5px 7px;
    text-decoration: none;
+    color: black;
+    white-space: pre;
 }

 a.menu-item:hover {
-    background: #dddddd;
+    color: #44a;
+    background: #eee;
+}
+
+a.menu-item img {
+    border: none;
 }
--- a/src/main/webapp/styles/project.css
+++ b/src/main/webapp/styles/project.css
@ -14,12 +14,17 @@ table.data-table td.column-header {
    cursor: pointer;
    padding: 5px 5px;
    border-bottom: 2px solid #aaa;
+    white-space: pre;
+    font-weight: bold;
+}
+
+table.column-header-layout td {
+    padding: 0px;
+    vertical-align: middle;
+    font-weight: bold;
 }

 img.column-header-menu {
-    position: relative;
-    top: -7px;
-    right: -7px;
 }

 .viewPanel-summary {