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
Download Patch File Download Diff File Expand all files Collapse all files

3
demo/index.html
View File

@@ -17,9 +17,6 @@
</head> </head>
<body class="bod"> <body class="bod">
<div class="container"> <div class="container">
<div class="menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div>
<ul class="menu">
</ul>
<div id="header"> <div id="header">
<div class="project-title"> <div class="project-title">
<a href="http://github.com/okfn/recline">Recline DataExplorer</a> <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} .chosen {border: 1px solid green}
.info { padding: 0px 0px 10px 0px} .info { padding: 0px 0px 10px 0px}
.large-loader { position: relative; } .large-loader { position: relative; }
.menu-overlay { .data-table-menu-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@@ -51,7 +51,7 @@ a.button:hover span.icon.loading { background-image: url(images/loader-blue.gif)
height: 100%; height: 100%;
} }
ul.menu { ul.data-table-menu {
display: none; display: none;
outline-style: none; outline-style: none;
background: white; background: white;
@@ -68,18 +68,18 @@ ul.menu {
border-right: 1px solid #666; border-right: 1px solid #666;
border-bottom: 1px solid #666; border-bottom: 1px solid #666;
margin: 0; padding: 0; } margin: 0; padding: 0; }
ul.menu * { ul.data-table-menu * {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
ul.menu a { ul.data-table-menu a {
line-height: 14px; line-height: 14px;
color: black; color: black;
display: block; display: block;
padding: 5px 7px; padding: 5px 7px;
text-decoration: none; } text-decoration: none; }
ul.menu li { ul.data-table-menu li {
height: 24px; } height: 24px; }
ul.menu li:hover { ul.data-table-menu li:hover {
background-color: #DBE8F8 } background-color: #DBE8F8 }

2
src/util.js
View File

@@ -121,7 +121,7 @@ var util = function() {
} }
function position( thing, elem, offset ) { function position( thing, elem, offset ) {
var position = $(elem.target).offset(); var position = $(elem.target).position();
if (offset) { if (offset) {
if (offset.top) position.top += offset.top; if (offset.top) position.top += offset.top;
if (offset.left) position.left += offset.left; 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('reset', this.render);
this.model.currentDocuments.bind('remove', this.render); this.model.currentDocuments.bind('remove', this.render);
this.state = {}; 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: { events: {
// see initialize 'click .column-header-menu': 'onColumnHeaderClick'
// 'click .menu li': 'onMenuClick', , 'click .row-header-menu': 'onRowHeaderClick'
'click .column-header-menu': 'onColumnHeaderClick', , 'click .data-table-menu li a': 'onMenuClick'
'click .row-header-menu': 'onRowHeaderClick'
}, },
// TODO: delete or re-enable (currently this code is not used from anywhere except deprecated or disabled methods (see above)). // 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) { onColumnHeaderClick: function(e) {
this.state.currentColumn = $(e.target).siblings().text(); this.state.currentColumn = $(e.target).siblings().text();
util.position('menu', e); util.position('data-table-menu', e);
util.render('columnActions', 'menu'); util.render('columnActions', 'data-table-menu');
}, },
onRowHeaderClick: function(e) { onRowHeaderClick: function(e) {
this.state.currentRow = $(e.target).parents('tr:first').attr('data-id'); this.state.currentRow = $(e.target).parents('tr:first').attr('data-id');
util.position('menu', e); util.position('data-table-menu', e);
util.render('rowActions', 'menu'); util.render('rowActions', 'data-table-menu');
}, },
onMenuClick: function(e) { 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')](); actions[$(e.target).attr('data-action')]();
}, },
@@ -223,6 +217,8 @@ my.DataTable = Backbone.View.extend({
// ====================================================== // ======================================================
// Core Templating // Core Templating
template: ' \ 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"> \ <table class="data-table" cellspacing="0"> \
<thead> \ <thead> \
<tr> \ <tr> \