window.addEventListener('DOMContentLoaded', () => {

  // animateOverTime
  // - duration
  // - step callback function
  // - done callback function
  const animateOverTime = (duration = 400, stepCb = () => {}, doneCb = () => {} ) => {
    
    let rafId = null;
    let start = null;
    
    const animate = (timestamp) => {

      if (!start) start = timestamp;

      const progress = (timestamp - start)  / duration;

      if (progress > 1) {
        window.cancelAnimationFrame(rafId);
        doneCb();
        start = null;
      } else {
        stepCb(progress);
        rafId = window.requestAnimationFrame(animate);
      }

    };
    
    rafId = window.requestAnimationFrame(animate);

  };
  
  
  // Hook click events to buttons
  document.querySelectorAll('button').forEach((button) => {

    button.addEventListener('click', (e) => {
    
      // Don't jump
      e.preventDefault();
      e.stopPropagation();

      // Get button itself
      const $this = e.target;
            
      // Prevent Double Clicks
      if ($this.classList.contains('busy')) return false;
      $this.classList.add('busy');
      
      // Animate the element over time
      animateOverTime(

        // Duration: the value of [data-duration] or 400ms by default
        $this.dataset.duration || 400,
        
        // Step Callback: update translateY value
        (progress) => {
          $this.style.transform = `translateY(${progress * 100}%)`;
        },
        
        // Done Callback: clear busy and jump back to initial position
        () => {
          $this.style.transform = '';
          $this.classList.remove('busy');
        }

      );

    });

  });

});