JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="element">
  <h2>
    Element Title
  </h2>
  <p>
    Element BodyText
  </p>
</div>

CSS

.element {
  display: inline-block;
  border: solid 1px rgba(127, 127, 127, 0.5);
  border-radius: 0.4rem;
  padding: 0.5rem 1rem;
  text-align: center;
  width: 10rem;
  height: 8rem;
}

.element.tapped {
  background-color: rgba(0, 127, 127, 0.5);
}

JavaScript

const tapDuration = 800;

const element= document.querySelector('.element');

const tapTrap = (element) => {

	let timeouts = [];

  const timedListener = (event, handler) => {
 
  	timeouts.forEach((i) => { clearTimeout(i) });
    timeouts = [];

	  element.addEventListener(event, handler);
    const timeout = setTimeout(() => {
        element.removeEventListener(event, handler);
    }, tapDuration/2);
    timeouts.push(timeout);
  };

  const secondUp = () => {
  	console.log('secondup');
    element.removeEventListener('mouseup', secondUp);
  }
  const secondDown = () => {
  	console.log('seconddown');
    element.removeEventListener('mousedown', secondDown);
    timedListener('mouseup', secondUp);
  }
  const firstUp = () => {
  	console.log('firstup');
    element.removeEventListener('mouseup', firstUp);
    timedListener('mousedown', secondDown);
  }
  const firstDown = () => {
  	console.log('firstdown');
  	element.removeEventListener('mousedown', firstDown);
    timedListener('mouseup', firstUp);
  };
	
  const setup = () => {
  	console.log('setup');
	  element.addEventListener('mousedown', firstDown);
  }
  const tearDown = () => {
  	console.log('teardown');
  	element.removeEventListener('mousedown', firstDown);
    element.removeEventListener('mousedown', secondDown);
    element.removeEventListener('mouseup', firstUp);
    element.removeEventListener('mouseup', secondUp);
  }
  element.addEventListener('mouseenter', setup);
  element.addEventListener('mouseleave', tearDown);
};

tapTrap(element);

// 1. Setup Tap Listener
	// addTapListeners(element)
  // removeTapListeners(element)
  
// 2. Listen For First Click
		// ... 
    	// Clear previous 'Tapped state' & Listeners
      // Timeout if mouseup takes too long
      // Timeout if 2nd mousedown takes too long
/* const addTapListeners = (element) => {
  let isTapped = false;
  
  const tapEvents = [
    () => { console.log('first (mouseDown)') },
    () => { console.log('Second (mouseUp)') },
 ...