diff --git a/HISTORY.md b/HISTORY.md index 634a6533..a0b11008 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -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` diff --git a/docs/timeline.html b/docs/timeline.html index 93dfc599..91e5dadc 100644 --- a/docs/timeline.html +++ b/docs/timeline.html @@ -544,12 +544,26 @@ var options = { Retrieve the custom time. Only applicable when the option showCustomTime is true. + setCustomTime(time) none Adjust the custom time bar. Only applicable when the option showCustomTime is true. time is a Date object. + + + on(event, callback) + none + Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: rangechange, rangechanged. The callback function is invoked as callback(properties), where properties is an object containing event specific properties. + + + + off(event, callback) + none + Remove an event listener created before via function on(event, callback). + + setGroups(groups) none @@ -560,6 +574,7 @@ var options = { must correspond with the id of the group. + setItems(items) none @@ -572,16 +587,17 @@ var options = { setOptions(options) none - 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. + 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. - + + + +

Styles

All parts of the Timeline have a class name and a default css style. diff --git a/examples/timeline/06_event_listeners.html b/examples/timeline/06_event_listeners.html new file mode 100644 index 00000000..78587db0 --- /dev/null +++ b/examples/timeline/06_event_listeners.html @@ -0,0 +1,51 @@ + + + + Timeline | Event listeners + + + + + + + +

+
+ + + + \ No newline at end of file diff --git a/examples/timeline/index.html b/examples/timeline/index.html index 91b28ffe..2ff3984b 100644 --- a/examples/timeline/index.html +++ b/examples/timeline/index.html @@ -17,6 +17,7 @@

03_much_data.html

04_html_data.html

05_groups.html

+

06_event_listeners.html

diff --git a/src/timeline/Range.js b/src/timeline/Range.js index b0f9bb7f..f6d72299 100644 --- a/src/timeline/Range.js +++ b/src/timeline/Range.js @@ -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', diff --git a/src/timeline/Timeline.js b/src/timeline/Timeline.js index ec122d74..c77678cf 100644 --- a/src/timeline/Timeline.js +++ b/src/timeline/Timeline.js @@ -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 || {}); +};