highed-attention

by Jens Kühn

HTML

<div class="container">

  <div class="left">
    <input class="highed-field-input" id="title--" style="transition: background-color 1s ease;">
    <br><br>
    <input class="highed-field-input" id="subtitle--" style="transition: background-color 1s ease;">
    <br><br>
    <input class="highed-field-input" id="subsubtitle--" style="transition: background-color 1s ease;">
  </div>


  <div class="right">
    <div class="highcharts-title">
      subtitle
    </div>
    <div class="highcharts-subtitle">
      subtitle
    </div>
    <div class="highcharts-subsubtitle">
      subtitle
    </div>
    <div class="highcharts-subsubtitle2">
      subtitle
    </div>
  </div>

</div>

SCSS

.container > div {
  width: 45%;
  float: left;
}

.right{
  text-align: center
}

.highcharts {
  &-title{
    font-size: 3em
  }
  &-subtitle{
    font-size: 2em
  }
  &-subsubtitle{
    font-size: 1em
  }
  &-subsubtitle2{
    font-size: .8em
  }
}

.highed-attention {
	position: absolute;
	background-color: #61BC7B;
	transition: .3s ease all;
}

JavaScript

// Detect all clicks on the document
document.addEventListener('click', function(event) {

  console.log(event, event.target.className, event.clientX, event.clientY);

  if (event.target.className) {
    doHighedAttention(event.target.className, event.clientX, event.clientY);
  }

}, false);

function doHighedAttention(target, left, top) {

// select target
  var targetElm = document.getElementById((target.substr(target.indexOf("-") + 1) + "--"));
  if (targetElm) {
  
    var attentionElm = document.createElement('div');
    attentionElm.className = 'highed-attention';
    attentionElm.setAttribute("id", "attentionElm");
    attentionElm.setAttribute("style",
      "width:10px;" +
      "height:10px;" +
      "left: " + (left - 5) + "px;" +
      "top:" + (top - 5) + "px;" +
      "borderRadius: 50%");

    document.body.appendChild(attentionElm);
    var targetElmRect = targetElm.getBoundingClientRect();
    var targetElmBg = targetElm.style.backgroundColor;

    console.log(targetElmRect.left, targetElmRect.top, targetElm.getBoundingClientRect());

    // update
    attentionElm.setAttribute("style",
      "width:" + targetElmRect.width + "px;" +
      "height:" + targetElmRect.height + "px;" +
      "left: " + targetElmRect.left + "px;" +
      "top:" + targetElmRect.top + "px;" +
      "borderRadius: 0");

    window.setTimeout(function() {
      targetElm.setAttribute("style",
        "backgroundColor: " + window.getComputedStyle(attentionElm).backgroundColor + ";transition: '1s ease background-color'");
      attentionElm.remove();
      window.setTimeout(function() {
        attentionElm.setAttribute("style", "backgroundColor:" + targetElmBg);
        attentionElm = null;
      }, 250);
    }, 350);
  }


}