From b750d2e4dc40813fda1c8a28476cbd80f600a30d Mon Sep 17 00:00:00 2001 From: jos Date: Tue, 16 Jun 2015 15:16:26 +0200 Subject: [PATCH] Added css class `vis-editable`, created an example demonstrating individually editable items (see #980) --- HISTORY.md | 6 +- docs/timeline/index.html | 2 +- .../editing/individualEditableItems.html | 58 +++++++++++++++++++ lib/timeline/component/item/BoxItem.js | 2 +- lib/timeline/component/item/PointItem.js | 2 +- lib/timeline/component/item/RangeItem.js | 2 +- 6 files changed, 67 insertions(+), 5 deletions(-) create mode 100644 examples/timeline/editing/individualEditableItems.html diff --git a/HISTORY.md b/HISTORY.md index 064e2fbe..fc6b23ad 100644 --- 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 diff --git a/docs/timeline/index.html b/docs/timeline/index.html index 81af2829..4e1ec429 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -769,7 +769,7 @@ function (option, path) { orientation.axis String 'bottom' - 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. + 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. orientation.item diff --git a/examples/timeline/editing/individualEditableItems.html b/examples/timeline/editing/individualEditableItems.html new file mode 100644 index 00000000..54312e0d --- /dev/null +++ b/examples/timeline/editing/individualEditableItems.html @@ -0,0 +1,58 @@ + + + + Timeline | Individual editable items + + + + + + + + + +

Specify individual items to be editable or readonly.

+ +
+ + + + \ No newline at end of file diff --git a/lib/timeline/component/item/BoxItem.js b/lib/timeline/component/item/BoxItem.js index 9af67992..a129e0be 100644 --- 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; diff --git a/lib/timeline/component/item/PointItem.js b/lib/timeline/component/item/PointItem.js index 230895c2..8f22ad99 100644 --- 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; diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js index d2e7b763..e0b36a6f 100644 --- 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