From 48dcdd31b0f1907ebdbc8cc1343bee6775112bef Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Fri, 6 Jan 2012 14:25:51 +0000
Subject: [PATCH] [#14,refactor][s]: move (data table) menu out of html and
 into DataTable view.

* Also rename element class to data-table-menu for greater specificity
* Allows us to get rid of a nastiness (DataTable view was binding to events outside of itself) -- and another step to making the Explorer completely autonomous and non-dependent on HTML.
---
 demo/index.html      |  3 ---
 demo/style/style.css | 12 ++++++------
 src/util.js          |  2 +-
 src/view.js          | 24 ++++++++++--------------
 4 files changed, 17 insertions(+), 24 deletions(-)
diff --git a/demo/index.html b/demo/index.html
index 7ea912b0..8567b4b8 100755
--- a/demo/index.html
+++ b/demo/index.html
@@ -17,9 +17,6 @@
 </head> 
 <body class="bod">
   <div class="container">
-    <div class="menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div>
-    <ul class="menu">
-    </ul>
     <div id="header">
       <div class="project-title">
         <a href="http://github.com/okfn/recline">Recline DataExplorer</a>
diff --git a/demo/style/style.css b/demo/style/style.css
index e9f39ac7..1b8b2d5f 100755
--- a/demo/style/style.css
+++ b/demo/style/style.css
@@ -43,7 +43,7 @@ a.button:hover span.icon.loading { background-image: url(images/loader-blue.gif)
 .chosen {border: 1px solid green}
 .info { padding: 0px 0px 10px 0px}
 .large-loader { position: relative; }
-.menu-overlay {
+.data-table-menu-overlay {
   position: fixed;
   top: 0;
   left: 0;
@@ -51,7 +51,7 @@ a.button:hover span.icon.loading { background-image: url(images/loader-blue.gif)
   height: 100%;
 }
 
-ul.menu {
+ul.data-table-menu {
   display: none;
   outline-style: none;
   background: white;
@@ -68,18 +68,18 @@ ul.menu {
   border-right: 1px solid #666;
   border-bottom: 1px solid #666;
   margin: 0; padding: 0; }
-  ul.menu * {
+  ul.data-table-menu * {
     margin: 0;
     padding: 0; }
-  ul.menu a {
+  ul.data-table-menu a {
     line-height: 14px;
     color: black;
     display: block;
     padding: 5px 7px;
     text-decoration: none; }
-  ul.menu li {
+  ul.data-table-menu li {
     height: 24px; }
-  ul.menu li:hover {
+  ul.data-table-menu li:hover {
     background-color: #DBE8F8 }
 
 
diff --git a/src/util.js b/src/util.js
index ea528e3a..6b37f755 100755
--- a/src/util.js
+++ b/src/util.js
@@ -121,7 +121,7 @@ var util = function() {
   }
   
   function position( thing, elem, offset ) {
-    var position = $(elem.target).offset();
+    var position = $(elem.target).position();
     if (offset) {
       if (offset.top) position.top += offset.top;
       if (offset.left) position.left += offset.left;
diff --git a/src/view.js b/src/view.js
index 3464a825..a26e21a7 100644
--- a/src/view.js
+++ b/src/view.js
@@ -109,18 +109,12 @@ my.DataTable = Backbone.View.extend({
     this.model.currentDocuments.bind('reset', this.render);
     this.model.currentDocuments.bind('remove', this.render);
     this.state = {};
-    // this is nasty. Due to fact that .menu element is not inside this view but is elsewhere in DOM
-    $('.menu li a').live('click', function(e) {
-      // self.onMenuClick(e).apply(self);
-      self.onMenuClick(e);
-    });
   },
 
   events: {
-    // see initialize
-    // 'click .menu li': 'onMenuClick',
-    'click .column-header-menu': 'onColumnHeaderClick',
-    'click .row-header-menu': 'onRowHeaderClick'
+    'click .column-header-menu': 'onColumnHeaderClick'
+    , 'click .row-header-menu': 'onRowHeaderClick'
+    , 'click .data-table-menu li a': 'onMenuClick'
   },
 
   // TODO: delete or re-enable (currently this code is not used from anywhere except deprecated or disabled methods (see above)).
@@ -140,14 +134,14 @@ my.DataTable = Backbone.View.extend({
 
   onColumnHeaderClick: function(e) {
     this.state.currentColumn = $(e.target).siblings().text();
-    util.position('menu', e);
-    util.render('columnActions', 'menu');
+    util.position('data-table-menu', e);
+    util.render('columnActions', 'data-table-menu');
   },
 
   onRowHeaderClick: function(e) {
     this.state.currentRow = $(e.target).parents('tr:first').attr('data-id');
-    util.position('menu', e);
-    util.render('rowActions', 'menu');
+    util.position('data-table-menu', e);
+    util.render('rowActions', 'data-table-menu');
   },
 
   onMenuClick: function(e) {
@@ -185,7 +179,7 @@ my.DataTable = Backbone.View.extend({
           })
       }
     }
-    util.hide('menu');
+    util.hide('data-table-menu');
     actions[$(e.target).attr('data-action')]();
   },
 
@@ -223,6 +217,8 @@ my.DataTable = Backbone.View.extend({
   // ======================================================
   // Core Templating
   template: ' \
+    <div class="data-table-menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div> \
+    <ul class="data-table-menu"></ul> \
     <table class="data-table" cellspacing="0"> \
       <thead> \
         <tr> \
