Author: amarkhel Date: 2010-12-03 08:49:37 -0500 (Fri, 03 Dec 2010) New Revision: 20342 Added: sandbox/trunk/ui/dropdown-menu/ui/src/main/resources/META-INF/resources/org.richfaces/menugroup.js Modified: sandbox/trunk/ui/dropdown-menu/ui/src/main/resources/META-INF/resources/org.richfaces/menu.js sandbox/trunk/ui/dropdown-menu/ui/src/main/templates/menugroup.template.xml Log: drop-down menu and menu group client-code update https://jira.jboss.org/browse/RF-9785 Modified: sandbox/trunk/ui/dropdown-menu/ui/src/main/resources/META-INF/resources/org.richfaces/menu.js =================================================================== --- sandbox/trunk/ui/dropdown-menu/ui/src/main/resources/META-INF/resources/org.richfaces/menu.js 2010-12-03 13:42:22 UTC (rev 20341) +++ sandbox/trunk/ui/dropdown-menu/ui/src/main/resources/META-INF/resources/org.richfaces/menu.js 2010-12-03 13:49:37 UTC (rev 20342) @@ -1,20 +1,14 @@ (function($, rf) { rf.ui = rf.ui || {}; - var defaultPopupListOptions = { - showEvent: 'mouseover', - attachToBody: false, - positionOffset: [0, 0], - selectItemCss: "rf-ddm-itm-sel", - listCss: "rf-ddm-lst" - }; + var defaultOptions = { mode: 'server', attachToBody: false, positionOffset: [0, 0], showDelay: 50, hideDelay: 800, - verticalOffset: 10, - horisantalOffset: 10, + verticalOffset: 0, + horisantalOffset: 0, showEvent: 'mouseover', direction: "AA", jointPoint: "AA", @@ -26,8 +20,7 @@ }; //constructor definition - rf.ui.Menu = function(componentId, options) { - this.id = componentId; + rf.ui.Menu = function(componentId, options) { $super.constructor.call(this, componentId); this.id = componentId; this.groupList = new Array(); @@ -35,32 +28,20 @@ $.extend(this.options, defaultOptions, options || {}); this.attachToDom(componentId); - //bindEventHandlers.call(this); this.element = rf.getDomElement(this.id); this.selectItemCss = this.options.selectItemCss; this.unselectItemCss = this.options.unselectItemCss; - - //menu items list - //this.target = 'dd_menu_id_label_container'; - //popup for item menu list - //var base = rf.getDomElement(this.id); - + this.displayed = false; - //this.popup = $(rf.getDomElement(this.id + "_list")); - //this.initiatePopup(this.popup, base, this.options.showEvent); - //this.initiateMenu(this.popup, base, this.options.showEvent); this.options.attachTo = this.id; + this.options.positionOffset=[this.options.horisantalOffset, this.options.verticalOffset]; this.popupList = new RichFaces.ui.PopupList(this.id + "_list", this, this.options); this.selectedGroup = null; rf.Event.bindById(this.id, this.options.showEvent, $.proxy(this.___showHandler, this), this); - //rf.Event.bindById(this.id, 'mouseenter', $.proxy(this.__enterHandler, this), this); rf.Event.bindById(this.id, "mouseleave", $.proxy(this.__leaveHandler, this), this); - //rf.Event.bindById(this.id, "mouseover", $.proxy(this.__overHandler, this), this); - //rf.Event.bindById(this.id, "blur", $.proxy(this.__blurHandler, this), this); - // rf.Event.bindById(this.id, "focus", $.proxy(this.__focusHandler, this), this); - //this.popupList.show(); + }; rf.BaseComponent.extend(rf.ui.Menu); @@ -73,40 +54,17 @@ initiateGroups: function(groupOptions) { for (var i in groupOptions) { - var groupId = groupOptions[i].id; - var horizontalOffset = groupOptions[i].horizontalOffset; - var verticalOffset = groupOptions[i].verticalOffset; + var groupId = groupOptions[i].id; + var positionOffset = [groupOptions[i].horizontalOffset, groupOptions[i].verticalOffset] + var onshow = groupOptions[i].onshow; + var onhide = groupOptions[i].onhide; var eventType = "mouseover"; if (null != groupId) { - var options = defaultPopupListOptions; - options.attachTo = groupId; - var base = rf.getDomElement(groupId); - //var popup=$("#"+groupId+" .rf-ddm-sublst:first"); - var menu = this; - var popup = new RichFaces.ui.Popup(groupId + '_list', options); - this.groupList[groupId] = popup; - - rf.Event.bindById(groupId, "mouseenter", - function(event) { - var id = event.target.id; - if (menu.groupList[id]) { - menu.invokeEvent("groupshow", rf.getDomElement(menu.id), null); - //menu.invokeEvent("show", rf.getDomElement(id), null); - menu.groupList[id].popup.show(); - } - }, - this); - rf.Event.bindById(groupId, "mouseleave", - function(event) { - var id = event.target.id; - if (menu.groupList[id]) { - menu.invokeEvent("grouphide", rf.getDomElement(menu.id), null); - //menu.invokeEvent("hide", rf.getDomElement(id), null); - menu.groupList[id].popup.hide(); - } - }); + //var popup = new RichFaces.ui.Popup(groupId + '_list', options); + var group= new RichFaces.ui.MenuGroup(groupId,{parentMenuId: this.id, onshow: onshow, onhide: onhide}); + this.groupList[groupId] = group; } } }, @@ -114,11 +72,9 @@ submitForm: function(item) { var form = this.__getParentForm(item); if (this.options.mode == "server") { - console.info('server submit ' + item.attr('id')); //rf.submitForm(form, {selectedMenuItem: item.id}); } if (this.options.mode == "ajax") { - console.info('ajax submit'); //rf.ajax(item.id); } }, @@ -126,8 +82,7 @@ processItem: function(item) { if (item && item.atrr('id') && !this.isDisabled(item) && this.isGroup(item)) { this.invokeEvent("itemclick", rf.getDomElement(this.id), null); - this.hidePopup(); - //this.submitForm(item); + this.hidePopup(); } }, @@ -148,23 +103,10 @@ // item.addClass(this.unselectItemCss); // } - }, - isGroup: function(item) { - return 'object' == typeof this.groupList[item.atrr('id')]; - }, - isDisabled: function(item) { - return item.hasClass(this.options.disabledItemCss); - }, - isWithin: function(item){ - if (this.selectedGroup && item.parents().is('#'+this.selectedGroup)){ - return true; - } else { - return false; - } - }, + }, showPopup: function() { - if (!this.___isShown()){ + if (!this.__isShown()){ this.invokeEvent("show", rf.getDomElement(this.id), null); this.popupList.show(); this.displayed=true; @@ -172,61 +114,60 @@ }, hidePopup: function() { - for (var i in this.groupList) { - this.groupList[i].popup.hide(); - } - if (this.___isShown()){ + /* for (var i in this.groupList) { + this.groupList[i].hide(); + }*/ + if (this.__isShown()){ this.invokeEvent("hide", rf.getDomElement(this.id), null); this.popupList.hide(); this.displayed=false; } - this.popupList.hide(); + }, - ___isShown: function() { + + __isGroup: function(item) { + return 'object' == typeof this.groupList[item.atrr('id')]; + }, + + __isDisabled: function(item) { + return item.hasClass(this.options.disabledItemCss); + }, + + __isShown: function() { return this.displayed; }, + ___showHandler: function() { this.showTimeoutId = window.setTimeout($.proxy(function(){ this.showPopup(); - }, this), this.options.showDelay) + }, this), this.options.showDelay); }, + __getParentForm: function(item) { return item.parents("form")[0]; }, - __enterHandler: function(e) { - // this.showPopup(); - }, + + + __leaveHandler: function(e) { window.clearTimeout(this.showTimeoutId); this.hideTimeoutId = window.setTimeout($.proxy(function(){ this.hidePopup(); }, this), this.options.hideDelay); }, + __overHandler: function(e) { window.clearTimeout(this.hideTimeoutId); }, - __clickHandler: function(e) { - //this.showPopup(); - }, - __blurHandler: function(event) { -// this.timeoutId = window.setTimeout($.proxy(function(){ -// this.onblur(); -// this.hidePopup(); -// }, this), this.hidePopup); - - }, - __focusHandler: function(event) { - //window.clearTimeout(this.timeoutId); - - }, + destroy: function() { // clean up code here - - // call parent's destroy method + this.detach(this.id); + + // call parent's destroy method $super.destroy.call(this); } - }; })()); })(jQuery, RichFaces) \ No newline at end of file Added: sandbox/trunk/ui/dropdown-menu/ui/src/main/resources/META-INF/resources/org.richfaces/menugroup.js =================================================================== --- sandbox/trunk/ui/dropdown-menu/ui/src/main/resources/META-INF/resources/org.richfaces/menugroup.js (rev 0) +++ sandbox/trunk/ui/dropdown-menu/ui/src/main/resources/META-INF/resources/org.richfaces/menugroup.js 2010-12-03 13:49:37 UTC (rev 20342) @@ -0,0 +1,72 @@ +(function($, rf) { + rf.ui = rf.ui || {}; + var defaultOptions = { + showEvent: 'mouseover', + attachToBody: false, + positionOffset: [0, 0], + selectItemCss: "rf-ddm-itm-sel", + listCss: "rf-ddm-lst" + } + //constructor definition + rf.ui.MenuGroup = function(componentId, options) { + this.id = componentId; + $super.constructor.call(this, componentId); + this.attachToDom(componentId); + this.options = {}; + $.extend(this.options, defaultOptions, options || {}); + this.parentMenu = rf.$(this.options.parentMenuId); + this.popup = new RichFaces.ui.Popup(this.id + '_list', + {attachTo: this.id, + positionOffset: this.options.positionOffset, + attachToBody: this.options.attachToBody + } + ); + rf.Event.bindById(this.id, "mouseenter", $.proxy(this.__enterHandler,this), this); + rf.Event.bindById(this.id, "mouseleave",$.proxy(this.__leaveHandler,this), this); + this.shown = false; + }; + + rf.BaseComponent.extend(rf.ui.MenuGroup); + + // define super class link + var $super = rf.ui.MenuGroup.$super; + + $.extend(rf.ui.MenuGroup.prototype, (function() { + return { + name: "MenuGroup", + show: function() { + var id=this.id; + if (this.parentMenu.groupList[id] && !this.shown) { + this.parentMenu.invokeEvent("groupshow", rf.getDomElement(this.parentMenu.id), null); + this.invokeEvent("show", rf.getDomElement(id), null); + this.popup.show(); + this.shown=true; + } + }, + hide: function() { + var id=this.id; + var menu = this.parentMenu; + if (menu.groupList[this.id] && this.shown) { + menu.invokeEvent("grouphide", rf.getDomElement(menu.id), null); + this.invokeEvent("hide", rf.getDomElement(id), null); + this.popup.hide(); + this.shown = false; + } + }, + + __enterHandler: function(){ + this.show(); + }, + __leaveHandler: function(){ + this.hide(); + }, + destroy: function() { + // clean up code here + this.detach(this.id); + // call parent's destroy method + $super.destroy.call(this); + } + } + + })()); +})(jQuery, RichFaces) \ No newline at end of file Modified: sandbox/trunk/ui/dropdown-menu/ui/src/main/templates/menugroup.template.xml =================================================================== --- sandbox/trunk/ui/dropdown-menu/ui/src/main/templates/menugroup.template.xml 2010-12-03 13:42:22 UTC (rev 20341) +++ sandbox/trunk/ui/dropdown-menu/ui/src/main/templates/menugroup.template.xml 2010-12-03 13:49:37 UTC (rev 20342) @@ -12,6 +12,8 @@ <cdk:component-family>org.richfaces.DropDownMenu</cdk:component-family> <cdk:renderer-type>org.richfaces.MenuGroupRenderer</cdk:renderer-type> <cdk:renders-children>true</cdk:renders-children> + + <cdk:resource-dependency name="menugroup.js" library="org.richfaces" /> </cc:interface> <cc:implementation>