Redmine

/**

 * Redmine - ContextMenu (JQuery plugin)

 *

 * @author: Jan Strnadek <jan.strnadek@gmail.com, jan.strnadek@netbrick.eu>

 */

(function($) {

  "use strict"; // jshint

  /** Context Menu Manager (SINGLETON) */

  var ContextMenuManager = function() {

    if ( ContextMenuManager.prototype._singletonInstance )

      return ContextMenuManager.prototype._singletonInstance;

    ContextMenuManager.prototype._singletonInstance = this;

    this.init();

  };

  ContextMenuManager.prototype = {

    init: function() {

      var that = this;

      this.stack = [];

      this.$el   = $("<div></div>").attr('id', 'context-menu').hide();

      $("#content").append(this.$el);

      /** Click event handler */

      $(document).click(function(evt) {

        that.click(evt);

      });

      /** Escape event handler */

      $(document).keyup(function(evt) {

        if (evt.keyCode == 27)

          that.hideContexMenu();

      });

    },

    click: function(evt) {

      var target = $(evt.target);

      if (target.is('a') && target.hasClass('submenu')) {

        event.preventDefault();

        return;

      }

      this.hideContexMenu();

    },

    hideContexMenu: function() {

      this.$el.hide();

    },

    add: function(contextMenu) {

      this.stack.push(contextMenu);

    },

    getElement: function() {

      return this.$el;

    },

    showContextMenu: function(evt, data) {

      var mouse_x = evt.pageX;

      var mouse_y = evt.pageY;

      this.$el.css('left', (mouse_x + 'px'));

      this.$el.css('top',  (mouse_y + 'px'));

      this.$el.html(data);

      this.resizeContextMenu(mouse_x, mouse_y);

      this.$el.show();

    },

    resizeContextMenu: function(mouse_x, mouse_y) {

      var dims;

      var menu_width;

      var menu_height;

      var window_width;

      var window_height;

      var max_width;

      var max_height;

      menu_width  = this.$el.width();

      menu_height = this.$el.height();

      max_width   = mouse_x + 2 * menu_width;

      max_height  = mouse_y + menu_height;

      var ws = this.windowSize();

      window_width = ws.width;

      window_height = ws.height;

      /* display the menu above and/or to the left of the click if needed */

      if (max_width > window_width) {

       mouse_x -= menu_width;

       this.$el.addClass('reverse-x');

      } else {

       this.$el.removeClass('reverse-x');

      }

      if (max_height > window_height) {

       mouse_y -= menu_height;

       this.$el.addClass('reverse-y');

      } else {

       this.$el.removeClass('reverse-y');

      }

      if (mouse_x <= 0) mouse_x = 1;

      if (mouse_y <= 0) mouse_y = 1;

      this.$el.css('left', (mouse_x + 'px'));

      this.$el.css('top', (mouse_y + 'px'));

    },

    windowSize: function() {

      var w;

      var h;

      if (window.innerWidth) {

        w = window.innerWidth;

        h = window.innerHeight;

      } else if (document.documentElement) {

        w = document.documentElement.clientWidth;

        h = document.documentElement.clientHeight;

      } else {

        w = document.body.clientWidth;

        h = document.body.clientHeight;

      }

      return {width: w, height: h};

    },

  };

  /* ContextMenu class definition */

  var ContextMenu = function (element, options) {

    this.init (element, options);

  };

  ContextMenu.prototype = {

    constructor: ContextMenu,

    init: function (element, options) {

	    var that     = this;

    	this.options = options;

      /** Add menu to manager */

      this.manager = new ContextMenuManager();

      this.manager.add ( this );

      /** Start observing element */

      this.$el   = $(element);

      this.$el.contextmenu(function(evt) {

        that.contextMenuClick(evt);

      });

      this.$el.click(function(evt) {

        that.click(evt);

      });

    },

    click: function(evt) {

      var target = $(evt.target);

      if (target.is('a') && target.hasClass('submenu')) {

        event.preventDefault();

        return;

      }

      if (target.is('a') || target.is('img')) { return; }

      /** Check if row was clicked */

      var tr = target.parents('tr').first();

      if (tr.length && tr.hasClass('hascontextmenu')) {

        /** Input was clicked - do not remove selection from all */

        if (target.is('input')) {

          if (target.is(':checked')) {

            tr.addClass('context-menu-selection');

          } else {

            tr.removeClass('context-menu-selection');

          }

        } else {

          /** Disable all selected items */

          this.$el.find('tr.hascontextmenu').each(function() {

            var element = $(this);

            var input = element.find('td.checkbox input[type="checkbox"]').first();

            if ( input ) input.prop('checked', false);

            element.removeClass('context-menu-selection');

          });

          /** Set checked to true and add tr context class */

          tr.addClass('context-menu-selection');

          var input = tr.find('td.checkbox input[type="checkbox"]').first();

          if ( input ) input.prop('checked', true);

        }

      }

    },

    contextMenuClick: function(evt) {

      var target = $(evt.target);

      if (target.is('a')) { return; }

      var tr = target.parents('tr').first();

      if (!tr.hasClass('hascontextmenu')) { return; }

      /** Clicked on tr - ensure it is checked */

      var input = tr.find('td.checkbox input[type="checkbox"]');

      if ( input ) {

        if ( !input.is(':checked') ) {

          /** Input is not checked - remove selection of other elements */

          this.$el.find('tr.hascontextmenu').each(function() {

            var element = $(this);

            var input = element.find('td.checkbox input[type="checkbox"]').first();

            if ( input ) input.prop('checked', false);

            element.removeClass('context-menu-selection');

          });

        }

        input.prop('checked', true);

        tr.addClass('context-menu-selection');

      }

      evt.preventDefault();

      this.show(evt);

    },

    show: function(evt) {

      var manager = this.manager;

      var form    = this.$el.children('form').first();

      $.ajax({

        url: this.options.url,

        data: form.serialize(),

        success: function(data, textStatus, jqXHR) {

          manager.showContextMenu(evt, data);

        }

      });

    }

  };

  $.fn.contextMenu = function(options) {

    var defaults = {

      url: null

    };

    var settings = $.extend( {}, defaults, options );

    /* Element for bind is table / parent DIV */

    return this.each(function() {

      new ContextMenu(this, settings);

    });

  };

})( jQuery );