Merge branch 'master' into pin-deps

visjs · Sep 19, 2019 · 3f692b9 · 3f692b9
2 parents 8e246eb + d2e85ab
commit 3f692b9
Show file tree

Hide file tree

Showing 19 changed files with 3,040 additions and 1,125 deletions.
diff --git a/dist/vis-timeline-graph2d.css b/dist/vis-timeline-graph2d.css
diff --git a/dist/vis-timeline-graph2d.esm.js b/dist/vis-timeline-graph2d.esm.js
diff --git a/dist/vis-timeline-graph2d.esm.js.map b/dist/vis-timeline-graph2d.esm.js.map
diff --git a/dist/vis-timeline-graph2d.min.css b/dist/vis-timeline-graph2d.min.css
diff --git a/dist/vis-timeline-graph2d.min.js b/dist/vis-timeline-graph2d.min.js
diff --git a/dist/vis-timeline-graph2d.min.js.map b/dist/vis-timeline-graph2d.min.js.map
diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html
@@ -1149,6 +1149,7 @@ <h2 id="Methods">Methods</h2>
             <td>
                 Returns an Object with relevant properties from an event:
                 <ul>
+                    <li><code>customTime</code> (Number or null): the id of the clicked custom-time.</li>
                     <li><code>pageX</code> (Number): absolute horizontal position of the click event.</li>
                     <li><code>pageY</code> (Number): absolute vertical position of the click event.</li>
                     <li><code>x</code> (Number): relative horizontal position of the click event.</li>

diff --git a/docs/timeline/index.html b/docs/timeline/index.html
@@ -1444,6 +1444,7 @@ <h2 id="Methods">Methods</h2>
         <ul>
           <li><code>group</code> (Number or null): the id of the clicked group.</li>
           <li><code>item</code> (Number or null): the id of the clicked item.</li>
+          <li><code>customTime</code> (Number or null): the id of the clicked custom-time.</li>
           <li><code>pageX</code> (Number): absolute horizontal position of the click event.</li>
           <li><code>pageY</code> (Number): absolute vertical position of the click event.</li>
           <li><code>x</code> (Number): relative horizontal position of the click event.</li>

diff --git a/examples/timeline/index.html b/examples/timeline/index.html
@@ -42,6 +42,7 @@ <h3>items</h3>
 			<a href="./items/pointItems.html">point items</a><br />
 			<a href="./items/rangeOverflowItem.html">range overflow</a><br />
 			<a href="./items/tooltip.html">Tooltips</a><br />
+			<a href="./items/tooltipTemplate.html">Tooltip Template</a><br />
 			<a href="./items/visibleFrameTemplateContent.html">Dynamic Content</a><br />
 
 			<h3>groups</h3>

diff --git a/examples/timeline/items/tooltipTemplate.html b/examples/timeline/items/tooltipTemplate.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Tooltip Template</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+      max-width: 800px;
+    }
+  </style>
+
+  <script src="../../../dist/vis-timeline-graph2d.min.js"></script>
+  <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+
+</head>
+<body>
+
+<h1>Tooltip Templates</h1>
+
+<div id="tooltips"></div>
+<script type="text/javascript">
+  var items = new vis.DataSet([{
+    id: 1,
+    content: 'Item with custom tooltip',
+    start: '2016-01-02',
+    end: '2016-01-03',
+    title: 'IN_PROGRESS'
+  }]);
+
+  var options = {
+    start: '2016-01-01',
+    end: '2016-01-04',
+    tooltip: {
+      template: function(originalItemData, parsedItemData) {
+        var color = originalItemData.title == 'IN_PROGRESS' ? 'red' : 'green';
+        return `<span style="color:${color}">${originalItemData.title}</span>`;
+      }
+    }
+  };
+
+  var element = document.getElementById('tooltips');
+
+  // Timeline object
+  var timelineTooltips = new vis.Timeline(element, items, options);
+</script>
+
+</body>
+</html>
diff --git a/lib/module/hammer.js b/lib/module/hammer.js
@@ -1,5 +1,5 @@
 import PropagatingHammer from 'propagating-hammerjs';
