Skip to content

Instantly share code, notes, and snippets.

@lsmith

lsmith/datatable-events.js

Created July 8, 2011 00:12
Show Gist options
  • Save lsmith/1070837 to your computer and use it in GitHub Desktop.
Save lsmith/1070837 to your computer and use it in GitHub Desktop.
Download ZIP
A Plugin to create cellClick, rowMousedown, etc events on DataTable
Raw
datatable-events.js
YUI.add('datatable-events', function (Y) {
Y.Plugin.DataTableEvents = Y.Base.create('dtevents', Y.Plugin.Base, [], {
initializer: function (config) {
this.afterHostMethod('bindUI', function () {
this._bindEvents(this.get('events'));
this.after('eventsChange', this._afterEventsChange);
});
},
destructor: function () {
this._handle && this._handle.detach();
delete this._handle;
},
_bindEvents: function (events) {
var table = this.get('host');
this.destructor();
this._handle = table.delegate(events, function (e) {
var type = e.type.charAt(0).toUpperCase() + e.type.slice(1),
cell = e.currentTarget.ancestor('td'),
row = cell.get('parentNode'),
record = this.get('recordset').getRecord(row.get('id')),
column = this.get('columnset').keys[cell.get('cellIndex')],
payload = {
event: e,
target: e.target,
currentTarget: cell,
cell: cell,
row: row,
record: record,
column: column
},
ok;
ok = this.fire("cell" + type, payload);
if (ok) {
ok = this.fire("row" + type, payload);
// Fire columnClick unless cellClick stopped
this.fire("column" + type, payload);
ok && this.fire("table" + type, payload);
}
}, 'td .yui3-datatable-liner, th .yui3-datatable-liner', table);
},
_afterEventsChange: function (e) {
this._bindEvents(e.newVal);
}
}, {
NS: 'events',
ATTRS: {
events: {
value: ['click'],
setter: function (val) {
// All this wrangling is to prevent after subscription from
// executing when replacing the current value with a new
// array containing the same events.
var current = this.get('events'),
keys = current ? Y.Array.hash(current) : {},
ok = false,
newKeys, k;
val = Y.Array(val);
newKeys = Y.Array.hash(val);
for (k in newKeys) {
if (newKeys.hasOwnProperty(k)) {
delete keys[k];
} else {
ok = true;
break;
}
}
ok || (ok = Y.Object.size(keys));
if (!ok) {
val = current;
}
return val;
}
}
}
});
// This will be supported in 3.4.0
Y.Plugin.addHostAttr('tableEvents', Y.DataTable.Base,
Y.Plugin.DataTableEvents,
function (val) {
if (Y.Lang.isString(val) || Y.Lang.isArray(val)) {
return { events: Y.Array(val) };
}
return val;
});
}, '0.1', { requires: [ 'base-build', 'pluginattr', 'datatable-base' ] });
Raw
example_3.3.0.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<style>
</style>
</head>
<body class="yui3-skin-sam">
<div id="x"></div>
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui.js"></script>
<script src="datatable_events.js"></script><script>
YUI().use('datatable-base', 'datatable-events', function (Y) {
var table = new Y.DataTable.Base({
recordset: [
{ name: 'foo', title: 'Mr.' },
{ name: 'bar', title: 'Mr.' },
{ name: 'baz', title: 'Mr.' }
],
columnset: ['name', 'title']
})
.plug(Y.Plugin.DataTableEvents, { events: ['mousedown', 'mouseup', 'click'] })
.render('#x');
table.on('cellClick', function (e) {
console.log('cellClick');
e.stopPropagation(); // this will stop the other *Click events from firing
});
table.on('rowClick', function (e) { console.log('rowClick'); });
table.on('tableClick', function (e) { console.log('tableClick'); });
table.on('columnClick', function (e) { console.log('columnClick'); });
table.on('cellMousedown', function (e) { console.log('cellMousedown'); });
table.on('rowMousedown', function (e) { console.log('rowMousedown'); });
table.on('tableMousedown', function (e) { console.log('tableMousedown'); });
table.on('columnMousedown', function (e) { console.log('columnMousedown'); });
table.on('cellMouseup', function (e) { console.log('cellMouseup'); });
table.on('rowMouseup', function (e) { console.log('rowMouseup'); });
table.on('tableMouseup', function (e) { console.log('tableMouseup'); });
table.on('columnMouseup', function (e) { console.log('columnMouseup'); });
});
</script>
</body>
</html>
Raw
example_3.4.0.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<style>
</style>
</head>
<body class="yui3-skin-sam">
<div id="x"></div>
<script src="http://yui.yahooapis.com/3.4.0/build/yui/yui.js"></script>
<script src="datatable_events.js"></script><script>
YUI().use('datatable-base', 'datatable-events', function (Y) {
var table = new Y.DataTable.Base({
recordset: [
{ name: 'foo', title: 'Mr.' },
{ name: 'bar', title: 'Mr.' },
{ name: 'baz', title: 'Mr.' }
],
columnset: ['name', 'title'],
tableEvents: ['click', 'mousedown', 'mouseup'] // this will add the plugin for you
})
.render('#x');
table.on('cellClick', function (e) {
console.log('cellClick');
e.stopPropagation(); // this will stop the other *Click events from firing
});
table.on('rowClick', function (e) { console.log('rowClick'); });
table.on('tableClick', function (e) { console.log('tableClick'); });
table.on('columnClick', function (e) { console.log('columnClick'); });
table.on('cellMousedown', function (e) { console.log('cellMousedown'); });
table.on('rowMousedown', function (e) { console.log('rowMousedown'); });
table.on('tableMousedown', function (e) { console.log('tableMousedown'); });
table.on('columnMousedown', function (e) { console.log('columnMousedown'); });
table.on('cellMouseup', function (e) { console.log('cellMouseup'); });
table.on('rowMouseup', function (e) { console.log('rowMouseup'); });
table.on('tableMouseup', function (e) { console.log('tableMouseup'); });
table.on('columnMouseup', function (e) { console.log('columnMouseup'); });
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment