From 350d43aec980565a945bc2a4cccbeb8df4c56e52 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Thu, 5 Jun 2014 16:48:10 +0200
Subject: [PATCH] Introduced a forgroundVertical panel, positioned the dots of
 item boxes there

---
 src/timeline/Timeline.js               |  7 +++++++
 src/timeline/component/ItemSet.js      | 13 ++++++-------
 src/timeline/component/css/itemset.css |  4 ++++
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/timeline/Timeline.js b/src/timeline/Timeline.js
index 28fb9005..8b92e610 100644
--- a/src/timeline/Timeline.js
+++ b/src/timeline/Timeline.js
@@ -346,6 +346,7 @@ Timeline.prototype._create = function () {
   this.dom.right                = document.createElement('div');
   this.dom.top                  = document.createElement('div');
   this.dom.bottom               = document.createElement('div');
+  this.dom.foregroundVertical   = document.createElement('div');
 
   this.dom.background.className           = 'vispanel background';
   this.dom.backgroundVertical.className   = 'vispanel background vertical';
@@ -358,6 +359,7 @@ Timeline.prototype._create = function () {
   this.dom.left.className                 = 'content';
   this.dom.center.className               = 'content';
   this.dom.right.className                = 'content';
+  this.dom.foregroundVertical.className   = 'vispanel foreground vertical';
 
   this.dom.root.appendChild(this.dom.background);
   this.dom.root.appendChild(this.dom.backgroundVertical);
@@ -367,6 +369,7 @@ Timeline.prototype._create = function () {
   this.dom.root.appendChild(this.dom.rightContainer);
   this.dom.root.appendChild(this.dom.top);
   this.dom.root.appendChild(this.dom.bottom);
+  this.dom.root.appendChild(this.dom.foregroundVertical);
 
   this.dom.centerContainer.appendChild(this.dom.center);
   this.dom.leftContainer.appendChild(this.dom.left);
@@ -804,6 +807,7 @@ Timeline.prototype.repaint = function() {
   dom.centerContainer.style.height      = props.centerContainer.height + 'px';
   dom.leftContainer.style.height        = props.leftContainer.height + 'px';
   dom.rightContainer.style.height       = props.rightContainer.height + 'px';
+  dom.foregroundVertical.style.height   = props.background.height + 'px';
 
   dom.background.style.width            = props.background.width + 'px';
   dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
@@ -811,6 +815,7 @@ Timeline.prototype.repaint = function() {
   dom.centerContainer.style.width       = props.center.width + 'px';
   dom.top.style.width                   = props.top.width + 'px';
   dom.bottom.style.width                = props.bottom.width + 'px';
+  dom.foregroundVertical.style.width    = props.centerContainer.width + 'px';
 
   // reposition the panels
   dom.background.style.left           = '0';
@@ -829,6 +834,8 @@ Timeline.prototype.repaint = function() {
   dom.top.style.top                   = '0';
   dom.bottom.style.left               = props.left.width + 'px';
   dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
+  dom.foregroundVertical.style.left   = props.left.width + 'px';
+  dom.foregroundVertical.style.top    = '0';
 
   // repaint all components
   this.components.forEach(function (component) {
diff --git a/src/timeline/component/ItemSet.js b/src/timeline/component/ItemSet.js
index e7b5e36d..6cb28ff4 100644
--- a/src/timeline/component/ItemSet.js
+++ b/src/timeline/component/ItemSet.js
@@ -187,7 +187,7 @@ ItemSet.prototype.show = function show() {
 
   // show axis with dots
   if (!this.dom.axis.parentNode) {
-    this.timeline.dom.bottom.appendChild(this.dom.axis);
+    this.timeline.dom.foregroundVertical.appendChild(this.dom.axis);
   }
 
   // show labelset containing labels
@@ -323,12 +323,11 @@ ItemSet.prototype.repaint = function repaint() {
   this.props.height = height;
 
   // reposition axis
-  this.dom.axis.style.left   = asSize(options.left, '0');
-  this.dom.axis.style.right  = asSize(options.right, '');
-  this.dom.axis.style.width  = asSize(options.width, '100%');
-  this.dom.axis.style.height = asSize(0);
-  this.dom.axis.style.top    = asSize((orientation == 'top') ? '0' : '');
-  this.dom.axis.style.bottom = asSize((orientation == 'top') ? '' : '0');
+  this.dom.axis.style.top = asSize((orientation == 'top') ?
+      this.timeline.props.top.height :
+      this.timeline.props.top.height + this.timeline.props.center.height +
+      this.timeline.props.border.top + this.timeline.props.border.bottom);
+  this.dom.axis.style.left = this.timeline.props.border.left + 'px';
 
   // check if this component is resized
   resized = this._isResized() || resized;
diff --git a/src/timeline/component/css/itemset.css b/src/timeline/component/css/itemset.css
index 49c9b168..b9f5f54e 100644
--- a/src/timeline/component/css/itemset.css
+++ b/src/timeline/component/css/itemset.css
@@ -24,6 +24,10 @@
 }
 
 .vis.timeline .axis {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  left: 1px;
 }
 
 .vis.timeline  .group {