knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#14,refactor][s]: move (data table) menu out of html and into DataTable view.

Browse Source 
* 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.
This commit is contained in:
Rufus Pollock 2012-01-06 14:25:51 +00:00
parent 151dacd033
commit 48dcdd31b0
4 changed files with 17 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demo/index.html
View File

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

12
demo/style/style.css
View File

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

2
src/util.js
View File

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

24
src/view.js
View File

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