-import Hammer from 'hammerjs';
+import Hammer from '@egjs/hammerjs';
 
 /**
  * Setup a mock hammer.js object, for unit testing.
@@ -37,4 +37,4 @@ if (typeof window !== 'undefined') {
   hammerMock()
 }
 
-export default modifiedHammer;
+export default modifiedHammer;
diff --git a/lib/timeline/Graph2d.js b/lib/timeline/Graph2d.js
@@ -346,6 +346,7 @@ Graph2d.prototype.getEventProperties = function (event) {
 
   return {
     event: event,
+    customTime: customTime ? customTime.options.id : null,
     what: what,
     pageX: event.srcEvent ? event.srcEvent.pageX : event.pageX,
     pageY: event.srcEvent ? event.srcEvent.pageY : event.pageY,

diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js
@@ -700,6 +700,7 @@ export default class Timeline extends Core {
       isCluster: item ? !!item.isCluster: false,
       items: item ? item.items || []: null,
       group: group ? group.groupId : null,
+      customTime: customTime ? customTime.options.id : null,
       what,
       pageX: event.srcEvent ? event.srcEvent.pageX : event.pageX,
       pageY: event.srcEvent ? event.srcEvent.pageY : event.pageY,

diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
@@ -1602,7 +1602,7 @@ class ItemSet extends Component {
     };
 
     const id = util.randomUUID();
-    itemData[this.itemsData._fieldId] = id;
+    itemData[this.itemsData._idProp] = id;
 
     const group = this.groupFromTarget(event);
     if (group) {
@@ -1842,7 +1842,7 @@ class ItemSet extends Component {
           me.options.onMove(itemData, itemData => {
             if (itemData) {
               // apply changes
-              itemData[dataset._fieldId] = id; // ensure the item contains its id (can be undefined)
+              itemData[dataset._idProp] = id; // ensure the item contains its id (can be undefined)
               dataset.update(itemData);
             }
             else {
@@ -2054,7 +2054,7 @@ class ItemSet extends Component {
       me.options.onMoveGroup(groupData, groupData => {
         if (groupData) {
           // apply changes
-          groupData[dataset._fieldId] = id; // ensure the group contains its id (can be undefined)
+          groupData[dataset._idProp] = id; // ensure the group contains its id (can be undefined)
           dataset.update(groupData);
         }
         else {
@@ -2309,7 +2309,7 @@ class ItemSet extends Component {
       newItemData.content = newItemData.content ? newItemData.content : 'new item';
       newItemData.start = newItemData.start ? newItemData.start : (snap ? snap(start, scale, step) : start);
       newItemData.type = newItemData.type || 'box';
-      newItemData[this.itemsData._fieldId] = newItemData.id || util.randomUUID();
+      newItemData[this.itemsData._idProp] = newItemData.id || util.randomUUID();
 
       if (newItemData.type == 'range' && !newItemData.end) {
         end = this.body.util.toTime(x + this.props.width / 5);
@@ -2320,7 +2320,7 @@ class ItemSet extends Component {
         start: snap ? snap(start, scale, step) : start,
         content: 'new item'
       };
-      newItemData[this.itemsData._fieldId] = util.randomUUID();
+      newItemData[this.itemsData._idProp] = util.randomUUID();
 
       // when default type is a range, add a default end date to the new item
       if (this.options.type === 'range') {

diff --git a/lib/timeline/component/LineGraph.js b/lib/timeline/component/LineGraph.js
@@ -433,7 +433,7 @@ LineGraph.prototype._updateAllGroupData = function (ids, groupIds) {
   if (this.itemsData != null) {
     var groupsContent = {};
     var items = this.itemsData.get();
-    var fieldId = this.itemsData._fieldId;
+    var fieldId = this.itemsData._idProp;
     var idMap = {};
     if (ids){
       ids.map(function (id) {

diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
@@ -27,7 +27,6 @@ class Item {
     this.selected = false;
     this.displayed = false;
     this.groupShowing = true;
-    console.log(options);
     this.selectable = (options && options.selectable) || false;
     this.dirty = true;