Added validation for callback functions. Some css fixes for range

src/timeline/Range.js

@@ -288,6 +288,8 @@ Range.prototype._onDragStart = function(event, component) {
   // when releasing the fingers in opposite order from the touch screen
   if (touchParams.ignore) return;
 
+  // TODO: reckon with option movable
+
   touchParams.start = this.start;
   touchParams.end = this.end;
 
@@ -307,6 +309,9 @@ Range.prototype._onDragStart = function(event, component) {
 Range.prototype._onDrag = function (event, component, direction) {
   validateDirection(direction);
 
+  // TODO: reckon with option movable
+
+
   // 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,6 +340,8 @@ Range.prototype._onDragEnd = function (event, component) {
   // when releasing the fingers in opposite order from the touch screen
   if (touchParams.ignore) return;
 
+  // TODO: reckon with option movable
+
   if (component.frame) {
     component.frame.style.cursor = 'auto';
   }
@@ -357,6 +364,8 @@ Range.prototype._onDragEnd = function (event, component) {
 Range.prototype._onMouseWheel = function(event, component, direction) {
   validateDirection(direction);
 
+  // TODO: reckon with option zoomable
+
   // retrieve delta
   var delta = 0;
   if (event.wheelDelta) { /* IE/Opera. */
@@ -432,6 +441,8 @@ Range.prototype._onHold = function () {
 Range.prototype._onPinch = function (event, component, direction) {
   touchParams.ignore = true;
 
+  // TODO: reckon with option zoomable
+
   if (event.gesture.touches.length > 1) {
     if (!touchParams.center) {
       touchParams.center = getPointer(event.gesture.center, component.frame);

src/timeline/Timeline.js

@@ -110,9 +110,6 @@ function Timeline (container, items, options) {
       now.clone().add('days', 4).valueOf()
   );
 
-  // TODO: reckon with options moveable and zoomable
-  // TODO: put the listeners in setOptions, be able to dynamically change with options moveable and zoomable
-  // TODO: enable moving again
   this.range.subscribe(this.controller, this.rootPanel, 'move', 'horizontal');
   this.range.subscribe(this.controller, this.rootPanel, 'zoom', 'horizontal');
   this.range.on('rangechange', function (properties) {
@@ -194,9 +191,24 @@ Timeline.prototype.setOptions = function (options) {
   this.range.setRange(options.start, options.end);
 
   if ('editable' in options || 'selectable' in options) {
-    // TODO: update current selection according to changed options
+    if (this.options.selectable) {
+      // force update of selection
+      this.setSelection(this.getSelection());
+    }
+    else {
+      // remove selection
+      this.setSelection([]);
+    }
   }
 
+  // validate the callback functions
+  var validateCallback = (function (fn) {
+    if (!(this.options[fn] instanceof Function) || this.options[fn].length != 2) {
+      throw new Error('option ' + fn + ' must be a function ' + fn + '(item, callback)');
+    }
+  }).bind(this);
+  ['onAdd', 'onUpdate', 'onRemove', 'onMove'].forEach(validateCallback);
+
   this.controller.reflow();
   this.controller.repaint();
 };
@@ -532,10 +544,6 @@ Timeline.prototype._onMultiSelectItem = function (event) {
 
     event.stopPropagation();
   }
-  else {
-    // create a new item
-    this._onAddItem(event);
-  }
 };
 
 /**

src/timeline/component/css/item.css

@@ -64,16 +64,17 @@
   box-sizing: border-box;
 }
 
-.vis.timeline .item.range {
-  overflow: hidden;
-}
-
 .vis.timeline .item.range .content,
 .vis.timeline .item.rangeoverflow .content {
   position: relative;
   display: inline-block;
 }
 
+.vis.timeline .item.range .content {
+  overflow: hidden;
+  max-width: 100%;
+}
+
 .vis.timeline .item.line {
   padding: 0;
   position: absolute;