jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Implemented functions `on` and `off` for Timeline events

css_transitions
josdejong 11 years ago
parent
a5ee54a994
commit
f6d5de71b2
6 changed files with 154 additions and 17 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +20
    -6
      HISTORY.md
  2. +20
    -4
      docs/timeline.html
  3. +51
    -0
      examples/timeline/06_event_listeners.html
  4. +1
    -0
      examples/timeline/index.html
  5. +20
    -5
      src/timeline/Range.js
  6. +42
    -2
      src/timeline/Timeline.js

+ 20
- 6
HISTORY.md View File

@ -1,17 +1,31 @@
vis.js history
http://visjs.org
## 2014-01-27, version 0.4.0
- Fixed longstanding bug in the force calculation, increasing simulation stability and fluidity.
- Reworked the calculation of the Graph, increasing performance for larger datasets (up to 10x!).
- Support for automatic clustering in Graph to handle large (>50000) datasets without losing performance.
- Added automatic intial zooming to Graph, to more easily view large amounts of data.
- Added local declustering to Graph, freezing the simulation of nodes outside of the cluster.
## not yet released, version 0.4.0
### Timeline
- Implemented functions `on` and `off` to create event listeners for events
`rangechange` and `rangechanged`.
### Graph
- Fixed longstanding bug in the force calculation, increasing simulation
stability and fluidity.
- Reworked the calculation of the Graph, increasing performance for larger
datasets (up to 10x!).
- Support for automatic clustering in Graph to handle large (>50000) datasets
without losing performance.
- Added automatic intial zooming to Graph, to more easily view large amounts
of data.
- Added local declustering to Graph, freezing the simulation of nodes outside
of the cluster.
- Added support for key-bindings by including mouseTrap in Graph.
- Added node-based navigation GUI.
- Added keyboard navigation option.
## 2014-01-14, version 0.3.0
- Moved the generated library to folder `./dist`

+ 20
- 4
docs/timeline.html View File

@ -544,12 +544,26 @@ var options = {
<td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true.
</td>
</tr>
<tr>
<td>setCustomTime(time)</td>
<td>none</td>
<td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> is a Date object.
</td>
</tr>
<tr>
<td>on(event, callback)</td>
<td>none</td>
<td>Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: <code>rangechange</code>, <code>rangechanged</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties.</td>
</tr>
<tr>
<td>off(event, callback)</td>
<td>none</td>
<td>Remove an event listener created before via function <code>on(event, callback)</code>.</td>
</tr>
<tr>
<td>setGroups(groups)</td>
<td>none</td>
@ -560,6 +574,7 @@ var options = {
must correspond with the id of the group.
</td>
</tr>
<tr>
<td>setItems(items)</td>
<td>none</td>
@ -572,16 +587,17 @@ var options = {
<tr>
<td>setOptions(options)</td>
<td>none</td>
<td>Set or update options. It is possible to change any option
of the timeline at any time. You can for example switch orientation
on the fly.
<td>Set or update options. It is possible to change any option of the timeline at any time. You can for example switch orientation on the fly.
</td>
</tr>
</table>
<!-- TODO: write a section on Events -->
<h2 id="Styles">Styles</h2>
<p>
All parts of the Timeline have a class name and a default css style.

+ 51
- 0
examples/timeline/06_event_listeners.html View File

@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Event listeners</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<div id="log"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, items, options);
function logEvent(event, properties) {
var log = document.getElementById('log');
var msg = document.createElement('div');
msg.innerHTML = 'event=' + event + ', properties=' + JSON.stringify(properties);
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
}
timeline.on('rangechange', function (properties) {
logEvent('rangechange', properties);
});
timeline.on('rangechanged', function (properties) {
logEvent('rangechanged', properties);
});
timeline.on('select', function (properties) {
logEvent('select', properties);
});
</script>
</body>
</html>

+ 1
- 0
examples/timeline/index.html View File

@ -17,6 +17,7 @@
<p><a href="03_much_data.html">03_much_data.html</a></p>
<p><a href="04_html_data.html">04_html_data.html</a></p>
<p><a href="05_groups.html">05_groups.html</a></p>
<p><a href="06_event_listeners.html">06_event_listeners.html</a></p>
</div>
</body>

+ 20
- 5
src/timeline/Range.js View File

@ -94,15 +94,30 @@ Range.prototype.subscribe = function (component, event, direction) {
};
/**
* Event handler
* @param {String} event name of the event, for example 'click', 'mousemove'
* @param {function} callback callback handler, invoked with the raw HTML Event
* as parameter.
* Add event listener
* @param {String} event Name of the event.
* Available events: 'rangechange', 'rangechanged'
* @param {function} callback Callback function, invoked as callback({start: Date, end: Date})
*/
Range.prototype.on = function (event, callback) {
Range.prototype.on = function on (event, callback) {
var available = ['rangechange', 'rangechanged'];
if (available.indexOf(event) == -1) {
throw new Error('Unknown event "' + event + '". Choose from ' + available.join());
}
events.addListener(this, event, callback);
};
/**
* Remove an event listener
* @param {String} event name of the event
* @param {function} callback callback handler
*/
Range.prototype.off = function off (event, callback) {
events.removeListener(this, event, callback);
};
/**
* Trigger an event
* @param {String} event name of the event, available events: 'rangechange',

+ 42
- 2
src/timeline/Timeline.js View File

@ -85,13 +85,15 @@ function Timeline (container, items, options) {
// TODO: reckon with options moveable and zoomable
this.range.subscribe(this.rootPanel, 'move', 'horizontal');
this.range.subscribe(this.rootPanel, 'zoom', 'horizontal');
this.range.on('rangechange', function () {
this.range.on('rangechange', function (properties) {
var force = true;
me.controller.requestReflow(force);
me._trigger('rangechange', properties);
});
this.range.on('rangechanged', function () {
this.range.on('rangechanged', function (properties) {
var force = true;
me.controller.requestReflow(force);
me._trigger('rangechanged', properties);
});
// TODO: put the listeners in setOptions, be able to dynamically change with options moveable and zoomable
@ -349,3 +351,41 @@ Timeline.prototype.getItemRange = function getItemRange() {
Timeline.prototype.select = function select(ids) {
return this.content ? this.content.select(ids) : [];
};
/**
* Add event listener
* @param {String} event Event name. Available events:
* 'rangechange', 'rangechanged', 'select'
* @param {function} callback Callback function, invoked as callback(properties)
* where properties is an optional object containing
* event specific properties.
*/
Timeline.prototype.on = function on (event, callback) {
var available = ['rangechange', 'rangechanged', 'select'];
if (available.indexOf(event) == -1) {
throw new Error('Unknown event "' + event + '". Choose from ' + available.join());
}
events.addListener(this, event, callback);
};
/**
* Remove an event listener
* @param {String} event Event name
* @param {function} callback Callback function
*/
Timeline.prototype.off = function off (event, callback) {
events.removeListener(this, event, callback);
};
/**
* Trigger an event
* @param {String} event Event name, available events: 'rangechange',
* 'rangechanged', 'select'
* @param {Object} [properties] Event specific properties
* @private
*/
Timeline.prototype._trigger = function _trigger(event, properties) {
events.trigger(this, event, properties || {});
};

Write Preview
Loading…
Cancel
Save