Author: amarkhel Date: 2011-01-06 12:50:51 -0500 (Thu, 06 Jan 2011) New Revision: 20913 Added: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menu-base.js trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menuKeyNavigation.js trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menuitem.js Modified: trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractDropDownMenu.java trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractMenuGroup.java trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/DropDownMenuRendererBase.java trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/dropdownmenu.ecss trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menu.js trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menugroup.js trunk/ui/output/ui/src/main/templates/dropdownmenu.template.xml trunk/ui/output/ui/src/main/templates/menugroup.template.xml trunk/ui/output/ui/src/main/templates/menuitem.template.xml Log: https://issues.jboss.org/browse/RF-10107 Drop down menu: keyboard navigation Modified: trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractDropDownMenu.java =================================================================== --- trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractDropDownMenu.java 2011-01-06 17:14:29 UTC (rev 20912) +++ trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractDropDownMenu.java 2011-01-06 17:50:51 UTC (rev 20913) @@ -19,7 +19,7 @@ public static final String COMPONENT_FAMILY = "org.richfaces.DropDownMenu"; - @Attribute + @Attribute (defaultValue = "click") public abstract String getShowEvent(); @Attribute(defaultValue = "server") @@ -37,6 +37,12 @@ @Attribute(defaultValue = "250") public abstract int getPopupWith(); + @Attribute(defaultValue = "0") + public abstract int getHorizontalOffset(); + + @Attribute(defaultValue = "0") + public abstract int getVerticalOffset(); + //TODO is it correct or cdk issue @Attribute(defaultValue = "org.richfaces.component.Positioning.DEFAULT") public abstract Positioning getJointPoint(); Modified: trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractMenuGroup.java =================================================================== --- trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractMenuGroup.java 2011-01-06 17:14:29 UTC (rev 20912) +++ trunk/ui/output/ui/src/main/java/org/richfaces/component/AbstractMenuGroup.java 2011-01-06 17:50:51 UTC (rev 20913) @@ -41,15 +41,19 @@ @Attribute public abstract String getStyle(); -// @Attribute(defaultValue = "auto") -// public abstract String getDirection(); -// -// @Attribute(defaultValue = "0") -// public abstract String getVerticalOffset(); -// -// @Attribute(defaultValue = "0") -// public abstract String getHorizontalOffset(); + @Attribute(defaultValue = "org.richfaces.component.Positioning.DEFAULT") + public abstract Positioning getDirection(); + //TODO is it correct or cdk issue + @Attribute(defaultValue = "org.richfaces.component.Positioning.DEFAULT") + public abstract Positioning getJointPoint(); + + @Attribute(defaultValue = "0") + public abstract String getVerticalOffset(); + + @Attribute(defaultValue = "0") + public abstract String getHorizontalOffset(); + @Attribute(events = @EventName("show")) public abstract String getOnshow(); Modified: trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/DropDownMenuRendererBase.java =================================================================== --- trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/DropDownMenuRendererBase.java 2011-01-06 17:14:29 UTC (rev 20912) +++ trunk/ui/output/ui/src/main/java/org/richfaces/renderkit/html/DropDownMenuRendererBase.java 2011-01-06 17:50:51 UTC (rev 20913) @@ -28,6 +28,8 @@ @ResourceDependency(name = "richfaces-event.js"), @ResourceDependency(library = "org.richfaces", name = "popup.js"), @ResourceDependency(library = "org.richfaces", name = "dropdownmenu.ecss", target="head"), + @ResourceDependency(library = "org.richfaces", name = "menuKeyNavigation.js"), + @ResourceDependency(library = "org.richfaces", name = "menu-base.js"), @ResourceDependency(library = "org.richfaces", name = "menu.js"), @ResourceDependency(library = "org.richfaces", name = "popupList.js")}) public abstract class DropDownMenuRendererBase extends RendererBase { @@ -86,6 +88,11 @@ map.put("id", group.getClientId()); RenderKitUtils.addToScriptHash(map, "onhide", group.getOnhide(), null, ScriptHashVariableWrapper.eventHandler); RenderKitUtils.addToScriptHash(map, "onshow", group.getOnshow(), null, ScriptHashVariableWrapper.eventHandler); + RenderKitUtils.addToScriptHash(map, "verticalOffset", group.getVerticalOffset(), "0"); + RenderKitUtils.addToScriptHash(map, "horizontalOffset", group.getHorizontalOffset(), "0"); + RenderKitUtils.addToScriptHash(map, "jointPoint", group.getJointPoint(), org.richfaces.component.Positioning.DEFAULT); + RenderKitUtils.addToScriptHash(map, "direction", group.getDirection(), org.richfaces.component.Positioning.DEFAULT); + results.add(map); } } Modified: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/dropdownmenu.ecss =================================================================== --- trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/dropdownmenu.ecss 2011-01-06 17:14:29 UTC (rev 20912) +++ trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/dropdownmenu.ecss 2011-01-06 17:50:51 UTC (rev 20913) @@ -28,6 +28,7 @@ min-width:250px; position:absolute; z-index:10; + outline: none; } .rf-ddm-sublst { position:absolute; Added: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menu-base.js =================================================================== --- trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menu-base.js (rev 0) +++ trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menu-base.js 2011-01-06 17:50:51 UTC (rev 20913) @@ -0,0 +1,238 @@ +(function($, rf) { + + rf.ui = rf.ui || {}; + + var defaultOptions = { + mode : 'server', + attachToBody : false, + showDelay : 50, + hideDelay : 300, + verticalOffset : 0, + horisantalOffset : 0, + showEvent : 'mouseover', + positionOffset : [0, 0], + itemCss : "rf-ddm-itm", + selectItemCss : "rf-ddm-itm-sel", + unselectItemCss : "rf-ddm-itm-unsel", + disabledItemCss : "rf-ddm-itm-dis", + listCss : "rf-ddm-lst", + listContainerCss : "rf-ddm-lst-bg" + }; + + rf.ui.MenuBase = function(componentId, options) { + $super.constructor.call(this, componentId, options); + this.id = componentId; + this.namespace = this.namespace || "." + + rf.Event.createNamespace(this.name, this.id); + + this.options = {}; + $.extend(this.options, defaultOptions, options || {}); + this.attachToDom(componentId); + + this.element = rf.getDomElement(this.id); + + this.displayed = false; + + this.options.attachTo = this.id; + this.options.attachToBody = false; + + this.options.positionOffset = [this.options.horisantalOffset, + this.options.verticalOffset]; + this.popup = new RichFaces.ui.Popup(this.id + "_list", { + attachTo : this.id, + direction : this.options.direction, + jointPoint : this.options.jointPoint, + positionType : this.options.positionType, + positionOffset : this.options.positionOffset, + attachToBody : this.options.attachToBody + }); + + this.selectedGroup = null; + + rf.Event.bindById(this.id, this.options.showEvent, $.proxy( + this.__showHandler, this), this); + rf.Event.bindById(this.id, "mouseenter", $.proxy(this.__overHandler, + this), this); + rf.Event.bindById(this.id, "mouseleave", $.proxy(this.__leaveHandler, + this), this); + + this.popupElement = rf.getDomElement(this.popup.id); + this.popupElement.tabIndex = -1; + + this.__updateItemsList(); + + rf.Event.bind(this.items, "mouseenter", $.proxy( + this.__itemMouseEnterHandler, this), this); + + this.currentSelectedItemIndex = -1; + var navEventHandlers; + navEventHandlers = {}; + navEventHandlers["keydown" + this.namespace] = this.__keydownHandler; + + rf.Event.bind(this.popupElement, navEventHandlers, this); + } + + rf.BaseComponent.extend(rf.ui.MenuBase); + + // define super class link + var $super = rf.ui.MenuBase.$super; + + $.extend(rf.ui.MenuBase.prototype, (function() { + return { + name : "MenuBase", + + show : function() { + this.__showPopup(); + }, + + hide : function() { + this.__hidePopup(); + }, + + processItem : function(item) { + if (item && item.attr('id') && !this.__isDisabled(item) + && !this.__isGroup(item)) { + this.invokeEvent("itemclick", rf.getDomElement(this.id), + null); + this.hide(); + } + }, + + activateItem : function(menuItemId) { + var item = $(RichFaces.getDomElement(menuItemId)); + rf.Event.fireById(item.attr('id'), 'click'); + }, + + __showPopup : function() { + if (!this.__isShown()) { + this.invokeEvent("show", rf.getDomElement(this.id), null); + this.popup.show(); + this.displayed = true; + rf.ui.MenuManager.setActiveSubMenu(rf.$(this.element)); + } + this.popupElement.focus(); + + }, + + __hidePopup : function() { + /* + * for (var i in this.groupList) { this.groupList[i].hide(); } + */ + if (this.__isShown()) { + this.invokeEvent("hide", rf.getDomElement(this.id), null); + this.__closeChildGroups(); + this.popup.hide(); + this.displayed = false; + this.__deselectCurrentItem(); + this.currentSelectedItemIndex = -1; + parentMenu = rf.$(this.__getParentMenu()); + parentMenu.popupElement.focus(); + rf.ui.MenuManager.setActiveSubMenu(parentMenu); + } + + }, + + __closeChildGroups : function() { + var i = 0; + for (i in this.items) { + menuItem = this.items.eq(i); + if (this.__isGroup(menuItem)) { + rf.$(menuItem).hide(); + } + } + }, + + __getParentMenuFromItem : function(item) { + if (item) + menu = item.parents('div.rf-ddm-itm') + .has('div.rf-ddm-lst-bg').eq(1); + if (menu && menu.length > 0) + return menu; + else { + menu = item.parents('div.rf-ddm-lbl'); + if (menu && menu.length > 0) + return menu; + else + return null; + } + }, + + __getParentMenu : function() { + menu = $(this.element).parents('div.rf-ddm-itm') + .has('div.rf-ddm-lst-bg').eq(0); + if (menu && menu.length > 0) + return menu; + else { + var item = this.items.eq(0); + return this.__getParentMenuFromItem(item); + } + }, + + __isGroup : function(item) { + var group = item.find('div.' + this.options.listCss); + if (group.length > 0) { + return true; + } + return false; + }, + + __isDisabled : function(item) { + return item.hasClass(this.options.disabledItemCss); + }, + + __isShown : function() { + return this.displayed; + + }, + + __itemMouseEnterHandler : function(e) { + var item = this.__getItemFromEvent(e); + if (item) { + //this.__selectItem(item); + if (this.currentSelectedItemIndex != this.items.index(item)) { + this.__deselectCurrentItem(); + this.currentSelectedItemIndex = this.items.index(item); + } + } + }, + + __selectItem : function(item) { + if (!rf.$(item).isSelected) { + + rf.$(item).select(); + } + }, + + __getItemFromEvent : function(e) { + return $(e.target).closest("." + this.options.itemCss, + e.currentTarget).eq(0); + }, + + __showHandler : function() { + this.showTimeoutId = window.setTimeout($.proxy(function() { + this.show(); + }, this), this.options.showDelay); + }, + + __leaveHandler : function(e) { + window.clearTimeout(this.showTimeoutId); + this.hideTimeoutId = window.setTimeout($.proxy(function() { + this.hide(); + }, this), this.options.hideDelay); + }, + + __overHandler : function(e) { + window.clearTimeout(this.hideTimeoutId); + }, + + 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 Property changes on: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menu-base.js ___________________________________________________________________ Name: svn:mime-type + text/plain Modified: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menu.js =================================================================== --- trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menu.js 2011-01-06 17:14:29 UTC (rev 20912) +++ trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menu.js 2011-01-06 17:50:51 UTC (rev 20913) @@ -4,223 +4,142 @@ var defaultOptions = { mode : 'server', attachToBody : false, - positionOffset : [ 0, 0 ], showDelay : 50, hideDelay : 300, verticalOffset : 0, horisantalOffset : 0, - showEvent : 'mouseover', + showEvent : 'click', + positionOffset : [0, 0], direction : "AA", jointPoint : "AA", + positionType : "DROPDOWN", itemCss : "rf-ddm-itm", selectItemCss : "rf-ddm-itm-sel", unselectItemCss : "rf-ddm-itm-unsel", disabledItemCss : "rf-ddm-itm-dis", - listCss : "rf-ddm-lst" - }; + listCss : "rf-ddm-lst", + listContainerCss : "rf-ddm-lst-bg" + } // constructor definition rf.ui.Menu = function(componentId, options) { - $super.constructor.call(this, componentId); - this.id = componentId; - this.groupList = new Array(); this.options = {}; $.extend(this.options, defaultOptions, options || {}); - this.attachToDom(componentId); + $super.constructor.call(this, componentId, this.options); + this.id = componentId; + this.namespace = this.namespace || "." + + rf.Event.createNamespace(this.name, this.id); + this.groupList = new Array(); - this.element = rf.getDomElement(this.id); - - this.selectItemCss = this.options.selectItemCss; - this.unselectItemCss = this.options.unselectItemCss; - - this.displayed = false; - - 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.__overHandler, - this), this); - rf.Event.bindById(this.id, "mouseleave", $.proxy(this.__leaveHandler, - this), this); + this.attachToDom(componentId); if (!rf.ui.MenuManager) rf.ui.MenuManager = {}; - this.menuManager=rf.ui.MenuManager; - + this.menuManager = rf.ui.MenuManager; }; - rf.BaseComponent.extend(rf.ui.Menu); + rf.ui.MenuBase.extend(rf.ui.Menu); // define super class link var $super = rf.ui.Menu.$super; - $.extend(rf.ui.Menu.prototype, (function() { - return { - name : "Menu", - initiateGroups : function(groupOptions) { - for ( var i in groupOptions) { - var groupId = groupOptions[i].id; - var positionOffset = [ groupOptions[i].horizontalOffset, - groupOptions[i].verticalOffset ] - var onshow = groupOptions[i].onshow; - var onhide = groupOptions[i].onhide; + $.extend(rf.ui.Menu.prototype, rf.ui.MenuKeyNavigation); - var eventType = "mouseover"; + $.extend(rf.ui.Menu.prototype, (function() { + return { + name : "Menu", + initiateGroups : function(groupOptions) { - if (null != groupId) { - // 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; - } - } - }, + for (var i in groupOptions) { + var groupId = groupOptions[i].id; + var positionOffset = [ + groupOptions[i].horizontalOffset, + groupOptions[i].verticalOffset] + var onshow = groupOptions[i].onshow; + var onhide = groupOptions[i].onhide; - submitForm : function(item) { - var form = this.__getParentForm(item); - if (this.options.mode == "server") { - rf.submitForm(form, {selectedMenuItem: item.id}); - } - if (this.options.mode == "ajax") { - rf.ajax(item.id); - } - }, + var eventType = "mouseover"; - processItem : function(item) { - if (item && item.attr('id') && !this.__isDisabled(item) - && !this.__isGroup(item)) { - this.invokeEvent("itemclick", rf.getDomElement(this.id), - null); - this.hide(); - } - }, - - activateItem : function(menuItemId){ - var item=$(RichFaces.getDomElement(menuItemId)); - this.processItem(item); - }, + if (null != groupId) { + // var popup = new RichFaces.ui.Popup(groupId + + // '_list', options); + var group = new RichFaces.ui.MenuGroup(groupId, + { + rootMenuId : this.id, + onshow : onshow, + onhide : onhide + }); + this.groupList[groupId] = group; + } + } + }, - selectItem : function(item) { - // if(item.attr('id') && !this.isDisabled(item)){ - // item.addClass(this.selectItemCss); - // if(item.attr('id').search('group') != -1){ - // this.selectedGroup=item.attr('id'); - // } else { - // this.selectedGroup = null; - // } - // } - }, - unselectItem : function(item) { - // var nextItem = this.popupList.nextSelectItem(); - // if (item.attr('id') && (nextItem.attr('id') != - // this.selectedGroup) && !this.isWithin(nextItem) ){ - // item.removeClass(this.selectItemCss); - // item.addClass(this.unselectItemCss); - // } + submitForm : function(item) { + var form = this.__getParentForm(item); + if (this.options.mode == "server") { + rf.submitForm(form, { + selectedMenuItem : item.id + }); + } + if (this.options.mode == "ajax") { + rf.ajax(item.id); + } + }, - }, - - show: function() { - this.menuManager.shutdownMenu(); - this.menuManager.addMenuId(this.id); - this.__showPopup(); - }, - - hide: function() { - this.__hidePopup(); - this.menuManager.deletedMenuId(); - }, + show : function() { + if (this.menuManager.openedMenu != this.id) { + this.menuManager.shutdownMenu(); + this.menuManager.addMenuId(this.id); + this.__showPopup(); + } + this.popupElement.focus(); + }, - __showPopup : function() { - if (!this.__isShown()) { - this.invokeEvent("show", rf.getDomElement(this.id), null); - this.popupList.show(); - this.displayed = true; - } - }, + hide : function() { + this.__hidePopup(); + this.menuManager.deletedMenuId(); + }, - __hidePopup : function() { - /* - * 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; - } + __getParentForm : function(item) { + return item.parents("form")[0]; + }, - }, + destroy : function() { + // clean up code here + this.detach(this.id); - __isGroup : function(item) { - return 'object' == typeof this.groupList[item.attr('id')]; - }, + // call parent's destroy method + $super.destroy.call(this); + } + }; + })()); - __isDisabled : function(item) { - return item.hasClass(this.options.disabledItemCss); - }, + rf.ui.MenuManager = { + openedMenu : null, - __isShown : function() { - return this.displayed; + activeSubMenu : null, - }, - - ___showHandler : function() { - this.showTimeoutId = window.setTimeout($.proxy(function() { - this.show(); - }, this), this.options.showDelay); - }, - - __getParentForm : function(item) { - return item.parents("form")[0]; - }, - - __leaveHandler : function(e) { - window.clearTimeout(this.showTimeoutId); - this.hideTimeoutId = window.setTimeout($.proxy(function() { - this.hide(); - }, this), this.options.hideDelay); - }, - - __overHandler : function(e) { - window.clearTimeout(this.hideTimeoutId); - }, - - destroy : function() { - // clean up code here - this.detach(this.id); - - // call parent's destroy method - $super.destroy.call(this); - } - }; - })()); - - rf.ui.MenuManager = { - openedMenu: null, - - addMenuId: function(menuId) { + addMenuId : function(menuId) { this.openedMenu = menuId; - }, - - deletedMenuId: function () { + + deletedMenuId : function() { this.openedMenu = null; }, - - shutdownMenu: function () { - if (this.openedMenu != null){ + + shutdownMenu : function() { + if (this.openedMenu != null) { rf.$(rf.getDomElement(this.openedMenu)).hide(); } this.deletedMenuId(); + }, + + setActiveSubMenu : function(submenu) { + this.activeSubMenu = submenu; + }, + + getActiveSubMenu : function() { + return this.activeSubMenu; } - + } })(jQuery, RichFaces) \ No newline at end of file Added: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menuKeyNavigation.js =================================================================== --- trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menuKeyNavigation.js (rev 0) +++ trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menuKeyNavigation.js 2011-01-06 17:50:51 UTC (rev 20913) @@ -0,0 +1,176 @@ +(function ($, rf) { + + rf.ui = rf.ui || {}; + //rf.ui.MenuKeyNavigation = rf.ui.MenuKeyNavigation || {}; + + + rf.ui.MenuKeyNavigation={ + + __updateItemsList : function() { + var items = $('.'+this.options.listContainerCss+':first',this.popup.popup).find('>.'+this.options.itemCss) + .not('.'+this.options.disabledItemCss); + return (this.items = items); + }, + + __selectPrev : function() { + if (-1 == this.currentSelectedItemIndex){ + this.currentSelectedItemIndex=this.items.length-1; + } else { + this.__deselectCurrentItem(); + } + + if (this.currentSelectedItemIndex > 0){ + this.currentSelectedItemIndex--; + } + else { + this.currentSelectedItemIndex=this.items.length-1; + } + + this.__selectCurrentItem(); + }, + + __selectNext : function() { + if (-1 != this.currentSelectedItemIndex){ + this.__deselectCurrentItem(); + } + if (this.currentSelectedItemIndex < this.items.length-1){ + this.currentSelectedItemIndex++; + } + else { + this.currentSelectedItemIndex = 0; + } + + this.__selectCurrentItem(); + }, + + __deselectCurrentItem : function () { + this.__deselectByIndex(this.currentSelectedItemIndex); + }, + + __selectCurrentItem : function () { + this.__selectByIndex(this.currentSelectedItemIndex); + }, + + __selectFirstItem : function () { + this.currentSelectedItemIndex = 0; + this.__selectCurrentItem(); + }, + + __selectByIndex : function(index) { + if( -1 != index ){ + rf.$(this.items.eq(index)).select(); + } + }, + + __deselectByIndex : function (index) { + if( index > -1 ){ + rf.$(this.items.eq(index)).unselect(); + } + + }, + + __openGroup : function () { + var item = this.__getItemByIndex(this.currentSelectedItemIndex); + if (this.__isGroup(item)){ + rf.$(item).show(); + rf.$(item).__selectFirstItem(); + this.active = false; + } + }, + + __closeGroup : function () { + var item = this.__getItemByIndex(this.currentSelectedItemIndex); + if (this.__isGroup(item)){ + rf.$(item).__deselectCurrentItem(); + rf.$(item).hide(); + this.active = true; + } + }, + + __returnToParentMenu : function () { + var item = this.__getItemByIndex(this.currentSelectedItemIndex); + var menu; + menu = this.__getParentMenu()||this.__getParentMenuFromItem(item); + if (menu != null){ + this.hide(); +// this.active=false; +// rf.$(menu).active=true; + rf.$(menu).popupElement.focus(); + } else { + this.hide(); + } + }, + + __activateMenuItem : function () { + var item = this.__getCurrentItem(); + if (item){ + menuItemId=item.attr('id'); + this.activateItem(menuItemId); + } + }, + + __getItemByIndex : function(index) { + if (index > -1){ + return this.items.eq(index); + } else{ + return null; + } + }, + + __getCurrentItem : function() { + return this.__getItemByIndex(this.currentSelectedItemIndex); + }, + + __keydownHandler : function (e){ + var code; + + if(e.keyCode) { + code = e.keyCode; + } else if(e.which) { + code = e.which; + } + + activeMenu=rf.ui.MenuManager.getActiveSubMenu(); + +// console.info('__keydownHandler. this.id='+this.id+';' ) +// console.info('__keydownHandler.focId:'+document.activeElement+'; this.id:'+this.id+'; parent menu id:'+this.__getParentMenu().attr('id')); + if(this.popup.isVisible()) { + switch(code) { + case rf.KEYS.DOWN: + e.preventDefault(); + activeMenu.__selectNext(); + //this.__setInputFocus(); + break; + + case rf.KEYS.UP: + e.preventDefault(); + activeMenu.__selectPrev(); + //this.__setInputFocus(); + break; + case rf.KEYS.LEFT: + e.preventDefault(); + activeMenu.__returnToParentMenu(); + break; + + case rf.KEYS.RIGHT: + e.preventDefault(); + activeMenu.__openGroup(); + break; + + case rf.KEYS.ESC: + e.preventDefault(); + activeMenu.__returnToParentMenu(); + break; + + case rf.KEYS.RETURN: + e.preventDefault(); + activeMenu.__activateMenuItem(); + //this.__setInputFocus(); + //return false; + break; + } + e.stopPropagation(); + } + } + } +})(jQuery, RichFaces); \ No newline at end of file Property changes on: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menuKeyNavigation.js ___________________________________________________________________ Name: svn:mime-type + text/plain Modified: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menugroup.js =================================================================== --- trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menugroup.js 2011-01-06 17:14:29 UTC (rev 20912) +++ trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menugroup.js 2011-01-06 17:50:51 UTC (rev 20913) @@ -1,72 +1,94 @@ (function($, rf) { rf.ui = rf.ui || {}; var defaultOptions = { - showEvent: 'mouseover', - attachToBody: false, - positionOffset: [0, 0], - selectItemCss: "rf-ddm-itm-sel", - listCss: "rf-ddm-lst" + showEvent : 'mouseenter', + showDelay : 300, + attachToBody : false, + positionOffset : [0, 0], + + selectItemCss : "rf-ddm-itm-sel", + itemCss : "rf-ddm-itm", + disabledItemCss : "rf-ddm-itm-dis", + listCss : "rf-ddm-lst", + listContainerCss : "rf-ddm-lst-bg" } - //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; - } - }, + //constructor definition + rf.ui.MenuGroup = function(componentId, options) { + this.id = componentId; + this.options = {}; + $.extend(this.options, defaultOptions, options || {}); + $super.constructor.call(this, componentId, this.options); + this.namespace = this.namespace || "." + + rf.Event.createNamespace(this.name, this.id); + this.attachToDom(componentId); - __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); - } - } - - })()); + this.rootMenu = rf.$(this.options.rootMenuId); + + this.shown = false; + this.jqueryElement = $(this.element); + + }; + + rf.ui.MenuBase.extend(rf.ui.MenuGroup); + + // define super class link + var $super = rf.ui.MenuGroup.$super; + + $.extend(rf.ui.MenuGroup.prototype, rf.ui.MenuKeyNavigation); + + $.extend(rf.ui.MenuGroup.prototype, (function() { + return { + name : "MenuGroup", + show : function() { + var id = this.id; + if (this.rootMenu.groupList[id] && !this.shown) { + this.rootMenu.invokeEvent("groupshow", rf + .getDomElement(this.rootMenu.id), + null); + this.__showPopup(); + this.shown = true; + } + }, + hide : function() { + var id = this.id; + var menu = this.rootMenu; + if (menu.groupList[this.id] && this.shown) { + menu.invokeEvent("grouphide", rf + .getDomElement(menu.id), null); + this.__hidePopup(); + this.shown = false; + } + }, + + select : function() { + this.jqueryElement.removeClass('rf-ddm-itm-unsel'); + this.jqueryElement.addClass('rf-ddm-itm-sel'); + }, + unselect : function() { + this.jqueryElement.removeClass('rf-ddm-itm-sel'); + this.jqueryElement.addClass('rf-ddm-itm-unsel'); + }, + + __showHandler : function() { + this.select(); + $super.__showHandler.call(this); + }, + __leaveHandler : function() { + window.clearTimeout(this.showTimeoutId); + this.hideTimeoutId = window.setTimeout($.proxy( + function() { + this.hide(); + }, this), this.options.hideDelay); + this.unselect(); + }, + + 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 Added: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menuitem.js =================================================================== --- trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menuitem.js (rev 0) +++ trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menuitem.js 2011-01-06 17:50:51 UTC (rev 20913) @@ -0,0 +1,69 @@ +(function($, rf) { + rf.ui = rf.ui || {}; + + var defaultOptions = { + selectItemCss : "rf-ddm-itm-sel", + unselectItemCss : "rf-ddm-itm-unsel", + + } + + // constructor definition + + rf.ui.MenuItem = function(componentId, options) { + this.options = options; + $super.constructor.call(this, componentId); + this.attachToDom(componentId); + this.element = $(rf.getDomElement(componentId)); + rf.Event.bindById(this.id,'click', this.__clickHandler, this); + rf.Event.bindById(this.id,'mouseenter',this.select, this); + rf.Event.bindById(this.id,'mouseleave',this.unselect, this); + this.selected = false; + } + + rf.BaseComponent.extend(rf.ui.MenuItem); + + // define super class link + var $super = rf.ui.MenuItem.$super; + + $.extend(rf.ui.MenuItem.prototype, (function() { + + return { + name : "MenuItem", + select : function() { + this.element.removeClass('rf-ddm-itm-unsel'); + this.element.addClass('rf-ddm-itm-sel'); + this.selected = true; + }, + unselect : function() { + this.element.removeClass('rf-ddm-itm-sel'); + this.element.addClass('rf-ddm-itm-unsel'); + this.selected = false; + }, + activate : function() { + this.invokeEvent('click',rf.getDomElement(this.id)); + }, + + isSelected : function() { + return this.selected; + }, + + __clickHandler : function (e) { + parentMenu = this.__getParentMenu(); + if (parentMenu){ + this.__getParentMenu().processItem(this.element); + if (this.options.submitFunction){ + this.options.submitFunction.call(this,e); + } + } + }, + + __getParentMenu : function () { + menu = this.element.parents('div.rf-ddm-lbl'); + if (menu && menu.length > 0) return rf.$(menu); + else return null; + + }, + }; +})()); + +})(jQuery, RichFaces) \ No newline at end of file Property changes on: trunk/ui/output/ui/src/main/resources/META-INF/resources/org.richfaces/menuitem.js ___________________________________________________________________ Name: svn:mime-type + text/plain Modified: trunk/ui/output/ui/src/main/templates/dropdownmenu.template.xml =================================================================== --- trunk/ui/output/ui/src/main/templates/dropdownmenu.template.xml 2011-01-06 17:14:29 UTC (rev 20912) +++ trunk/ui/output/ui/src/main/templates/dropdownmenu.template.xml 2011-01-06 17:50:51 UTC (rev 20913) @@ -52,7 +52,7 @@ <cdk:scriptObject name="options"> <cdk:call expression='addToScriptHash(options, "direction", ((org.richfaces.component.Positioning)component.getAttributes().get("direction")).getValue())' /> <cdk:call expression='addToScriptHash(options, "jointPoint", ((org.richfaces.component.Positioning)component.getAttributes().get("jointPoint")).getValue())' /> - <cdk:scriptOption attributes="hideDelay showDelay popupWith mode" /> + <cdk:scriptOption attributes="hideDelay showEvent showDelay popupWith mode horizontalOffset verticalOffset" /> <cdk:scriptOption attributes="onshow onhide ongroupshow ongrouphide onitemclick" wrapper="eventHandler"/> </cdk:scriptObject> Modified: trunk/ui/output/ui/src/main/templates/menugroup.template.xml =================================================================== --- trunk/ui/output/ui/src/main/templates/menugroup.template.xml 2011-01-06 17:14:29 UTC (rev 20912) +++ trunk/ui/output/ui/src/main/templates/menugroup.template.xml 2011-01-06 17:50:51 UTC (rev 20913) @@ -27,13 +27,9 @@ <cdk:object name="isDisabled" type="boolean" value="#{isDisabled(facesContext, component)}" /> <cdk:object name="iconFacet" value="#{getIconFacet(facesContext, component)}" type="javax.faces.component.UIComponent" /> <cdk:object name="iconAttribute" value="#{getIconAttribute(facesContext, component)}" type="java.lang.String" /> + - <cdk:object name="onmouseover" type="java.lang.String" value="this.className='rf-ddm-itm rf-ddm-itm-sel #{selectedClass}'" /> - <cdk:object name="onmouseout" type="java.lang.String" value="this.className='rf-ddm-itm rf-ddm-itm-unsel'" /> - <div id="#{clientId}" class="rf-ddm-itm #{isDisabled ? 'rf-ddm-itm-dis '+disabledClass : 'rf-ddm-itm-unsel '+styleClass}" style="#{style}" - onmouseover="#{isDisabled ? '' : onmouseover}" - onmouseout="#{isDisabled ? '' : onmouseout}" cdk:passThroughWithExclusions="" > <span class="rf-ddm-itm-ic #{iconClass}"> <c:choose> Modified: trunk/ui/output/ui/src/main/templates/menuitem.template.xml =================================================================== --- trunk/ui/output/ui/src/main/templates/menuitem.template.xml 2011-01-06 17:14:29 UTC (rev 20912) +++ trunk/ui/output/ui/src/main/templates/menuitem.template.xml 2011-01-06 17:50:51 UTC (rev 20913) @@ -16,6 +16,9 @@ <cdk:resource-dependency name="dropdownmenu.ecss" library="org.richfaces" /> <cdk:resource-dependency name="ajax.reslib" library="org.richfaces" /> <cdk:resource-dependency name="base-component.reslib" library="org.richfaces" /> + + <cdk:resource-dependency name="menuitem.js" library="org.richfaces" /> + </cc:interface> <cc:implementation> @@ -27,16 +30,12 @@ <cdk:object name="disabledClass" type="java.lang.String" value="#{getStyleClass(facesContext, component, 'disabledItemClass', 'disabledClass', 'disabledClass')}" /> <cdk:object name="isDisabled" type="boolean" value="#{isDisabled(facesContext, component)}" /> - <cdk:object name="onmouseover" type="java.lang.String" value="this.className='rf-ddm-itm rf-ddm-itm-sel #{selectedClass}'" /> - <cdk:object name="onmouseout" type="java.lang.String" value="this.className='rf-ddm-itm rf-ddm-itm-unsel #{styleClass}'" /> + <cdk:object name="iconFacet" value="#{getIconFacet(facesContext, component)}" type="javax.faces.component.UIComponent" /> <cdk:object name="iconAttribute" value="#{getIconAttribute(facesContext, component)}" type="java.lang.String" /> - <div id="#{clientId}" class="rf-ddm-itm #{isDisabled ? 'rf-ddm-itm-dis '+disabledClass : 'rf-ddm-itm-unsel '+styleClass}" style="#{style}" - onmouseover="#{isDisabled ? '' : onmouseover}" - onmouseout="#{isDisabled ? '' : onmouseout}" - onclick="#{getOnClickFunction(facesContext, component)}" + <div id="#{clientId}" class="rf-ddm-itm #{isDisabled ? 'rf-ddm-itm-dis '+disabledClass : 'rf-ddm-itm-unsel '+styleClass}" style="#{style}" cdk:passThroughWithExclusions=""> <span class="rf-ddm-itm-ic #{iconClass}"> <c:choose> @@ -77,6 +76,20 @@ </c:otherwise> </c:choose> - </div> + </div> + <c:choose> + <c:when test="#{not isDisabled}"> + <script type="text/javascript"> + <cdk:scriptObject name="options"> + <cdk:scriptOption name="submitFunction" value="#{getOnClickFunction(facesContext, component)}" wrapper="eventHandler"/> + </cdk:scriptObject> + + new RichFaces.ui.MenuItem(#{toScriptArgs(clientId, options)}); + + </script> + </c:when> + <c:otherwise> + </c:otherwise> + </c:choose> </cc:implementation> </cdk:root>