Browse Source

Add zoomIn and zoomOut to timeline core (#2239)

* Add zoomIn and zoomOut to timeline core functionality
* Fix example
* Fix jsdocs params
* inforce zoom percentage to be between 0 and 1
codeClimate
yotamberk 8 years ago
committed by Alexander Wunschik
parent
commit
4dedc62296
3 changed files with 56 additions and 40 deletions
  1. +13
    -2
      docs/timeline/index.html
  2. +2
    -37
      examples/timeline/interaction/navigationMenu.html
  3. +41
    -1
      lib/timeline/Core.js

+ 13
- 2
docs/timeline/index.html View File

@ -1322,9 +1322,20 @@ document.getElementById('myTimeline').onclick = function (event) {
</td> </td>
</tr> </tr>
</table>
<tr>
<td>zoomIn(percentage)</td>
<td>none</td>
<td>Zoom in the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged.
</td>
</tr>
<tr>
<td>zoomOut(percentage)</td>
<td>none</td>
<td>Zoom out the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged.
</td>
</tr>
</table>
<h2 id="Events">Events</h2> <h2 id="Events">Events</h2>
<p> <p>

+ 2
- 37
examples/timeline/interaction/navigationMenu.html View File

@ -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 // 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('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); }; document.getElementById('moveRight').onclick = function () { move(-0.2); };

+ 41
- 1
lib/timeline/Core.js View File

@ -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 * 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'); throw new Error('Cannot invoke abstract method _createConfigurator');
}; };
module.exports = Core;
module.exports = Core;

Loading…
Cancel
Save