From 1b281233c3a700a0060a567c5fc21bf850bf8ce7 Mon Sep 17 00:00:00 2001
From: Greg Davis <greg.davis@pearson.com>
Date: Tue, 5 Jun 2018 16:59:21 -0600
Subject: [PATCH] fix: change positioning method by moving coach mark to body
 tag

---
 demo/index.html           |  2 +-
 index.js                  |  5 ++++-
 src/js/component-owner.js | 19 ++++++++++---------
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 9060eca..f21e9d7 100755
--- a/demo/index.html
+++ b/demo/index.html
@@ -100,7 +100,7 @@ <h2>Eleventh Example</h2>
         </div>
     </div>
 
-    <div style="width:250px; overflow: scroll">
+    <div style="width:250px; overflow: scroll; position: relative;">
         <h2>Twelveth Example</h2>
         <div id="demo-target12" class="demo-target" style="width:350px;">
             This Coachmark pops out of a hidden content scrolling container
diff --git a/index.js b/index.js
index 77cf33a..c3875e7 100644
--- a/index.js
+++ b/index.js
@@ -19,7 +19,10 @@ export default class CoachMark {
     if (coachEl.length === 0) {
       this.container = document.createElement('div');
       this.container.setAttribute('data-id', config.elementId);
-      target.parentNode.insertBefore(this.container, target.nextSibling);
+      // Fix for positioning in a container that position:relative and overflow:scroll or overflow:hidden
+      // move the node to the body tag instead of inside the parent container.
+      //target.parentNode.insertBefore(this.container, target.nextSibling);
+      document.body.appendChild(this.container)
 
       // check to see if any coaches are open, if they are, remove.
       _.forEach(coachAll, coach => {
diff --git a/src/js/component-owner.js b/src/js/component-owner.js
index 5f8f1d0..e86fe41 100755
--- a/src/js/component-owner.js
+++ b/src/js/component-owner.js
@@ -115,15 +115,16 @@ class ComponentOwner extends Component {
     const { target } = this.props;
 
     // this is called on draw and redraw
-    const elementPosition = {
-        top: target.offsetTop,
-        left: target.offsetLeft,
-        bottom: target.offsetTop + target.offsetHeight,
-        right: target.offsetLeft + target.offsetWidth
-      },
-      horizontal_center =
-        (elementPosition.right - elementPosition.left) / 2 +
-        elementPosition.left;
+    const targetRect = target.getBoundingClientRect(),
+          elementPosition = {
+            top: targetRect.top + window.scrollY,
+            left: targetRect.left + window.scrollX,
+            bottom: targetRect.bottom + window.scrollY,
+            right: targetRect.right + window.scrollX
+          },
+          horizontal_center =
+            (elementPosition.right - elementPosition.left) / 2 +
+            elementPosition.left;
 
     const centerOnDiv = () => {
       // if forced right push right