JSFiddle - React, Tailwind, and code Playground

by wolfie7873

HTML

<div id='content-container'>

<table id='mytable'>
<tr>
<td athlete=12345 event=1 event-type='relay'>2:01.02</td>
<td athlete=12345 event=2 event-type='individual'>2:12.96</td>
<td athlete=12345 event=3 event-type='individual'>23.30</td>
</tr>
<tr>
<td athlete=23456 event=1 event-type='relay'>1:55.03</td>
<td athlete=23456 event=2 event-type='individual'>2:02.60</td>
<td athlete=23456 event=3 event-type='individual'>21.31</td>
</tr>
<tr>
<td athlete=34567 event=1 event-type='relay'>2:21.02</td>
<td athlete=34567 event=2 event-type='individual'>2:42.96</td>
<td athlete=34567 event=3 event-type='individual'>25.30</td>
</tr>
</table>
<div id="myContextMenu">
This is my context menu.  There are many like it, but this one is mine.
</div>
</div>

CSS

#mytable {
  border-collapse: collapse ;
}
#mytable td {
  border: 1px solid black ;
}

#myContextMenu {
    border: 1px solid black ;
    visibility: hidden ;
    position: fixed ;
    top: 0px ;
    left: 0px ;
    z-index: 9999 ;
    opacity: 0 ;
    background-color: red ;
  
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    
    -webkit-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
    -moz-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
    box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);    

}

#content-container {
    position: relative ;
}

JavaScript

function openContextMenu(x,y) {
	$("#myContextMenu").css('visibility' , 'visible' ) ;
    
    $("#myContextMenu").css('opacity' , 1 ) ;
    $("#myContextMenu").css('left' , x + 'px' ) ;
    $("#myContextMenu").css('top' , y + 'px' ) ;

}

onload = function() {

  $("[event-type='individual']").on('contextmenu', function(e) {
  	e.preventDefault() ;
    openContextMenu( e.pageX, e.pageY ) ;
  })

  document.addEventListener('click',function() {
  	setTimeout(function(){
       $("#myContextMenu").css('visibility','hidden')
    }, 101)
  })
  

}