Author: d.bulahov Date: 2007-03-27 11:13:35 -0400 (Tue, 27 Mar 2007) New Revision: 174 Added: trunk/richfaces/dropdown-menu/src/main/resources/org/richfaces/renderkit/html/scripts/ trunk/richfaces/dropdown-menu/src/main/resources/org/richfaces/renderkit/html/scripts/css-rules.js trunk/richfaces/dropdown-menu/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js Modified: trunk/richfaces/dropdown-menu/src/main/config/component/dropdownmenu.xml trunk/richfaces/dropdown-menu/src/main/java/org/richfaces/renderkit/html/DropDownMenuRendererBase.java trunk/richfaces/dropdown-menu/src/main/resources/org/richfaces/renderkit/html/css/dropdownmenu.xcss trunk/richfaces/dropdown-menu/src/main/templates/org/richfaces/htmlDropDownMenu.jspx Log: Modified: trunk/richfaces/dropdown-menu/src/main/config/component/dropdownmenu.xml =================================================================== --- trunk/richfaces/dropdown-menu/src/main/config/component/dropdownmenu.xml 2007-03-27 14:22:11 UTC (rev 173) +++ trunk/richfaces/dropdown-menu/src/main/config/component/dropdownmenu.xml 2007-03-27 15:13:35 UTC (rev 174) @@ -52,6 +52,7 @@ <description> Delay between event and menu showing. </description> + <defaultvalue><![CDATA[new Integer(300)]]></defaultvalue> </property> <property> @@ -60,6 +61,7 @@ <description> Delay between losing focus and menu closing. </description> + <defaultvalue><![CDATA[new Integer(300)]]></defaultvalue> </property> <property> Modified: trunk/richfaces/dropdown-menu/src/main/java/org/richfaces/renderkit/html/DropDownMenuRendererBase.java =================================================================== --- trunk/richfaces/dropdown-menu/src/main/java/org/richfaces/renderkit/html/DropDownMenuRendererBase.java 2007-03-27 14:22:11 UTC (rev 173) +++ trunk/richfaces/dropdown-menu/src/main/java/org/richfaces/renderkit/html/DropDownMenuRendererBase.java 2007-03-27 15:13:35 UTC (rev 174) @@ -21,8 +21,17 @@ package org.richfaces.renderkit.html; + + import org.ajax4jsf.framework.renderer.HeaderResourcesRendererBase; import org.richfaces.component.UIDropDownMenu; +import javax.faces.context.FacesContext; +import javax.faces.component.UIComponent; +import org.richfaces.component.UIMenuItem; +import java.io.IOException; +import java.util.Iterator; +import java.util.List; +import javax.faces.context.ResponseWriter; public class DropDownMenuRendererBase extends HeaderResourcesRendererBase { @@ -35,4 +44,70 @@ return true; } + public void encodeScript(FacesContext context, UIComponent component) throws IOException { + int showdelay = 300; + int hideDelay = 300; + + + + try { + showdelay = Integer.parseInt(component.getAttributes().get("showDelay").toString()); + hideDelay = Integer.parseInt(component.getAttributes().get("hideDelay").toString()); + } catch(Exception e) { + } + + StringBuffer buffer = + new StringBuffer("new Exadel.Menu.Layer('") + .append(component.getClientId(context)) + .append("_menu") + .append("',") + .append(showdelay + ")"); + buffer + .append(".asDropDown('") + .append(component.getClientId(context)) + .append("','onmouseover')"); + + List kids = component.getChildren(); + for (Iterator iter = kids.iterator(); iter.hasNext();) { + UIComponent kid = (UIComponent) iter.next(); + String itemId = null; + if (kid instanceof UIMenuItem) { + itemId = kid.getClientId(context); + } + //else if (kid instanceof UIMenuNode) { + // itemId = "ref" + kid.getClientId(context); + //} + + //if(itemId != null){ + // if (kid instanceof UIMenuItem) { + // //UIMenuItem styledComponent = (UIMenuItem) kid; + // buffer + // .append(".addItem('") + // .append(itemId) + // .append("','") + // .append("null") + // .append("','") + // .append("null") + // .append("','") + // .append("null") + // .append("','") + // .append("null") + // .append("')"); + // } + //} + } + ResponseWriter out = context.getResponseWriter(); + String script =buffer.append(";").toString(); + out.write(script); + + //return buffer.append(";").toString(); + + //new Exadel.Menu.Layer("#{clientId}","300").asDropDown("#{clientId}","onmouseover"); + } + + + + + + } Modified: trunk/richfaces/dropdown-menu/src/main/resources/org/richfaces/renderkit/html/css/dropdownmenu.xcss =================================================================== --- trunk/richfaces/dropdown-menu/src/main/resources/org/richfaces/renderkit/html/css/dropdownmenu.xcss 2007-03-27 14:22:11 UTC (rev 173) +++ trunk/richfaces/dropdown-menu/src/main/resources/org/richfaces/renderkit/html/css/dropdownmenu.xcss 2007-03-27 15:13:35 UTC (rev 174) @@ -43,6 +43,17 @@ .dr-label-text-decor { font-weight : bold; } +.underneath_iframe{ + position: absolute; + z-index: 90; + visibility:hidden; + left:0px; + top:0px; + height:1px; + width:1px; + /*display:none;*/ +} + ]]> </f:verbatim> Added: trunk/richfaces/dropdown-menu/src/main/resources/org/richfaces/renderkit/html/scripts/css-rules.js =================================================================== --- trunk/richfaces/dropdown-menu/src/main/resources/org/richfaces/renderkit/html/scripts/css-rules.js (rev 0) +++ trunk/richfaces/dropdown-menu/src/main/resources/org/richfaces/renderkit/html/scripts/css-rules.js 2007-03-27 15:13:35 UTC (rev 174) @@ -0,0 +1,49 @@ +if(!Exadel) var Exadel = {}; +Exadel.extractRules = function(style){ + var rules = style.split(";"); + var rulesHash = {}; + $A(rules).each( + function(rule){ + if(!rule) return; + var i = rule.indexOf(':'); + if(i > 0){ + var nam = Exadel.trimString(rule.substr(0, i)); + val = Exadel.trimString(rule.substr(i + 1)); + rulesHash[nam] = val; + } + + } + ); + return rulesHash; +} +Exadel.extractCamelizedRules = function(style){ + var hash = Exadel.extractRules(style); + var newHash = {}; + for(key in hash){ + newHash[key.camelize()] = hash[key]; + } + return newHash; +} +Exadel.trimString = function(s){ + return s.replace(/^\s+/, '').replace(/\s+$/, ''); +} + +Exadel.replaceStyleHash = function(obj, hash1, hash2){ + for(key in hash1){ + obj.style[key] = ''; + } + for(key in hash2){ + obj.style[key] = hash2[key]; + } +} + +Exadel.replaceStyle = function(obj, style1, style2){ + var hash1 = Exadel.extractRules(style1); + for(key in hash1){ + hash1[key] = ''; + } + var hash2 = Exadel.extractRules(style2); + Element.setStyle(obj, hash1); + Element.setStyle(obj, hash2); + return $H(obj.style).inspect(); +} \ No newline at end of file Added: trunk/richfaces/dropdown-menu/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js =================================================================== --- trunk/richfaces/dropdown-menu/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js (rev 0) +++ trunk/richfaces/dropdown-menu/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js 2007-03-27 15:13:35 UTC (rev 174) @@ -0,0 +1,938 @@ +/** + * Enable log if defined variable 'LOG' + */ +if(!LOG){ + var LOG = {a4j_debug:function(){}}; +} + +if(!Exadel) var Exadel = {}; +if(!Exadel.Menu) Exadel.Menu = {}; + +/** + * Fixes IE bug with incorrect layer width when set to auto + * @param layer + */ +Exadel.Menu.fitLayerToContent = function(layer) { + if (!Exadel.Menu.Layers.IE) + return; + + var table = layer.childNodes[0]; + if (table) { + var tmpDims = Element.getDimensions(table); + layer.style.width = tmpDims.width + "px"; + //layer.style.height = dims.height + "px"; + } // if +} + +Exadel.Menu.Layers = { + listl: new Array(), + father: {}, + lwidthDetected:false, + lwidth:{}, + back: new Array(), + horizontals: {}, + layers: {}, + levels: ['','','','','','','','','','',''], + detectWidth: function(){ + this.IE = (navigator.userAgent.indexOf('MSIE') > -1) && (navigator.userAgent.indexOf('Opera') < 0); + this.NS = (navigator.userAgent.indexOf('Netscape') > -1); + } + , + + menuTopShift : -11, + menuRightShift : 11, + menuLeftShift : 0, + shadowWidth: 0, + thresholdY : 0, + abscissaStep : 180, + + CornerRadius: 0, + + toBeHidden : new Array(), + toBeHiddenLeft : new Array(), + toBeHiddenTop : new Array(), + + layersMoved : 0, + layerPoppedUp : '', + layerTop : new Array(), + layerLeft : new Array(), + timeoutFlag : 0, + useTimeouts : 1, + timeoutLength : 500, + showTimeOutFlag : 0, + showTimeoutLength: 0, + queuedId : '', + + LMPopUp:function(menuName, isCurrent) { + if (!this.loaded || ( this.isVisible(menuName) && !isCurrent)) { + return; + } + if (menuName == this.father[this.layerPoppedUp]) { + this.LMPopUpL(this.layerPoppedUp, false); + } else if (this.father[menuName] == this.layerPoppedUp) { + this.LMPopUpL(menuName, true); + } else { + //this.shutdown(); + foobar = menuName; + do { + this.LMPopUpL(foobar, true); + foobar = this.father[foobar]; + } while (foobar); + } + this.layerPoppedUp = menuName; + }, + + isVisible: function(layer) { + return ($(layer).style.visibility == 'visible'); + }, + + /** + * @param menuName + * @param visibleFlag + */ + LMPopUpL: function(menuName, visibleFlag) { + if (!this.loaded) { + return; + } + this.detectWidth(); + Exadel.Menu.fitLayerToContent($(menuName)); + this.setVisibility(menuName, visibleFlag); + this.ieSelectWorkAround(menuName, visibleFlag); + }, + + ieSelectWorkAround: function(menuName, on){ + //alert(navigator.userAgent); + if(this.IE || this.NS) { + menuName = $(menuName).id; + var iframe = $(menuName + "_iframe"); + var iframe1 = $(menuName + "_iframe1"); + var nsfix = (this.NS ? 7 : 0); + if(on){ + Position.clone(menuName, iframe); + var dim = Element.getDimensions(iframe); + iframe.style.top = (iframe.style.pixelTop + Math.round(this.CornerRadius / 2)) + "px"; + iframe.style.left = (iframe.offsetLeft) + "px"; + iframe.style.width = (dim.width - this.shadowWidth - nsfix) + "px"; + iframe.style.visibility = "visible"; + iframe.style.height = (dim.height - this.CornerRadius - 1 - this.shadowWidth - nsfix) + "px"; + + Position.clone(menuName, iframe1); + dim = Element.getDimensions(iframe1); + iframe1.style.top = (iframe1.style.pixelTop) + "px"; + iframe1.style.left = (iframe1.offsetLeft + Math.round(this.CornerRadius / 2)) + "px"; + iframe1.style.width = (dim.width - this.CornerRadius - this.shadowWidth - nsfix - 1) + "px"; + iframe1.style.visibility = "visible"; + iframe1.style.height = (dim.height - this.shadowWidth - nsfix) + "px"; + } else { + iframe.style.visibility = "hidden"; + iframe1.style.visibility = "hidden"; + } + } + }, + + shutdown: function () { + var needToResetLayers = false; + for (i=0; i<this.listl.length; i++) { + var layerId = this.listl[i]; + if ($(layerId)) { + this.LMPopUpL(layerId, false); + } else { + needToResetLayers = true; + } + } + + if (needToResetLayers) { + this.resetLayers(); + } + + this.layerPoppedUp = ''; + if (this.Konqueror || this.IE5) { + this.seeThroughElements(true); + } + }, + resetLayers: function() { + var newList = new Array(); + for (i=0; i<this.listl.length; i++) { + var layer = this.listl[i]; + if ($(layer)) { + newList.push(layer); + } + } + + this.listl = newList; + } + , + + /** + * Set visibility + * @param layer the layer to visibility + * @param visible the boolean flag, if true to set visible layer from variable, otherwise - hide this layer + */ + setVisibility: function (layer, visible) { + var tmpLayer = $(layer); + + if (visible) { + tmpLayer.style.visibility = 'visible'; + } else { + if(tmpLayer.getElementsByTagName){ + var inputs = tmpLayer.getElementsByTagName('INPUT'); + if(inputs){ + $A(inputs).each(function(node){node.blur()}); + } // if + } // if + + tmpLayer.style.visibility = 'hidden'; + } // else + }, + + + clearLMTO: function () { + if (this.useTimeouts) { + clearTimeout(this.timeoutFlag); + } + }, + + setLMTO: function (ratio) { + if(!ratio){ + ratio = 1; + } + if (this.useTimeouts) { + clearTimeout(this.timeoutFlag); + this.timeoutFlag = setTimeout('Exadel.Menu.Layers.shutdown()', this.timeoutLength * ratio); + } + }, + + loaded:1, + + clearPopUpTO: function(){ + clearTimeout(this.showTimeOutFlag); + }, + showMenuLayer: function (layerId, e, delay){ + this.clearPopUpTO(); + this.showTimeOutFlag = setTimeout(new Exadel.Menu.DelayedPopUp(layerId, e).show, delay); + }, + showDropDownLayer: function (layerId, parentId, e, delay){ + this.clearPopUpTO(); + this.showTimeOutFlag = setTimeout(new Exadel.Menu.DelayedDropDown(layerId, parentId, e).show, delay); + }, + showPopUpLayer: function (layer, e){ + this.shutdown(); + this.detectWidth(); + this.LMPopUp(menuName, false); + this.setLMTO(4); + } +}; + +/** + * return true if defined document element or document body, otherwise return false + */ +Exadel.Menu.getWindowElement = function() { + return (document.documentElement || document.body); +} + +Exadel.Menu.getWindowDimensions = function() { + var x,y; + if (self.innerHeight) // all except Explorer + { + x = self.innerWidth; + y = self.innerHeight; + } + else if (document.documentElement && document.documentElement.clientHeight) + // Explorer 6 Strict Mode + { + x = document.documentElement.clientWidth; + y = document.documentElement.clientHeight; + } + else if (document.body) // other Explorers + { + x = document.body.clientWidth; + y = document.body.clientHeight; + } + return {width:x, height:y}; +} + +Exadel.Menu.getWindowScrollOffset = function() { + var x,y; + if (typeof pageYOffset != "undefined") // all except Explorer + { + x = window.pageXOffset; + y = window.pageYOffset; + } + else if (document.documentElement && document.documentElement.scrollTop) + // Explorer 6 Strict + { + x = document.documentElement.scrollLeft; + y = document.documentElement.scrollTop; + } + else if (document.body) // all other Explorers + { + x = document.body.scrollLeft; + y = document.body.scrollTop; + } + + return {top:y, left: x}; +} + +Exadel.Menu.getPageDimensions = function() { + var x,y; + var test1 = document.body.scrollHeight; + var test2 = document.body.offsetHeight; + if (test1 > test2) { + // all but Explorer Mac + x = document.body.scrollWidth; + y = document.body.scrollHeight; + } + else { + // Explorer Mac; + // would also work in Explorer 6 Strict, Mozilla and Safari + + x = document.body.offsetWidth; + y = document.body.offsetHeight; + } + + return {width:x, height:y}; +} + + +Exadel.Menu.DelayedContextMenu = function(layer, e) { + if (!e) { + e = window.event; + } + this.event = e; + this.element = Event.element(e); + this.layer = $(layer); + this.show = function() { + Exadel.Menu.Layers.shutdown(); + var body = Exadel.Menu.getPageDimensions(); + var win = Exadel.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 layerdim = Element.getDimensions(this.layer); + var layerLeft = left; + + if (clientX + layerdim.width > win.width) { + layerLeft -= (layerdim.width - Exadel.Menu.Layers.shadowWidth - Exadel.Menu.Layers.CornerRadius); + } + + if (layerLeft < 0) { + layerLeft = 0; + } + + /* + if (layerLeft + layerdim.width > bodyWidth) { + layerLeft = bodyWidth - layerdim.width; + } + + if (layerLeft < 0) { + layerLeft = 0; + } + */ + var layerTop = top; + /*if (layertop + layerdim.height > bodyHeight) { + layertop = bodyHeight - layerdim.height; + } + + if (layertop < 0) { + layertop = 0; + } + */ + if (clientY + layerdim.height > win.height) { + layerTop -= (layerdim.height - Exadel.Menu.Layers.shadowWidth - Exadel.Menu.Layers.CornerRadius); + } + + if (layerTop < 0) { + layerTop = 0; + } + + this.layer.style.left = layerLeft + "px"; + this.layer.style.top = layerTop + "px"; + + Exadel.Menu.Layers.LMPopUp(this.layer.id, false); + Exadel.Menu.Layers.clearLMTO(); + }.bind(this); +} + + +/** + * Calculates for DROPDOWN + */ +Exadel.Menu.DelayedDropDown = function(layer, elementId, e) { + if (!e) { + e = window.event; + } + + this.event = e; + this.element = $(elementId) || Event.element(e); + this.layer = $(layer); + Event.stop(e); + + + + this.show = function() { + Exadel.Menu.Layers.shutdown(); + + var winOffset = Exadel.Menu.getWindowScrollOffset(); + var win = Exadel.Menu.getWindowDimensions(); + var pageDims = Exadel.Menu.getPageDimensions(); + + + var windowHeight = win.height; + var windowWidth = win.width; + var screenOffset = Position.cumulativeOffset(this.element); + var dim = Element.getDimensions(this.element); + + // parent element +// var top = screenOffset[1]; +// var left = screenOffset[0]; + var top = 0; + var left = 0; + + var bottom = top + dim.height; + var right = left + dim.width; + + var layerdim = Element.getDimensions(this.layer); + var layerLeft = Math.max(left,winOffset.left); + + if (layerLeft + layerdim.width - winOffset.left > windowWidth) { + layerLeft = right - layerdim.width + Exadel.Menu.Layers.shadowWidth; + } + + if (layerLeft + layerdim.width - winOffset.left > windowWidth) { +// layerLeft = windowWidth - layerdim.width; + layerLeft = windowWidth + winOffset.left - layerdim.width; + } + + if (layerLeft < 0) { + layerLeft = 0; + } + + + + // calculate top of layer + var layerTop = bottom; + + if ( (layerdim.height + 20) < (win.height - (bottom-winOffset.top)) ) { + layerTop = bottom; + } else { + if ( (top-winOffset.top) > (layerdim.height + 20) ) { + layerTop = top - layerdim.height; + } else { + layerTop = windowHeight - 20 - layerdim.height + winOffset.top; + } // else + } // else + + // fixing negative layerTop + if (layerTop < 0) { + layerTop = 0; + } + + this.layer.style.left = layerLeft + "px"; + this.layer.style.top = layerTop + "px"; + + + Exadel.Menu.Layers.LMPopUp(this.layer.id, false); + Exadel.Menu.Layers.clearLMTO(); + }.bind(this); +} + +Exadel.Menu.DelayedPopUp = function(layer, e) { + if (!e) { + e = window.event; + } + + this.event = e; + this.element = Event.findElement(e, 'td'); + this.layer = $(layer); + + this.show = function() { + if (!Exadel.Menu.Layers.isVisible(this.layer)){ + this.reposition(); + Exadel.Menu.Layers.LMPopUp(this.layer, false); + } + }.bind(this); +} + +Exadel.Menu.DelayedPopUp.prototype.reposition = function() { + var body = Exadel.Menu.getPageDimensions(); + var windowHeight = body.height; + var windowWidth = body.width; + var scrolls = {top:0, left:0}; + var screenOffset = Position.cumulativeOffset(this.element); + var dim = Element.getDimensions(this.element); + var top = screenOffset[1] + scrolls.top; + var bottom = top + dim.height; + var left = screenOffset[0] + scrolls.left; + var right = left + dim.width; + var layerdim = Element.getDimensions(this.layer); + var layerLeft = right; + + if (layerLeft + layerdim.width >= windowWidth) { + layerLeft = left - layerdim.width + Exadel.Menu.Layers.shadowWidth; + } + + if (layerLeft < 0) { + layerLeft = 0; + } + + // search offsetTop (ch-1351) + var layerOffset = Position.cumulativeOffset(this.layer); + var items = document.getElementsByClassName("exadel_menuItem",this.layer); + var nodes = document.getElementsByClassName("exadel_menuNode",this.layer); + var firstItem = (items.length>0) ? items[0] : ((nodes.length>0) ? nodes[0] : null); + if (firstItem) { + if (nodes.length>0 && firstItem.offsetTop>nodes[0].offsetTop) firstItem = nodes[0]; + var itemOffset = Position.cumulativeOffset(firstItem); + layertop = top -(itemOffset[1]-layerOffset[1]); + if (layertop + layerdim.height >= windowHeight) { + var lastItem = (items.length>0) ? items[items.length-1] : nodes[nodes.length-1]; + if (nodes.length>0 && lastItem.offsetTop<nodes[nodes.length-1].offsetTop) lastItem = nodes[nodes.length-1]; + itemOffset = Position.cumulativeOffset(lastItem); + layertop = top -(itemOffset[1]-layerOffset[1]); + } + } else layertop = top - Exadel.Menu.Layers.CornerRadius; + + if (layertop < 0) { + layertop = 0; + } + + this.layer.style.left = layerLeft + "px"; + this.layer.style.top = layertop + "px"; +} +/** + * set to true when a dropdown box inside menu receives focus + */ +Exadel.Menu.selectOpen = false; +Exadel.Menu.MouseIn = false; + + +Exadel.Menu.Layer = Class.create(); +Exadel.Menu.Layer.mouseover = + function(e){ + Exadel.Menu.MouseIn=true; + Exadel.Menu.Layers.clearLMTO(); + Event.stop(e); + }.bindAsEventListener(); + +Exadel.Menu.Layer.mouseout = + function(e){ + Exadel.Menu.MouseIn = false; + if (!Exadel.Menu.selectOpen) { + Exadel.Menu.Layers.setLMTO(); + } + Event.stop(e); + }.bindAsEventListener(); + +Exadel.Menu.Layer.openSelect = function(){ + Exadel.Menu.selectOpen = true; + var ClickInput = Exadel.Menu.Layer.ClickInput.bindAsEventListener(this); + Event.observe(Event.element(event), "click", Exadel.Menu.Layer.ClickInput); + +} +Exadel.Menu.Layer.closeSelect = function(){ + Exadel.Menu.selectOpen = false; + + var ClickInput = Exadel.Menu.Layer.ClickInput.bindAsEventListener(this); + Event.stopObserving(Event.element(event), "click", Exadel.Menu.Layer.ClickInput); + if (Exadel.Menu.MouseIn == false){ + Exadel.Menu.Layers.setLMTO(); + } +} + +Exadel.Menu.Layer.OnKeyPress = function(event){ + + if(event.keyCode==13){ + Exadel.Menu.Layers.setLMTO(); + } +} + + +Exadel.Menu.Layer.MouseoverInInput = function(event){ +//alert("event rabotaet "+ event.target); +var ClickInput = Exadel.Menu.Layer.ClickInput.bindAsEventListener(this); +Event.observe(Event.element(event), "click", Exadel.Menu.Layer.ClickInput); + + +} + +Exadel.Menu.Layer.ClickInput = function(event){ + //alert("event rabotaet dsds "); + Event.stop(event || window.event); + return false; +} + +Exadel.Menu.Layer.MouseoutInInput = function(event){ + var ClickInput = Exadel.Menu.Layer.ClickInput.bindAsEventListener(this); + Event.stopObserving(Event.element(event), "click", Exadel.Menu.Layer.ClickInput); + +} + + +Exadel.Menu.Layer.prototype = { + initialize: function(id,delay){ + Exadel.Menu.Layers.listl.push(id); + this.id = id; + this.layer = $(id); + this.level = 0; + this.delay = delay; + Exadel.Menu.fitLayerToContent(this.layer); + this.items = new Array(); + Exadel.Menu.Layers.layers[id] = this; + this.bindings = new Array(); + + var binding = new Exadel.Menu.Layer.Binding ( + this.id, + "mouseover", + Exadel.Menu.Layer.mouseover); + + this.bindings.push(binding); + binding.refresh(); + binding = new Exadel.Menu.Layer.Binding ( + this.id, + "mouseout", + Exadel.Menu.Layer.mouseout); + this.bindings.push(binding); + binding.refresh(); + + $A(this.layer.getElementsByTagName("select")) + .each( + function(select) { + Event.observe(select, "focus", Exadel.Menu.Layer.openSelect); + Event.observe(select, "blur", Exadel.Menu.Layer.closeSelect); + + var MouseoverInInput = Exadel.Menu.Layer.MouseoverInInput.bindAsEventListener(this); + var MouseoutInInput = Exadel.Menu.Layer.MouseoutInInput.bindAsEventListener(this); + Event.observe(select, "mouseover", MouseoverInInput); + Event.observe(select, "mouseout", MouseoutInInput); + + var OnKeyPress = Exadel.Menu.Layer.OnKeyPress.bindAsEventListener(this); + Event.observe(select, "keypress", OnKeyPress); + + } + ); + + $A(this.layer.getElementsByTagName("input")) + .each( + function(input) { + //alert("add event"); + Event.observe(input, "focus", Exadel.Menu.Layer.openSelect); + Event.observe(input, "blur", Exadel.Menu.Layer.closeSelect); + + + var MouseoverInInput = Exadel.Menu.Layer.MouseoverInInput.bindAsEventListener(this); + var MouseoutInInput = Exadel.Menu.Layer.MouseoutInInput.bindAsEventListener(this); + Event.observe(input, "mouseover", MouseoverInInput); + Event.observe(input, "mouseout", MouseoutInInput); + + var OnKeyPress = Exadel.Menu.Layer.OnKeyPress.bindAsEventListener(this); + Event.observe(input, "keypress", OnKeyPress); + + } + ); + + + $A(this.layer.getElementsByTagName("textarea")) + .each( + function(textarea) { + Event.observe(textarea, "focus", Exadel.Menu.Layer.openSelect); + Event.observe(textarea, "blur", Exadel.Menu.Layer.closeSelect); + + var MouseoverInInput = Exadel.Menu.Layer.MouseoverInInput.bindAsEventListener(this); + var MouseoutInInput = Exadel.Menu.Layer.MouseoutInInput.bindAsEventListener(this); + Event.observe(textarea, "mouseover", MouseoverInInput); + Event.observe(textarea, "mouseout", MouseoutInInput); + } + ); + + + + + + if(window.A4J && A4J.AJAX ){ + var listener = new A4J.AJAX.Listener(this.rebind.bindAsEventListener(this)); + A4J.AJAX.AddListener(listener); + } + }, + rebind:function(){ + $A(this.bindings) + .each( + function(binding){ + binding.refresh(); + } + ); + }, + showMe: function(e){ + this.closeSiblings(e); + //LOG.a4j_debug('show me ' + this.id +' ' +this.level); + Exadel.Menu.Layers.showMenuLayer(this.id, e, this.delay); + Exadel.Menu.Layers.levels[this.level] = this; + + + }, + closeSiblings: function(e){ + //LOG.a4j_debug('closeASiblins ' + this.id +' ' +this.level); + if(Exadel.Menu.Layers.levels[this.level] && Exadel.Menu.Layers.levels[this.level].id != this.id){ + for(var i = this.level; i < Exadel.Menu.Layers.levels.length; i++){ + if(Exadel.Menu.Layers.levels[i]) { + Exadel.Menu.Layers.levels[i].hideMe(); + //Exadel.Menu.Layers.levels[i] = ''; + } + } + } + }, + closeMinors: function(id){ + //LOG.a4j_debug('closeMinors ' + this.id +' ' +this.level); + var item = this.items[id]; + if(!item.childMenu){ + //LOG.a4j_debug('hiding menus ' + this.id +' ' +this.level); + for(var i = this.level + 1; i < Exadel.Menu.Layers.levels.length; i++){ + if(Exadel.Menu.Layers.levels[i]) { + //LOG.a4j_debug('hide ' +Exadel.Menu.Layers.levels[i]); + Exadel.Menu.Layers.levels[i].hideMe(); + } + } + } + + }, + addItem: function(itemId, hoverClass, plainClass, hoverStyle, plainStyle){ + var dis = this; + var item = {}; + item.hoverClass = hoverClass;// = hoverClass.split(" "); + item.plainClass = plainClass;//.split(" "); + item.hoverStyle = Exadel.extractCamelizedRules(hoverStyle); + item.plainStyle = Exadel.extractCamelizedRules(plainStyle); + item.id = itemId; + item.obj = $(itemId); + item.menu = this; + this.items[itemId] = item; + var onmouseover = + function(e){ + $(this.id).className = this.hoverClass; + if(this.hoverStyle) { + Exadel.replaceStyleHash($(this.id), this.plainStyle, this.hoverStyle); + } + this.menu.closeMinors(this.id); + }.bindAsEventListener(item); + var onmouseout = + function(e){ + $(this.id).className = this.plainClass; + if(this.hoverStyle) { + Exadel.replaceStyleHash($(this.id), this.hoverStyle, this.plainStyle); + } + }.bindAsEventListener(item); + + var binding = new Exadel.Menu.Layer.Binding ( + item.id, + "mouseover", + onmouseover); + + this.bindings.push(binding); + binding.refresh(); + binding = new Exadel.Menu.Layer.Binding ( + item.id, + "mouseout", + onmouseout); + this.bindings.push(binding); + binding.refresh(); + return this; + }, + hideMe: function(e){ + Exadel.Menu.Layers.clearPopUpTO(); + Exadel.Menu.Layers.levels[this.level] = null; + Exadel.Menu.Layers.LMPopUpL(this.id, false); + + }, + asDropDown: function(topLevel, onEvt, offEvt){ +// if($(topLevel)){ CH-1518 + var onmouseover = function(e){ + if (!e) { + e = window.event; + } + Exadel.Menu.Layers.showDropDownLayer(this.id, topLevel, e,this.delay); + }.bindAsEventListener(this); + + if(!onEvt){ + onEvt = 'onmouseover'; + } + onEvt = this.eventJsToPrototype(onEvt); + if(!offEvt){ + offEvt = 'onmouseout'; + } + offEvt = this.eventJsToPrototype(offEvt); + + var dis = this; + var onmouseout = + function(e){ + Exadel.Menu.Layers.setLMTO(); + Exadel.Menu.Layers.clearPopUpTO(); + }.bindAsEventListener(this); + +// var item = $(topLevel); + var binding = new Exadel.Menu.Layer.Binding(topLevel,onEvt, onmouseover); + this.bindings.push(binding); + binding.refresh(); + binding = new Exadel.Menu.Layer.Binding (topLevel, offEvt, onmouseout); + this.bindings.push(binding); + binding.refresh(); + + Exadel.Menu.Layers.horizontals[this.id] = topLevel; +// } + return this; + }, + asSubMenu: function(parent, refLayerName, evtName){ + if(!evtName){ + evtName = 'onmouseover'; + } + evtName = this.eventJsToPrototype(evtName); + this.level = Exadel.Menu.Layers.layers[parent].level + 1; + Exadel.Menu.Layers.father[this.id] = parent; + if(!refLayerName){ + refLayerName = 'ref' + parent; + } + var refLayer = $(refLayerName); + this.refItem = Exadel.Menu.Layers.layers[parent].items[refLayerName]; + this.refItem.childMenu = this; + var binding = new Exadel.Menu.Layer.Binding(refLayerName, evtName, this.showMe.bindAsEventListener(this)); + this.bindings.push(binding); + binding.refresh(); + return this; + }, + asContextMenu: function(parent, evt){ + var refLayer = $(parent); + if(!refLayer) return this; + var id = this.id; + if(!evt){ + evt = 'onclick'; + } + var offEvt = 'onmouseout'; + offEvt = this.eventJsToPrototype(offEvt); + + var dis = this; + var onmouseout = + function(e){ + Exadel.Menu.Layers.setLMTO(); + Exadel.Menu.Layers.clearPopUpTO(); + }.bindAsEventListener(this); + evt = this.eventJsToPrototype(evt); + var handler = function(e){new Exadel.Menu.DelayedContextMenu(this.id, e).show();}.bindAsEventListener(this); + var binding = new Exadel.Menu.Layer.Binding (parent, evt, handler); + this.bindings.push(binding); + binding.refresh(); + binding = new Exadel.Menu.Layer.Binding (parent, offEvt, onmouseout); + this.bindings.push(binding); + binding.refresh(); + return this; + }, + eventJsToPrototype: function(evtName){ + var indexof = evtName.indexOf('on'); + if(indexof >= 0){ + evtName = evtName.substr(indexof + 2); + } + return evtName; + } + +}; + +Exadel.Menu.Layer.Binding = Class.create(); +Exadel.Menu.Layer.Binding.prototype = { + initialize:function(objectId, eventname, handler){ + this.objectId = objectId; + this.eventname = eventname; + this.handler = handler; + }, + refresh:function(){ + /*LOG.a4j_debug("rebinding " + $H(this).inspect());*/ + var obj = $(this.objectId); + if(obj){ + Event.stopObserving(obj, this.eventname, this.handler); + Event.observe(obj, this.eventname, this.handler); + return true; + } + return false; + } +}; +if(!Exadel.Menu.Item) Exadel.Menu.Item = {}; + +/** + * + */ +Exadel.Menu.Item.Onclick = function(evt, item, action, params, target) { + var form = Event.findElement(evt, 'form'); + + /*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(); + Exadel.Menu.Item._createOrInitHiddenInput(item + ":submit", item + ":submit", objectsCreated, oldValues, form); + + if (params) { + + for (var param in params) { + var paramName = param; + var paramValue = params[paramName]; + if (typeof(paramValue) != 'function') { + if (paramValue) { + paramValue = String(paramValue); + } + Exadel.Menu.Item._createOrInitHiddenInput(paramName, paramValue, objectsCreated, oldValues, form); + + } + } + } + + 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; + } + } + } + +Exadel.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: trunk/richfaces/dropdown-menu/src/main/templates/org/richfaces/htmlDropDownMenu.jspx =================================================================== --- trunk/richfaces/dropdown-menu/src/main/templates/org/richfaces/htmlDropDownMenu.jspx 2007-03-27 14:22:11 UTC (rev 173) +++ trunk/richfaces/dropdown-menu/src/main/templates/org/richfaces/htmlDropDownMenu.jspx 2007-03-27 15:13:35 UTC (rev 174) @@ -14,23 +14,40 @@ <h:scripts> new org.ajax4jsf.framework.resource.PrototypeScript(), new org.ajax4jsf.framework.ajax.AjaxScript(), + scripts/menu.js, + scripts/css-rules.js </h:scripts> <f:clientid var="clientId"/> <jsp:scriptlet> <![CDATA[org.richfaces.component.util.FormUtil.throwEnclFormReqExceptionIfNeed(context,component);]]> </jsp:scriptlet> - <div class="dr-menu-label dr-menu-label-unselect rich-menu-label rich-menu-label-unselect #{component.attributes['styleClass']}" + <div id="#{clientId}" class="dr-menu-label dr-menu-label-unselect rich-menu-label rich-menu-label-unselect #{component.attributes['styleClass']}" style="#{component.attributes['style']};" onmouseover="this.className='dr-menu-label dr-menu-label-select rich-menu-label rich-menu-label-select'" onmouseout="this.className='dr-menu-label dr-menu-label-unselect rich-menu-label rich-menu-label-unselect'"> <span class="dr-label-text-decor rich-label-text-decor">#{component.attributes['value']}</span> - <div id="#{clientId}" - style="width: #{component.attributes['popupWidth']};" + <div id="#{clientId}_menu" + style="width: #{component.attributes['popupWidth']}; visibility: hidden; z-index:100;" class="dr-menu-list-border dr-menu-list-position rich-menu-list-border rich-menu-list-position"> <div class="dr-menu-list-bg rich-menu-list-bg"> <f:call name="renderChildren" /> </div> </div> - </div> + + <iframe class="underneath_iframe" id="#{clientId}_menu_iframe" style="position:absolute"> + </iframe> + <iframe class="underneath_iframe" id="#{clientId}_menu_iframe1" style="position:absolute"> + </iframe> + <script type="text/javascript"> + <f:call name="encodeScript" /> + </script> + + </div> + + + + + + </f:root> \ No newline at end of file