customeTime additional editable=false functionality. (#3816)

* customTime read-only (i.e. editable = false) patch.

* updated docs for read-only customTime patch

docs/timeline/index.html

@@ -1312,13 +1312,17 @@ function (option, path) {
     </tr>
 
     <tr>
-      <td>addCustomTime([time] [, id])</td>
+      <td>addCustomTime([time] [, id] [, options])</td>
       <td>number or String</td>
       <td>
-        Add new vertical bar representing a custom time that can be dragged by the user.
-        Parameter <code>time</code> can be a Date, Number, or String, and is <code>new Date()</code> by default.
+        Add new vertical bar representing a custom time that can be optionally dragged by the user.<br>
+        Parameter <code>time</code> can be a Date, Number, or String, and is <code>new Date()</code> by default.<br>
         Parameter <code>id</code> can be Number or String and is <code>undefined</code> by default.
-        The <code>id</code>code> is added as CSS class name of the custom time bar, allowing to style multiple time bars differently.
+        The <code>id</code> is added as CSS class name of the custom time bar, allowing to style multiple time bars differently.<br>
+        Parameter <code>options</code> can be an Object of available options. <em>At present these options cannot be altered after the custom time bar is created.</em>:
+        <ul>
+          <li><code>editable: boolean </code><br>If true (default) the custom time bar can be dragged by the user. If false the time bar is fixed and can only be modified in code.</li>
+        </ul>
         The method returns id of the created bar.
       </td>
     </tr>

examples/timeline/other/customTimeBars.html

@@ -22,6 +22,9 @@
 <p>
   <input type="button" id="add" value="Add custom vertical bar">
   <input type="text" id="barId" placeholder="custom bar ID">
+  <input type="checkbox" id="isEdit" placeholder="user can edit time" checked>
+  <label for="isEdit">Editable: User can change time.</label>
+</input>
 </p>
 <p>
   <input type="button" id="remove" value="Remove custom vertical bar">
@@ -55,7 +58,8 @@
     try {
       customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
       var barId = document.getElementById('barId').value || undefined;
-      timeline.addCustomTime(customDate, barId);
+      var usereditable = document.getElementById('isEdit').checked || false;
+      timeline.addCustomTime(customDate, barId, {editable: usereditable});
       document.getElementById('barId').value = '';
     }
     catch (err) {

examples/timeline/other/customTimeBarsTooltip.html

@@ -22,6 +22,8 @@
 <p>
   <input type="button" id="add" value="Add custom vertical bar">
   <input type="text" id="barId" placeholder="custom bar ID">
+  <input type="checkbox" id="isEdit" placeholder="user can edit time" checked>
+  <label for="isEdit">Editable: User can change time.</label>
 </p>
 <p>
   <input type="button" id="remove" value="Remove custom vertical bar">
@@ -58,7 +60,8 @@
     try {
       customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
       var barId = document.getElementById('barId').value || undefined;
-      timeline.addCustomTime(customDate, barId);
+      var usereditable = document.getElementById('isEdit').checked || false;
+      timeline.addCustomTime(customDate, barId, { editable: usereditable });
         timeline.setCustomTimeTitle(function(time){
             return "I'm "+barId+"!";
         }, barId);

lib/timeline/Core.js

@@ -612,9 +612,13 @@ Core.prototype.getEventProperties = function (event) {
  *                                         If not provided, `new Date()` will
  *                                         be used.
  * @param {number | string} [id=undefined] Id of the new bar. Optional
+ * @param {object} [options={}]            Control options for the new bar. Supported
+ *                                         optoins are:
+ *                                         editable {true, false} determines whether the 
+ *                                         bar can be dragged by the user. Default is true.
  * @return {number | string}               Returns the id of the new bar
  */
-Core.prototype.addCustomTime = function (time, id) {
+Core.prototype.addCustomTime = function (time, id, options) {
   var timestamp = time !== undefined
       ? util.convert(time, 'Date').valueOf()
       : new Date();
@@ -626,7 +630,7 @@ Core.prototype.addCustomTime = function (time, id) {
     throw new Error('A custom time with id ' + JSON.stringify(id) + ' already exists');
   }
 
-  var customTime = new CustomTime(this.body, util.extend({}, this.options, {
+  var customTime = new CustomTime(this.body, util.extend({}, this.options, options, {
     time : timestamp,
     id : id
   }));

lib/timeline/component/CustomTime.js

@@ -23,7 +23,8 @@ function CustomTime (body, options) {
     locales: locales,
     locale: 'en',
     id: undefined,
-    title: undefined
+    title: undefined,
+    editable: true
   };
   this.options = util.extend({}, this.defaultOptions);
 
@@ -53,7 +54,7 @@ CustomTime.prototype = new Component();
 CustomTime.prototype.setOptions = function(options) {
   if (options) {
     // copy all options that we know
-    util.selectiveExtend(['moment', 'locale', 'locales', 'id'], this.options, options);
+    util.selectiveExtend(['moment', 'locale', 'locales', 'id', 'editable'], this.options, options);
   }
 };
 
@@ -64,7 +65,7 @@ CustomTime.prototype.setOptions = function(options) {
 CustomTime.prototype._create = function() {
   var bar = document.createElement('div');
   bar['custom-time'] = this;
-  bar.className = 'vis-custom-time ' + (this.options.id || '');
+  bar.className = 'vis-custom-time ' + (!this.options.editable ? 'disabled ' : '') + (this.options.id || '');
   bar.style.position = 'absolute';
   bar.style.top = '0px';
   bar.style.height = '100%';
@@ -96,12 +97,16 @@ CustomTime.prototype._create = function() {
   }
 
   bar.appendChild(drag);
-  // attach event listeners
-  this.hammer = new Hammer(drag);
-  this.hammer.on('panstart', this._onDragStart.bind(this));
-  this.hammer.on('panmove',  this._onDrag.bind(this));
-  this.hammer.on('panend',   this._onDragEnd.bind(this));
-  this.hammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_HORIZONTAL});
+
+  // if bar is editable by the user, attach drag handlers
+  if(this.options.editable){
+    // attach event listeners
+    this.hammer = new Hammer(drag);
+    this.hammer.on('panstart', this._onDragStart.bind(this));
+    this.hammer.on('panmove', this._onDrag.bind(this));
+    this.hammer.on('panend', this._onDragEnd.bind(this));
+    this.hammer.get('pan').set({ threshold: 5, direction: Hammer.DIRECTION_HORIZONTAL });
+  }
 };
 
 /**

lib/timeline/component/css/customtime.css

@@ -3,4 +3,8 @@
   width: 2px;
   cursor: move;
   z-index: 1;
+}
+
+.vis-custom-time.disabled {
+  cursor: inherit;
 }