JSFiddle - React, Tailwind, and code Playground

by xyzxyz442

HTML

<script src="http://medialize.github.com/jQuery-contextMenu/src/jquery.contextMenu.js"></script>
<link rel="stylesheet" href="http://medialize.github.com/jQuery-contextMenu/src/jquery.contextMenu.css">
<div class="container">
  <div class="layer">
    <div class="marker"></div>
  </div>
</div>

CSS

.container {
  width: 400px;
  height: 400px;
  background-color: #666;
}
.layer {
  width: 200px;
  height: 200px;
  background-color: #cdcdcd;
}
.marker {
  width: 100px;
  height: 100px;
  background-color: #eee;
}

JavaScript

$('.layer').contextMenu({
  selector: '.layer',
  build: function (trigger, e) {
    var menuItems = {};

    var ele = $(e.target);

    if (ele.hasClass('marker')) {
      menuItems = {
          'marker': {
            name: 'Marker',
            icon: 'marker'
          }
        };
    } else {
     	menuItems = {
          'layer': {
            name: 'Layer',
            icon: 'layer'
          }
        };
    }

    return {
      animation: {
        show: 'show',
        hide: 'hide'
      },
      callback: function (key, options) {
        if (key == 'select') {
          ele.trigger('click');
        }
        //console.log(key);
        //console.log(options);
      },
      items: menuItems
    };
  },
})