Browse Source

Add animation options for zoomIn/zoomOut funtions (#2830)

* Fix redraw order

* Fix error when option is not defined

* Allow template labels

* Add .travis.yml file

* Add experiment travis code

* Fix react example

* Add animation options for zoomIn and zoomOut
dependencies
yotamberk 7 years ago
committed by GitHub
parent
commit
f8be0a5a21
2 changed files with 28 additions and 14 deletions
  1. +10
    -4
      docs/timeline/index.html
  2. +18
    -10
      lib/timeline/Core.js

+ 10
- 4
docs/timeline/index.html View File

@ -1439,15 +1439,21 @@ document.getElementById('myTimeline').onclick = function (event) {
</tr> </tr>
<tr> <tr>
<td>zoomIn(percentage)</td>
<td>zoomIn(percentage [, options])</td>
<td>none</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>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. Available options:
<ul>
<li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
</ul>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>zoomOut(percentage)</td>
<td>zoomOut(percentage [, options])</td>
<td>none</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>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. Available options:
<ul>
<li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
</ul>
</td> </td>
</tr> </tr>

+ 18
- 10
lib/timeline/Core.js View File

@ -708,8 +708,15 @@ Core.prototype.getWindow = function() {
/** /**
* Zoom in the window such that given time is centered on screen. * Zoom in the window such that given time is centered on screen.
* @param {Number} percentage - must be between [0..1] * @param {Number} percentage - must be between [0..1]
* @param {Object} [options] Available options:
* `animation: boolean | {duration: number, easingFunction: string}`
* If true (default), the range is animated
* smoothly to the new window. An object can be
* provided to specify duration and easing function.
* Default duration is 500 ms, and default easing
* function is 'easeInOutQuad'.
*/ */
Core.prototype.zoomIn = function(percentage) {
Core.prototype.zoomIn = function(percentage, options) {
if (!percentage || percentage < 0 || percentage > 1) return if (!percentage || percentage < 0 || percentage > 1) return
var range = this.getWindow(); var range = this.getWindow();
var start = range.start.valueOf(); var start = range.start.valueOf();
@ -720,17 +727,21 @@ Core.prototype.zoomIn = function(percentage) {
var newStart = start + distance; var newStart = start + distance;
var newEnd = end - distance; var newEnd = end - distance;
this.setWindow({
start : newStart,
end : newEnd
});
this.setWindow(newStart, newEnd, options);
}; };
/** /**
* Zoom out the window such that given time is centered on screen. * Zoom out the window such that given time is centered on screen.
* @param {Number} percentage - must be between [0..1] * @param {Number} percentage - must be between [0..1]
* @param {Object} [options] Available options:
* `animation: boolean | {duration: number, easingFunction: string}`
* If true (default), the range is animated
* smoothly to the new window. An object can be
* provided to specify duration and easing function.
* Default duration is 500 ms, and default easing
* function is 'easeInOutQuad'.
*/ */
Core.prototype.zoomOut = function(percentage) {
Core.prototype.zoomOut = function(percentage, options) {
if (!percentage || percentage < 0 || percentage > 1) return if (!percentage || percentage < 0 || percentage > 1) return
var range = this.getWindow(); var range = this.getWindow();
var start = range.start.valueOf(); var start = range.start.valueOf();
@ -739,10 +750,7 @@ Core.prototype.zoomOut = function(percentage) {
var newStart = start - interval * percentage / 2; var newStart = start - interval * percentage / 2;
var newEnd = end + interval * percentage / 2; var newEnd = end + interval * percentage / 2;
this.setWindow({
start : newStart,
end : newEnd
});
this.setWindow(newStart, newEnd, options);
}; };
/** /**

Loading…
Cancel
Save