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);