Implemented options `selectable` and `editable`

HISTORY.md

@@ -6,7 +6,8 @@ http://visjs.org
 
 ### Timeline
 
-- items can be dragged
+- items can be dragged.
+- Implemented options `selectable`, `editable`.
 - added events when dragging the custom time bar.
 
 
@@ -28,7 +29,7 @@ http://visjs.org
   datasets (up to 10x!).
 - Support for automatic clustering in Graph to handle large (>50000) datasets
   without losing performance.
-- Added automatic intial zooming to Graph, to more easily view large amounts
+- Added automatic initial zooming to Graph, to more easily view large amounts
   of data.
 - Added local declustering to Graph, freezing the simulation of nodes outside
   of the cluster.

docs/timeline.html

@@ -336,11 +336,19 @@ var options = {
 <tr>
   <td>autoResize</td>
   <td>boolean</td>
-  <td>false</td>
+  <td>true</td>
   <td>If true, the Timeline will automatically detect when its
     container is resized, and redraw itself accordingly.</td>
 </tr>
 
+<tr>
+  <td>editable</td>
+  <td>Boolean</td>
+  <td>true</td>
+  <td>If true, the items on the timeline can be dragged.</td>
+  <!-- TODO: update documentation as soon as items can be deleted, created, changed -->
+</tr>
+
 <tr>
   <td>end</td>
   <td>Date | Number | String</td>
@@ -440,6 +448,13 @@ var options = {
     of item ranges. Must correspond with the css of item ranges.</td>
 </tr>
 
+<tr>
+  <td>selectable</td>
+  <td>Boolean</td>
+  <td>true</td>
+  <td>If true, the items on the timeline can be selected.</td>
+</tr>
+
 <tr>
   <td>showCurrentTime</td>
   <td>boolean</td>

src/timeline/Range.js

@@ -318,7 +318,6 @@ Range.prototype._onDrag = function (event, component, direction) {
 
   this._applyRange(touchParams.start + diffRange, touchParams.end + diffRange);
 
-  // fire a rangechange event
   this.emit('rangechange', {
     start: this.start,
     end: this.end
@@ -410,7 +409,7 @@ Range.prototype._onTouch = function (event) {
   // don't move the range when dragging a selected event
   // TODO: it's not so neat to have to know about the state of the ItemSet
   var item = ItemSet.itemFromTarget(event);
-  if (item && item.selected) {
+  if (item && item.selected && this.options.editable) {
     touchParams.ignore = true;
   }
 };

src/timeline/Timeline.js

@@ -10,17 +10,21 @@ function Timeline (container, items, options) {
   var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
   this.options = {
     orientation: 'bottom',
+    autoResize: true,
+    editable: true,
+    selectable: true,
+
     min: null,
     max: null,
     zoomMin: 10,                                // milliseconds
     zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000, // milliseconds
     // moveable: true, // TODO: option moveable
     // zoomable: true, // TODO: option zoomable
+
     showMinorLabels: true,
     showMajorLabels: true,
     showCurrentTime: false,
     showCustomTime: false,
-    autoResize: false
   };
 
   // controller
@@ -402,6 +406,10 @@ Timeline.prototype.getSelection = function getSelection() {
  */
 // TODO: move this function to ItemSet
 Timeline.prototype._onSelectItem = function (event) {
+  if (!this.options.selectable) {
+    return;
+  }
+
   var item = ItemSet.itemFromTarget(event);
 
   var selection = item ? [item.id] : [];
@@ -421,6 +429,10 @@ Timeline.prototype._onSelectItem = function (event) {
  */
 // TODO: move this function to ItemSet
 Timeline.prototype._onMultiSelectItem = function (event) {
+  if (!this.options.selectable) {
+    return;
+  }
+
   var selection,
       item = ItemSet.itemFromTarget(event);
 

src/timeline/component/ItemSet.js

@@ -671,6 +671,10 @@ ItemSet.prototype.toScreen = function toScreen(time) {
  * @private
  */
 ItemSet.prototype._onDragStart = function (event) {
+  if (!this.options.editable) {
+    return;
+  }
+
   var item = ItemSet.itemFromTarget(event),
       me = this;