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

Added main menu bar.

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@72 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-02-08 21:41:49 +00:00
parent 5697dbf491
commit 736c6ec1de
7 changed files with 170 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,2 +1,2 @@
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Gridlock</title> <link type="text/css" rel="stylesheet" href="externals/suggest/css/suggest-1.0.3.min.css" /> <link type="text/css" rel="stylesheet" href="externals/jquery-ui/css/ui-lightness/jquery-ui-1.7.2.custom.css" /> <link rel="stylesheet" href="/styles/common.css" /> <link rel="stylesheet" href="/styles/menu.css" /> <link rel="stylesheet" href="/styles/dialog.css" /> <link rel="stylesheet" href="/styles/project.css" /> <link rel="stylesheet" href="/styles/data-table-view.css" /> <link rel="stylesheet" href="/styles/history.css" /> <link rel="stylesheet" href="/styles/browsing.css" /> <link rel="stylesheet" href="/styles/process.css" /> <link rel="stylesheet" href="/styles/expression-preview-dialog.css" />
<script type="text/javascript" src="externals/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="externals/suggest/suggest-1.0.3.min.js"></script> <script type="text/javascript" src="externals/jquery-ui/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="scripts/util/misc.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/util/dialog.js"></script> <script type="text/javascript" src="scripts/project.js"></script> <script type="text/javascript" src="scripts/project/list-facet.js"></script> <script type="text/javascript" src="scripts/project/range-facet.js"></script> <script type="text/javascript" src="scripts/project/text-search-facet.js"></script> <script type="text/javascript" src="scripts/project/browsing-engine.js"></script> <script type="text/javascript" src="scripts/project/data-table-view.js"></script> <script type="text/javascript" src="scripts/project/history-widget.js"></script> <script type="text/javascript" src="scripts/project/process-widget.js"></script> <script type="text/javascript" src="scripts/project/recon-dialog.js"></script> <script type="text/javascript" src="scripts/project/expression-preview-dialog.js"></script> <script type="text/javascript" src="scripts/project/schema-alignment.js"></script> </head> <body> <div id="header"> <div id="path"><a class="app-path-section" href="./index.html">Gridworks</a> &raquo; </div> </div> <div id="body"> <div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div> </div> </body> </html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Gridlock</title> <link type="text/css" rel="stylesheet" href="externals/suggest/css/suggest-1.0.3.min.css" /> <link type="text/css" rel="stylesheet" href="externals/jquery-ui/css/ui-lightness/jquery-ui-1.7.2.custom.css" /> <link rel="stylesheet" href="/styles/common.css" /> <link rel="stylesheet" href="/styles/menu.css" /> <link rel="stylesheet" href="/styles/dialog.css" /> <link rel="stylesheet" href="/styles/project.css" /> <link rel="stylesheet" href="/styles/data-table-view.css" /> <link rel="stylesheet" href="/styles/history.css" /> <link rel="stylesheet" href="/styles/browsing.css" /> <link rel="stylesheet" href="/styles/process.css" /> <link rel="stylesheet" href="/styles/menu-bar.css" /> <link rel="stylesheet" href="/styles/expression-preview-dialog.css" />
<script type="text/javascript" src="externals/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="externals/suggest/suggest-1.0.3.min.js"></script> <script type="text/javascript" src="externals/jquery-ui/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="scripts/util/misc.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/util/dialog.js"></script> <script type="text/javascript" src="scripts/project.js"></script> <script type="text/javascript" src="scripts/project/list-facet.js"></script> <script type="text/javascript" src="scripts/project/range-facet.js"></script> <script type="text/javascript" src="scripts/project/text-search-facet.js"></script> <script type="text/javascript" src="scripts/project/browsing-engine.js"></script> <script type="text/javascript" src="scripts/project/data-table-view.js"></script> <script type="text/javascript" src="scripts/project/history-widget.js"></script> <script type="text/javascript" src="scripts/project/process-widget.js"></script> <script type="text/javascript" src="scripts/project/menu-bar.js"></script> <script type="text/javascript" src="scripts/project/recon-dialog.js"></script> <script type="text/javascript" src="scripts/project/expression-preview-dialog.js"></script> <script type="text/javascript" src="scripts/project/schema-alignment.js"></script> </head> <body> <div id="header"> <div id="path"><a class="app-path-section" href="./index.html">Gridworks</a> &raquo; </div> </div> <div id="body"> <div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div> </div> </body> </html>

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

