1 (function($, rf) { 2 rf.ui = rf.ui || {}; 3 4 var defaultOptions = { 5 positionType : "DROPDOWN", 6 direction : "AA", 7 jointPoint : "AA", 8 cssRoot : "ddm", 9 cssClasses : {} 10 }; 11 12 // constructor definition 13 rf.ui.Menu = function(componentId, options) { 14 this.options = {}; 15 $.extend(this.options, defaultOptions, options || {}); 16 $.extend(this.options.cssClasses, buildCssClasses.call(this, this.options.cssRoot)); 17 $super.constructor.call(this, componentId, this.options); 18 this.id = componentId; 19 this.namespace = this.namespace || "." + rf.Event.createNamespace(this.name, this.id); 20 this.groupList = new Array(); 21 22 this.target = this.getTarget(); 23 this.targetComponent = rf.component(this.target); 24 25 if (this.target) { 26 var menu = this; 27 $(document).ready(function() { 28 if (menu.targetComponent && menu.targetComponent.contextMenuAttach) { 29 menu.targetComponent.contextMenuAttach(menu); 30 $('body').on('rich:ready' + menu.namespace, '[id="' + menu.target + '"]', function() {menu.targetComponent.contextMenuAttach(menu)}); 31 } else { 32 rf.Event.bindById(menu.target, menu.options.showEvent, $.proxy(menu.__showHandler, menu), menu) 33 } 34 }); 35 } 36 this.element = $(rf.getDomElement(this.id)); 37 38 if (!rf.ui.MenuManager) { 39 rf.ui.MenuManager = {}; 40 } 41 this.menuManager = rf.ui.MenuManager; 42 }; 43 44 var buildCssClasses = function(cssRoot) { 45 var cssClasses = { 46 selectMenuCss : "rf-" +cssRoot+ "-sel", 47 unselectMenuCss : "rf-" +cssRoot+ "-unsel" 48 } 49 return cssClasses; 50 } 51 52 rf.ui.MenuBase.extend(rf.ui.Menu); 53 54 // define super class link 55 var $super = rf.ui.Menu.$super; 56 57 $.extend(rf.ui.Menu.prototype, rf.ui.MenuKeyNavigation); 58 59 $.extend(rf.ui.Menu.prototype, (function() { 60 return { 61 name : "Menu", 62 initiateGroups : function(groupOptions) { 63 for (var i in groupOptions) { 64 var groupId = groupOptions[i].id; 65 if (null != groupId) { 66 this.groupList[groupId] = new rf.ui.MenuGroup( 67 groupId, { 68 rootMenuId : this.id, 69 onshow : groupOptions[i].onshow, 70 onhide : groupOptions[i].onhide, 71 horizontalOffset: groupOptions[i].horizontalOffset, 72 verticalOffset: groupOptions[i].verticalOffset, 73 jointPoint : groupOptions[i].jointPoint, 74 direction : groupOptions[i].direction, 75 cssRoot : groupOptions[i].cssRoot 76 }); 77 } 78 } 79 }, 80 81 getTarget : function() { 82 return this.id + "_label"; 83 }, 84 85 show : function(e) { 86 if (this.menuManager.openedMenu != this.id) { 87 this.menuManager.shutdownMenu(); 88 this.menuManager.addMenuId(this.id); 89 this.__showPopup(); 90 } 91 }, 92 93 hide : function() { 94 this.__hidePopup(); 95 this.menuManager.deletedMenuId(); 96 }, 97 98 select : function() { 99 this.element.removeClass(this.options.cssClasses.unselectMenuCss); 100 this.element.addClass(this.options.cssClasses.selectMenuCss); 101 }, 102 unselect : function() { 103 this.element.removeClass(this.options.cssClasses.selectMenuCss); 104 this.element.addClass(this.options.cssClasses.unselectMenuCss); 105 }, 106 107 __overHandler : function() { 108 $super.__overHandler.call(this); 109 this.select(); 110 }, 111 112 __leaveHandler : function() { 113 $super.__leaveHandler.call(this); 114 this.unselect(); 115 }, 116 117 destroy : function() { 118 // clean up code here 119 this.detach(this.id); 120 121 if (this.target) { 122 rf.Event.unbindById(this.target, this.options.showEvent); 123 if (this.targetComponent && this.targetComponent.contextMenuAttach) { 124 $('body').off('rich:ready' + this.namespace, '[id="' + this.target + '"]'); 125 } 126 } 127 128 // call parent's destroy method 129 $super.destroy.call(this); 130 131 } 132 }; 133 })()); 134 135 rf.ui.MenuManager = { 136 openedMenu : null, 137 138 activeSubMenu : null, 139 140 addMenuId : function(menuId) { 141 this.openedMenu = menuId; 142 }, 143 144 deletedMenuId : function() { 145 this.openedMenu = null; 146 }, 147 148 shutdownMenu : function() { 149 if (this.openedMenu != null) { 150 rf.component(rf.getDomElement(this.openedMenu)).hide(); 151 } 152 this.deletedMenuId(); 153 }, 154 155 setActiveSubMenu : function(submenu) { 156 this.activeSubMenu = submenu; 157 }, 158 159 getActiveSubMenu : function() { 160 return this.activeSubMenu; 161 } 162 } 163 })(RichFaces.jQuery, RichFaces);