Coachmarks Testing

by c0bra

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="//unpkg.com/[email protected]/svg-path.js"></script>
<style type='text/css'>
/* your custom CSS \*/
</style>
<!-- access to the HEAD element -->
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
<style>
</style>

<svg width="0" height="0" xmlns="http://www.w3.org/svg/2000">
  <defs>
    <filter id="coachmark-chalk" height="2" width="1.6" color-interpolation-filters="sRGB">
      <feTurbulence baseFrequency="0.133" seed="500" result="result1" numOctaves="1" type="turbulence"/>
      <feOffset result="result2" dx="0" dy="0"/>
      <feDisplacementMap scale="5" yChannelSelector="G" in2="result1" xChannelSelector="R" in="SourceGraphic"/>
      <feGaussianBlur stdDeviation="0.5"/>
    </filter>
    <marker id="arrow" markerWidth="10" markerHeight="8" 
	refX="7.5" refY="4.5" orient="auto" markerUnits="strokeWidth">
      <!--<path d="M0,0 L0,6 L9,3 z" stroke="#fff" fill="#fff" />-->
      <!--<polyline points="-2,-2 0,0 -2,2" stroke="#fff" fill="none" vector-effect="non-scaling-stroke" />-->
      <polyline points="1 1, 9 5, 1 7" stroke="#fff" fill="none" />
    </marker>
  </defs>
</svg>

<p>This maladroitly erectly jeepers that skillful said trenchant tryingly turtle alas snapped sat wove upon hen reflectively when cravenly leered decisive thrust nightingale that ouch cheeky was far.</p>
<p>Including scorpion hence one less before far dragonfly ouch abhorrently that far rewound that angelfish howled forward much and man-of-war onto onto one because outsold some then and gosh dachshund hamster much wow kookaburra some spelled excruciatingly
  some hello and jeez woodchuck the.</p>
<button class="btn btn-lg btn-primary" id="btn">Foo Bar Baz</button>

CSS

/* Styles go here */

#btn {
  margin-top: 150px;
}

body {
  padding: 20px;
  margin: 0;
  overflow: hidden;
}

.coachmark {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  /*background: #000;*/
  /*opacity: 0.60;*/
  z-index: 100;
}

.coachmark-top,
.coachmark-left,
.coachmark-right,
.coachmark-bottom {
  position: fixed;
  background: #000;
  opacity: 0.66;
  margin: 0;
  padding: 0;
}

.coachmark-top {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.coachmark-left {
  left: 0;
}

.coachmark-right {
  right: 0;
}

.coachmark-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.coachmark-glow {
  position: absolute;
  /*z-index: 101;*/
  /*box-shadow: 0 0 120px 50px #fff;*/
}

.coachmark-text {
  font-size: 4rem;
  color: #fefefe;
  /* text-decoration: underline; */
  position: fixed;
  top: 20px;
  right: 0px;
  text-shadow: 2px 2px #333;
  padding: 20px;
}

.coachmark-svg {
  position: fixed;
  top:0;
  left:0;
  height:100%;
  width:100%;
  z-index: 200;
 }
}

JavaScript

// Code goes here
// TODO: relative-size the arrow marker based on viewport size
// TODO: Fix positioning of arrow head
// TODO: content needs to not scroll, which means scrolling elements into view.
// TODO: handle rezizing, orientation changes, and media query changes

// TODO: for positioning choose biggest delta between x and y, it will be one of two (i.e. bottom or left), so choose the one that's the largest delta from the other point's (maybe)

var target = '#btn';

document.addEventListener("DOMContentLoaded", function() {
  var coached = coach();
  var text = addText('Foo aldfs asdf asdf');
  arrow(text, coached);
});

function coach() {
  var elm = document.querySelector('#btn');

  elm.style.position = 'absolute';
  // elm.style['box-shadow'] = '0 0 150px 30px #fff';
  elm.style['z-index'] = 102;

  var borderRadius = window.getComputedStyle(elm).getPropertyValue("border-radius");
  // borderRadius = parseInt(borderRadius, 10);

  var top = elm.offsetTop;
  var left = elm.offsetLeft;
  var width = elm.offsetWidth;
  var height = elm.offsetHeight;
  var right = left + width;
  var bottom = top + height;

  var coachTop = document.createElement('div');
  coachTop.className = 'coachmark-top';
  var coachLeft = document.createElement('div');
  coachLeft.className = 'coachmark-left';
  var coachRight = document.createElement('div');
  coachRight.className = 'coachmark-right';
  var coachBottom = document.createElement('div');
  coachBottom.className = 'coachmark-bottom';

  coachTop.style.height = top + 'px';
  coachLeft.style.top = coachRight.style.top = top + 'px';
  coachLeft.style.height = coachRight.style.height = height + 'px';
  coachLeft.style.width = left + 'px';
  coachRight.style.left = right + 'px';
  coachBottom.style.top = bottom + 'px';

  var longDim = height > width ? height : width;

  var glow = document.createElement('div');
  glow.className = 'coachmark-glow';
  // glow.style.top = (top + height / 4) + 'px';
  // glow.style.left = (left...