@ -35,11 +35,13 @@ function initializeUI() {
ui.facetPanel = $('<div></div>').appendTo(tdRight);
ui.historyPanel = $('<div></div>').addClass("history-panel").appendTo(document.body);
ui.processPanel = $('<div></div>').addClass("process-panel").appendTo(document.body);
ui.menuBarPanel = $('<div></div>'); $("#header").after(ui.menuBarPanel);
ui.browsingEngine = new BrowsingEngine(ui.facetPanel);
ui.processWidget = new ProcessWidget(ui.processPanel);
ui.historyWidget = new HistoryWidget(ui.historyPanel);
ui.dataTableView = new DataTableView(ui.viewPanel);
ui.menuBar = new MenuBar(ui.menuBarPanel);
}
function reinitializeProjectData(f) {

39
src/main/webapp/scripts/project/data-table-view.js
View File

@ -324,20 +324,6 @@ DataTableView.prototype._createMenuForAllColumns = function(elmt) {
}
self.render();
}
},
{},
{
label: "Automatically Align Schemas with Freebase ...",
click: function() { self._doAutoSchemaAlignment(); }
},
{
label: "Edit Schema Alignment ...",
click: function() { }
},
{},
{
label: "Export Filtered Rows",
click: function() { self._doExportRows(); }
}
], elmt);
};
@ -843,28 +829,3 @@ DataTableView.prototype._doSplitMultiValueCells = function(column) {
);
}
};
DataTableView.prototype._doExportRows = function() {
var form = document.createElement("form");
$(form)
.css("display", "none")
.attr("method", "post")
.attr("action", "/command/export-rows?project=" + theProject.id)
.attr("target", "gridworks-export");
$('<input />')
.attr("name", "engine")
.attr("value", JSON.stringify(ui.browsingEngine.getJSON()))
.appendTo(form);
document.body.appendChild(form);
window.open("about:blank", "gridworks-export");
form.submit();
document.body.removeChild(form);
};
DataTableView.prototype._doAutoSchemaAlignment = function() {
SchemaAlignment.autoAlign();
};

139
src/main/webapp/scripts/project/menu-bar.js Normal file
View File

