Author: abelevich Date: 2009-10-08 11:13:47 -0400 (Thu, 08 Oct 2009) New Revision: 15705 Modified: branches/community/3.3.X/ui/menu-components/src/main/java/org/richfaces/renderkit/html/MenuItemRendererBase.java branches/community/3.3.X/ui/menu-components/src/main/java/org/richfaces/renderkit/html/MenuItemRendererDelegate.java branches/community/3.3.X/ui/menu-components/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js branches/community/3.3.X/ui/menu-components/src/main/templates/org/richfaces/htmlMenuItem.jspx Log: https://jira.jboss.org/jira/browse/RF-7956 Modified: branches/community/3.3.X/ui/menu-components/src/main/java/org/richfaces/renderkit/html/MenuItemRendererBase.java =================================================================== --- branches/community/3.3.X/ui/menu-components/src/main/java/org/richfaces/renderkit/html/MenuItemRendererBase.java 2009-10-08 15:01:26 UTC (rev 15704) +++ branches/community/3.3.X/ui/menu-components/src/main/java/org/richfaces/renderkit/html/MenuItemRendererBase.java 2009-10-08 15:13:47 UTC (rev 15705) @@ -158,7 +158,7 @@ return paramsMap; } - private boolean isNestedInMenu(UIComponent component) { + protected boolean isNestedInMenu(UIComponent component) { for (UIComponent c = component; c != null; c = c.getParent()) { if (c instanceof MenuComponent) { return true; @@ -168,6 +168,14 @@ return false; } + protected String collectItemInlineStyles(FacesContext context, UIMenuItem menuItem, boolean isOnmouseover) { + return delegate.collectInlineStyles(context, menuItem, isOnmouseover); + } + + protected String collectItemClasses(FacesContext context, UIMenuItem menuItem, boolean isOnmouseover) { + return delegate.collectClasses(context, menuItem, isOnmouseover); + } + public void initializeResources(FacesContext context, UIMenuItem menuItem) throws IOException { ComponentVariables variables = Modified: branches/community/3.3.X/ui/menu-components/src/main/java/org/richfaces/renderkit/html/MenuItemRendererDelegate.java =================================================================== --- branches/community/3.3.X/ui/menu-components/src/main/java/org/richfaces/renderkit/html/MenuItemRendererDelegate.java 2009-10-08 15:01:26 UTC (rev 15704) +++ branches/community/3.3.X/ui/menu-components/src/main/java/org/richfaces/renderkit/html/MenuItemRendererDelegate.java 2009-10-08 15:13:47 UTC (rev 15705) @@ -83,6 +83,28 @@ } } + protected String collectInlineStyles(FacesContext context, UIComponent menuItem, boolean isOnmouseover) { + String style = (String) menuItem.getAttributes().get("style"); + String selectStyle = (String) menuItem.getAttributes().get("selectStyle"); + + if (isOnmouseover) { + return concatStyles(style, selectStyle); + } else { + return style; + } + } + + protected String collectClasses(FacesContext context, UIComponent component, boolean isOnmouseover) { + String styleClass = (String) component.getAttributes().get("styleClass"); + String selectClass = (String) component.getAttributes().get("selectClass"); + + if (isOnmouseover) { + return concatStyles(styleClass, selectClass); + } else { + return styleClass; + } + } + protected UIComponent getParentMenu(FacesContext context, UIComponent menuItem) { UIComponent parent = menuItem.getParent(); while (null != parent) { Modified: branches/community/3.3.X/ui/menu-components/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js =================================================================== --- branches/community/3.3.X/ui/menu-components/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js 2009-10-08 15:01:26 UTC (rev 15704) +++ branches/community/3.3.X/ui/menu-components/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js 2009-10-08 15:13:47 UTC (rev 15705) @@ -1,6 +1,7 @@ if(!window.RichFaces) window.RichFaces = {}; if(!RichFaces.Menu) RichFaces.Menu = {}; + /** * Fixes IE bug with incorrect layer width when set to auto * @param layer @@ -1297,6 +1298,46 @@ return within; }; +RichFaces.Menu.Utils = {}; + +RichFaces.Menu.Utils.itemMouseOut = function(event, element, parentClasses, itemClasses) { + + if(!itemClasses && RichFaces.Menu.isWithin(event, element)){ + return; + } + + element.className = 'rich-menu-item rich-menu-item-enabled ' + (parentClasses.styleClass || '') + " " + (itemClasses != null ? itemClasses.itemClass || '' : ''); + element.style.cssText = (parentClasses.style || '') + "; " + (itemClasses != null ? itemClasses.itemStyle || '' : ''); + var icon = typeof element.getIcon == 'fuction' ? element.getIcon() : RichFaces.Menu.Utils.getIcon(element); + icon.className='rich-menu-item-icon ' + (parentClasses.iconClass || ''); + var label = typeof element.getLabel == 'fuction' ? element.getLabel() : RichFaces.Menu.Utils.getLabel(element); + Element.removeClassName(label, 'rich-menu-item-label-selected'); + +} + +RichFaces.Menu.Utils.itemMouseOver = function(event, element, parentClasses, itemClasses) { + + if(!itemClasses && RichFaces.Menu.isWithin(event, element)){ + return; + } + + element.className = 'rich-menu-item rich-menu-item-hover ' + (parentClasses.styleClass || '') + " " + (parentClasses.selectClass || '') + " " + (itemClasses != null ? itemClasses.selectItemClass || '':''); + element.style.cssText = (parentClasses.style || '') + "; " + (itemClasses != null ? itemClasses.itemStyle || '' : '') + "; "+ (parentClasses.selectStyle || '') + "; " + (itemClasses != null ? itemClasses.selectItemStyle || '' : ''); + var icon = typeof element.getIcon == 'fuction' ? element.getIcon() : RichFaces.Menu.Utils.getIcon(element); + icon.className='rich-menu-item-icon rich-menu-item-icon-selected ' + (parentClasses.iconClass || ''); + var label = typeof element.getLabel == 'fuction' ? element.getLabel() : RichFaces.Menu.Utils.getLabel(element); + Element.addClassName(label, 'rich-menu-item-label-selected'); + +} + +RichFaces.Menu.Utils.getIcon = function (element) { + return $(element.id + ':icon'); +} + +RichFaces.Menu.Utils.getLabel = function (element) { + return $(element.id + ':anchor'); +} + RichFaces.Menu.Item = Class.create({ initialize: function(id, menu, options) { this.options = { @@ -1352,10 +1393,13 @@ return $(this.id); }, getIcon: function() { - return $(this.id + ":icon"); + //return $(this.id + ":icon"); + return RichFaces.Menu.Utils.getIcon(this); + }, getLabel: function() { - return $(this.id + ":anchor"); + //return $(this.id + ":anchor"); + return RichFaces.Menu.Utils.getLabel(this); }, getInlineStyle: function() { return this.options.style || ""; @@ -1400,13 +1444,15 @@ if (this.options.flagGroup != 1) { var menuOptions = this.menu.options; + RichFaces.Menu.Utils.itemMouseOver(event, element, this.options, menuOptions); + /* var menuOptions = this.menu.options; element.className = 'rich-menu-item rich-menu-item-hover ' + (this.options.styleClass || "") + " " + (this.options.selectClass || "") + " " + (menuOptions.selectItemClass || ""); element.style.cssText = (this.options.style || "") + "; " + (menuOptions.itemStyle || "") + (this.options.selectStyle || "") + "; " + (menuOptions.selectItemStyle || ""); this.getIcon().className='rich-menu-item-icon rich-menu-item-icon-selected ' + (this.options.iconClass || ''); - Element.addClassName(this.getLabel(), 'rich-menu-item-label-selected'); + Element.addClassName(this.getLabel(), 'rich-menu-item-label-selected'); */ } }, onmouseout : function(event) { @@ -1433,12 +1479,16 @@ RichFaces.Menu.Items.onmouseout(this); if (this.options.flagGroup != 1) { + var menuOptions = this.menu.options; + RichFaces.Menu.Utils.itemMouseOut(event, element, this.options, menuOptions); + /* + var menuOptions = this.menu.options; element.className = 'rich-menu-item rich-menu-item-enabled ' + (this.options.styleClass || "") + " " + (menuOptions.itemClass || ""); element.style.cssText = (this.options.style || "") + "; " + (menuOptions.itemStyle || ""); this.getIcon().className='rich-menu-item-icon ' + (this.options.iconClass || ""); - Element.removeClassName(this.getLabel(), 'rich-menu-item-label-selected'); + Element.removeClassName(this.getLabel(), 'rich-menu-item-label-selected'); */ } }, highLightGroup: function(light) { @@ -1529,4 +1579,5 @@ element.className = 'rich-menu-group rich-menu-group-enabled ' + (menuGroupHoverClass ? menuGroupHoverClass : ''); element.style.cssText = menuGroupStyle; -} \ No newline at end of file +} + Modified: branches/community/3.3.X/ui/menu-components/src/main/templates/org/richfaces/htmlMenuItem.jspx =================================================================== --- branches/community/3.3.X/ui/menu-components/src/main/templates/org/richfaces/htmlMenuItem.jspx 2009-10-08 15:01:26 UTC (rev 15704) +++ branches/community/3.3.X/ui/menu-components/src/main/templates/org/richfaces/htmlMenuItem.jspx 2009-10-08 15:13:47 UTC (rev 15705) @@ -35,7 +35,7 @@ <jsp:scriptlet><![CDATA[ - if (((org.richfaces.component.UIMenuItem) component).isDisabled()) { + if (((org.richfaces.component.UIMenuItem) component).isDisabled()) { ]]></jsp:scriptlet> @@ -45,7 +45,7 @@ onclick="Event.stop(event);" > <jsp:scriptlet><![CDATA[ - } else { + } else if(!isNestedInMenu(component)) { /*String onselect = (String) component.getAttributes().get("onselect"); if(null!=onselect&&onselect.length()>0){ onselect = onselect+";"; @@ -54,11 +54,49 @@ } variables.setVariable("onselect",onselect); */ + + String itemHoverClass = collectItemClasses(context, component, true); + String itemHoverStyle = collectItemInlineStyles(context, component, true); + variables.setVariable("itemHoverClass",itemHoverClass); + variables.setVariable("itemHoverStyles",itemHoverStyle); + + + String itemClass = collectItemClasses(context, component, false); + String itemStyle = collectItemInlineStyles(context, component, false); + variables.setVariable("itemClass",itemClass); + variables.setVariable("itemStyles",itemStyle); + + ]]></jsp:scriptlet> + <c:scriptObject var="onmouseoutClasses"> + <c:scriptOption name="styleClass" value="#{itemClass}"/> + <c:scriptOption name="style" value="#{itemStyles}"/> + <c:scriptOption attributes="iconClass"/> + </c:scriptObject> + <c:scriptObject var="onmouseoverClasses"> + <c:scriptOption name="styleClass" value="#{itemHoverClass}"/> + <c:scriptOption name="style" value="#{itemHoverStyles}"/> + <c:scriptOption attributes="iconClass"/> + </c:scriptObject> + <div id="#{clientId}" class="#{menuItemClass}" + onmouseout="RichFaces.Menu.Utils.itemMouseOut(event, this, #{onmouseoutClasses});" + onmouseover="RichFaces.Menu.Utils.itemMouseOver(event, this, #{onmouseoverClasses});" + onclick="#{onclick}" + style="#{menuItemStyle}"> + <f:call name="utils.encodeAttributes"> + <f:parameter value="onmousemove,onmousedown,onmouseup" /> + </f:call> + <jsp:scriptlet><![CDATA[ + } else { + ]]></jsp:scriptlet> + + <div id="#{clientId}" + class="#{menuItemClass}" + onclick="#{onclick}" style="#{menuItemStyle}"> @@ -68,10 +106,9 @@ <jsp:scriptlet><![CDATA[ } - ]]></jsp:scriptlet> - - - <span id="#{clientId}:icon" + ]]></jsp:scriptlet> + + <span id="#{clientId}:icon" class="rich-menu-item-icon #{iconDisabledClasses} #{component.attributes['iconClass']}" style="#{component.attributes['iconStyle']}"> @@ -99,14 +136,18 @@ </span> <jsp:scriptlet><![CDATA[ - if (((org.richfaces.component.UIMenuItem) component).isDisabled()) { + if (((org.richfaces.component.UIMenuItem) component).isDisabled()) { ]]></jsp:scriptlet> </div> <jsp:scriptlet><![CDATA[ - } else { + } if(isNestedInMenu(component)){ ]]></jsp:scriptlet> </div> <jsp:scriptlet><![CDATA[ + }else { + ]]></jsp:scriptlet> + </div> + <jsp:scriptlet><![CDATA[ } ]]></jsp:scriptlet> </f:root>