From 736c6ec1de12d56dfb257b6770e396fa49707e37 Mon Sep 17 00:00:00 2001 From: David Huynh Date: Mon, 8 Feb 2010 21:41:49 +0000 Subject: [PATCH] Added main menu bar. git-svn-id: http://google-refine.googlecode.com/svn/trunk@72 7d457c2a-affb-35e4-300a-418c747d4874 --- src/main/webapp/project.html | 4 +- src/main/webapp/scripts/project.js | 2 + .../webapp/scripts/project/data-table-view.js | 39 ----- src/main/webapp/scripts/project/menu-bar.js | 139 ++++++++++++++++++ src/main/webapp/scripts/util/menu.js | 9 +- src/main/webapp/styles/menu-bar.css | 21 +++ src/main/webapp/styles/menu.css | 1 + 7 files changed, 170 insertions(+), 45 deletions(-) create mode 100644 src/main/webapp/scripts/project/menu-bar.js create mode 100644 src/main/webapp/styles/menu-bar.css diff --git a/src/main/webapp/project.html b/src/main/webapp/project.html index 848ca1731..21bee9488 100644 --- a/src/main/webapp/project.html +++ b/src/main/webapp/project.html @@ -1,2 +1,2 @@ - Gridlock -
starting up ...
\ No newline at end of file + Gridlock +
starting up ...
\ No newline at end of file diff --git a/src/main/webapp/scripts/project.js b/src/main/webapp/scripts/project.js index a1b1ddfae..110057aee 100644 --- a/src/main/webapp/scripts/project.js +++ b/src/main/webapp/scripts/project.js @@ -35,11 +35,13 @@ function initializeUI() { ui.facetPanel = $('
').appendTo(tdRight); ui.historyPanel = $('
').addClass("history-panel").appendTo(document.body); ui.processPanel = $('
').addClass("process-panel").appendTo(document.body); + ui.menuBarPanel = $('
'); $("#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) { diff --git a/src/main/webapp/scripts/project/data-table-view.js b/src/main/webapp/scripts/project/data-table-view.js index c35df11c5..eeb7c8573 100644 --- a/src/main/webapp/scripts/project/data-table-view.js +++ b/src/main/webapp/scripts/project/data-table-view.js @@ -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"); - - $('') - .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(); -}; diff --git a/src/main/webapp/scripts/project/menu-bar.js b/src/main/webapp/scripts/project/menu-bar.js new file mode 100644 index 000000000..374bff8f4 --- /dev/null +++ b/src/main/webapp/scripts/project/menu-bar.js @@ -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(" "); + this._innerDiv = $('
').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"); + + $('') + .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(); +}; diff --git a/src/main/webapp/scripts/util/menu.js b/src/main/webapp/scripts/util/menu.js index 0273a03e4..f485615f7 100644 --- a/src/main/webapp/scripts/util/menu.js +++ b/src/main/webapp/scripts/util/menu.js @@ -7,12 +7,11 @@ MenuSystem.showMenu = function(elmt, onDismiss) { if (MenuSystem._overlay == null) { MenuSystem._overlay = $('
 
') .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; }; diff --git a/src/main/webapp/styles/menu-bar.css b/src/main/webapp/styles/menu-bar.css new file mode 100644 index 000000000..d385324d9 --- /dev/null +++ b/src/main/webapp/styles/menu-bar.css @@ -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; +} diff --git a/src/main/webapp/styles/menu.css b/src/main/webapp/styles/menu.css index d462a646e..0b4fded0b 100644 --- a/src/main/webapp/styles/menu.css +++ b/src/main/webapp/styles/menu.css @@ -8,6 +8,7 @@ left: 0px; width: 100%; height: 100%; + z-index: 1000; } .menu-container {