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 if (this.target) { 24 var menu = this; 25 $(document).ready(function() { 26 var targetComponent = rf.component(menu.target); 27 if (targetComponent && targetComponent.contextMenuAttach) { 28 targetComponent.contextMenuAttach(menu); 29 $('body').on('rich:ready' + menu.namespace, '[id="' + menu.target + '"]', function() {targetComponent.contextMenuAttach(menu)}); 30 } else { 31 rf.Event.bindById(menu.target, menu.options.showEvent, $.proxy(menu.__showHandler, menu), menu) 32 } 33 }); 34 } 35 this.element = $(rf.getDomElement(this.id)); 36 37 if (!rf.ui.MenuManager) { 38 rf.ui.MenuManager = {}; 39 } 40 this.menuManager = rf.ui.MenuManager; 41 }; 42 43 var buildCssClasses = function(cssRoot) { 44 var cssClasses = { 45 selectMenuCss : "rf-" +cssRoot+ "-sel", 46 unselectMenuCss : "rf-" +cssRoot+ "-unsel" 47 } 48 return cssClasses; 49 } 50 51 rf.ui.MenuBase.extend(rf.ui.Menu); 52 53 // define super class link 54 var $super = rf.ui.Menu.$super; 55 56 $.extend(rf.ui.Menu.prototype, rf.ui.MenuKeyNavigation); 57 58 $.extend(rf.ui.Menu.prototype, (function() { 59 return { 60 name : "Menu", 61 initiateGroups : function(groupOptions) { 62 for (var i in groupOptions) { 63 var groupId = groupOptions[i].id; 64 if (null != groupId) { 65 this.groupList[groupId] = new rf.ui.MenuGroup( 66 groupId, { 67 rootMenuId : this.id, 68 onshow : groupOptions[i].onshow, 69 onhide : groupOptions[i].onhide, 70 horizontalOffset: groupOptions[i].horizontalOffset, 71 verticalOffset: groupOptions[i].verticalOffset, 72 jointPoint : groupOptions[i].jointPoint, 73 direction : groupOptions[i].direction, 74 cssRoot : groupOptions[i].cssRoot 75 }); 76 } 77 } 78 }, 79 80 getTarget : function() { 81 return this.id + "_label"; 82 }, 83 84 show : function(e) { 85 if (this.menuManager.openedMenu != this.id) { 86 this.menuManager.shutdownMenu(); 87 this.menuManager.addMenuId(this.id); 88 this.__showPopup(); 89 } 90 }, 91 92 hide : function() { 93 this.__hidePopup(); 94 this.menuManager.deletedMenuId(); 95 }, 96 97 select : function() { 98 this.element.removeClass(this.options.cssClasses.unselectMenuCss); 99 this.element.addClass(this.options.cssClasses.selectMenuCss); 100 }, 101 unselect : function() { 102 this.element.removeClass(this.options.cssClasses.selectMenuCss); 103 this.element.addClass(this.options.cssClasses.unselectMenuCss); 104 }, 105 106 __overHandler : function() { 107 $super.__overHandler.call(this); 108 this.select(); 109 }, 110 111 __leaveHandler : function() { 112 $super.__leaveHandler.call(this); 113 this.unselect(); 114 }, 115 116 destroy : function() { 117 // clean up code here 118 this.detach(this.id); 119 120 if (this.target) { 121 rf.Event.unbindById(this.target, this.options.showEvent); 122 var targetComponent = rf.component(this.target); 123 if (targetComponent && 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);