Skip to content

Instantly share code, notes, and snippets.

@lsmith

lsmith/datatable-events.js

Created December 26, 2010 19:30
Show Gist options
  • Save lsmith/755582 to your computer and use it in GitHub Desktop.
Save lsmith/755582 to your computer and use it in GitHub Desktop.
Download ZIP
A DataTable plugin to create a set of notification events for convenience beyond myDataTable.delegate('click', callback, 'tr') for row clicks etc
Raw
datatable-events.js
YUI.add('datatable-events', function (Y) {
var isString = Y.Lang.isString;
Y.Plugin.DataTableEvents = Y.Base.create('dataTableEvents', Y.Plugin.Base, [], {
initializer: function () { // Or possibly this.afterHostMethod('bindUI', this._initEvents);
this.get('host').after('render', this._initEvents, this);
},
_initEvents: function () {
var events = this.get('events'),
tags = this.get('tags'), // filters?
tag_map = {},
filter = [],
i, tag;
for (i = tags.length - 1; i >= 0; --i) {
tag = tags[i];
if (isString(tag)) {
tag = { tag: tag, name: tag }
}
tag_map[tag.tag] = tag;
filter.push(tag.tag);
}
this._tag_map = tag_map;
this._handle = this.get('host')._tableNode
.delegate(events, this._handleEvent, filter.join(','), this);
},
// TODO: how to broadcast column events?
_handleEvent: function (e) {
if (/^mouse(?:over|out|enter|leave)$/.test(e.type)) {
this._handleHoverEvent(e);
} else {
this._notify(e);
}
},
_handleHoverEvent: function (e) {
},
_notify: function (e, tag_map) {
var node = e.currentTarget,
table = this.get('host'),
thead = table._theadNode,
type = e.type.charAt(0).toUpperCase() + e.type.slice(1),
tag = node.get('tagName').toLowerCase(),
inThead = node.getData('inThead'),
tag_map = this._tag_map;
if (!inThead && inThead !== false) {
inThead = (node !== thead && thead.contains(node));
node.setData('inThead', inThead);
}
if (tag_map[tag]) {
tag = tag_map[tag].name;
}
if (thead) {
tag = 'thead' + tag.charAt(0).toUpperCase() + tag.slice(1);
}
// cellClick, theadCellClick, tableKeydown etc
Y.log("Emitting" + tag + type);
this.fire(tag + type, e); // or fire(.., { event: e })? or new EventFacade?
},
destructor: function () {
if (this._handle) {
this._handle.detach();
}
}
}, {
NS: 'events',
ATTRS: {
events: {
value: ['keydown', 'keyup', 'mousedown', 'mouseup', 'click' ]
},
tags: {
value: [
'table', 'thead', 'tbody',
{ tag: 'tr', name: 'row' },
{ tag: 'th', name: 'cell' },
{ tag: 'td', name: 'cell' }
]
}
}
});
}, '@VERSION@', { requires: [ 'base-build', 'plugin', 'event-mouseenter' ] });
Raw
test_file.html
<!doctype html>
<html>
<head>
<title>Test Page</title>
<style type="text/css">
body {
font: normal 13px/1.3 arial, clean, sans-serif;
}
table, th, td {
border: 1px solid #ccc;
border-collapse: collapse;
}
th, td {
padding: 3px 4px;
}
th {
background: #bbb; }
</style>
</head>
<body class="yui3-skin-sam">
<div id="x"></div>
<script src="/path/to/yui3/build/yui/yui.js"></script>
<script src="datatable-events.js"></script>
<script>
YUI({ filter: 'raw' }).use('widget', 'base-build', 'datatable-events', function (Y) {
// Simple table widget to facilitate plugin POC
var DataTable = Y.Base.create('datatable', Y.Widget, [], {
TABLE_TEMPLATE: '<table><thead></thead><tbody></tbody></table>',
renderUI: function () {
this._tableNode = Y.Node.create(this.TABLE_TEMPLATE);
this._theadNode = this._tableNode.one('thead');
this._tbodyNode = this._tableNode.one('tbody');
this.get('contentBox').appendChild(this._tableNode);
},
bindUI: function () { },
syncUI: function () {
var data = this.get('data'),
row = '',
html = '',
sub = Y.Lang.sub,
key, i, len;
for (key in data[0]) {
if (data[0].hasOwnProperty(key)) {
html += '<th>' + key + '</th>';
row += '<td>{' + key + '}</td>';
}
}
this._theadNode.append('<tr>' + html + '</tr>');
html = '';
row = '<tr>' + row + '</tr>';
for (i = 0, len = data.length; i < len; ++i) {
html += sub(row, data[i]);
}
this._tbodyNode.append(html);
}
}, {
ATTRS: {
data: {}
}
});
var datatable = new DataTable({ data: [
{ foo: 'foo 1', bar: 'bar 1', baz: 'baz 1' },
{ foo: 'foo 2', bar: 'bar 1', baz: 'baz 2' },
{ foo: 'foo 3', bar: 'bar 1', baz: 'baz 3' },
{ foo: 'foo 4', bar: 'bar 1', baz: 'baz 4' },
{ foo: 'foo 5', bar: 'bar 1', baz: 'baz 5' },
{ foo: 'foo 6', bar: 'bar 1', baz: 'baz 6' },
{ foo: 'foo 7', bar: 'bar 1', baz: 'baz 7' },
{ foo: 'foo 8', bar: 'bar 1', baz: 'baz 8' },
{ foo: 'foo 9', bar: 'bar 1', baz: 'baz 9' },
{ foo: 'foo 10', bar: 'bar 1', baz: 'baz 10' },
{ foo: 'foo 11', bar: 'bar 1', baz: 'baz 11' }
]});
datatable.plug(Y.Plugin.DataTableEvents);
datatable.render('#x');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment