diff --git a/HISTORY.md b/HISTORY.md index 5f65d033..23cbe489 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -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 diff --git a/docs/timeline.html b/docs/timeline.html index 43abb226..544aa463 100644 --- a/docs/timeline.html +++ b/docs/timeline.html @@ -458,6 +458,16 @@ var options = { Specifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px". + + moveable + Boolean + true + + Specifies whether the Timeline can be moved and zoomed by dragging the window. + See also option zoomable. + + + onAdd Function @@ -599,6 +609,16 @@ var options = { The width of the timeline in pixels or as a percentage. + + zoomable + Boolean + true + + Specifies whether the Timeline can be zoomed by pinching or scrolling in the window. + Only applicable when option moveable is set true. + + + zoomMax Number diff --git a/src/timeline/Range.js b/src/timeline/Range.js index 4aa1c4fc..266472b1 100644 --- a/src/timeline/Range.js +++ b/src/timeline/Range.js @@ -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 diff --git a/src/timeline/Timeline.js b/src/timeline/Timeline.js index 15429a0f..76dc4e35 100644 --- a/src/timeline/Timeline.js +++ b/src/timeline/Timeline.js @@ -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);