Browse Source

Implemented options `zoomable` and `moveable`

css_transitions
jos 9 years ago
parent
commit
8ef8a1e0b2
4 changed files with 44 additions and 4 deletions
  1. +2
    -0
      HISTORY.md
  2. +20
    -0
      docs/timeline.html
  3. +22
    -2
      src/timeline/Range.js
  4. +0
    -2
      src/timeline/Timeline.js

+ 2
- 0
HISTORY.md View File

@ -6,7 +6,9 @@ http://visjs.org
### Timeline
- Implemented options `zoomable` and `moveable`.
- Changed default value of option `showCurrentTime` to true.
- Internal refactoring and simplification of the code.
### Graph

+ 20
- 0
docs/timeline.html View File

@ -458,6 +458,16 @@ var options = {
<td>Specifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
</tr>
<tr>
<td>moveable</td>
<td>Boolean</td>
<td>true</td>
<td>
Specifies whether the Timeline can be moved and zoomed by dragging the window.
See also option <code>zoomable</code>.
</td>
</tr>
<tr>
<td>onAdd</td>
<td>Function</td>
@ -599,6 +609,16 @@ var options = {
<td>The width of the timeline in pixels or as a percentage.</td>
</tr>
<tr>
<td>zoomable</td>
<td>Boolean</td>
<td>true</td>
<td>
Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
Only applicable when option <code>moveable</code> is set <code>true</code>.
</td>
</tr>
<tr>
<td>zoomMax</td>
<td>Number</td>

+ 22
- 2
src/timeline/Range.js View File

@ -18,6 +18,8 @@ function Range(body, options) {
start: null,
end: null,
direction: 'horizontal', // 'horizontal' or 'vertical'
moveable: true,
zoomable: true,
min: null,
max: null,
zoomMin: 10, // milliseconds
@ -57,11 +59,16 @@ Range.prototype = new Component();
* (end - start).
* {Number} zoomMax Set a maximum value for
* (end - start).
* {Boolean} moveable Enable moving of the range
* by dragging. True by default
* {Boolean} zoomable Enable zooming of the range
* by pinching/scrolling. True by default
*/
Range.prototype.setOptions = function (options) {
if (options) {
// copy the options that we know
util.selectiveExtend(['direction', 'min', 'max', 'zoomMin', 'zoomMax'], this.options, options);
var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable'];
util.selectiveExtend(fields, this.options, options);
if ('start' in options || 'end' in options) {
// apply a new range. both start and end are optional
@ -262,6 +269,9 @@ var touchParams = {};
* @private
*/
Range.prototype._onDragStart = function(event) {
// only allow dragging when configured as movable
if (!this.options.moveable) return;
// refuse to drag when we where pinching to prevent the timeline make a jump
// when releasing the fingers in opposite order from the touch screen
if (touchParams.ignore) return;
@ -282,6 +292,9 @@ Range.prototype._onDragStart = function(event) {
* @private
*/
Range.prototype._onDrag = function (event) {
// only allow dragging when configured as movable
if (!this.options.moveable) return;
var direction = this.options.direction;
validateDirection(direction);
@ -311,6 +324,9 @@ Range.prototype._onDrag = function (event) {
* @private
*/
Range.prototype._onDragEnd = function (event) {
// only allow dragging when configured as movable
if (!this.options.moveable) return;
// refuse to drag when we where pinching to prevent the timeline make a jump
// when releasing the fingers in opposite order from the touch screen
if (touchParams.ignore) return;
@ -335,7 +351,8 @@ Range.prototype._onDragEnd = function (event) {
* @private
*/
Range.prototype._onMouseWheel = function(event) {
// TODO: reckon with option zoomable
// only allow zooming when configured as zoomable and moveable
if (!(this.options.zoomable && this.options.moveable)) return;
// retrieve delta
var delta = 0;
@ -408,6 +425,9 @@ Range.prototype._onHold = function () {
* @private
*/
Range.prototype._onPinch = function (event) {
// only allow zooming when configured as zoomable and moveable
if (!(this.options.zoomable && this.options.moveable)) return;
touchParams.ignore = true;
// TODO: reckon with option zoomable

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

@ -17,8 +17,6 @@ function Timeline (container, items, options) {
height: null,
maxHeight: null,
minHeight: null
// TODO: implement options moveable and zoomable
};
this.options = util.deepExtend({}, this.defaultOptions);

Loading…
Cancel
Save