JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<div id="contextMenuContainer">
  <ul id="contextMenu">
    <li></li>
    <li>Option 1</li>
    <li>Option 2</li>
  </ul>
</div>

CSS

#contextMenuContainer {
  display: none;
  position: fixed;
  border: 1px solid gray;
  background: red;
  width: 200px;
  z-index: 100;
}

#contextMenuContainer #contextMenu {
  list-style: none;
  padding: 0px;
  font-size: 20px;
}

#contextMenuContainer #contextMenu li {
  font-size: 20px;
  cursor: pointer;
  padding-top: 5px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 5px;
  text-align: center;
}

JavaScript

$(function() {
  var doubleClicked = false;
  $(document).on("contextmenu", function(e) {
    if (doubleClicked == false) {
      e.preventDefault(); // To prevent the default context menu.
      var windowHeight = $(window).height() / 2;
      var windowWidth = $(window).width() / 2;
      //When user click on bottom-left part of window
      if (e.clientY > windowHeight && e.clientX <= windowWidth) {
        $("#contextMenuContainer").css("left", e.clientX);
        $("#contextMenuContainer").css("bottom", $(window).height() - e.clientY);
        $("#contextMenuContainer").css("right", "auto");
        $("#contextMenuContainer").css("top", "auto");
      } else if (e.clientY > windowHeight && e.clientX > windowWidth) {
        //When user click on bottom-right part of window
        $("#contextMenuContainer").css("right", $(window).width() - e.clientX);
        $("#contextMenuContainer").css("bottom", $(window).height() - e.clientY);
        $("#contextMenuContainer").css("left", "auto");
        $("#contextMenuContainer").css("top", "auto");
      } else if (e.clientY <= windowHeight && e.clientX <= windowWidth) {
        //When user click on top-left part of window
        $("#contextMenuContainer").css("left", e.clientX);
        $("#contextMenuContainer").css("top", e.clientY);
        $("#contextMenuContainer").css("right", "auto");
        $("#contextMenuContainer").css("bottom", "auto");
      } else {
        //When user click on top-right part of window
        $("#contextMenuContainer").css("right", $(window).width() - e.clientX);
        $("#contextMenuContainer").css("top", e.clientY);
        $("#contextMenuContainer").css("left", "auto");
        $("#contextMenuContainer").css("bottom", "auto");
      }
      $("#contextMenuContainer").fadeIn(500, FocusContextOut());
      doubleClicked = true;
    } else {
      e.preventDefault();
      doubleClicked = false;
      $("#contextMenuContainer").fadeOut(500);
    }
  });

  function...