context-menu.js

/*
 * Copyright 2012 LinkedIn Corp.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

$.namespace('azkaban');

azkaban.ContextMenuView = Backbone.View.extend({
	events: {
	},
	
  initialize: function(settings) {
		var div = this.el;
		$('body').click(function(e) {
			$(".contextMenu").remove();
		});
		$('body').bind("contextmenu", function(e) {$(".contextMenu").remove()});
	},
	
  show: function(evt, menu) {
		console.log("Show context menu");
		$(".contextMenu").remove();
		var x = evt.pageX;
		var y = evt.pageY;

		var contextMenu = this.setupMenu(menu);
		$(contextMenu).css({top: y, left: x});
		$(this.el).after(contextMenu);
	},
	
  hide: function(evt) {
		console.log("Hide context menu");
		$(".contextMenu").remove();
	},
	
  handleClick: function(evt) {
		console.log("handling click");
	},
	
  setupMenu: function(menu) {
		var contextMenu = document.createElement("div");
		$(contextMenu).addClass("contextMenu");
		var ul = document.createElement("ul");
		$(contextMenu).append(ul);

		for (var i = 0; i < menu.length; ++i) {
			var menuItem = document.createElement("li");
			if (menu[i].break) {
				$(menuItem).addClass("break");
			  $(ul).append(menuItem);
        continue;
			}
      var title = menu[i].title;
      var callback = menu[i].callback;
      $(menuItem).addClass("menuitem");
      $(menuItem).text(title);
      menuItem.callback = callback;
      $(menuItem).click(function() { 
        $(contextMenu).hide(); 
        this.callback.call();
      });
        
      if (menu[i].submenu) {
        var expandSymbol = document.createElement("div");
        $(expandSymbol).addClass("expandSymbol");
        $(menuItem).append(expandSymbol);
        
        var subMenu = this.setupMenu(menu[i].submenu);
        $(subMenu).addClass("subMenu");
        subMenu.parent = contextMenu;
        menuItem.subMenu = subMenu;
        $(subMenu).hide();
        $(this.el).after(subMenu);
        
        $(menuItem).mouseenter(function() {
          $(".subMenu").hide();
          var menuItem = this;
          menuItem.selected = true;
          setTimeout(function() {
            if (menuItem.selected) {
              var offset = $(menuItem).offset();
              var left = offset.left;
              var top = offset.top;
              var width = $(menuItem).width();
              var subMenu = menuItem.subMenu;
              
              var newLeft = left + width - 5;
              $(subMenu).css({left: newLeft, top: top});
              $(subMenu).show();
            }
          }, 500);
        });
        $(menuItem).mouseleave(function() {this.selected = false;});
      }
			$(ul).append(menuItem);
		}

		return contextMenu;
	}
});

var contextMenuView;
$(function() {
	contextMenuView = new azkaban.ContextMenuView({el:$('#contextMenu')});
	contextMenuView.hide();
});