jquery test chilltime

just test

by jashet villegas

HTML

<body>
<main>

  <div clas="box_listener" id="red">1</div>
  <div clas="box_listener" id="blue">2</div>
  <div clas="box_listener" id="green">3</div>
</body>

CSS

main {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
}
body {
width: 400px;
  height: 200px;
  border-style: solid;
  border-color: black; 
}


div {
   background: #a0c6df;
   width: 100px;
   height: 100px;
   margin: 10px;
   opacity: 1;
   cursor: pointer;
   transition: all 3s;
}

main.fadeout div:not(.current) {
   opacity: 0;
   cursor: default;
}

#red{
  width: 120px;
  height: 120px;
  margin-left: 260px;
  margin-top: 20px;
  background-color: white;
  border-style: solid;
  border-color: red;
  position: absolute;
  z-index:0;
}
#blue{
  width: 120px;
  height: 120px;
  margin-left: 220px;
  margin-top: 40px;
  background-color: white;
  border-style: solid;
  border-color: blue;
  position: absolute;
}
#green{
  width: 120px;
  height: 120px;
  margin-left: 200px;
  margin-top: 60px;
  background-color: white;
  border-style: solid;
  border-color: green;
  position: absolute;
}

JavaScript

var main = document.querySelector('main');
var allboxes = document.querySelectorAll('main div');
var animationIsRunning = false;

var getBoxPosition = function() {
  [].forEach.call(allboxes, function(b) {
     var gBCR = b.getBoundingClientRect();
     b.dataset.top = gBCR.top;
     b.dataset.left = gBCR.left;
  }); 
}

window.addEventListener('resize', function() {
    var dc;
    getBoxPosition();
    if (dc = main.querySelector('div.current')) {
       main.classList.remove('fadeout');
       dc.classList.remove('current');
       dc.style.transform = 'translate(0,0)';
    }
});

main.addEventListener('click', function(evt) {
   var b    = evt.target,
       left = 0, 
       top  = 0;

   if (b.nodeName.toLowerCase() !== 'div') { return false; }

   if (
       main.querySelector('.current') &&
       !b.classList.contains('current')
   ) { return false; }
  
   /* only if another animation is not running... */
   if (!animationIsRunning) {
       animationIsRunning = true;
     
       b.classList.toggle('current');
       main.classList.toggle('fadeout');

       if (b.classList.contains('current')) {
          left = b.dataset.left;
          top  = b.dataset.top;
       }

       b.style.transform = 'translate(-'+ left +'px, -'+ top +'px)';
   }
});

main.addEventListener('transitionend', function() {
  animationIsRunning = false;
});


getBoxPosition();