Cacher is the code snippet organizer for pro developers

/**
 *
 * Class builds context menu to table of clubs, terminals
 *
 */
;(function($) {
  var ContextMenu = function(target, content) {
    this.target = target || {};

    if(this.target.length) {
        this.menu = {
            container: $('<ul>').addClass('context-menu').attr('data-info', JSON.stringify(this.target.data('info'))),
            content: content || {}
        };
    }
    
  };
  
  ContextMenu.prototype = {
      build: function() {
          var self = this, items = '', pattern = /%clubID%/gi, changeAction;
  
          // function return delete or restore action
          changeAction = function(str) {
              var obj = $(str);
  
                  if(self.target.closest('tr').is('.bg-deleted')) {
                      obj.attr('data-action', obj.data('param').restore.action)
                          .text(obj.data('param').restore.text);
                  }
                  else {
                      obj.attr('data-action', obj.data('param').delete.action)
                          .text(obj.data('param').delete.text);
                  }
  
                  obj.removeAttr('data-param');
  
                  return obj[0].outerHTML;
          };
  
          for (var i = 0; i <= self.menu.content.length - 1; i++) {
              if(self.menu.content[i].match(pattern) !== null) {
                  self.menu.content[i] = self.menu.content[i].replace(pattern, this.target.data('info').id);
              }
        
              // get param
              if($(self.menu.content[i]).data('param') !== undefined && typeof $(self.menu.content[i]).data('param') === 'object') {
                  self.menu.content[i] = changeAction(self.menu.content[i]);
              }
  
              items += '<li class="context-menu__item">'+ self.menu.content[i] +'</li>';
          }
  
          self.menu.container.append($(items));
      },
  
      show: function() {
          var parent = this.target.closest('tr');
  
          if(this.target.is('.active')) {
              this.target.removeClass('active');
              parent.removeClass('active');
              this.hide();
          }
          else {
              var offset = this.target.closest('td').offset(),
                  indent = this.target.closest('td').outerHeight() - 1;
  
              this.hide();
              this.build();
              parent.addClass('active');
              this.target.addClass('active');
  
              $('body').append(this.menu.container);
              this.menu.container.css({'top': (offset.top + indent) + 'px', 'left': (offset.left - 1) + 'px'}).show();
          }
      },
  
      hide: function() {
          $('.context-menu').remove();
          $('.clubs .active, .club .active').removeClass('active');
      }
  };
})(JQuery);

// show multiseat context menu
$(document).on('click', '[data-action="show-menu-multiseat"]', function() {
    new ContextMenu($(this), [
        '<div data-action="multiseat-ini">Show launcher.ini</div>',
        '<div data-action="multiseat-edit">Edit</div>',
        '<div data-action="multiseat-ico">Icon & Images</div>',
        '<div data-action="multiseat-delete" data-param=\'{"delete":{"text":"Delete","action":"multiseat-delete"},"restore":{"text":"Restore","action":"multiseat-restore"}}\' class="color-red">Delete</div>'
    ]).show();
});

// delete multiseat
$(document).on('click', '[data-action="multiseat-delete"]', function() {
    // some code...
    new ContextMenu().hide();
});

// hide context menu
$(document).on('click', function(e) {
    if($('.context-menu').length) {
        var parent = (e.target.offsetParent !== null ? e.target.offsetParent.className : e.target.offsetParent);

        if(e.target.className !== 'context-menu' && parent !== 'context-menu' && e.target.dataset.action === undefined) {
            new ContextMenu().hide();
          
        }
    }
});