More editable control of timeline items (#2305)

* Fixed bug introduced in #2284 where overrideItems is set to true when boolean is provided
* Added the option of supplying object to item.editable with updateTime, updateGroup, and remove functioning similarly to timeline.editable but only on a single item
* Updated Documentation to reflect the new feature
* Updated the individualEditableItems example page to show feature usage.

docs/timeline/index.html

@@ -237,7 +237,7 @@ var items = new vis.DataSet([
     The item properties are defined as:
   </p>
 
-  <table class="properties">
+  <table class="properties" id="itemOptionTable">
     <tr>
       <th>Name</th>
       <th>Type</th>
@@ -335,11 +335,30 @@ var items = new vis.DataSet([
         Types 'box' and 'point' need a start date, the types 'range' and 'background' needs both a start and end date.
       </td>
     </tr>
-    <tr>
-      <td>editable</td>
-      <td>Boolean</td>
+    <tr class='toggle collapsible' onclick="toggleTable('itemOptionTable', 'itemEditable', this);">
+      <td><span parent="itemEditable" class="right-caret"></span> editable</td>
+      <td>Boolean or Object</td>
       <td>no</td>
       <td>Override the editable option of the timeline for a specific item (assuming <code>timeline.editable.overrideItems</code> is false).</td>
+    </tr>
+    <tr parent="itemEditable" class="hidden">
+      <td class="indent">editable.remove</td>
+      <td>boolean</td>
+      <td>no</td>
+      <td>If true, item can be deleted by first selecting it, and then clicking the delete button on the top right of the item. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
+    </tr>
+    <tr parent="itemEditable" class="hidden">
+      <td class="indent">editable.updateGroup</td>
+      <td>boolean</td>
+      <td>no</td>
+      <td>If true, item can be dragged from one group to another. Only applicable when the Timeline has groups. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
+    </tr>
+    <tr parent="itemEditable" class="hidden">
+      <td class="indent">editable.updateTime</td>
+      <td>boolean</td>
+      <td>no</td>
+      <td>If true, items can be dragged to another moment int time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
+    </tr>
   </table>
 
   <h3 id="groups">Groups</h3>

examples/timeline/editing/individualEditableItems.html

@@ -34,16 +34,21 @@
 <div id="visualization"></div>
 
 <script>
+  // create groups to highligh groupUpdate
+  var groups = new vis.DataSet([
+    {id: 1, content: 'Group 1'},
+    {id: 2, content: 'Group 2'}
+  ]);
   // create a DataSet with items
   var items = new vis.DataSet([
-    {id: 1, content: 'Editable', editable: true, start: '2010-08-23'},
-    {id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00'},
-    {id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00'},
-    {id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02'},
-    {id: 5, content: 'Editable', editable: true, start: '2010-08-28'},
-    {id: 6, content: 'Read-only', editable: false, start: '2010-08-29'},
-    {id: 7, content: 'Editable', editable: true, start: '2010-08-31', end: '2010-09-03'},
-    {id: 8, content: 'Read-only', editable: false, start: '2010-09-04T12:00:00'}
+    {id: 1, content: 'Editable', editable: true, start: '2010-08-23', group: 1},
+    {id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2},
+    {id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1},
+    {id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2},
+    {id: 5, content: 'Edit Time Only', editable: { updateTime: true }, start: '2010-08-28', group: 1},
+    {id: 6, content: 'Edit Group Only', editable: { updateGroup: true }, start: '2010-08-29', group: 2},
+    {id: 7, content: 'Remove Only', editable: { remove: true }, start: '2010-08-31', end: '2010-09-03', group: 1},
+    {id: 8, content: 'Default', start: '2010-09-04T12:00:00', group: 2}
   ]);
 
   var container = document.getElementById('visualization');
@@ -51,7 +56,7 @@
     editable: true   // default for all items
   };
 
-  var timeline = new vis.Timeline(container, items, options);
+  var timeline = new vis.Timeline(container, items, groups, options);
 
 </script>
 </body>

lib/timeline/component/ItemSet.js

@@ -361,7 +361,7 @@ ItemSet.prototype.setOptions = function(options) {
         this.options.editable.updateGroup   = options.editable;
         this.options.editable.add           = options.editable;
         this.options.editable.remove        = options.editable;
-        this.options.editable.overrideItems = options.editable;
+        this.options.editable.overrideItems = false;
       }
       else if (typeof options.editable === 'object') {
         util.selectiveExtend(['updateTime', 'updateGroup', 'add', 'remove', 'overrideItems'], this.options.editable, options.editable);
@@ -1225,8 +1225,8 @@ ItemSet.prototype._onDragStart = function (event) {
     }
 
     // override options.editable
-    if ((item.editable === false || !item.editable)
-    && !this.options.editable.overrideItems) {
+    if ((item.editable != null && !item.editable.updateTime && !item.editable.updateGroup)
+        && !this.options.editable.overrideItems) {
       return;
     }
 
@@ -1361,8 +1361,8 @@ ItemSet.prototype._onDrag = function (event) {
 
     //only calculate the new group for the item that's actually dragged
     var selectedItem = this.touchParams.selectedItem;
-    var updateGroupAllowed = me.options.editable.updateGroup ||
-                             (!this.options.editable.overrideItems && selectedItem.editable === true);
+    var updateGroupAllowed = ((this.options.editable.overrideItems || selectedItem.editable == null) && this.options.editable.updateGroup) ||
+                             (!this.options.editable.overrideItems && selectedItem.editable != null && selectedItem.editable.updateGroup);
     var newGroupBase = null;
     if (updateGroupAllowed && selectedItem) {
       if (selectedItem.data.group != undefined) {
@@ -1388,12 +1388,15 @@ ItemSet.prototype._onDrag = function (event) {
       }
 
       var itemData = this._cloneItemData(props.item.data); // clone the data
-      if (props.item.editable === false && !me.options.editable.overrideItems) {
+      if (props.item.editable != null
+        && !props.item.editable.updateTime
+        && !props.item.editable.updateGroup
+        && !me.options.editable.overrideItems) {
         return;
       }
 
-      var updateTimeAllowed = me.options.editable.updateTime || (
-          props.item.editable === true && !me.options.editable.overrideItems);
+      var updateTimeAllowed = ((this.options.editable.overrideItems || selectedItem.editable == null) && this.options.editable.updateTime) ||
+                               (!this.options.editable.overrideItems && selectedItem.editable != null && selectedItem.editable.updateTime);
       if (updateTimeAllowed) {
         if (props.dragLeft) {
           // drag left side of a range item
@@ -1456,8 +1459,6 @@ ItemSet.prototype._onDrag = function (event) {
         }
       }
 
-      var updateGroupAllowed = me.options.editable.updateGroup ||
-          props.item.editable === true;
 
       if (updateGroupAllowed && (!props.dragLeft && !props.dragRight) && newGroupBase!=null) {
         if (itemData.group != undefined) {

lib/timeline/component/item/Item.js

@@ -30,10 +30,18 @@ function Item (data, conversion, options) {
   this.height = null;
 
   this.editable = null;
-  if (this.data && 
-      this.data.hasOwnProperty('editable') && 
-      typeof this.data.editable === 'boolean') {
-    this.editable = data.editable;
+  if (this.data && this.data.hasOwnProperty('editable')){
+    if(typeof this.data.editable === 'boolean') {
+        this.editable = {
+          updateTime: this.data.editable,
+          updateGroup: this.data.editable,
+          remove: this.data.editable
+        }
+    }
+    else if(typeof options.editable === 'object') {
+      this.editable = {};
+      util.selectiveExtend(['updateTime', 'updateGroup', 'remove'], this.editable, data.editable);
+    };
   }
 }
 
@@ -68,8 +76,18 @@ Item.prototype.setData = function(data) {
     this.parent.itemSet._moveToGroup(this, data.group);
   }
 
-  if (data.hasOwnProperty('editable') && typeof data.editable === 'boolean') {
-    this.editable = data.editable;
+  if (data.hasOwnProperty('editable')){
+    if (typeof data.editable === 'boolean') {
+      this.editable = {
+        updateTime: this.data.editable,
+        updateGroup: this.data.editable,
+        remove: this.data.editable
+      }
+    }
+    else if(typeof options.editable === 'object') {
+      this.editable = {};
+      util.selectiveExtend(['updateTime', 'updateGroup', 'remove'], this.editable, data.editable);
+    }
   }
 
   this.data = data;
@@ -182,10 +200,8 @@ Item.prototype._repaintDragCenter = function () {
  * @protected
  */
 Item.prototype._repaintDeleteButton = function (anchor) {
-  var editable = (this.options.editable.remove &&
-                  this.options.editable.overrideItems)
-                  || (this.data.editable === true &&
-                  !this.options.editable.overrideItems);
+  var editable = ((this.options.editable.overrideItems || this.editable == null) && this.options.editable.remove) ||
+                 (!this.options.editable.overrideItems && this.editable != null && this.editable.remove);
 
   if (this.selected && editable && !this.dom.deleteButton) {
     // create and show button