diff --git a/docs/timeline/index.html b/docs/timeline/index.html index 5e349f71..3336823d 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -1322,9 +1322,20 @@ document.getElementById('myTimeline').onclick = function (event) { - - + + zoomIn(percentage) + none + Zoom in the current visible window. The parameter percentage can be a Number and must be between 0 and 1. If the parameter value of percentage is null, the window will be left unchanged. + + + + zoomOut(percentage) + none + Zoom out the current visible window. The parameter percentage can be a Number and must be between 0 and 1. If the parameter value of percentage is null, the window will be left unchanged. + + +

Events

diff --git a/examples/timeline/interaction/navigationMenu.html b/examples/timeline/interaction/navigationMenu.html index 178ee0b7..cb7c19ad 100755 --- a/examples/timeline/interaction/navigationMenu.html +++ b/examples/timeline/interaction/navigationMenu.html @@ -69,44 +69,9 @@ }); } - /** - * Zoom the timeline a given percentage in or out - * @param {Number} percentage For example 0.1 (zoom out) or -0.1 (zoom in) - */ - function zoomIn(percentage) { - var range = timeline.getWindow(); - var start = range.start.valueOf(); - var end = range.end.valueOf(); - var interval = end - start; - var newInterval = interval / (1 + percentage); - var distance = (interval - newInterval) / 2; - var newStart = start + distance; - var newEnd = end - distance; - - timeline.setWindow({ - start : newStart, - end : newEnd - }); - } - - function zoomOut(percentage) { - var range = timeline.getWindow(); - var start = range.start.valueOf(); - var end = range.end.valueOf(); - var interval = end - start; - var newStart = start - interval * percentage / 2; - var newEnd = end + interval * percentage / 2; - - timeline.setWindow({ - start : newStart, - end : newEnd - }); - } - - // attach events to the navigation buttons - document.getElementById('zoomIn').onclick = function () { zoomIn( 0.2); }; - document.getElementById('zoomOut').onclick = function () { zoomOut( 0.2); }; + document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); }; + document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); }; document.getElementById('moveLeft').onclick = function () { move( 0.2); }; document.getElementById('moveRight').onclick = function () { move(-0.2); }; diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index 3ea69325..a0352cae 100644 --- a/lib/timeline/Core.js +++ b/lib/timeline/Core.js @@ -676,6 +676,46 @@ Core.prototype.getWindow = function() { }; }; +/** + * Zoom in the window such that given time is centered on screen. + * @param {Number} percentage - must be between [0..1] + */ +Core.prototype.zoomIn = function(percentage) { + if (!percentage || percentage < 0 || percentage > 1) return + var range = this.getWindow(); + var start = range.start.valueOf(); + var end = range.end.valueOf(); + var interval = end - start; + var newInterval = interval / (1 + percentage); + var distance = (interval - newInterval) / 2; + var newStart = start + distance; + var newEnd = end - distance; + + this.setWindow({ + start : newStart, + end : newEnd + }); +}; + +/** + * Zoom out the window such that given time is centered on screen. + * @param {Number} percentage - must be between [0..1] + */ +Core.prototype.zoomOut = function(percentage) { + if (!percentage || percentage < 0 || percentage > 1) return + var range = this.getWindow(); + var start = range.start.valueOf(); + var end = range.end.valueOf(); + var interval = end - start; + var newStart = start - interval * percentage / 2; + var newEnd = end + interval * percentage / 2; + + this.setWindow({ + start : newStart, + end : newEnd + }); +}; + /** * Force a redraw. Can be overridden by implementations of Core * @@ -1145,4 +1185,4 @@ Core.prototype._createConfigurator = function () { throw new Error('Cannot invoke abstract method _createConfigurator'); }; -module.exports = Core; \ No newline at end of file +module.exports = Core;