Author: maksimkaszynski Date: 2007-12-08 11:47:34 -0500 (Sat, 08 Dec 2007) New Revision: 4640 Modified: branches/3.1.x/ui/menu-components/src/main/java/org/richfaces/renderkit/html/AbstractMenuRenderer.java branches/3.1.x/ui/menu-components/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js branches/3.1.x/ui/menu-components/src/main/templates/org/richfaces/htmlMenuItem.jspx Log: http://jira.jboss.com/jira/browse/RF-1566 Adaptation to Prototype 1.6 Modified: branches/3.1.x/ui/menu-components/src/main/java/org/richfaces/renderkit/html/AbstractMenuRenderer.java =================================================================== --- branches/3.1.x/ui/menu-components/src/main/java/org/richfaces/renderkit/html/AbstractMenuRenderer.java 2007-12-08 16:00:20 UTC (rev 4639) +++ branches/3.1.x/ui/menu-components/src/main/java/org/richfaces/renderkit/html/AbstractMenuRenderer.java 2007-12-08 16:47:34 UTC (rev 4640) @@ -82,17 +82,19 @@ String itemId = null; int flcloseonclick = 1; int flagGroup = 0; + boolean disabled = false; if (kid instanceof UIMenuItem) { UIMenuItem menuItem = (UIMenuItem) kid; itemId = kid.getClientId(context); - if (menuItem.isDisabled()) { + disabled = menuItem.isDisabled(); + if (disabled) { flcloseonclick = 0; } } else if (kid instanceof UIMenuGroup) { UIMenuGroup menuGroup = (UIMenuGroup) kid; itemId = "ref" + kid.getClientId(context); flcloseonclick = 0; - if (menuGroup.isDisabled()) { + if ((disabled = menuGroup.isDisabled())) { flagGroup = 2; } else { flagGroup = 1; @@ -101,13 +103,16 @@ if (itemId != null) { JSFunction function = new JSFunction(".addItem"); function.addParameter(itemId); - function.addParameter(new Integer(flcloseonclick)); - ScriptOptions options = new ScriptOptions(kid); options.addEventHandler("onmouseout"); options.addEventHandler("onmouseover"); + options.addOption("closeOnClick", new Integer(flcloseonclick)); options.addOption("flagGroup", new Integer(flagGroup)); options.addOption("selectClass"); + options.addOption("style"); + options.addOption("selectStyle"); + options.addOption("iconClass"); + options.addOption("disabled", Boolean.valueOf(disabled)); function.addParameter(options); return function.toScript(); } Modified: branches/3.1.x/ui/menu-components/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js =================================================================== --- branches/3.1.x/ui/menu-components/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js 2007-12-08 16:00:20 UTC (rev 4639) +++ branches/3.1.x/ui/menu-components/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js 2007-12-08 16:47:34 UTC (rev 4640) @@ -1,4 +1,3 @@ - if(!window.RichFaces) window.RichFaces = {}; if(!RichFaces.Menu) RichFaces.Menu = {}; @@ -342,13 +341,25 @@ var win = RichFaces.Menu.getWindowDimensions(); var bodyHeight = body.height; var bodyWidth = body.width; + var clientX = this.event.clientX; var clientY = this.event.clientY; - - var top = Event.pointerY(this.event); - var left = Event.pointerX(this.event); + + var e = this.event; + var x = Event.pointerX(e); + var y = Event.pointerY(e); + var elementDim = Richfaces.Position.getOffsetDimensions(this.layer); + + var offsets = Position.cumulativeOffset(this.layer); + + offsets[0] -= this.layer.offsetLeft || 0; + offsets[1] -= this.layer.offsetTop || 0; + + var toolTipX = x - offsets[0]; + var toolTipY = y - offsets[1]; + var layerdim = Element.getDimensions(this.layer); - var layerLeft = left; + var layerLeft = toolTipX; if (clientX + layerdim.width > win.width) { layerLeft -= (layerdim.width - RichFaces.Menu.Layers.shadowWidth - RichFaces.Menu.Layers.CornerRadius); @@ -367,7 +378,7 @@ layerLeft = 0; } */ - var layerTop = top; + var layerTop = toolTipY; /*if (layertop + layerdim.height > bodyHeight) { layertop = bodyHeight - layerdim.height; } @@ -709,9 +720,8 @@ function(e){ RichFaces.Menu.MouseIn=true; RichFaces.Menu.Layers.clearLMTO(); - if (this.highlightParent) { - var menuNode = RichFaces.Menu.Layers.layers[this.layer.id].layer.parentNode.parentNode; - menuNode.className='dr-menu-label dr-menu-label-select rich-ddmenu-label rich-ddmenu-label-select'; + if (this.shouldHighlightParent() && !this.isWithin(e)) { + this.highlightLabel(); } Event.stop(e); @@ -723,9 +733,8 @@ if (!RichFaces.Menu.selectOpen) { RichFaces.Menu.Layers.setLMTO(this.hideDelay); } - if (this.highlightParent) { - var menuNode = RichFaces.Menu.Layers.layers[this.layer.id].layer.parentNode.parentNode; - menuNode.className='dr-menu-label dr-menu-label-unselect rich-ddmenu-label rich-ddmenu-label-unselect'; + if (this.shouldHighlightParent() && !this.isWithin(e)) { + this.unHighlightLabel(); } Event.stop(e); }.bindAsEventListener(this); @@ -799,17 +808,61 @@ A4J.AJAX.AddListener(listener); } */ }, + + getLabel : function() { + return RichFaces.Menu.Layers.layers[this.layer.id].layer.parentNode.parentNode; + }, + + highlightLabel: function() { + var label1 = $(this.getLabel()); + RichFaces.Menu.Items.replaceClasses(label1, + ['dr-menu-label-unselect', 'rich-ddmenu-label-unselect'], + ['dr-menu-label-select','rich-ddmenu-label-select']); + }, + + unHighlightLabel: function() { + var label1 = $(this.getLabel()); + RichFaces.Menu.Items.replaceClasses(label1, + ['dr-menu-label-select','rich-ddmenu-label-select'], + ['dr-menu-label-unselect', 'rich-ddmenu-label-unselect']); + }, + + shouldHighlightParent : function() { + var result = this.highlightParent; + var parent = null; + if (result && (parent = this.getParentLayer())) { + result &= parent.shouldHighlightParent(); + } + return result; + }, + + getParentLayer: function() { + return this.level > 0 ? RichFaces.Menu.Layers.layers[(RichFaces.Menu.Layers.father[this.id])] : null; + }, + + isWithin : function(event){ + var within = true; + var targetElement = event.relatedTarget; + var srcElement = event.target; + var layer = $(this.id); + if (targetElement) { + within = $(targetElement).descendantOf(layer); + } + + within &= $(srcElement).descendantOf(layer); + + return within; + }, - - openSelect: function(event){ RichFaces.Menu.selectOpen = true; var ClickInputb = this.ClickInput.bindAsEventListener(this); Event.observe(Event.element(event), "click", this.ClickInput); }, + + - closeSelect: function(event){ RichFaces.Menu.selectOpen = false; var ClickInputb = this.ClickInput.bindAsEventListener(this); @@ -893,104 +946,11 @@ }, //addItem: function(itemId, hoverClass, plainClass, hoverStyle, plainStyle){ - addItem: function(itemId, flag_close_onclick, options) { + addItem: function(itemId, options) { var dis = this; - var item = { - highLightGroup: function(light) { - if (light) { - Element.removeClassName(this.id,"dr-menu-item-enabled"); - Element.addClassName(this.id,"dr-menu-item-hover"); - Element.addClassName(this.id,"rich-menu-group-hover"); - if (this.options.selectClass) Element.addClassName(this.id, this.options.selectClass); - - Element.addClassName(this.id+":icon","rich-menu-item-icon-selected"); - Element.addClassName(this.id+":anchor","rich-menu-item-label"); - } else if (!this.mouseOver) { - Element.removeClassName(this.id,"dr-menu-item-hover"); - Element.removeClassName(this.id,"rich-menu-group-hover"); - Element.addClassName(this.id,"dr-menu-item-enabled"); - if (this.options.selectClass) Element.removeClassName(this.id, this.options.selectClass); - - Element.removeClassName(this.id+":icon","rich-menu-item-icon-selected"); - Element.removeClassName(this.id+":anchor","rich-menu-item-label"); - } - } - }; - item.id = itemId; - item.obj = $(itemId); - item.menu = this; - item.options = options || {}; - item.mouseOver = false; - if (item.options.onmouseover && item.options.onmouseover != ""){ - item.eventOnMouseOver = new Function("event",item.options.onmouseover).bindAsEventListener(item); - } - if (item.options.onmouseout && item.options.onmouseout != ""){ - item.eventOnMouseOut = new Function("event",item.options.onmouseout).bindAsEventListener(item); - } + var item = new RichFaces.Menu.Item(itemId, this, options || {}); + //item.menu = this; this.items[itemId] = item; - - var onmouseover = - function(e){ - this.menu.closeMinors(this.id); - if (this.options.flagGroup == 1) { - this.mouseOver = true; - this.highLightGroup(true); - } - if (this.eventOnMouseOver) { - var reltg = (e.relatedTarget) ? e.relatedTarget : e.fromElement; - while (reltg && reltg != this.obj && reltg.nodeName != 'BODY') - reltg = reltg.parentNode; - if (reltg == this.obj) return; - this.eventOnMouseOver(); - } - }.bindAsEventListener(item); - - var onmouseout = - function(e){ - if (this.options.flagGroup == 1) { - this.mouseOver = false; - this.highLightGroup(false); - } - if (this.eventOnMouseOut) { - var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; - while (reltg && reltg != this.obj && reltg.nodeName != 'BODY') - reltg = reltg.parentNode; - if (reltg == this.obj) return; - this.eventOnMouseOut(); - } - }.bindAsEventListener(item); - - var onmouseclick = - function(e){ - var menuLayer = item.menu; - while (menuLayer.level > 0) { - menuLayer = RichFaces.Menu.Layers.layers[(RichFaces.Menu.Layers.father[menuLayer.id])]; - } - if (menuLayer && menuLayer.eventOnItemSelect) menuLayer.eventOnItemSelect(); - RichFaces.Menu.Layers.shutdown(); - }.bindAsEventListener(item); - - var binding = new RichFaces.Menu.Layer.Binding ( - item.id, - "mouseover", - onmouseover); - this.bindings.push(binding); - binding.refresh(); - binding = new RichFaces.Menu.Layer.Binding ( - item.id, - "mouseout", - onmouseout); - this.bindings.push(binding); - binding.refresh(); - if (flag_close_onclick==1){ - binding = new RichFaces.Menu.Layer.Binding ( - item.id, - "click", - onmouseclick); - this.bindings.push(binding); - binding.refresh(); - } - return this; }, hideMe: function(e){ @@ -1019,7 +979,12 @@ if (!e) { e = window.event; } + RichFaces.Menu.Layers.showDropDownLayer(this.id, topLevel, e,this.delay); + if (options.disabled == false && !RichFaces.Menu.isWithin(e, $(topLevel))) { + this.highlightLabel(); + } + }.bindAsEventListener(this); if(!onEvt){ @@ -1036,6 +1001,9 @@ function(e){ RichFaces.Menu.Layers.setLMTO(this.hideDelay); RichFaces.Menu.Layers.clearPopUpTO(); + if (options.disabled == false && !RichFaces.Menu.isWithin(e, $(topLevel))) { + this.unHighlightLabel(); + } }.bindAsEventListener(this); // var item = $(topLevel); @@ -1136,84 +1104,208 @@ return false; } }; -if(!RichFaces.Menu.Item) RichFaces.Menu.Item = {}; +RichFaces.Menu.Items = { + classNames: ['dr-menu-item-enabled', 'rich-menu-item-enabled'], + hoverClassNames : ['dr-menu-item-hover', 'rich-menu-item-hover'], + iconClassNames : [], + hoverIconClassNames: ['dr-menu-icon-selected', 'rich-menu-item-icon-selected'], + labelClassNames: [], + hoverLabelClassNames: ['rich-menu-item-label-selected'], + + replaceClasses: function(element, toRemove, toAdd) { + var e = $(element); + $A(toRemove).each(function(className) {e.removeClassName(className)}); + $A(toAdd).each(function(className) {e.addClassName(className)}); + }, + + onmouseover: function(item) { + var element = item.getElement(); + var icon = item.getIcon(); + var labl = item.getLabel(); -/** - * - */ -RichFaces.Menu.Item.Onclick = function(evt, item, action, params, target) { - var form = Event.findElement(evt, 'form'); + var hoverClass = item.getHoverClasses(); + var iconHoverClass = item.getIconHoverClasses(); + var labelHoverClass = item.getLabelHoverClasses(); + + var inlineStyle = item.getInlineStyle(); + var hoverStyle = item.getHoverStyle(); + element.style.cssText = inlineStyle.concat(hoverStyle); + + this.replaceClasses(element, this.classNames, this.hoverClassNames.concat(hoverClass)); + this.replaceClasses(icon, this.iconClassNames, this.hoverIconClassNames.concat(iconHoverClass)); + this.replaceClasses(labl, this.labelClassNames, this.hoverLabelClassNames.concat(labelHoverClass)); + }, + onmouseout : function(item) { + var element = item.getElement(); + var icon = item.getIcon(); + var labl = item.getLabel(); - /*if(!form || typeof(form) == 'undefined' || !form.nodeName || form.nodeName.toLowerCase() != 'form'){ - form = document.createElement('form'); - form.setAttribute('method', 'post'); - form.setAttribute('enctype', 'application/x-www-form-urlencoded'); - form.action = action; - document.body.appendChild(form); - }*/ - var objectsCreated = new Array(); - var oldValues = new Object(); - RichFaces.Menu.Item._createOrInitHiddenInput(item + ":submit", item + ":submit", objectsCreated, oldValues, form); + var hoverClass = item.getHoverClasses(); + var iconHoverClass = item.getIconHoverClasses(); + var labelHoverClass = item.getLabelHoverClasses(); + + var inlineStyle = item.getInlineStyle(); + element.style.cssText = inlineStyle; + + this.replaceClasses(element, this.hoverClassNames.concat(hoverClass), this.classNames); + this.replaceClasses(icon, this.hoverIconClassNames.concat(iconHoverClass), this.iconClassNames); + this.replaceClasses(labl, this.hoverLabelClassNames.concat(labelHoverClass), this.labelClassNames); + } + +}; +RichFaces.Menu.isWithin = function (event, element) { + var within = false; + Event.extend(event); + var targetElement = event.relatedTarget; + var srcElement = Event.element(event); - if (params) { + if (targetElement) { + within = targetElement == element || + $(targetElement).descendantOf(element); + } + + return within; +}; - for (var param in params) { - var paramName = param; - var paramValue = params[paramName]; - if (typeof(paramValue) != 'function') { - if (paramValue) { - paramValue = String(paramValue); - } - RichFaces.Menu.Item._createOrInitHiddenInput(paramName, paramValue, objectsCreated, oldValues, form); +RichFaces.Menu.Item = Class.create({ + initialize: function(id, menu, options) { + this.options = options; + this.id = id; + this.menu = menu; + this.mouseOver = false; + + + + var binding; + + binding = new RichFaces.Menu.Layer.Binding ( + id, + "mouseover", + this.onmouseover.bindAsEventListener(this)); + menu.bindings.push(binding); + binding.refresh(); + + binding = new RichFaces.Menu.Layer.Binding ( + id, + "mouseout", + this.onmouseout.bindAsEventListener(this)); + menu.bindings.push(binding); + binding.refresh(); - } + binding = new RichFaces.Menu.Layer.Binding ( + id, + "click", + this.onclick.bindAsEventListener(this)); + menu.bindings.push(binding); + binding.refresh(); + }, + + + onclick: function(e){ + if (this.options.closeOnClick == 1) { + var menuLayer = this.menu; + while (menuLayer.level > 0) { + menuLayer = RichFaces.Menu.Layers.layers[(RichFaces.Menu.Layers.father[menuLayer.id])]; } + if (menuLayer && menuLayer.eventOnItemSelect) menuLayer.eventOnItemSelect(); + RichFaces.Menu.Layers.shutdown(); } + RichFaces.Menu.Items.onmouseout(this); + }, + getElement: function() { + return $(this.id); + }, + getIcon: function() { + return $(this.id + ":icon"); + }, + getLabel: function() { + return $(this.id + ":anchor"); + }, + getInlineStyle: function() { + return this.options.style || ""; + }, + getHoverStyle: function() { + return this.options.selectStyle || ""; + }, + getHoverClasses: function() { + return $A(this.options.selectClass).compact(); + }, + getIconHoverClasses : function() { + return $A(this.options.iconHoverClass).compact(); + }, + getLabelHoverClasses : function() { + return $A(this.options.labelHoverClass).compact(); + }, + + isDisabled : function() { + //console.log(this.id + (this.options.disabled)); + return this.options.disabled || false; + }, + onmouseover : function(event) { + var element = this.getElement(); + + if (this.options.onmouseover) { + if (this.options.onmouseover.call(element, event) == false) { + Event.stop(event); + return; + }; + } + if (RichFaces.Menu.isWithin(event, element)) { + return; + } + this.menu.closeMinors(this.id); + if (this.isDisabled()) { + return; + } + if (this.options.flagGroup == 1) { + this.mouseOver = true; + this.highLightGroup(true); + } + RichFaces.Menu.Items.onmouseover(this); + }, + onmouseout : function(event) { + Event.extend(event); + //window.status = $(event.relatedTarget).inspect(); + if (this.options.onmouseout) { + if (this.options.onmouseover.call(element, event) == false) { + Event.stop(event); + return; + }; + } + var element = this.getElement(); + if (RichFaces.Menu.isWithin(event, element)) { + return; + } + if (this.isDisabled()) { + return; + } + if (this.options.flagGroup == 1) { + this.mouseOver = false; + this.highLightGroup(false); + } + RichFaces.Menu.Items.onmouseout(this); + }, + highLightGroup: function(light) { + if (light) { + Element.removeClassName(this.id,"dr-menu-item-enabled"); + Element.addClassName(this.id,"dr-menu-item-hover"); + Element.addClassName(this.id,"rich-menu-group-hover"); + if (this.options.selectClass) { + Element.addClassName(this.id, this.options.selectClass); + } - var l = objectsCreated.length; - - for (var i = 0; i < l; i++) { - var kid = objectsCreated[i]; - form.appendChild(kid); - } - - var targ = form.target; - - if (target) { - form.target = target; - } - - form.submit(); - - form.target = targ; - - for (var j = 0; j < l; j++) { - var kid = objectsCreated[j]; - if (form && kid) { - form.removeChild(kid); - } - } - - for (var key in oldValues) { - var value = oldValues[key]; - if (typeof(value) != 'function') { - ($(key) || form[key]).value = value; - } - } + Element.addClassName(this.id+":icon","rich-menu-item-icon-selected"); + Element.addClassName(this.id+":anchor","rich-menu-item-label"); + } else if (!this.mouseOver) { + Element.removeClassName(this.id,"dr-menu-item-hover"); + Element.removeClassName(this.id,"rich-menu-group-hover"); + Element.addClassName(this.id,"dr-menu-item-enabled"); + if (this.options.selectClass) { + Element.removeClassName(this.id, this.options.selectClass); + } + Element.removeClassName(this.id+":icon","rich-menu-item-icon-selected"); + Element.removeClassName(this.id+":anchor","rich-menu-item-label"); + } } - -RichFaces.Menu.Item._createOrInitHiddenInput = function(name, value, list, oldValues, form) { - var hiddenObj = $(name) || form[name]; - - if (!hiddenObj) { - hiddenObj = document.createElement('input'); - hiddenObj.setAttribute('type', 'hidden'); - hiddenObj.setAttribute('name', name); - hiddenObj.setAttribute('id', name); - list.push(hiddenObj); - } else { - oldValues[name] = hiddenObj.value; - } - hiddenObj.value = value; -} - + +}); Modified: branches/3.1.x/ui/menu-components/src/main/templates/org/richfaces/htmlMenuItem.jspx =================================================================== --- branches/3.1.x/ui/menu-components/src/main/templates/org/richfaces/htmlMenuItem.jspx 2007-12-08 16:00:20 UTC (rev 4639) +++ branches/3.1.x/ui/menu-components/src/main/templates/org/richfaces/htmlMenuItem.jspx 2007-12-08 16:47:34 UTC (rev 4640) @@ -46,16 +46,8 @@ <div id="#{clientId}" class="dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled #{component.attributes['styleClass']}" - onmouseout="this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled #{component.attributes['styleClass']}'; - #{onmouseoutInlineStyles} - $('#{clientId}:icon').className='dr-menu-icon rich-menu-item-icon #{component.attributes['iconClass']}'; - $('#{clientId}:anchor').className='rich-menu-item-label';" - onmouseover="this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover #{component.attributes['styleClass']} #{component.attributes['selectClass']}'; - #{onmouseoverInlineStyles} - $('#{clientId}:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected #{component.attributes['iconClass']}'; - $('#{clientId}:anchor').className='rich-menu-item-label rich-menu-item-label-selected';" style="#{component.attributes['style']}" - onclick="this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled #{component.attributes['styleClass']}'; #{component.attributes['onselect']}; #{onclick}"> + onclick="#{component.attributes['onselect']}; #{onclick}"> <f:call name="utils.encodeAttributes"> <f:parameter value="onmousedown,onmouseup,onmousemove" /> </f:call>