From ce29f5059f1e3824ea1cfc66016a5f00ac07ffa5 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Wed, 6 May 2015 15:00:17 +0200
Subject: [PATCH] Implemented option `multiselect`, which is false by default

---
 HISTORY.md                                |  1 +
 docs/{timeline.html => old_timeline.html} |  0
 docs/timeline/index.html                  | 12 +++++++++++-
 examples/timeline/02_manipulation.html    |  5 +++++
 lib/timeline/component/ItemSet.js         | 22 +++++++++++++++-------
 5 files changed, 32 insertions(+), 8 deletions(-)
 rename docs/{timeline.html => old_timeline.html} (100%)

diff --git a/HISTORY.md b/HISTORY.md
index f9c3314a..cea287db 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -14,6 +14,7 @@ http://visjs.org
 
 ### Timeline
 
+- Implemented option `multiselect`, which is false by default.
 - Added method `setData({groups: groups, items: items})`.
 - Fixed range items not being displayed smaller than 10 pixels (twice the
   padding). In order to have overflowing text, one should now apply css style
diff --git a/docs/timeline.html b/docs/old_timeline.html
similarity index 100%
rename from docs/timeline.html
rename to docs/old_timeline.html
diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index 23fdc98b..2928adcc 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -679,6 +679,16 @@ var options = {
       </td>
     </tr>
 
+    <tr>
+      <td>multiselect</td>
+      <td class="mid">boolean</td>
+      <td class="mid"><code>false</code></td>
+      <td>
+        If true, multiple items can be selected using ctrl+click, shift+click, or by holding items.
+        Only applicable when option <code>selectable</code> is <code>true</code>.
+      </td>
+    </tr>
+
     <tr>
       <td>onAdd</td>
       <td class="mid">function</td>
@@ -1275,7 +1285,7 @@ timeline.off('select', onSelect);
     When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code><code>true</code></code>), the user can:
   </p>
   <ul>
-    <li>Select an item by clicking it, and use ctrl+click to or shift+click to select multiple items</li>
+    <li>Select an item by clicking it, and use ctrl+click to or shift+click to select multiple items (when <code>multiselect: true</code>).</li>
     <li>Move selected items by dragging them.</li>
     <li>Create a new item by double tapping on an empty space.</li>
     <li>Create a new range item by dragging on an empty space with the ctrl key down.</li>
diff --git a/examples/timeline/02_manipulation.html b/examples/timeline/02_manipulation.html
index 8062c449..86e79682 100644
--- a/examples/timeline/02_manipulation.html
+++ b/examples/timeline/02_manipulation.html
@@ -44,6 +44,11 @@
     start: '2014-01-10',
     end: '2014-02-10',
     height: '300px',
+
+    // allow selecting multiple items using ctrl+click, shift+click, or hold.
+    multiselect: true,
+
+    // allow manipulation of items
     editable: true,
 
     /* alternatively, enable/disable individual actions:
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index 3c6de0f4..487bdcf1 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -35,6 +35,8 @@ function ItemSet(body, options) {
     groupOrder: null,
 
     selectable: true,
+    multiselect: false,
+
     editable: {
       updateTime: false,
       updateGroup: false,
@@ -226,7 +228,7 @@ ItemSet.prototype._create = function(){
  *                           {Function} groupOrder
  *                              A sorting function for ordering groups
  *                           {Boolean} stack
- *                              If true (deafult), items will be stacked on
+ *                              If true (default), items will be stacked on
  *                              top of each other.
  *                           {Number} margin.axis
  *                              Margin between the axis and the items in pixels.
@@ -244,6 +246,9 @@ ItemSet.prototype._create = function(){
  *                              Set margin for both axis and items in pixels.
  *                           {Boolean} selectable
  *                              If true (default), items can be selected.
+ *                           {Boolean} multiselect
+ *                              If true, multiple items can be selected.
+ *                              False by default.
  *                           {Boolean} editable
  *                              Set all editable options to true or false
  *                           {Boolean} editable.updateTime
@@ -272,7 +277,7 @@ ItemSet.prototype._create = function(){
 ItemSet.prototype.setOptions = function(options) {
   if (options) {
     // copy all options that we know
-    var fields = ['type', 'align', 'order', 'stack', 'selectable', 'groupOrder', 'dataAttributes', 'template','hide', 'snap'];
+    var fields = ['type', 'align', 'order', 'stack', 'selectable', 'multiselect', 'groupOrder', 'dataAttributes', 'template','hide', 'snap'];
     util.selectiveExtend(fields, this.options, options);
 
     if ('orientation' in options) {
@@ -1465,15 +1470,18 @@ ItemSet.prototype._onAddItem = function (event) {
 ItemSet.prototype._onMultiSelectItem = function (event) {
   if (!this.options.selectable) return;
 
-  var selection,
-      item = this.itemFromTarget(event);
+  var item = this.itemFromTarget(event);
 
   if (item) {
-    // multi select items
-    selection = this.getSelection(); // current selection
+    // multi select items (if allowed)
+
+    var selection = this.options.multiselect
+      ? this.getSelection() // take current selection
+      : [];                 // deselect current selection
 
     var shiftKey = event.srcEvent && event.srcEvent.shiftKey || false;
-    if (shiftKey) {
+
+    if (shiftKey && this.options.multiselect) {
       // select all items between the old selection and the tapped item
 
       // determine the selection range