diff --git a/docs/timeline/index.html b/docs/timeline/index.html index b7a14a1c..a547e993 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -339,7 +339,7 @@ var items = new vis.DataSet([ editable Boolean no - Override the editable option of the timeline for a specific item. + Override the editable option of the timeline for a specific item (assuming timeline.editable.overrideItems is false).

Groups

@@ -545,6 +545,12 @@ function (option, path) { false If true, items can be dragged to another moment in time. See section Editing Items for a detailed explanation. + + editable.overrideItems + boolean + false + If true, item specific editable properties are overridden by timeline settings + end @@ -1041,7 +1047,7 @@ function (option, path) { verticalScroll Boolean false - Show a vertical scroll on the side of the group list and link it to the scroll event when zoom is not triggered. Notice that defining this option as true will NOT override horizontalScroll. The scroll event will be vertically ignored, but a vertical scrollbar will be visible + Show a vertical scroll on the side of the group list and link it to the scroll event when zoom is not triggered. Notice that defining this option as true will NOT override horizontalScroll. The scroll event will be vertically ignored, but a vertical scrollbar will be visible @@ -1566,12 +1572,13 @@ var options = { add: true, // add new items by double tapping updateTime: true, // drag items horizontally updateGroup: true, // drag items from one group to another - remove: true // delete an item by tapping the delete button top right + remove: true, // delete an item by tapping the delete button top right + overrideItems: false // allow these options to override item.editable } };

- Editing can be enabled/disabled for specific items. Setting the property editable to true or false on a data item will override the timeline option. + Editing can be enabled/disabled for specific items. Setting the property editable to true or false on a data item will override the timeline option except when timeline.editable.overrideItems is set to true. 

diff --git a/examples/timeline/editing/overrideEditingItems.html b/examples/timeline/editing/overrideEditingItems.html
new file mode 100644
index 00000000..c80f8b6b
--- /dev/null
+++ b/examples/timeline/editing/overrideEditingItems.html
@@ -0,0 +1,99 @@
+
+
+
+  Timeline | Individual editable items
+
+  
+
+  
+  
+  
+
+
+
+
Specify individual items to be editable or readonly. Toggle edit options and override behavior from timeline.editable

+
+

+

+

+Timeline.editable = {

+add

+remove

+updateGroup

+updateTime

+overrideItems

+}
+

+

+
+
+
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index 9329263a..89348f93 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -48,7 +48,8 @@ function ItemSet(body, options) {
       updateTime: false,
       updateGroup: false,
       add: false,
-      remove: false
+      remove: false,
+      overrideItems: false
     },
 
     groupEditable: {
@@ -356,16 +357,17 @@ ItemSet.prototype.setOptions = function(options) {
 
     if ('editable' in options) {
       if (typeof options.editable === 'boolean') {
-        this.options.editable.updateTime  = options.editable;
-        this.options.editable.updateGroup = options.editable;
-        this.options.editable.add         = options.editable;
-        this.options.editable.remove      = options.editable;
+        this.options.editable.updateTime    = options.editable;
+        this.options.editable.updateGroup   = options.editable;
+        this.options.editable.add           = options.editable;
+        this.options.editable.remove        = options.editable;
+        this.options.editable.overrideItems = options.editable;
       }
       else if (typeof options.editable === 'object') {
-        util.selectiveExtend(['updateTime', 'updateGroup', 'add', 'remove'], this.options.editable, options.editable);
+        util.selectiveExtend(['updateTime', 'updateGroup', 'add', 'remove', 'overrideItems'], this.options.editable, options.editable);
       }
     }
-    
+
     if ('groupEditable' in options) {
       if (typeof options.groupEditable === 'boolean') {
         this.options.groupEditable.order  = options.groupEditable;
@@ -1216,14 +1218,15 @@ ItemSet.prototype._onDragStart = function (event) {
 
   if (item && (item.selected || this.options.itemsAlwaysDraggable)) {
 
-    if (!this.options.editable.updateTime &&
-        !this.options.editable.updateGroup &&
-        !item.editable) {
+    if (this.options.editable.overrideItems &&
+        !this.options.editable.updateTime &&
+        !this.options.editable.updateGroup) {
       return;
     }
 
     // override options.editable
-    if (item.editable === false) {
+    if ((item.editable === false || !item.editable)
+    && !this.options.editable.overrideItems) {
       return;
     }
 
@@ -1358,7 +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;
+    var updateGroupAllowed = me.options.editable.updateGroup ||
+                             (!this.options.editable.overrideItems && selectedItem.editable === true);
     var newGroupBase = null;
     if (updateGroupAllowed && selectedItem) {
       if (selectedItem.data.group != undefined) {
@@ -1384,12 +1388,12 @@ ItemSet.prototype._onDrag = function (event) {
       }
 
       var itemData = this._cloneItemData(props.item.data); // clone the data
-      if (props.item.editable === false) {
+      if (props.item.editable === false && !me.options.editable.overrideItems) {
         return;
       }
 
-      var updateTimeAllowed = me.options.editable.updateTime ||
-          props.item.editable === true;
+      var updateTimeAllowed = me.options.editable.updateTime || (
+          props.item.editable === true && !me.options.editable.overrideItems);
       if (updateTimeAllowed) {
         if (props.dragLeft) {
           // drag left side of a range item
diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
index 79535a93..a4b49da5 100644
--- a/lib/timeline/component/item/Item.js
+++ b/lib/timeline/component/item/Item.js
@@ -146,9 +146,10 @@ Item.prototype.repositionY = function() {
  * @protected
  */
 Item.prototype._repaintDeleteButton = function (anchor) {
-  var editable = (this.options.editable.remove || 
-                  this.data.editable === true) &&
-                 this.data.editable !== false;
+  var editable = (this.options.editable.remove &&
+                  this.options.editable.overrideItems)
+                  || (this.data.editable === true &&
+                  !this.options.editable.overrideItems);
 
   if (this.selected && editable && !this.dom.deleteButton) {
     // create and show button
diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js
index 2e94ef2e..aadcf2ff 100644
--- a/lib/timeline/optionsTimeline.js
+++ b/lib/timeline/optionsTimeline.js
@@ -36,6 +36,7 @@ let allOptions = {
     remove: {boolean, 'undefined': 'undefined'},
     updateGroup: {boolean, 'undefined': 'undefined'},
     updateTime: {boolean, 'undefined': 'undefined'},
+    overrideItems: {boolean, 'undefined': 'undefined'},
     __type__: {boolean, object}
   },
   end: {number, date, string, moment},