azkaban.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");
                        }
                        else {
                                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();
});