s434730/RandomSec
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Factored data table out to its own file.

Browse Source 
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
This commit is contained in:
David Huynh 2010-01-26 19:54:14 +00:00
parent 083d06830d
commit e240cb4daf
7 changed files with 322 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/main/webapp/images/right-arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 B

2
src/main/webapp/project.html
View File

@ -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>

128
src/main/webapp/scripts/project.js
View File

@ -19,6 +19,9 @@ function onLoad() {
"/command/get-column-model?" + $.param({ project: theProject.id }), null, "/command/get-column-model?" + $.param({ project: theProject.id }), null,
function(data) { function(data) {
theProject.columnModel = 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, "/command/get-rows?" + $.param({ project: theProject.id, start: 0, limit: 25 }), null,
function(data) { function(data) {
@ -26,7 +29,6 @@ function onLoad() {
}, },
function() { function() {
initializeUI(); initializeUI();
renderView();
} }
); );
} }
@ -52,126 +54,6 @@ function initializeUI() {
ui.viewPanel = $('<div></div>').appendTo(tdLeft).css("width", tdLeft.offsetWidth + "px").css("overflow-x", "auto"); ui.viewPanel = $('<div></div>').appendTo(tdLeft).css("width", tdLeft.offsetWidth + "px").css("overflow-x", "auto");
ui.facetPanel = $('<div></div>').appendTo(tdRight); ui.facetPanel = $('<div></div>').appendTo(tdRight);
}
ui.dataTableView = new DataTableView(ui.viewPanel);
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));
} }

253
src/main/webapp/scripts/project/data-table-view.js Normal file
View File

@ -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);
};

42
src/main/webapp/scripts/util/menu.js
View File

@ -21,19 +21,20 @@ MenuSystem.showMenu = function(elmt) {
var level = MenuSystem._layers.length; var level = MenuSystem._layers.length;
elmt.mouseout(function() { MenuSystem._dismissUtil(level); });
elmt.click(MenuSystem.dismissAll); elmt.click(MenuSystem.dismissAll);
return level;
}; };
MenuSystem.dismissAll = function() { MenuSystem.dismissAll = function() {
MenuSystem._dismissUtil(0); MenuSystem.dismissUntil(0);
if (MenuSystem._overlay != null) { if (MenuSystem._overlay != null) {
MenuSystem._overlay.remove(); MenuSystem._overlay.remove();
MenuSystem._overlay = null; MenuSystem._overlay = null;
} }
}; };
MenuSystem._dismissUtil = function(level) { MenuSystem.dismissUntil = function(level) {
for (var i = MenuSystem._layers.length - 1; i >= level; i--) { for (var i = MenuSystem._layers.length - 1; i >= level; i--) {
MenuSystem._layers[i].elmt.remove(); MenuSystem._layers[i].elmt.remove();
} }
@ -59,3 +60,38 @@ MenuSystem.positionMenuLeftRight = function(menu, elmt) {
menu.css("top", offset.top + "px") menu.css("top", offset.top + "px")
.css("left", (offset.left + elmt.width()) + "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));
}
};

19
src/main/webapp/styles/common.css
View File

@ -65,12 +65,27 @@ a.inaction {
border: 1px solid #ddd; border: 1px solid #ddd;
} }
.menu-container hr {
height: 1px;
border: none;
border-top: 1px solid #ccc;
padding: 0px;
margin: 2px 0px;
}
a.menu-item { a.menu-item {
display: block; display: block;
padding: 2px 5px; padding: 5px 7px;
text-decoration: none; text-decoration: none;
color: black;
white-space: pre;
} }
a.menu-item:hover { a.menu-item:hover {
background: #dddddd; color: #44a;
background: #eee;
}
a.menu-item img {
border: none;
} }

11
src/main/webapp/styles/project.css
View File

@ -14,12 +14,17 @@ table.data-table td.column-header {
cursor: pointer; cursor: pointer;
padding: 5px 5px; padding: 5px 5px;
border-bottom: 2px solid #aaa; 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 { img.column-header-menu {
position: relative;
top: -7px;
right: -7px;
} }
.viewPanel-summary { .viewPanel-summary {