Added css class `vis-editable`, created an example demonstrating individually editable items (see #980)

9 years ago · b750d2e4dc
--- a/HISTORY.md
+++ b/HISTORY.md
@ -2,7 +2,7 @@
 http://visjs.org


 ## NOT YET RELEASED, version 4.2.1--SNAPSHOT
 ## NOT YET RELEASED, version 4.2.1-SNAPSHOT

 ### General

@ -13,6 +13,10 @@ http://visjs.org

 - Fixed #942, #966: bug when data is empty.

 ### Timeline

 - Implemented `editable` option for individual items. Thanks @danbertolini.


 ## 2015-06-05, version 4.2.0

--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@ -769,7 +769,7 @@ function (option, path) {
      <td class="indent">orientation.axis</td>
      <td>String</td>
      <td><code>'bottom'</code></td>
      <td>Orientation of the timeline axis: 'top', 'bottom' (default), or 'both'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom.</td>
      <td>Orientation of the timeline axis: 'top', 'bottom' (default), 'both', or 'none'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom. In case of 'none', no axis is drawn at all.</td>
    </tr>
    <tr parent="orientation" class="hidden">
      <td class="indent">orientation.item</td>
--- a/examples/timeline/editing/individualEditableItems.html
+++ b/examples/timeline/editing/individualEditableItems.html
@ -0,0 +1,58 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Individual editable items</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }

    div.vis-editable,
    div.vis-editable.vis-selected {
      /* custom styling for editable items... */
    }

    div.vis-readonly,
    div.vis-readonly.vis-selected {
      /* custom styling for readonly items... */
      background-color: #ff4500;
      border-color: red;
      color: white;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>

 <p>Specify individual items to be editable or readonly.</p>

 <div id="visualization"></div>

 <script>
  // 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'}
  ]);

  var container = document.getElementById('visualization');
  var options = {
    editable: true   // default for all items
  };

  var timeline = new vis.Timeline(container, items, options);

 </script>
 </body>
 </html>
--- a/lib/timeline/component/item/BoxItem.js
+++ b/lib/timeline/component/item/BoxItem.js
@ -118,7 +118,7 @@ BoxItem.prototype.redraw = function() {
    // update class
    var className = (this.data.className? ' ' + this.data.className : '') +
        (this.selected ? ' vis-selected' : '') + 
        (editable ? ' vis-editable' : '');
        (editable ? ' vis-editable' : ' vis-readonly');
    dom.box.className = 'vis-item vis-box' + className;
    dom.line.className = 'vis-item vis-line' + className;
    dom.dot.className  = 'vis-item vis-dot' + className;
--- a/lib/timeline/component/item/PointItem.js
+++ b/lib/timeline/component/item/PointItem.js
@ -107,7 +107,7 @@ PointItem.prototype.redraw = function() {
    // update class
    var className = (this.data.className ? ' ' + this.data.className : '') +
        (this.selected ? ' vis-selected' : '') +
        (editable ? ' vis-editable' : '');
        (editable ? ' vis-editable' : ' vis-readonly');
    dom.point.className  = 'vis-item vis-point' + className;
    dom.dot.className  = 'vis-item vis-dot' + className;

--- a/lib/timeline/component/item/RangeItem.js
+++ b/lib/timeline/component/item/RangeItem.js
@ -107,7 +107,7 @@ RangeItem.prototype.redraw = function() {
    // update class
    var className = (this.data.className ? (' ' + this.data.className) : '') +
        (this.selected ? ' vis-selected' : '') + 
        (editable ? ' vis-editable' : '');
        (editable ? ' vis-editable' : ' vis-readonly');
    dom.box.className = this.baseClassName + className;

    // determine from css whether this box has overflow