neatly applying option editable everywhere

src/timeline/Timeline.js

@@ -33,7 +33,7 @@ function Timeline (container, items, options) {
     onUpdate: function (item, callback) {
       callback(item);
     },
-    onMoved: function (item, callback) {
+    onMove: function (item, callback) {
       callback(item);
     },
     onRemove: function (item, callback) {
@@ -193,6 +193,10 @@ Timeline.prototype.setOptions = function (options) {
   // both start and end are optional
   this.range.setRange(options.start, options.end);
 
+  if ('editable' in options || 'selectable' in options) {
+    // TODO: update current selection according to changed options
+  }
+
   this.controller.reflow();
   this.controller.repaint();
 };
@@ -445,6 +449,7 @@ Timeline.prototype._onSelectItem = function (event) {
  */
 Timeline.prototype._onAddItem = function (event) {
   if (!this.options.selectable) return;
+  if (!this.options.editable) return;
 
   var me = this,
       item = ItemSet.itemFromTarget(event);

src/timeline/component/ItemSet.js

@@ -779,7 +779,9 @@ ItemSet.prototype._onDragEnd = function (event) {
   if (this.touchParams.itemProps) {
     // prepare a change set for the changed items
     var changes = [],
-        me = this;
+        me = this,
+        dataset = this._myDataSet(),
+        type;
 
     this.touchParams.itemProps.forEach(function (props) {
       var id = props.item.id,
@@ -788,11 +790,11 @@ ItemSet.prototype._onDragEnd = function (event) {
       var changed = false;
       if ('start' in props.item.data) {
         changed = (props.start != props.item.data.start.valueOf());
-        item.start = util.convert(props.item.data.start, me.itemsData.convert['start']);
+        item.start = util.convert(props.item.data.start, dataset.convert['start']);
       }
       if ('end' in props.item.data) {
         changed = changed  || (props.end != props.item.data.end.valueOf());
-        item.end = util.convert(props.item.data.end, me.itemsData.convert['end']);
+        item.end = util.convert(props.item.data.end, dataset.convert['end']);
       }
 
       // only apply changes when start or end is actually changed
@@ -815,7 +817,6 @@ ItemSet.prototype._onDragEnd = function (event) {
 
     // apply the changes to the data (if there are changes)
     if (changes.length) {
-      var dataset = this._myDataSet();
       dataset.update(changes);
     }
 

src/timeline/component/RootPanel.js

@@ -77,7 +77,8 @@ RootPanel.prototype.repaint = function () {
     changed += 1;
   }
 
-  frame.className = 'vis timeline rootpanel ' + options.orientation;
+  frame.className = 'vis timeline rootpanel ' + options.orientation +
+      (options.editable ? ' editable' : '');
   var className = options.className;
   if (className) {
     util.addClassName(frame, util.option.asString(className));

src/timeline/component/css/item.css

@@ -12,6 +12,9 @@
   border-color: #FFC200;
   background-color: #FFF785;
   z-index: 999;
+}
+
+.vis.timeline.editable .item.selected {
   cursor: move;
 }
 

src/timeline/component/item/Item.js

@@ -87,7 +87,7 @@ Item.prototype.setOffset = function setOffset(offset) {
  * @private
  */
 Item.prototype._repaintDeleteButton = function (anchor) {
-  if (this.selected && !this.dom.deleteButton) {
+  if (this.selected && this.options.editable && !this.dom.deleteButton) {
     // create and show button
     var parent = this.parent;
     var id = this.id;

src/timeline/component/item/ItemRange.js

@@ -259,7 +259,7 @@ ItemRange.prototype.reposition = function reposition() {
  * @private
  */
 ItemRange.prototype._repaintDragLeft = function () {
-  if (this.selected && !this.dom.dragLeft) {
+  if (this.selected && this.options.editable && !this.dom.dragLeft) {
     // create and show drag area
     var dragLeft = document.createElement('div');
     dragLeft.className = 'drag-left';
@@ -289,7 +289,7 @@ ItemRange.prototype._repaintDragLeft = function () {
  * @private
  */
 ItemRange.prototype._repaintDragRight = function () {
-  if (this.selected && !this.dom.dragRight) {
+  if (this.selected && this.options.editable && !this.dom.dragRight) {
     // create and show drag area
     var dragRight = document.createElement('div');
     dragRight.className = 'drag-right';