@ -0,0 +1,139 @@
function MenuBar(div) {
this._div = div;
this._initializeUI();
}
MenuBar.prototype._initializeUI = function() {
this._mode = "inactive";
this._menuItemRecords = [];
this._div.addClass("menu-bar").html("&nbsp;");
this._innerDiv = $('<div></div>').addClass("menu-bar-inner").appendTo(this._div);
var self = this;
this._createTopLevelMenuItem("Data Set", [
{
label: "Export Filtered Rows",
click: function() { self._doExportRows(); }
}
]);
this._createTopLevelMenuItem("Schemas", [
{
label: "Auto-Align with Freebase ...",
click: function() { self._doAutoSchemaAlignment(); }
},
{
label: "Edit Schema Alignment ...",
click: function() { }
}
]);
this._wireAllMenuItemsInactive();
};
MenuBar.prototype._createTopLevelMenuItem = function(label, submenu) {
var self = this;
var menuItem = MenuSystem.createMenuItem().text(label).appendTo(this._innerDiv);
this._menuItemRecords.push({
menuItem: menuItem,
show: function() {
MenuSystem.dismissUntil(self._level);
menuItem.addClass("menu-expanded");
MenuSystem.createAndShowStandardMenu(
submenu,
this,
{
horizontal: false,
onDismiss: function() {
menuItem.removeClass("menu-expanded");
}
}
);
}
});
};
MenuBar.prototype._wireMenuItemInactive = function(record) {
var self = this;
var click = function() {
self._activateMenu();
record.show.apply(record.menuItem[0]);
};
record.menuItem.click(function() {
// because we're going to rewire the menu bar, we have to
// make this asynchronous, or jquery event binding won't work.
window.setTimeout(click, 100);
});
};
MenuBar.prototype._wireAllMenuItemsInactive = function() {
for (var i = 0; i < this._menuItemRecords.length; i++) {
this._wireMenuItemInactive(this._menuItemRecords[i]);
}
};
MenuBar.prototype._wireMenuItemActive = function(record) {
record.menuItem.mouseover(function() {
record.show.apply(this);
});
};
MenuBar.prototype._wireAllMenuItemsActive = function() {
for (var i = 0; i < this._menuItemRecords.length; i++) {
this._wireMenuItemActive(this._menuItemRecords[i]);
}
};
MenuBar.prototype._activateMenu = function() {
var self = this;
var top = this._innerDiv.offset().top;
this._innerDiv.remove().css("top", top + "px");
this._wireAllMenuItemsActive();
this._mode = "active";
this._level = MenuSystem.showMenu(this._innerDiv, function() {
self._deactivateMenu();
});
};
MenuBar.prototype._deactivateMenu = function() {
this._innerDiv.remove()
.css("top", "0px")
.appendTo(this._div);
this._wireAllMenuItemsInactive();
this._mode = "inactive";
};
MenuBar.prototype._doExportRows = function() {
var form = document.createElement("form");
$(form)
.css("display", "none")
.attr("method", "post")
.attr("action", "/command/export-rows?project=" + theProject.id)
.attr("target", "gridworks-export");
$('<input />')
.attr("name", "engine")
.attr("value", JSON.stringify(ui.browsingEngine.getJSON()))
.appendTo(form);
document.body.appendChild(form);
window.open("about:blank", "gridworks-export");
form.submit();
document.body.removeChild(form);
};
MenuBar.prototype._doAutoSchemaAlignment = function() {
SchemaAlignment.autoAlign();
};

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

@ -7,12 +7,11 @@ MenuSystem.showMenu = function(elmt, onDismiss) {
if (MenuSystem._overlay == null) {
MenuSystem._overlay = $('<div>&nbsp;</div>')
.addClass("menu-overlay")
.css("z-index", 1000)
.appendTo(document.body)
.click(MenuSystem.dismissAll);
}
elmt.css("z-index", 1001 + MenuSystem._layers.length).appendTo(document.body);
elmt.css("z-index", 1010 + MenuSystem._layers.length).appendTo(document.body);
var layer = {
elmt: elmt,
@ -55,13 +54,13 @@ MenuSystem.createMenuItem = function() {
MenuSystem.positionMenuAboveBelow = function(menu, elmt) {
var offset = elmt.offset();
menu.css("left", offset.left + "px")
.css("top", (offset.top + elmt.height()) + "px");
.css("top", (offset.top + elmt.outerHeight()) + "px");
};
MenuSystem.positionMenuLeftRight = function(menu, elmt) {
var offset = elmt.offset();
menu.css("top", offset.top + "px")
.css("left", (offset.left + elmt.width() + 10) + "px");
.css("left", (offset.left + elmt.outerWidth()) + "px");
};
MenuSystem.createAndShowStandardMenu = function(items, elmt, options) {
@ -126,4 +125,6 @@ MenuSystem.createAndShowStandardMenu = function(items, elmt, options) {
} else {
MenuSystem.positionMenuAboveBelow(menu, $(elmt));
}
return level;
};

21
src/main/webapp/styles/menu-bar.css Normal file
View File

@ -0,0 +1,21 @@
.menu-bar {
padding: 5px 10px;
background: #eee;
position: relative;
}
.menu-bar-inner {
position: absolute;
top: 0px;
left: 0px;
padding: 5px 10px;
}
.menu-bar-inner a.menu-item {
display: inline;
padding: 5px 10px;
}
.menu-bar-inner a.menu-item:hover {
background: #ddd;
}

1
src/main/webapp/styles/menu.css
View File

@ -8,6 +8,7 @@
left: 0px;
width: 100%;
height: 100%;
z-index: 1000;
}
.menu-container {