diff --git a/HISTORY.md b/HISTORY.md
index 25220179..7028a3a2 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -6,7 +6,8 @@ http://visjs.org
### Timeline
-- items can be dragged
+- items can be dragged.
+- Implemented options `selectable`, `editable`.
- added events when dragging the custom time bar.
@@ -28,7 +29,7 @@ http://visjs.org
datasets (up to 10x!).
- Support for automatic clustering in Graph to handle large (>50000) datasets
without losing performance.
-- Added automatic intial zooming to Graph, to more easily view large amounts
+- Added automatic initial zooming to Graph, to more easily view large amounts
of data.
- Added local declustering to Graph, freezing the simulation of nodes outside
of the cluster.
diff --git a/docs/timeline.html b/docs/timeline.html
index 20aae353..86ccd258 100644
--- a/docs/timeline.html
+++ b/docs/timeline.html
@@ -336,11 +336,19 @@ var options = {
autoResize |
boolean |
- false |
+ true |
If true, the Timeline will automatically detect when its
container is resized, and redraw itself accordingly. |
+
+ editable |
+ Boolean |
+ true |
+ If true, the items on the timeline can be dragged. |
+
+
+
end |
Date | Number | String |
@@ -440,6 +448,13 @@ var options = {
of item ranges. Must correspond with the css of item ranges.
+
+ selectable |
+ Boolean |
+ true |
+ If true, the items on the timeline can be selected. |
+
+
showCurrentTime |
boolean |
diff --git a/src/timeline/Range.js b/src/timeline/Range.js
index 194acd3a..69c7e6b9 100644
--- a/src/timeline/Range.js
+++ b/src/timeline/Range.js
@@ -318,7 +318,6 @@ Range.prototype._onDrag = function (event, component, direction) {
this._applyRange(touchParams.start + diffRange, touchParams.end + diffRange);
- // fire a rangechange event
this.emit('rangechange', {
start: this.start,
end: this.end
@@ -410,7 +409,7 @@ Range.prototype._onTouch = function (event) {
// don't move the range when dragging a selected event
// TODO: it's not so neat to have to know about the state of the ItemSet
var item = ItemSet.itemFromTarget(event);
- if (item && item.selected) {
+ if (item && item.selected && this.options.editable) {
touchParams.ignore = true;
}
};
diff --git a/src/timeline/Timeline.js b/src/timeline/Timeline.js
index a0cf80d9..8cc98c9f 100644
--- a/src/timeline/Timeline.js
+++ b/src/timeline/Timeline.js
@@ -10,17 +10,21 @@ function Timeline (container, items, options) {
var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
this.options = {
orientation: 'bottom',
+ autoResize: true,
+ editable: true,
+ selectable: true,
+
min: null,
max: null,
zoomMin: 10, // milliseconds
zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000, // milliseconds
// moveable: true, // TODO: option moveable
// zoomable: true, // TODO: option zoomable
+
showMinorLabels: true,
showMajorLabels: true,
showCurrentTime: false,
showCustomTime: false,
- autoResize: false
};
// controller
@@ -402,6 +406,10 @@ Timeline.prototype.getSelection = function getSelection() {
*/
// TODO: move this function to ItemSet
Timeline.prototype._onSelectItem = function (event) {
+ if (!this.options.selectable) {
+ return;
+ }
+
var item = ItemSet.itemFromTarget(event);
var selection = item ? [item.id] : [];
@@ -421,6 +429,10 @@ Timeline.prototype._onSelectItem = function (event) {
*/
// TODO: move this function to ItemSet
Timeline.prototype._onMultiSelectItem = function (event) {
+ if (!this.options.selectable) {
+ return;
+ }
+
var selection,
item = ItemSet.itemFromTarget(event);
diff --git a/src/timeline/component/ItemSet.js b/src/timeline/component/ItemSet.js
index d835e4d6..28e3011e 100644
--- a/src/timeline/component/ItemSet.js
+++ b/src/timeline/component/ItemSet.js
@@ -671,6 +671,10 @@ ItemSet.prototype.toScreen = function toScreen(time) {
* @private
*/
ItemSet.prototype._onDragStart = function (event) {
+ if (!this.options.editable) {
+ return;
+ }
+
var item = ItemSet.itemFromTarget(event),
me = this;