[richfaces-svn-commits] JBoss Rich Faces SVN: r17793 - in root/ui-sandbox/panels2/trunk: ui and 6 other directories.

Author: amarkhel Date: 2010-07-09 15:36:32 -0400 (Fri, 09 Jul 2010) New Revision: 17793 Added: root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/script/popupPanelSizer.js Modified: root/ui-sandbox/panels2/trunk/parent/ root/ui-sandbox/panels2/trunk/ui/ root/ui-sandbox/panels2/trunk/ui/src/main/java/org/richfaces/component/UIPopupPanel.java root/ui-sandbox/panels2/trunk/ui/src/main/java/org/richfaces/renderkit/html/PopupPanelBaseRenderer.java root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/css/popupPanel.ecss root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/faces-config.xml root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/panels.taglib.xml root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/script/popupPanel.js root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/script/popupPanelBorders.js root/ui-sandbox/panels2/trunk/ui/src/main/templates/popupPanel.template.xml Log: Property changes on: root/ui-sandbox/panels2/trunk/parent ___________________________________________________________________ Name: svn:ignore + target Property changes on: root/ui-sandbox/panels2/trunk/ui ___________________________________________________________________ Name: svn:ignore + .classpath .project .settings target Modified: root/ui-sandbox/panels2/trunk/ui/src/main/java/org/richfaces/component/UIPopupPanel.java =================================================================== --- root/ui-sandbox/panels2/trunk/ui/src/main/java/org/richfaces/component/UIPopupPanel.java 2010-07-09 18:09:13 UTC (rev 17792) +++ root/ui-sandbox/panels2/trunk/ui/src/main/java/org/richfaces/component/UIPopupPanel.java 2010-07-09 19:36:32 UTC (rev 17793) @@ -57,7 +57,7 @@ } public int getHeight() { - return (Integer) getStateHelper().eval(PropertyKeys.height); + return (Integer) getStateHelper().eval(PropertyKeys.height, 400); } public void setHeight(int height) { @@ -65,7 +65,7 @@ } public int getWidth() { - return (Integer) getStateHelper().eval(PropertyKeys.width); + return (Integer) getStateHelper().eval(PropertyKeys.width, 600); } public void setWidth(int width) { @@ -89,7 +89,7 @@ } public int getMaxHeight() { - return (Integer) getStateHelper().eval(PropertyKeys.maxHeight); + return (Integer) getStateHelper().eval(PropertyKeys.maxHeight, 0); } public void setMaxHeight(int maxheight) { @@ -97,7 +97,7 @@ } public int getMaxWidth() { - return (Integer) getStateHelper().eval(PropertyKeys.maxWidth); + return (Integer) getStateHelper().eval(PropertyKeys.maxWidth, 0); } public void setMaxWidth(int maxWidth) { @@ -128,31 +128,31 @@ getStateHelper().put(PropertyKeys.left, left); } - public Boolean isShow() { - return (Boolean) getStateHelper().eval(PropertyKeys.show); + public boolean isShow() { + return (Boolean) getStateHelper().eval(PropertyKeys.show, false); } public void setShow(Boolean show) { getStateHelper().put(PropertyKeys.show, show); } - public Boolean isMoveable() { - return (Boolean) getStateHelper().eval(PropertyKeys.moveable); + public boolean isMoveable() { + return (Boolean) getStateHelper().eval(PropertyKeys.moveable, true); } - public void setModeable(Boolean moveable) { + public void setMoveable(Boolean moveable) { getStateHelper().put(PropertyKeys.moveable, moveable); } - public Boolean isAutosized() { - return (Boolean) getStateHelper().eval(PropertyKeys.autosized); + public boolean isAutosized() { + return (Boolean) getStateHelper().eval(PropertyKeys.autosized, false); } public void setAutosized(Boolean autosized) { getStateHelper().put(PropertyKeys.autosized, autosized); } - public Boolean isModal() { + public boolean isModal() { return (Boolean) getStateHelper().eval(PropertyKeys.modal, true); } @@ -160,23 +160,23 @@ getStateHelper().put(PropertyKeys.modal, modal); } - public Boolean isKeepVisualState() { - return (Boolean) getStateHelper().eval(PropertyKeys.keepVisualState); + public boolean isKeepVisualState() { + return (Boolean) getStateHelper().eval(PropertyKeys.keepVisualState, false); } public void setKeepVisualState(Boolean keepVisualState) { getStateHelper().put(PropertyKeys.keepVisualState, keepVisualState); } - public Boolean isOverlapEmbedObjects() { - return (Boolean) getStateHelper().eval(PropertyKeys.overlapEmbedObjects); + public boolean isOverlapEmbedObjects() { + return (Boolean) getStateHelper().eval(PropertyKeys.overlapEmbedObjects, false); } public void setOverlapEmbedObjects(Boolean overlapEmbedObjects) { getStateHelper().put(PropertyKeys.overlapEmbedObjects, overlapEmbedObjects); } - public Boolean isResizeable() { + public boolean isResizeable() { return (Boolean) getStateHelper().eval(PropertyKeys.resizeable, true); } @@ -184,8 +184,8 @@ getStateHelper().put(PropertyKeys.resizeable, resizeable); } - public Boolean isTrimOverlayedElements() { - return (Boolean) getStateHelper().eval(PropertyKeys.trimOverlayedElements); + public boolean isTrimOverlayedElements() { + return (Boolean) getStateHelper().eval(PropertyKeys.trimOverlayedElements, false); } public void setTrimOverlayedElements(Boolean trimOverlayedElements) { Modified: root/ui-sandbox/panels2/trunk/ui/src/main/java/org/richfaces/renderkit/html/PopupPanelBaseRenderer.java =================================================================== --- root/ui-sandbox/panels2/trunk/ui/src/main/java/org/richfaces/renderkit/html/PopupPanelBaseRenderer.java 2010-07-09 18:09:13 UTC (rev 17792) +++ root/ui-sandbox/panels2/trunk/ui/src/main/java/org/richfaces/renderkit/html/PopupPanelBaseRenderer.java 2010-07-09 19:36:32 UTC (rev 17793) @@ -5,25 +5,33 @@ import java.util.Iterator; import java.util.Map; import java.util.Set; +import java.util.Map.Entry; import javax.faces.application.ResourceDependencies; import javax.faces.application.ResourceDependency; import javax.faces.component.UIComponent; +import javax.faces.context.ExternalContext; import javax.faces.context.FacesContext; import org.ajax4jsf.javascript.JSFunctionDefinition; import org.ajax4jsf.renderkit.RendererBase; import org.richfaces.component.UIPopupPanel; -@ResourceDependencies( { - @ResourceDependency(name = "jquery.js"), @ResourceDependency(name = "script/popupPanel.js"), - @ResourceDependency(name = "script/popupPanelBorders.ecss") + +@ResourceDependencies( { + @ResourceDependency(name = "jquery.js"), @ResourceDependency(name = "richfaces.js"), + @ResourceDependency(name = "richfaces-base-component.js"), @ResourceDependency(name = "script/popupPanel.js"), + @ResourceDependency(name = "script/popupPanelBorders.js"), + @ResourceDependency(name = "script/popupPanelSizer.js"), + @ResourceDependency(name = "css/popupPanel.ecss") + }) public class PopupPanelBaseRenderer extends RendererBase{ private static final String CONTROLS_FACET = "controls"; private static final String HEADER_FACET = "header"; private static final int sizeA = 10; + private static final String STATE_OPTION_SUFFIX = "StateOption_"; public String getShadowStyle(FacesContext context, UIComponent component) { UIPopupPanel panel = (UIPopupPanel)component; @@ -46,7 +54,7 @@ protected void doDecode(FacesContext context, UIComponent component) { super.doDecode(context, component); - /*UIPopupPanel panel = (UIPopupPanel)component; + UIPopupPanel panel = (UIPopupPanel)component; ExternalContext exCtx = context.getExternalContext(); Map<String, String> rqMap = exCtx.getRequestParameterMap(); Object panelOpenState = rqMap.get(panel.getClientId(context) + "OpenedState"); @@ -71,8 +79,8 @@ visualOptions.put(key, entry.getValue()); } } - }*/ - //} + } + } } protected Class getComponentClass() { @@ -139,7 +147,7 @@ // We are already processed KeepVisualState and current open state in // doDecode, so no need to check panel.isKeepVisualState() here. if (/*panel.isKeepVisualState() || */panel.isShow()) { - result.append("Richfaces.showModalPanel('" + panel.getClientId(context) + "', {"); + result.append("RichFaces.ui.PopupPanel.showPopupPanel('" + panel.getClientId(context) + "', {"); Iterator<Map.Entry<String, Object>> it = ((Map<String, Object>) panel.getVisualOptions()).entrySet().iterator(); while (it.hasNext()) { @@ -159,7 +167,7 @@ public String buildScript(FacesContext context, UIComponent component) throws IOException { UIPopupPanel panel = (UIPopupPanel)component; StringBuilder result = new StringBuilder(); - result.append("new ModalPanel('"); + result.append("new RichFaces.ui.PopupPanel('"); result.append(panel.getClientId()); result.append("',{"); result.append("width:"); @@ -180,7 +188,7 @@ result.append("maxHeight:"); result.append(panel.getMaxHeight()); result.append(","); - result.append("resizable:"); + result.append("resizeable:"); result.append(panel.isResizeable()); result.append(","); result.append("moveable:"); @@ -218,9 +226,9 @@ result.append(","); result.append("overlapEmbedObjects:"); result.append(panel.isOverlapEmbedObjects()); - result.append(","); - writeVisualOptions(context, panel); - result.append("}');"); + //result.append(","); + //result.append(writeVisualOptions(context, panel)); + result.append("});"); return result.toString(); } Modified: root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/css/popupPanel.ecss =================================================================== --- root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/css/popupPanel.ecss 2010-07-09 18:09:13 UTC (rev 17792) +++ root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/css/popupPanel.ecss 2010-07-09 19:36:32 UTC (rev 17793) @@ -1,14 +1,13 @@ .mp-button { outline-style: none; position: absolute; - border: 10px solid red; - position: absolute; clip: rect(0px 0px 1px 1px); - height: 10px; - width: 10px; - left: 0px; + height: 0px; + width: 0px; + left: 0px; top: 0px; z-index: -300; + opacity:0.1; } .mp_shade { @@ -17,8 +16,8 @@ height : 100%; top:0px; left : 0px; - background : black; - filter : alpha(opacity=50); opacity:0.5; + background : #D0D0D0; + opacity:0.5; } .mp_iframe { position : absolute; @@ -26,34 +25,35 @@ height : 100%; top:0px; left : 0px; - filter : alpha(opacity=0); + opacity:0.3; } .mp_shadow { - background-image:"url(#{resource['images/bg_shadow.png']})"; position : fixed; top : 50%; left : 50%; - width : 620px /*visible modal panel width plus 20px*/; - height : 420px /*visible modal panel height plus 20px*/; - background : none; - margin-top : -208px /*half of width minus 2px*/; - margin-left : -308px /*half of height minus 2px*/; + width : 602px; + height : 402px ; + background-color : #000000; + margin-top : -197px; + margin-left : -297px; + opacity:0.1; } .mp_container { position : fixed; top : 50%; left : 50%; - width : 600px /*visible modal panel width*/; - height : 400px /*visible modal panel height*/; - margin-top : -200px /*half of height*/; - margin-left : -300px /*half of width*/; + width : 600px; + height : 400px; + margin-top : -200px; + margin-left : -300px; border : '1px solid #{richSkin.panelBorderColor}'; background : '#{richSkin.generalBackgroundColor}'; + z-index:100; } .mp_header { background : "url(#{resource['org.richfaces.renderkit.html.GradientA']})"; - repeat-x : 'top left #{richSkin.headerBackgroundColor};; - height : 30px /*header height*/; + repeat-x : 'top left #{richSkin.headerBackgroundColor}'; + height : 30px; position : relative; padding-right : 60px; padding-left : 10px; @@ -78,7 +78,7 @@ top : 8px; right : 8px; white-space : nowrap; - cursor : default + cursor : default; } .mp_header_icon { background : "url(#{resource['images/edit.gif']}) no-repeat center"; @@ -90,13 +90,13 @@ text-align : middle; } .mp_content_scroller { - width : 600px /*visible modal panel width*/; - height : 370px /*visible modal panel height minus header height*/; + width : 600px ; + height : 370px ; position : relative; top : 0px; left : 0px; - !overflow : auto; - !overflow-x : hidden; + overflow : auto; + overflow-x : hidden; } .mp_content { position : relative; @@ -107,7 +107,7 @@ } .mp_handler { background : red; - filter : alpha(opacity=0); + filter : 'alpha(opacity=0)'; opacity:0; position : absolute; margin : -4px; Modified: root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/faces-config.xml =================================================================== --- root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/faces-config.xml 2010-07-09 18:09:13 UTC (rev 17792) +++ root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/faces-config.xml 2010-07-09 19:36:32 UTC (rev 17793) @@ -6,6 +6,10 @@ <component> <component-type>org.richfaces.Panel</component-type> <component-class>org.richfaces.component.UIPanel</component-class> + </component> + <component> + <component-type>org.richfaces.PopupPanel</component-type> + <component-class>org.richfaces.component.UIPopupPanel</component-class> </component> <render-kit> <render-kit-id>HTML_BASIC</render-kit-id> @@ -13,6 +17,11 @@ <component-family>org.richfaces.Panel</component-family> <renderer-type>org.richfaces.PanelRenderer</renderer-type> <renderer-class>org.richfaces.renderkit.html.PanelRenderer</renderer-class> + </renderer> + <renderer> + <component-family>org.richfaces.PopupPanel</component-family> + <renderer-type>org.richfaces.PopupPanelRenderer</renderer-type> + <renderer-class>org.richfaces.renderkit.html.PopupPanelRenderer</renderer-class> </renderer> </render-kit> <faces-config-extension> Modified: root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/panels.taglib.xml =================================================================== --- root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/panels.taglib.xml 2010-07-09 18:09:13 UTC (rev 17792) +++ root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/panels.taglib.xml 2010-07-09 19:36:32 UTC (rev 17793) @@ -11,5 +11,13 @@ <component-type>org.richfaces.Panel</component-type> <renderer-type>org.richfaces.PanelRenderer</renderer-type> </component> + </tag> + + <tag> + <tag-name>popupPanel</tag-name> + <component> + <component-type>org.richfaces.PopupPanel</component-type> + <renderer-type>org.richfaces.PopupPanelRenderer</renderer-type> + </component> </tag> </facelet-taglib> Modified: root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/script/popupPanel.js =================================================================== --- root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/script/popupPanel.js 2010-07-09 18:09:13 UTC (rev 17792) +++ root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/script/popupPanel.js 2010-07-09 19:36:32 UTC (rev 17793) @@ -1,1087 +1,789 @@ -/*if (!window.DW) { - window.DW = {}; -} +(function ($, richfaces) { + + richfaces.ui = richfaces.ui || {}; + var selectionEventHandler=function(event){event.stopPropagation();}; -if (!window.Richfaces) { - window.Richfaces = {}; -} - -function discardElement(element) { - var garbageBin = document.getElementById('IELeakGarbageBin'); - if (!garbageBin) { - garbageBin = document.createElement('DIV'); - garbageBin.id = 'IELeakGarbageBin'; - garbageBin.style.display = 'none'; - document.body.appendChild(garbageBin); - } - - window.RichFaces.Memory.clean(element); - // move the element to the garbage bin - garbageBin.appendChild(element); - garbageBin.innerHTML = ''; -}*/ - -Selection = {}; -Selection.eventHandler=function(event){Event.stop(event);}; -Selection.eventHandler = Selection.eventHandler.bindAsEventListener(Selection); -Selection.disableSelection = function (element) -{ - if (typeof element.onselectstart!="undefined") //IE + var disableSelection = function (element) { - Event.observe(element, 'selectstart', this.eventHandler); + if (typeof element.onselectstart!="undefined") //IE + { + jQuery(element).bind( 'selectstart', this.selectionEventHandler); + } + else if (typeof element.style.MozUserSelect!="undefined") //Firefox + { + jQuery(element).css('MozUserSelect','none'); + } + else //All other (ie: Opera) + { + jQuery(element).bind( 'mousedown', this.selectionEventHandler); + } } - else if (typeof element.style.MozUserSelect!="undefined") //Firefox + + var enableSelection = function (element) { - element.style.MozUserSelect="none"; + if (typeof element.onselectstart!="undefined") //IE + { + jQuery(element).unbind( 'selectstart', this.selectionEventHandler); + } + else if (typeof element.style.MozUserSelect!="undefined") //Firefox + { + jQuery(element).css('MozUserSelect',''); + } + else //All other (ie: Opera) + { + jQuery(element).unbind( 'mousedown', this.selectionEventHandler); + } } - else //All other (ie: Opera) - { - Event.observe(element, 'mousedown', this.eventHandler); - } -} -Selection.enableSelection = function (element) -{ - if (typeof element.onselectstart!="undefined") //IE - { - Event.stopObserving(element, 'selectstart', this.eventHandler); + PANELS = new Array(); + ACTIVEPANELS = new Array(); + var getSizeElements = function() { + return document.body; } - else if (typeof element.style.MozUserSelect!="undefined") //Firefox - { - element.style.MozUserSelect=""; - } - else //All other (ie: Opera) - { - Event.stopObserving(element, 'mousedown', this.eventHandler); - } -} -ModalPanel = Class.create(); - -ModalPanel.panels = new Array(); -ModalPanel.activePanels = new Array(); - -function getSizeElement() { - /*var element; - if (RichFaces.navigatorType() != RichFaces.OPERA && document.compatMode=='CSS1Compat') { - element = document.documentElement; - } else { - element = document.body; - }*/ - - return document.body; -} - -ModalPanel.getMinimumSize = function(size) { - return Math.max(size, 2*ModalPanel.Sizer.INITIAL_MIN + 2); -}; - -ModalPanel.prototype = { - initialize: function(id, options) { - this["rich:destructor"] = "destroy"; - + var getMinimumSize = function(size) { + return Math.max(size, 2*richfaces.ui.PopupPanel.Sizer.INITIAL_MIN + 2);//TODO + }; + + richfaces.ui.PopupPanel = function(id, options) { + + $super.constructor.call(this,id); + + $p.attachToDom.call(this, id); + id = "#" + id; + this.options = options; + this.firstOutside = null; + this.lastOutside = null; this.markerId = $(id); - this.id = $(id + "Container"); - + this.id = $(id); + this.options = options; this.baseZIndex = this.options.zindex ? this.options.zindex : 100; - this.minWidth = ModalPanel.getMinimumSize(this.options.minWidth); - this.minHeight = ModalPanel.getMinimumSize(this.options.minHeight); + this.minWidth = getMinimumSize(this.options.minWidth); + this.minHeight = getMinimumSize(this.options.minHeight); + + this.div = id; + this.cdiv = id + "_container";//TODO remove one + this.contentDiv = id + "_content"; + this.shadowDiv = id + "_shadow"; - this.div = id + "Div"; - this.cursorDiv = id + "CursorDiv"; - this.cdiv = id + "CDiv"; - this.contentDiv = id + "ContentDiv"; - this.contentTable = id + "ContentTable"; - this.shadowDiv = id + "ShadowDiv"; - this.borders = new Array(); if (this.options.resizeable) { - this.borders.push(new ModalPanel.Border(id + "ResizerN", this, "N-resize", ModalPanel.Sizer.N)); - this.borders.push(new ModalPanel.Border(id + "ResizerE", this, "E-resize", ModalPanel.Sizer.E)); - this.borders.push(new ModalPanel.Border(id + "ResizerS", this, "S-resize", ModalPanel.Sizer.S)); - this.borders.push(new ModalPanel.Border(id + "ResizerW", this, "W-resize", ModalPanel.Sizer.W)); + this.borders.push(new richfaces.ui.PopupPanel.Border(id + "ResizerN", this, "N-resize", richfaces.ui.PopupPanel.Sizer.N)); + this.borders.push(new richfaces.ui.PopupPanel.Border(id + "ResizerE", this, "E-resize", richfaces.ui.PopupPanel.Sizer.E)); + this.borders.push(new richfaces.ui.PopupPanel.Border(id + "ResizerS", this, "S-resize", richfaces.ui.PopupPanel.Sizer.S)); + this.borders.push(new richfaces.ui.PopupPanel.Border(id + "ResizerW", this, "W-resize", richfaces.ui.PopupPanel.Sizer.W)); - this.borders.push(new ModalPanel.Border(id + "ResizerNWU", this, "NW-resize", ModalPanel.Sizer.NWU)); - this.borders.push(new ModalPanel.Border(id + "ResizerNEU", this, "NE-resize", ModalPanel.Sizer.NEU)); - this.borders.push(new ModalPanel.Border(id + "ResizerNEL", this, "NE-resize", ModalPanel.Sizer.NEL)); - this.borders.push(new ModalPanel.Border(id + "ResizerSEU", this, "SE-resize", ModalPanel.Sizer.SEU)); - this.borders.push(new ModalPanel.Border(id + "ResizerSEL", this, "SE-resize", ModalPanel.Sizer.SEL)); - this.borders.push(new ModalPanel.Border(id + "ResizerSWL", this, "SW-resize", ModalPanel.Sizer.SWL)); - this.borders.push(new ModalPanel.Border(id + "ResizerSWU", this, "SW-resize", ModalPanel.Sizer.SWU)); - this.borders.push(new ModalPanel.Border(id + "ResizerNWL", this, "NW-resize", ModalPanel.Sizer.NWL)); + this.borders.push(new richfaces.ui.PopupPanel.Border(id + "ResizerNW", this, "NW-resize", richfaces.ui.PopupPanel.Sizer.NW)); + this.borders.push(new richfaces.ui.PopupPanel.Border(id + "ResizerNE", this, "NE-resize", richfaces.ui.PopupPanel.Sizer.NE)); + this.borders.push(new richfaces.ui.PopupPanel.Border(id + "ResizerSE", this, "SE-resize", richfaces.ui.PopupPanel.Sizer.SE)); + this.borders.push(new richfaces.ui.PopupPanel.Border(id + "ResizerSW", this, "SW-resize", richfaces.ui.PopupPanel.Sizer.SW)); } - if (this.options.moveable && $(id + "Header")) { - this.header = new ModalPanel.Border(id + "Header", this, "move", ModalPanel.Header); + if (this.options.moveable && $(id + "_header")) { + this.header = new richfaces.ui.PopupPanel.Border(id + "_header", this, "move", richfaces.ui.PopupPanel.Sizer.Header); } this.markerId.component = this; - - var eDiv = $(this.div); - if (eDiv.style.setExpression) - /*if (ModalPanel.disableSelects *//* IE 6 */ /*|| Richfaces.getComputedStyle(eDiv, "position") != "fixed" /* IE again, not in strict mode*//*)*/ - /*{ - eDiv.style.position = "absolute"; - - var eCursorDiv = $(this.cursorDiv); - eCursorDiv.style.position = "absolute"; + PANELS.push(this); - //that is to apply filter - eDiv.style.zoom = "1"; - eCursorDiv.style.zoom = "1"; - - var eCdiv = $(this.cdiv); - eCdiv.style.position = "absolute"; - eCdiv.parentNode.style.position = "absolute"; - - eCdiv.mpUseExpr = true; - }*/ - - ModalPanel.panels.push(this); - - this.eventFirstOnfocus = this.firstOnfocus.bindAsEventListener(this); - this.eventLastOnfocus = this.lastOnfocus.bindAsEventListener(this); - this.firstHref = id + "FirstHref"; this.lastHref = id + "LastHref"; - this.selectBehavior = options.selectBehavior; - }, - - _saveInputValues: function(element) { - /* Fix for RF-3856 - Checkboxes in modal panel does not hold their states after modal was closed and opened again */ - if (Prototype.Browser.IE /* reproducible for checkbox/radio in IE6, radio in IE 7/8 beta 2 */) { - var inputs = element.getElementsByTagName('input'); - if (inputs) { - for (var i = 0; i < inputs.length; i++) { - var input = inputs[i]; - if (input.type == 'checkbox' || input.type == 'radio') { - input.defaultChecked = input.checked; - } + }; + + var $super = richfaces.BaseComponent.extend(richfaces.BaseComponent, richfaces.ui.PopupPanel); + var $p = richfaces.BaseComponent.extend(richfaces.BaseComponent,richfaces.ui.PopupPanel, {}); + var $super = richfaces.ui.PopupPanel.$super; + + $.extend(richfaces.ui.PopupPanel.prototype, (function (options) { + + return { + + name: "RichFaces.ui.PopupPanel", + saveInputValues: function(element) { + /* Fix for RF-3856 - Checkboxes in modal panel does not hold their states after modal was closed and opened again */ + if ($.browser.msie /* reproducible for checkbox/radio in IE6, radio in IE 7/8 beta 2 */) { + $('input[type=checkbox], input[type=radio]', element).each(function(index) { + $(this).defaultChecked = $(this).checked; + }); } - } - } - }, + }, - width: function() { - return this.getSizedElement().clientWidth; - }, + width: function() { + return this.getSizedElement().clientWidth; + }, - height: function() { - return this.getSizedElement().clientHeight; - }, + height: function() { + return this.getSizedElement().clientHeight; + }, - getSizedElement: function() { - if (!this._sizedElement) { - this._sizedElement = $(this.cdiv); - } + getSizedElement: function() { + if (!this._sizedElement) { + this._sizedElement = $(this.cdiv); + } - return this._sizedElement; - }, + return this._sizedElement; + }, - getContentElement: function() { - if (!this._contentElement) { - this._contentElement = this.options.autosized ? $(this.contentTable) : $(this.contentDiv); - } + getContentElement: function() { + if (!this._contentElement) { + this._contentElement = $(this.contentDiv); + } - return this._contentElement; - }, + return this._contentElement; + }, - destroy: function() { + destroy: function() { - if (this.observerSize) { - window.clearInterval(this.observerSize); - this.observerSize = null; - } + if (this.observerSize) { + window.clearInterval(this.observerSize); + this.observerSize = null; + } - this._contentElement = null; - this._sizedElement = null; + this._contentElement = null; + this._sizedElement = null; - ModalPanel.panels = ModalPanel.panels.without(this); - - this.enableSelects(); + //PANELS = PANELS.without(this); - ModalPanel.activePanels = ModalPanel.activePanels.without(this); + //ACTIVEPANELS = ACTIVEPANELS.without(this); - this.parent = null; - this.firstOutside = null; - this.lastOutside = null; - if (this.header) { - this.header.destroy(); - this.header=null; - } + this.parent = null; + this.firstOutside = null; + this.lastOutside = null; + if (this.header) { + this.header.destroy(); + this.header=null; + } - for (var k = 0; k < this.borders.length; k++ ) { - this.borders[k].destroy(); - } - this.borders = null; + for (var k = 0; k < this.borders.length; k++ ) { + this.borders[k].destroy(); + } + this.borders = null; - setTimeout(function() { - if (this.domReattached) { - var element = this.id; - var parent = element.parentNode; - if (parent) { - parent.removeChild(element); - discardElement(element); + if (this.domReattached) { + var element = this.id; + var parent = $(element).parent(); + if (parent) { + parent.removeChild(element); + } } - } - }.bind(this), 0); - this.markerId.component = null; - this.markerId = null; - }, + this.markerId.component = null; + this.markerId = null; + }, - initIframe : function() { - if (this.contentWindow) { - Element.setStyle(this.contentWindow.document.body, { "margin" : "0px 0px 0px 0px" }); - } else { - //TODO opera etc. + initIframe : function() { + if (this.contentWindow) { + $(this.contentWindow.document.body).css("margin", "0px 0px 0px 0px"); + } else { + //TODO opera etc. - } - - if("transparent" == Element.getStyle(document.body, "background-color")) { - this.style.filter = "alpha(opacity=0)"; - this.style.opacity = "0"; - } - - //this.style.opacity = "0.5"; - //this.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)'; - //var iframeBodyStyle = this.contentWindow.document.body.style; - //iframeBodyStyle.backgroundColor = "#d0d0d0"; - //iframeBodyStyle.filter = "alpha(opacity=50)"; - //iframeBodyStyle.opacity = "0.5"; - //iframeBodyStyle.zIndex = "99"; - }, - - enableSelect: function(elt) { - if (elt._mdwProcessed) { - elt._mdwProcessed = undefined; - - if (elt._mdwDisabled) { - elt.disabled = false; - elt._mdwDisabled = undefined; - } - - if (typeof elt._mdwHidden != "undefined") { - elt.style.visibility = elt._mdwHidden; - elt._mdwHidden = undefined; - } - } - }, - - disableSelect: function(elt) { - if (!elt._mdwProcessed) { - elt._mdwProcessed = true; - - if ("hide" == this.selectBehavior) { - if (elt.style.visibility != "hidden") { - elt._mdwHidden = elt.style.visibility; - elt.style.visibility = "hidden"; } - } else { - if (!elt.disabled) { - elt.disabled = true; - elt._mdwDisabled = true; - } - } - } - }, - enableInnerSelects: function() { - if (ModalPanel.disableSelects) { - var selects = this.id.getElementsByTagName("SELECT"); - for (var k = 0; k < selects.length; k++) { - this.enableSelect(selects[k]); - } - } - }, + if("transparent" == $(document.body).css("background-color")) { + this.style.filter = "alpha(opacity=0)"; + this.style.opacity = "0"; + } + }, - disableInnerSelects: function() { - if (ModalPanel.disableSelects) { - var selects = this.id.getElementsByTagName("SELECT"); - for (var k = 0; k < selects.length; k++) { - this.disableSelect(selects[k]); - } - } - }, - - enableSelects: function() { - if (!ModalPanel.disableSelects) { - return ; - } + setLeft: function(pos) { + $(this.cdiv).css('left', pos + "px"); + }, - var lastPanel = ModalPanel.activePanels[ModalPanel.activePanels.length - 1]; - var newLastPanel = ModalPanel.activePanels[ModalPanel.activePanels.length - 2]; - - if (newLastPanel) { - if (lastPanel == this) { - //we've just closed top panel, re-enable next panel if any - newLastPanel.enableInnerSelects(); - } - } else { - var selects = document.body.getElementsByTagName("SELECT"); - for (var i = 0; i < selects.length; i++) { - this.enableSelect(selects[i]); - } - } - }, + setTop: function(pos) { + $(this.cdiv).css('top', pos + "px"); + }, - disableOuterSelects: function() { - if (!ModalPanel.disableSelects) { - return ; - } + firstOnfocus: function(event) { + var e = $(this.firstHref) + //if (e && (ACTIVEPANELS.last() == this)) { + e.focus(); + //} + }, - var lastPanel = ModalPanel.activePanels.last(); - - if (lastPanel) { - //we need to disable only the last opened panel - lastPanel.disableInnerSelects(); - this.enableInnerSelects(); - } else { - //disable all outer - var selects = document.body.getElementsByTagName("SELECT"); - - var innerSelects = this.id.getElementsByTagName("SELECT"); - var firstInnerSelect = innerSelects[0]; - var lastInnerSelect = innerSelects[innerSelects.length - 1]; + lastOnfocus: function(event) { + var e = $(this.lastHref); + //if (e && (ACTIVEPANELS.last() == this)) { + e.focus(); + //} + }, + + processAllFocusElements: function(root, callback) { - var selectsAreInner = false; - - for (var i = 0; i < selects.length; i++) { - var select = selects[i]; - if (select == firstInnerSelect) { - selectsAreInner = true; + var popup = this; + $('a, input, select, button, textarea', root).not(':disabled').not(':hidden').each(function(index) { + callback.call($(this), popup); + }); + }, + + processTabindexes: function(popup) { + if (!popup.firstOutside ) { + popup.firstOutside = this; } - - if (!selectsAreInner) { - this.disableSelect(select); + popup.lastOutside = this; + if (this.tabIndex && !this.prevTabIndex) { + this.prevTabIndex = this.tabIndex; } - - if (select == lastInnerSelect) { - selectsAreInner = false; + this.tabIndex = undefined; + if (this.accesskey && !this.prevAccesskey) { + this.prevAccesskey = this.accesskey; } - } - } - }, - - setLeft: function(pos) { - var eCdiv = $(this.cdiv); - if (eCdiv.mpUseExpr) { - eCdiv.mpLeft = pos; - } else { - eCdiv.style.left = pos + "px"; - } - }, + this.accesskey = undefined; + }, - setTop: function(pos) { - var eCdiv = $(this.cdiv); - if (eCdiv.mpUseExpr) { - eCdiv.mpTop = pos; - } else { - eCdiv.style.top = pos + "px"; - } - }, + restoreTabindexes: function(popup) { + if (this.prevTabIndex) { + this.tabIndex = this.prevTabIndex; + this.prevTabIndex = undefined; + } + if (this.prevAccesskey) { + this.accesskey = this.prevAccesskey; + this.prevAccesskey = undefined; + } + }, - firstOnfocus: function(event) { - var e = $(this.firstHref) - if (e && (ModalPanel.activePanels.last() == this)) { - e.focus(); - } - }, - - lastOnfocus: function(event) { - var e = $(this.lastHref); - if (e && (ModalPanel.activePanels.last() == this)) { - e.focus(); - } - }, - - formElements: "|a|input|select|button|textarea|", - - processAllFocusElements: function(root, callback) { - var idx = -1; - var tagName; + preventFocus: function() { + this.processAllFocusElements(document, this.processTabindexes); - if (root.focus && root.nodeType == 1 && (tagName = root.tagName) && - // Many not visible elements have focus method, we is had to avoid processing them. - (idx = this.formElements.indexOf(tagName.toLowerCase())) != -1 && - this.formElements.charAt(idx - 1) === '|' && - this.formElements.charAt(idx + tagName.length) === '|' && - !root.disabled && root.type!="hidden") { - callback.call(this, root); - } else { - if (root != this.id) { - var child = root.firstChild; - while (child) { - if (!child.style || child.style.display != 'none') { - this.processAllFocusElements(child, callback); - } - child = child.nextSibling; + if (this.firstOutside) { + $(this.firstOutside).bind( "focus", this.firstOnfocus); } - } - } - }, + if (this.lastOutside && this.lastOutside != this.firstOutside) { + $(this.lastOutside).bind( "focus", this.lastOnfocus); + } + }, - processTabindexes: function(input) { - if (!this.firstOutside && !(input.tagName.toLowerCase()=="select" && ModalPanel.disableSelects)) { - this.firstOutside = input; - } - this.lastOutside = input; - if (input.tabIndex && !input.prevTabIndex) { - input.prevTabIndex = input.tabIndex; - } - input.tabIndex = undefined; - if (input.accesskey && !input.prevAccesskey) { - input.prevAccesskey = input.accesskey; - } - input.accesskey = undefined; - }, - - restoreTabindexes: function(input) { - if (input.prevTabIndex) { - input.tabIndex = input.prevTabIndex; - input.prevTabIndex = undefined; - } - if (input.prevAccesskey) { - input.accesskey = input.prevAccesskey; - input.prevAccesskey = undefined; - } - }, - - preventFocus: function() { - this.processAllFocusElements(document, this.processTabindexes); + restoreFocus: function() { + this.processAllFocusElements(document, this.restoreTabindexes); - if (this.firstOutside) { - Event.observe(this.firstOutside, "focus", this.eventFirstOnfocus); - } - if (this.lastOutside && this.lastOutside != this.firstOutside) { - Event.observe(this.lastOutside, "focus", this.eventLastOnfocus); - } - }, + if (this.firstOutside) { + $(this.firstOutside).unbind("focus", this.eventFirstOnfocus); + this.firstOutside = null; + } + if (this.lastOutside) { + $(this.lastOutside).unbind("focus", this.eventLastOnfocus); + this.lastOutside = null; + } + }, - restoreFocus: function() { - this.processAllFocusElements(document, this.restoreTabindexes); - - if (this.firstOutside) { - Event.stopObserving(this.firstOutside, "focus", this.eventFirstOnfocus); - this.firstOutside = null; - } - if (this.lastOutside) { - Event.stopObserving(this.lastOutside, "focus", this.eventLastOnfocus); - this.lastOutside = null; - } - }, - - show: function(event, opts) { - if(!this.shown && this.invokeEvent("beforeshow",event,null,element)) { + show: function(event, opts) { + if(!this.shown && this.invokeEvent("beforeshow",event,null,element)) { - var element = this.id; + var element = this.id; - this.preventFocus(); + this.preventFocus(); - if (!this.domReattached) { - this.parent = element.parentNode; + if (!this.domReattached) { + this.parent = $(element).parent(); - var domElementAttachment; - if (opts) { - domElementAttachment = opts.domElementAttachment; - } + var domElementAttachment; + if (opts) { + domElementAttachment = opts.domElementAttachment; + } - if (!domElementAttachment) { - domElementAttachment = this.options.domElementAttachment; - } + if (!domElementAttachment) { + domElementAttachment = this.options.domElementAttachment; + } - var newParent; - if ('parent' == domElementAttachment) { - newParent = this.parent; - } else if ('form' == domElementAttachment) { - newParent = this._findForm(element) || document.body; - } else { - //default - body - newParent = document.body; - } + var newParent; + if ('parent' == domElementAttachment) { + newParent = this.parent; + } else if ('form' == domElementAttachment) { + newParent = this.findForm(element) || document.body; + } else { + //default - body + newParent = document.body; + } - if (newParent != this.parent) { - this._saveInputValues(element); - newParent.insertBefore(element, null); - this.domReattached = true; - } else { - Element.show(this.parent); - } - } + if (newParent != this.parent) { + this.saveInputValues(element); + element.insertBefore(newParent); + this.domReattached = true; + } else { + $(this.parent).show(); + } + } - var eCdiv = $(this.cdiv); - var forms = eCdiv.getElementsByTagName("form"); + var eCdiv = $(this.cdiv); + var forms = $("form", eCdiv); - if (this.options.keepVisualState && forms) { - this.formOnsubmit = this.setStateInput.bindAsEventListener(this); - for (var i = 0; i < forms.length; i++) { - Event.observe(forms[i], "submit", this.formOnsubmit); - } - } + if (this.options.keepVisualState && forms) { + for (var i = 0; i < forms.length; i++) { + $(forms[i]).bind( "submit", this.setStateInput); + } + } - var eIframe; - if ((ModalPanel.disableSelects || this.options.overlapEmbedObjects) && !this.iframe) { - this.iframe = this.id.id + "IFrame"; - new Insertion.Top(eCdiv, - "<iframe src=\"javascript:''\" frameborder=\"0\" scrolling=\"no\" id=\"" + this.iframe + "\" " + - "class=\"rich-mpnl-iframe\" style=\"width: 1px; height: 1px;\">" + - "</iframe>"); + var eIframe; + if (this.options.overlapEmbedObjects && !this.iframe) { + this.iframe = this.id + "IFrame"; + $("<iframe src=\"javascript:''\" frameborder=\"0\" scrolling=\"no\" id=\"" + this.iframe + "\" " + + "class=\"rich-mpnl-iframe\" style=\"width: 1px; height: 1px;\">" + + "</iframe>").insertBefore($(':first-child', eCdiv)); - eIframe = $(this.iframe); + eIframe = jQery(this.iframe); - //alert("IFrame:" + eIframe + "created!"); + $(eIframe).bind('load', this.initIframe); + } - //eIframe.onload = this.initIframe.bind(eIframe); - Event.observe(eIframe, 'load', this.initIframe.bindAsEventListener(eIframe)); - } + var options = {}; + this.userOptions = {}; - var options = {}; - this.userOptions = {}; + if (!eCdiv.mpSet) { + $.extend(options, this.options); + } - if (!eCdiv.mpSet) { - Object.extend(options, this.options); - } - - if (opts) { - Object.extend(options, opts); - Object.extend(this.userOptions, opts); - } + if (opts) { + $.extend(options, opts); + $.extend(this.userOptions, opts); + } - this.currentMinHeight = ModalPanel.getMinimumSize((options.minHeight || options.minHeight == 0) ? options.minHeight : this.minHeight); - this.currentMinWidth = ModalPanel.getMinimumSize((options.minWidth || options.minWidth == 0) ? options.minWidth : this.minWidth); + this.currentMinHeight = getMinimumSize((options.minHeight || options.minHeight == 0) ? options.minHeight : this.minHeight); + this.currentMinWidth = getMinimumSize((options.minWidth || options.minWidth == 0) ? options.minWidth : this.minWidth); - var eContentElt = this.getContentElement(); + var eContentElt = this.getContentElement(); - if (!this.options.autosized) { - if (options.width && options.width == -1) - options.width = 300; - if (options.height && options.height == -1) - options.height = 200; - } + if (!this.options.autosized) { + if (options.width && options.width == -1) + options.width = 300; + if (options.height && options.height == -1) + options.height = 200; + } - if (options.width && options.width != -1) { - if (this.currentMinWidth > options.width) { - options.width = this.currentMinWidth; - } + if (options.width && options.width != -1) { + if (this.currentMinWidth > options.width) { + options.width = this.currentMinWidth; + } - eContentElt.style.width = options.width + (/px/.test(options.width) ? '' : 'px'); - } + $(eContentElt).css('width', options.width + (/px/.test(options.width) ? '' : 'px')); + } - if (options.height && options.height != -1) { - if (this.currentMinHeight > options.height) { - options.height = this.currentMinHeight; - } + if (options.height && options.height != -1) { + if (this.currentMinHeight > options.height) { + options.height = this.currentMinHeight; + } - eContentElt.style.height = options.height + (/px/.test(options.height) ? '' : 'px'); - } + $(eContentElt).css('height', options.height + (/px/.test(options.height) ? '' : 'px')); + } - eCdiv.mpSet = true; + eCdiv.mpSet = true; - //Element.setStyle(this.dialogWindow.document.body, { "margin" : "0px 0px 0px 0px" }); - //if("transparent" == Element.getStyle(document.body, "background-color")) { - // eIframe.allowTransparency = true; - //} + //ACTIVEPANELS = ACTIVEPANELS.without(this); + ACTIVEPANELS.push(this); - this.disableOuterSelects(); - ModalPanel.activePanels = ModalPanel.activePanels.without(this); - ModalPanel.activePanels.push(this); + var eDiv = $(this.div); - //this.shape.init(eCdiv, this.options); + $(element).css('visibility', ''); + this.correctShadowSize(); - var eDiv = $(this.div); - if (eDiv.style.position == "absolute") - { - var we = "getSizeElement().clientWidth + \"px\""; - var he = "getSizeElement().clientHeight + \"px\""; - eDiv.style.setExpression("width", we); - eDiv.style.setExpression("height", he); + if (options.left) { + var _left; + if (options.left != "auto") { + _left = parseInt(options.left, 10); + } else { + var cw = this.getSizeElement().clientWidth; + var _width = this.width(); + if (cw >= _width) { + _left = (cw - _width) / 2; + } else { + _left = 0; + } + } - var eCursorDiv = $(this.cursorDiv); - eCursorDiv.style.setExpression("width", we); - eCursorDiv.style.setExpression("height", he); - - var le = "-Position.cumulativeOffset(this.parentNode)[0] + getSizeElement().scrollLeft + \"px\""; - var te = "-Position.cumulativeOffset(this.parentNode)[1] + getSizeElement().scrollTop + \"px\""; - - eDiv.style.setExpression("left", le); - eDiv.style.setExpression("top", te); - - eCursorDiv.style.setExpression("left", le); - eCursorDiv.style.setExpression("top", te); - - var leftExpr = "(this.mpLeft || 0) + -Position.cumulativeOffset(this.parentNode)[0] + getSizeElement().scrollLeft + \"px\""; - var topExpr = "(this.mpTop || 0) + -Position.cumulativeOffset(this.parentNode)[1] + getSizeElement().scrollTop + \"px\""; - - eCdiv.style.setExpression("left", leftExpr); - eCdiv.style.setExpression("top", topExpr); - - - /* That's how we output debug info - DOM inspector rulez */ - /* - document.body.setExpression("_clientLeft", "getSizeElement().clientLeft"); - document.body.setExpression("_clientTop", "getSizeElement().clientTop"); - document.body.setExpression("_scrollLeft", "getSizeElement().scrollLeft"); - document.body.setExpression("_scrollTop", "getSizeElement().scrollTop"); - */ - /* */ - } - - element.style.visibility = "hidden"; - Element.show(element); - this.correctShadowSize(); - - if (options.left) { - var _left; - if (options.left != "auto") { - _left = parseInt(options.left, 10); - } else { - var cw = getSizeElement().clientWidth; - var _width = this.width(); //Richfaces.getComputedStyleSize(eContentElt, "width"); - if (cw >= _width) { - _left = (cw - _width) / 2; - } else { - _left = 0; + this.setLeft(Math.round(_left)); } - } - this.setLeft(Math.round(_left)); - } + if (options.top) { + var _top; + if (options.top != "auto") { + _top = parseInt(options.top, 10); + } else { + var cw = this.getSizeElement().clientHeight; + var _height = this.height(); + if (cw >= _height) { + _top = (cw - _height) / 2; + } else { + _top = 0; + } + } - if (options.top) { - var _top; - if (options.top != "auto") { - _top = parseInt(options.top, 10); - } else { - var cw = getSizeElement().clientHeight; - var _height = this.height(); //Richfaces.getComputedStyleSize(eContentElt, "height"); - if (cw >= _height) { - _top = (cw - _height) / 2; - } else { - _top = 0; + this.setTop(Math.round(_top)); } - } - - this.setTop(Math.round(_top)); - } - if (this.options.autosized) { - this.observerSize = - window.setInterval(this.correctShadowSize.bindAsEventListener(this), 500); - } + if (this.options.autosized) { + this.observerSize = + window.setInterval(this.correctShadowSize.bindAsEventListener(this), 500); + } - this.doResizeOrMove(ModalPanel.Sizer.Diff.EMPTY); + this.doResizeOrMove(richfaces.ui.PopupPanel.Sizer.Diff.EMPTY);//TODO - for (var k = 0; k < this.borders.length; k++ ) { - this.borders[k].doPosition(); - } + for (var k = 0; k < this.borders.length; k++ ) { + this.borders[k].doPosition(); + } - if (this.header) { - this.header.doPosition(); - } + if (this.header) { + this.header.doPosition(); + } - Element.hide(eCdiv); - element.style.visibility = ""; + $(eCdiv).hide().css('visibility', ''); - this.lastOnfocus(); + this.lastOnfocus(); - Element.show(eCdiv); + $(eCdiv).show(); - var event = {}; - event.parameters = opts || {}; - this.shown = true; - this.invokeEvent("show",event,null,element); - } - }, + var event = {}; + event.parameters = opts || {}; + this.shown = true; + this.invokeEvent("show",event,null,element); + } + }, - startDrag: function(border) { - for (var k = 0; k < this.borders.length; k++ ) { - this.borders[k].hide(); - } - Selection.disableSelection(document.body); - }, + startDrag: function(border) { + for (var k = 0; k < this.borders.length; k++ ) { + this.borders[k].hide(); + } + disableSelection(document.body); + }, - endDrag: function(border) { - for (var k = 0; k < this.borders.length; k++ ) { - this.borders[k].show(); - this.borders[k].doPosition(); - } - Selection.enableSelection(document.body); - }, + endDrag: function(border) { + for (var k = 0; k < this.borders.length; k++ ) { + this.borders[k].show(); + this.borders[k].doPosition(); + } + enableSelection(document.body); + }, - hide: function(event, opts) { - if (this.shown && this.invokeEvent("beforehide",event,null,element)) { + hide: function(event, opts) { + if (this.shown && this.invokeEvent("beforehide",event,null,element)) { - this.currentMinHeight = undefined; - this.currentMinWidth = undefined; + this.currentMinHeight = undefined; + this.currentMinWidth = undefined; - this.restoreFocus(); + this.restoreFocus(); - this.enableSelects(); + this.enableSelects(); - ModalPanel.activePanels = ModalPanel.activePanels.without(this); + //ACTIVEPANELS = ACTIVEPANELS.without(this); - var eDiv = $(this.div); - var eCdiv = $(this.cdiv); + var eDiv = $(this.div); + var eCdiv = $(this.cdiv); - if (eDiv.style.position == "absolute") { - eDiv.style.removeExpression("width"); - eDiv.style.removeExpression("height"); + $(this.id).hide(); - eDiv.style.removeExpression("left"); - eDiv.style.removeExpression("top"); - - var eCursorDiv = $(this.cursorDiv); - eCursorDiv.style.removeExpression("width"); - eCursorDiv.style.removeExpression("height"); - - eCursorDiv.style.removeExpression("left"); - eCursorDiv.style.removeExpression("top"); - - eCdiv.style.removeExpression("left"); - eCdiv.style.removeExpression("top"); - } - - var element = $(this.id); - Element.hide(element); - - if (this.parent) { - if (this.domReattached) { - this._saveInputValues(element); + if (this.parent) { + if (this.domReattached) { + this.saveInputValues(element); - this.parent.appendChild(element); + this.parent.appendChild(element); - this.domReattached = false; - } else { - Element.hide(this.parent); - } - } + this.domReattached = false; + } else { + $(this.parent).hide(); + } + } - var event = {}; - event.parameters = opts || {}; - if (this.options && this.options.onhide) { - this.options.onhide(event); - } + var event = {}; + event.parameters = opts || {}; + if (this.options && this.options.onhide) { + this.options.onhide(event); + } - var forms = eCdiv.getElementsByTagName("form"); - if (this.options.keepVisualState && forms) { - for (var i = 0; i < forms.length; i++) { - Event.stopObserving(forms[i], "submit", this.formOnsubmit); - } - } + var forms = $("form", eCdiv); + if (this.options.keepVisualState && forms) { + for (var i = 0; i < forms.length; i++) { + $(forms[i]).unbind( "submit", this.setStateInput); + } + } - this.shown = false; + this.shown = false; - if (this.observerSize) { - window.clearInterval(this.observerSize); - this.observerSize = null; - } + if (this.observerSize) { + window.clearInterval(this.observerSize); + this.observerSize = null; + } - if (ModalPanel.activePanels.length > 0) { - ModalPanel.activePanels.last().preventFocus(); - } - } - }, + if (ACTIVEPANELS.length > 0) { + ACTIVEPANELS.last().preventFocus(); + } + } + }, - _getStyle: function(elt, name) { - return parseInt(elt.style[name].replace("px", ""), 10); - }, + getStyle: function(elt, name) { + return parseInt($(elt).css(name).replace("px", ""), 10); + }, - doResizeOrMove: function(diff) { - var vetoes = {}; - var cssHash = {}; - var cssHashWH = {}; + doResizeOrMove: function(diff) { + var vetoes = {}; + var cssHash = {}; + var cssHashWH = {}; - var vetoeChange = false; - var newSize; + var vetoeChange = false; + var newSize; - var eContentElt = this.getContentElement(); + var eContentElt = this.getContentElement(); - newSize = this._getStyle(eContentElt, "width");//Richfaces.getComputedStyleSize(eContentDiv, "width"); + newSize = this.getStyle(eContentElt, "width"); - var oldSize = newSize; - newSize += diff.deltaWidth || 0; + var oldSize = newSize; + newSize += diff.deltaWidth || 0; - if (newSize >= this.currentMinWidth || this.options.autosized) { - if (diff.deltaWidth) { - cssHashWH.width = newSize + 'px'; - } - } else { - if (diff.deltaWidth) { - cssHashWH.width = this.currentMinWidth + 'px'; + if (newSize >= this.currentMinWidth || this.options.autosized) { + if (diff.deltaWidth) { + cssHashWH.width = newSize + 'px'; + } + } else { + if (diff.deltaWidth) { + cssHashWH.width = this.currentMinWidth + 'px'; - vetoes.vx = oldSize - this.currentMinWidth; - } + vetoes.vx = oldSize - this.currentMinWidth; + } - vetoes.x = true; - } + vetoes.x = true; + } - if (vetoes.vx && diff.deltaX) { - diff.deltaX = -vetoes.vx; - } + if (vetoes.vx && diff.deltaX) { + diff.deltaX = -vetoes.vx; + } - var eCdiv = $(this.cdiv); + var eCdiv = $(this.cdiv); - if (diff.deltaX && (vetoes.vx || !vetoes.x)) { - if (vetoes.vx) { - diff.deltaX = vetoes.vx; - } - var newPos; + if (diff.deltaX && (vetoes.vx || !vetoes.x)) { + if (vetoes.vx) { + diff.deltaX = vetoes.vx; + } + var newPos; - newPos = this._getStyle(eCdiv, "left");//Richfaces.getComputedStyleSize(eCdiv, "left"); - newPos += diff.deltaX; - cssHash.left = newPos + 'px'; - } + newPos = this.getStyle(eCdiv, "left"); + newPos += diff.deltaX; + cssHash.left = newPos + 'px'; + } - newSize = this._getStyle(eContentElt, "height")//;Richfaces.getComputedStyleSize(eContentDiv, "height"); + newSize = this.getStyle(eContentElt, "height") - var oldSize = newSize; - newSize += diff.deltaHeight || 0; + var oldSize = newSize; + newSize += diff.deltaHeight || 0; - if (newSize >= this.currentMinHeight || this.options.autosized) { - if (diff.deltaHeight) { - cssHashWH.height = newSize + 'px'; - } - } else { - if (diff.deltaHeight) { - cssHashWH.height = this.currentMinHeight + 'px'; + if (newSize >= this.currentMinHeight || this.options.autosized) { + if (diff.deltaHeight) { + cssHashWH.height = newSize + 'px'; + } + } else { + if (diff.deltaHeight) { + cssHashWH.height = this.currentMinHeight + 'px'; - vetoes.vy = oldSize - this.currentMinHeight; - } + vetoes.vy = oldSize - this.currentMinHeight; + } - vetoes.y = true; - } + vetoes.y = true; + } - if (vetoes.vy && diff.deltaY) { - diff.deltaY = -vetoes.vy; - } + if (vetoes.vy && diff.deltaY) { + diff.deltaY = -vetoes.vy; + } - if (diff.deltaY && (vetoes.vy || !vetoes.y)) { - if (vetoes.vy) { - diff.deltaY = vetoes.vy; - } + if (diff.deltaY && (vetoes.vy || !vetoes.y)) { + if (vetoes.vy) { + diff.deltaY = vetoes.vy; + } - var newPos; - if (eCdiv.mpUseExpr) { - newPos = eCdiv.mpTop || 0; - newPos += diff.deltaY; + } - eCdiv.mpTop = newPos; - cssHash.top = newPos + 'px'; - } else { - newPos = this._getStyle(eCdiv, "top");//Richfaces.getComputedStyleSize(eCdiv, "top"); - newPos += diff.deltaY; - cssHash.top = newPos + 'px'; - } - } + $(eContentElt).css(cssHashWH); - Element.setStyle(eContentElt, cssHashWH); - - Element.setStyle(eCdiv, cssHash); + $(eCdiv).css(cssHash); - this.correctShadowSize(); + this.correctShadowSize(); - Object.extend(this.userOptions, cssHash); - Object.extend(this.userOptions, cssHashWH); + $.extend(this.userOptions, cssHash); + $.extend(this.userOptions, cssHashWH); - var w = this.width(); - var h = this.height(); + var w = this.width(); + var h = this.height(); - this.reductionData = null; + this.reductionData = null; - if (w <= 2*ModalPanel.Sizer.INITIAL_MAX) { - this.reductionData = {}; - this.reductionData.w = w; - } + if (w <= 2*richfaces.ui.PopupPanel.Sizer.INITIAL_MAX) {//todo + this.reductionData = {}; + this.reductionData.w = w; + } - if (h <= 2*ModalPanel.Sizer.INITIAL_MAX) { - if (!this.reductionData) { - this.reductionData = {}; - } + if (h <= 2*richfaces.ui.PopupPanel.Sizer.INITIAL_MAX) {//todo + if (!this.reductionData) { + this.reductionData = {}; + } - this.reductionData.h = h; - } + this.reductionData.h = h; + } - if (this.header) { - this.header.doPosition(); - } + if (this.header) { + this.header.doPosition(); + } - return vetoes; - }, + return vetoes; + }, - _findForm: function(elt) { - var target = elt; - while (target) { - if (!target.tagName /* document node doesn't have tagName */ - || target.tagName.toLowerCase() != "form") { + findForm: function(elt) { + var target = elt; + while (target) { + if (!target.tagName /* document node doesn't have tagName */ + || target.tagName.toLowerCase() != "form") { - target = target.parentNode; - } else { - break; - } - } + target = $(target).parent(); + } else { + break; + } + } - return target; - }, + return target; + }, - setStateInput: function(e) { - var target = Event.element(e); - if (e && target) { - // Concret input but not entire form is a target element for onsubmit in FF - target = this._findForm(target); + setStateInput: function(target) { + // Concret input but not entire form is a target element for onsubmit in FF + target = this.findForm(target); - var input = document.createElement("input"); - input.type = "hidden"; - input.id = this.markerId.id + "OpenedState"; - input.name = this.markerId.id + "OpenedState"; - input.value = this.shown ? "true" : "false"; - target.appendChild(input); - - var keys = $H(this.userOptions).keys(); - if (keys) { - for (var i = 0; i < keys.length; i++) { - input = document.createElement("input"); + var input = document.createElement("input"); input.type = "hidden"; - input.id = this.id.id + "StateOption_" + keys[i]; - input.name = this.id.id + "StateOption_" + keys[i]; - input.value = this.userOptions[keys[i]]; + input.id = this.markerId.id + "OpenedState"; + input.name = this.markerId.id + "OpenedState"; + input.value = this.shown ? "true" : "false"; target.appendChild(input); - } - } + $.each(userOptions, function(key, value) { + input = document.createElement("input"); + input.type = "hidden"; + input.id = this.id.id + "StateOption_" + key; + input.name = this.id.id + "StateOption_" + key; + input.value = value; + target.appendChild(input); + }); - return true; - } - }, + return true; + }, - correctShadowSize: function() { - var eShadowDiv = $(this.shadowDiv); - if (!eShadowDiv) { - return; - } - var eIframe = $(this.iframe); + correctShadowSize: function() { + var eShadowDiv = $(this.shadowDiv); + if (!eShadowDiv) { + return; + } + var eIframe = $(this.iframe); - var dx = 0; - var dy = 0; - if (!Richfaces.browser.isIE) - { - dx = eShadowDiv.offsetWidth-eShadowDiv.clientWidth; - dy = eShadowDiv.offsetHeight-eShadowDiv.clientHeight; - } - var w = this.width(); - var h = this.height(); - eShadowDiv.style.width = (w-dx)+"px"; - eShadowDiv.style.height = (h-dy)+"px"; - - if (eIframe) { - eIframe.style.width = w+"px"; - eIframe.style.height = h+"px"; - } - }, + var dx = 0; + var dy = 0; + if (!$.browser.msie) + { + dx = eShadowDiv.offsetWidth-eShadowDiv.clientWidth; + dy = eShadowDiv.offsetHeight-eShadowDiv.clientHeight; + } + var w = this.width(); + var h = this.height(); + $(eShadowDiv).css('width ', (w-dx)+"px"); + $(eShadowDiv).css('height' , (h-dy)+"px"); + + if (eIframe) { + $(eIframe).css('width',w+"px"); + $(eIframe).css('height',h+"px"); + } + }, - invokeEvent: function(eventName, event, value, element) { + invokeEvent: function(eventName, event, value, element) { - var eventFunction = this.options['on'+eventName]; - var result; + var eventFunction = this.options['on'+eventName]; + var result; - if (eventFunction) { - var eventObj; - if (event) { - eventObj = event; - } - else if(document.createEventObject) { - eventObj = document.createEventObject(); - } - else if( document.createEvent ) { - eventObj = document.createEvent('Events'); - eventObj.initEvent( eventName, true, false ); - } + if (eventFunction) { + var eventObj; + if (event) { + eventObj = event; + } + else if(document.createEventObject) { + eventObj = document.createEventObject(); + } + else if( document.createEvent ) { + eventObj = document.createEvent('Events'); + eventObj.initEvent( eventName, true, false ); + } - eventObj.rich = {component:this}; - eventObj.rich.value = value; + eventObj.rich = {component:this}; + eventObj.rich.value = value; - try { - result = eventFunction.call(element, eventObj); + try { + result = eventFunction.call(element, eventObj); + } + catch (e) { LOG.warn("Exception: "+e.Message + "\n[on"+eventName + "]"); } + } + + if (result!=false) { + result = true; + } + return result; + }, + showModalPanel : function (id, opts, event) { + + var invoke = + ($.browser.msie || $.browser.safari) ? + function(f) { + if (document.readyState != "complete") { + var args = arguments; + var dis = this; + window.setTimeout( + function() { + args.callee.apply(dis,args ); + }, 50); + } else { + f(); + } + } : + function(f) { + f(); + }; + + var panel = $(id); + if (!panel) { + panel = findModalPanel(id); } - catch (e) { LOG.warn("Exception: "+e.Message + "\n[on"+eventName + "]"); } - } + invoke(function() { + $(panel.component).show(opts); + }); + }, + + hideModalPanel : function (id, opts, event) { + var panel = $(id); + if (!panel) { + panel = findModalPanel(id); + } + $(panel.component).hide(opts); + }, - if (result!=false) { - result = true; - } - return result; - } -} + findModalPanel : function (id) { + if (id) { + var prefId = (id.charAt(0) == ':' ? id : ':' + id); -Richfaces.findModalPanel = function (id) { - if (id) { - var prefId = (id.charAt(0) == ':' ? id : ':' + id); + for (var i = 0; i < PANELS.length; i++ ) { + var pnl = PANELS[i]; + if (pnl && pnl.markerId) { + var pnlId = pnl.markerId.id; - for (var i = 0; i < ModalPanel.panels.length; i++ ) { - var pnl = ModalPanel.panels[i]; - if (pnl && pnl.markerId) { - var pnlId = pnl.markerId.id; - - if (pnlId) { - //try to match ids - if (pnlId.length >= prefId.length) { - var substr = pnlId.substring(pnlId.length - prefId.length, pnlId.length); - if (substr == prefId) { - return pnl.markerId; + if (pnlId) { + //try to match ids + if (pnlId.length >= prefId.length) { + var substr = pnlId.substring(pnlId.length - prefId.length, pnlId.length); + if (substr == prefId) { + return pnl.markerId; + } + } } } } } - } - } -} + } + + } + + })()); -Richfaces.showModalPanel = function (id, opts, event) { - - var invoke = - (Richfaces.browser.isIE || Richfaces.browser.isSafari) ? - function(f) { - if (document.readyState != "complete") { - var args = arguments; - var dis = this; - window.setTimeout( - function() { - args.callee.apply(dis,args ); - }, 50); - } else { - f(); - } - } : - function(f) { - f(); - }; - - var panel = $(id); - if (!panel) { - panel = Richfaces.findModalPanel(id); - } - invoke(function() { - panel.component.show(event, opts); - }); -}; - -Richfaces.hideModalPanel = function (id, opts, event) { - var panel = $(id); - if (!panel) { - panel = Richfaces.findModalPanel(id); - } - panel.component.hide(event, opts); -}; - -/*Richfaces.hideTopModalPanel = function(event, opts) { - var mp = ModalPanel.activePanels.last(); - if (mp) { - mp.hide(event, opts); - } -}*/ +})(jQuery, window.RichFaces); Modified: root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/script/popupPanelBorders.js =================================================================== --- root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/script/popupPanelBorders.js 2010-07-09 18:09:13 UTC (rev 17792) +++ root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/script/popupPanelBorders.js 2010-07-09 19:36:32 UTC (rev 17793) @@ -1,356 +1,180 @@ -ModalPanel.Border = Class.create(); +(function ($, richfaces) { + + richfaces.ui = richfaces.ui || {}; + + richfaces.ui.PopupPanel.Border = function(id, modalPanel, cursor, sizer) { + + $super.constructor.call(this,id); + + var element = jQuery(id); + jQuery(element).css('cursor',cursor); -ModalPanel.Border.prototype = { - initialize: function(id, modalPanel, cursor, sizer) { - this.id = id; - var element = $(id); - element.style.cursor = cursor; + jQuery(this.id).bind( 'mousedown', this.startDrag, new Date()); - this.boundStartDrag = this.startDrag.bindAsEventListener(this, new Date()); - Event.observe(this.id, 'mousedown', this.boundStartDrag); - this.modalPanel = modalPanel; this.sizer = sizer; - this.boundDoDrag = this.doDrag.bindAsEventListener(this); - this.boundEndDrag = this.endDrag.bindAsEventListener(this); - }, - - destroy: function() - { - if (this.doingDrag) - { - Event.stopObserving(document, 'mousemove', this.boundDoDrag); - Event.stopObserving(document, 'mouseup', this.boundEndDrag); - } + //this.boundDoDrag = this.doDrag.bindAsEventListener(this); + //this.boundEndDrag = this.endDrag.bindAsEventListener(this); + }; + + var $super = richfaces.BaseComponent.extend(richfaces.BaseComponent, richfaces.ui.PopupPanel.Border); + var $super = richfaces.ui.PopupPanel.Border.$super; + + $.extend(richfaces.ui.PopupPanel.Border.prototype, (function (options) { + + return { + + name: "RichFaces.ui.PopupPanel.Border", - Event.stopObserving(this.id, 'mousedown', this.boundStartDrag); - this.modalPanel=null; - }, - - show: function() { - Element.show(this.id); - }, - - hide: function() { - Element.hide(this.id); - }, - - startDrag: function(event) { - this.doingDrag = true; - - this.dragX = event.clientX; - this.dragY = event.clientY; - - Event.observe(document, 'mousemove', this.boundDoDrag); - Event.observe(document, 'mouseup', this.boundEndDrag); + destroy: function() + { + if (this.doingDrag) + { + jQuery(document).unbind( 'mousemove', this.doDrag); + jQuery(document).unbind( 'mouseup', this.endDrag); + } - var eCursorDiv = $(this.modalPanel.cursorDiv); - eCursorDiv.style.cursor = $(this.id).style.cursor; - eCursorDiv.style.zIndex = 10; - - this.modalPanel.startDrag(this); + jQuery(this.id).unbind( 'mousedown', this.startDrag); + this.modalPanel=null; + }, - this.onselectStartHandler = document.onselectstart; - document.onselectstart = function() { return false; } - }, - - doDrag: function(event) { - if (!this.doingDrag) { - return ; - } + show: function() { + jQuery(this.id).show(); + }, - var evtX = event.clientX; - var evtY = event.clientY; - - var winSize = Richfaces.getWindowSize(); - - //window.status = "" + evtX + " " + evtY; + hide: function() { + jQuery(this.id).hide(); + }, - if (evtX < 0) { - evtX = 0; - } else if (evtX >= winSize.width) { - evtX = winSize.width - 1; - } + startDrag: function(event) { + this.doingDrag = true; - if (evtY < 0) { - evtY = 0; - } else if (evtY >= winSize.height) { - evtY = winSize.height - 1; - } - - var dx = evtX - this.dragX; - var dy = evtY - this.dragY; + this.dragX = event.clientX; + this.dragY = event.clientY; - if (dx != 0 || dy != 0) { - - var id = this.id; + jQuery(document).bind( 'mousemove', this.doDrag); + jQuery(document).bind( 'mouseup', this.endDrag); + + var eCursorDiv = jQuery(this.modalPanel.cDiv); + jQuery(eCursorDiv).css('cursor', jQuery(this.id).css('cursor')); + jQuery(eCursorDiv).css('zIndex', 10); - var diff = this.sizer.doDiff(dx, dy); - var doResize; + this.modalPanel.startDrag(this); + + this.onselectStartHandler = document.onselectstart; + document.onselectstart = function() { return false; } + }, - var element = $(this.modalPanel.cdiv); - - if (diff.deltaWidth || diff.deltaHeight) { - doResize = this.modalPanel.invokeEvent("resize",event,null,element); - } else if (diff.deltaX || diff.deltaY) { - doResize = this.modalPanel.invokeEvent("move",event,null,element); - } - - var vetoes; - - if (doResize) { - vetoes = this.modalPanel.doResizeOrMove(diff); - } - - if(vetoes){ - if (!vetoes.x) { - this.dragX = evtX; - } else { - if (!diff.deltaX) { - this.dragX -= vetoes.vx || 0; - } else { - this.dragX += vetoes.vx || 0; - } + getWindowSize : function() { + var myWidth = 0, myHeight = 0; + if( typeof( window.innerWidth ) == 'number' ) { + myWidth = window.innerWidth; + myHeight = window.innerHeight; + } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { + myWidth = document.documentElement.clientWidth; + myHeight = document.documentElement.clientHeight; + } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { + myWidth = document.body.clientWidth; + myHeight = document.body.clientHeight; + } + return {"width":myWidth,"height":myHeight}; + }, + + doDrag: function(event) { + if (!this.doingDrag) { + return ; + } + + var evtX = event.clientX; + var evtY = event.clientY; + + var winSize = this.getWindowSize(); + + //window.status = "" + evtX + " " + evtY; + + if (evtX < 0) { + evtX = 0; + } else if (evtX >= winSize.width) { + evtX = winSize.width - 1; } - - if (!vetoes.y) { - this.dragY = evtY; - } else { - if (!diff.deltaY) { - this.dragY -= vetoes.vy || 0; - } else { - this.dragY += vetoes.vy || 0; + + if (evtY < 0) { + evtY = 0; + } else if (evtY >= winSize.height) { + evtY = winSize.height - 1; + } + + var dx = evtX - this.dragX; + var dy = evtY - this.dragY; + + if (dx != 0 || dy != 0) { + + var id = this.id; + + var diff = this.sizer.doDiff(dx, dy); + var doResize; + + var element = jQuery(this.modalPanel.cdiv); + + if (diff.deltaWidth || diff.deltaHeight) { + doResize = this.modalPanel.invokeEvent("resize",event,null,element); + } else if (diff.deltaX || diff.deltaY) { + doResize = this.modalPanel.invokeEvent("move",event,null,element); } + + var vetoes; + + if (doResize) { + vetoes = this.modalPanel.doResizeOrMove(diff); + } + + if(vetoes){ + if (!vetoes.x) { + this.dragX = evtX; + } else { + if (!diff.deltaX) { + this.dragX -= vetoes.vx || 0; + } else { + this.dragX += vetoes.vx || 0; + } + } + + if (!vetoes.y) { + this.dragY = evtY; + } else { + if (!diff.deltaY) { + this.dragY -= vetoes.vy || 0; + } else { + this.dragY += vetoes.vy || 0; + } + } + } } - } - } - }, - - endDrag: function(event) { - this.doingDrag = undefined; - - Event.stopObserving(document, 'mousemove', this.boundDoDrag); - Event.stopObserving(document, 'mouseup', this.boundEndDrag); - - this.modalPanel.endDrag(this); + }, - this.modalPanel.doResizeOrMove(ModalPanel.Sizer.Diff.EMPTY); - $(this.modalPanel.cursorDiv).style.zIndex = -200; - - document.onselectstart = this.onselectStartHandler; - this.onselectStartHandler = null; + endDrag: function(event) { + this.doingDrag = undefined; - var id = this.id; - }, - - doPosition: function() { - this.sizer.doPosition(this.modalPanel, $(this.id)); - } -}; - -ModalPanel.Sizer = Class.create(); - -ModalPanel.Sizer.INITIAL_MIN = 4; -ModalPanel.Sizer.INITIAL_MAX = 40; - -ModalPanel.Sizer.Diff = Class.create(); -ModalPanel.Sizer.Diff.prototype = { - initialize: function(dX, dY, dWidth, dHeight) { - this.deltaX = dX; - this.deltaY = dY; - - this.deltaWidth = dWidth; - this.deltaHeight = dHeight; - } -} - -ModalPanel.Sizer.Diff.EMPTY = new ModalPanel.Sizer.Diff(0, 0, 0, 0); - -ModalPanel.Sizer.prototype = { - initialize: function() { - - }, - - doSetupSize: function (modalPanel, elt) { - var width = 0; - var height = 0; - - var reductionData = modalPanel.reductionData; + jQuery(document).unbind( 'mousemove', this.doDrag); + jQuery(document).unbind( 'mouseup', this.endDrag); - if (reductionData) { - if (reductionData.w) { - width = reductionData.w / 2; - } - - if (reductionData.h) { - height = reductionData.h / 2; - } - } + this.modalPanel.endDrag(this); + + this.modalPanel.doResizeOrMove(richfaces.ui.PopupPanel.Sizer.Diff.EMPTY); + jQuery(this.modalPanel.cursorDiv).css('zIndex ', -200); - if (width > 0) { - if (elt.clientWidth > width) { - if (!elt.reducedWidth) { - elt.reducedWidth = elt.style.width; - } - elt.style.width = width + 'px'; - } else if (width < ModalPanel.Sizer.INITIAL_MAX && /* TODO fix the dirty code */elt.reducedWidth == ModalPanel.Sizer.INITIAL_MAX + 'px') { - elt.style.width = width + 'px'; - } - } else { - if (elt.reducedWidth) { - elt.style.width = elt.reducedWidth; - elt.reducedWidth = undefined; - } - } + document.onselectstart = this.onselectStartHandler; + this.onselectStartHandler = null; + + var id = this.id; + }, - if (height > 0) { - if (elt.clientHeight > height) { - if (!elt.reducedHeight) { - elt.reducedHeight = elt.style.height; - } - elt.style.height = height + 'px'; - } else if (height < ModalPanel.Sizer.INITIAL_MAX && /* TODO fix the dirty code */elt.reducedHeight == ModalPanel.Sizer.INITIAL_MAX + 'px') { - elt.style.height = height + 'px'; - } - } else { - if (elt.reducedHeight) { - elt.style.height = elt.reducedHeight; - elt.reducedHeight = undefined; - } - } - }, - - doSetupPosition: function (modalPanel, elt, left, top) { - elt.style.left = left + 'px'; - elt.style.top = top + 'px'; - }, + doPosition: function() { + this.sizer.prototype.doPosition(this.modalPanel, jQuery(this.id)); //TODO remove prototype + } + } + + })()); - doPosition: function (modalPanel, elt) { - - }, - - doDiff: function (dx, dy) { - - } -} - -ModalPanel.Sizer.NWU = Object.extend(new ModalPanel.Sizer(), { - doPosition: function (modalPanel, elt) { - this.doSetupSize(modalPanel, elt); - this.doSetupPosition(modalPanel, elt, 0, 0); - }, - - doDiff: function(dx, dy) { - return new ModalPanel.Sizer.Diff(dx, dy, -dx, -dy); - } -}); - -ModalPanel.Sizer.N = new ModalPanel.Sizer(); -ModalPanel.Sizer.N.doPosition = function (modalPanel, elt) { - elt.style.width = modalPanel.width() + 'px'; - this.doSetupPosition(modalPanel, elt, 0, 0); -}; -ModalPanel.Sizer.N.doDiff = function(dx, dy) { - return new ModalPanel.Sizer.Diff(0, dy, 0, -dy); -}; - -ModalPanel.Sizer.NEU = new ModalPanel.Sizer(); -ModalPanel.Sizer.NEU.doPosition = function (modalPanel, elt) { - this.doSetupSize(modalPanel, elt); - this.doSetupPosition(modalPanel, elt, modalPanel.width() - elt.clientWidth, 0); -}; -ModalPanel.Sizer.NEU.doDiff = function(dx, dy) { - return new ModalPanel.Sizer.Diff(0, dy, dx, -dy); -}; - -ModalPanel.Sizer.NEL = new ModalPanel.Sizer(); -ModalPanel.Sizer.NEL.doPosition = function (modalPanel, elt) { - this.doSetupSize(modalPanel, elt); - this.doSetupPosition(modalPanel, elt, modalPanel.width() - elt.clientWidth, 0); -}; -ModalPanel.Sizer.NEL.doDiff = function(dx, dy) { - return new ModalPanel.Sizer.Diff(0, dy, dx, -dy); -}; - -ModalPanel.Sizer.E = new ModalPanel.Sizer(); -ModalPanel.Sizer.E.doPosition = function (modalPanel, elt) { - elt.style.height = modalPanel.height() + 'px'; - this.doSetupPosition(modalPanel, elt, modalPanel.width() - elt.clientWidth, 0); -}; -ModalPanel.Sizer.E.doDiff = function(dx, dy) { - return new ModalPanel.Sizer.Diff(0, 0, dx, 0); -}; - -ModalPanel.Sizer.SEU = new ModalPanel.Sizer(); -ModalPanel.Sizer.SEU.doPosition = function (modalPanel, elt) { - this.doSetupSize(modalPanel, elt); - this.doSetupPosition(modalPanel, elt, modalPanel.width() - elt.clientWidth, - modalPanel.height() - elt.clientHeight); -}; -ModalPanel.Sizer.SEU.doDiff = function(dx, dy) { - return new ModalPanel.Sizer.Diff(0, 0, dx, dy); -}; - -ModalPanel.Sizer.SEL = new ModalPanel.Sizer(); -ModalPanel.Sizer.SEL.doPosition = function (modalPanel, elt) { - this.doSetupSize(modalPanel, elt); - this.doSetupPosition(modalPanel, elt, modalPanel.width() - elt.clientWidth, - modalPanel.height() - elt.clientHeight); -}; -ModalPanel.Sizer.SEL.doDiff = function(dx, dy) { - return new ModalPanel.Sizer.Diff(0, 0, dx, dy); -}; - -ModalPanel.Sizer.S = new ModalPanel.Sizer(); -ModalPanel.Sizer.S.doPosition = function (modalPanel, elt) { - elt.style.width = modalPanel.width() + 'px'; - this.doSetupPosition(modalPanel, elt, 0, modalPanel.height() - elt.clientHeight); -}; -ModalPanel.Sizer.S.doDiff = function(dx, dy) { - return new ModalPanel.Sizer.Diff(0, 0, 0, dy); -}; - -ModalPanel.Sizer.SWL = new ModalPanel.Sizer(); -ModalPanel.Sizer.SWL.doPosition = function (modalPanel, elt) { - this.doSetupSize(modalPanel, elt); - this.doSetupPosition(modalPanel, elt, 0, modalPanel.height() - elt.clientHeight); -}; -ModalPanel.Sizer.SWL.doDiff = function(dx, dy) { - return new ModalPanel.Sizer.Diff(dx, 0, -dx, dy); -}; - -ModalPanel.Sizer.SWU = new ModalPanel.Sizer(); -ModalPanel.Sizer.SWU.doPosition = function (modalPanel, elt) { - this.doSetupSize(modalPanel, elt); - this.doSetupPosition(modalPanel, elt, 0, modalPanel.height() - elt.clientHeight); -}; -ModalPanel.Sizer.SWU.doDiff = function(dx, dy) { - return new ModalPanel.Sizer.Diff(dx, 0, -dx, dy); -}; - -ModalPanel.Sizer.W = new ModalPanel.Sizer(); -ModalPanel.Sizer.W.doPosition = function (modalPanel, elt) { - elt.style.height = modalPanel.height() + 'px'; - this.doSetupPosition(modalPanel, elt, 0, 0); -}; -ModalPanel.Sizer.W.doDiff = function(dx, dy) { - return new ModalPanel.Sizer.Diff(dx, 0, -dx, 0); -}; - -ModalPanel.Sizer.NWL = new ModalPanel.Sizer(); -ModalPanel.Sizer.NWL.doPosition = function (modalPanel, elt) { - this.doSetupSize(modalPanel, elt); - this.doSetupPosition(modalPanel, elt, 0, 0); -}; -ModalPanel.Sizer.NWL.doDiff = function(dx, dy) { - return new ModalPanel.Sizer.Diff(dx, dy, -dx, -dy); -}; - -ModalPanel.Header = new ModalPanel.Sizer(); -ModalPanel.Header.doPosition = function (modalPanel, elt) { - -}; -ModalPanel.Header.doDiff = function(dx, dy) { - return new ModalPanel.Sizer.Diff(dx, dy, 0, 0); -}; +})(jQuery, window.RichFaces); \ No newline at end of file Added: root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/script/popupPanelSizer.js =================================================================== --- root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/script/popupPanelSizer.js (rev 0) +++ root/ui-sandbox/panels2/trunk/ui/src/main/resources/META-INF/script/popupPanelSizer.js 2010-07-09 19:36:32 UTC (rev 17793) @@ -0,0 +1,383 @@ +(function ($, richfaces) { + + richfaces.ui = richfaces.ui || {}; + + richfaces.ui.PopupPanel.Sizer = function(id, modalPanel, cursor, sizer) { + + $super.constructor.call(this,id); + + }; + + var $super = richfaces.BaseComponent.extend(richfaces.BaseComponent, richfaces.ui.PopupPanel.Sizer); + var $super = richfaces.ui.PopupPanel.Sizer.$super; + $.extend(richfaces.ui.PopupPanel.Sizer.prototype, (function (options) { + return { + + name: "richfaces.ui.PopupPanel.Sizer", + doSetupSize: function (modalPanel, elt) { + var width = 0; + var height = 0; + + var reductionData = modalPanel.reductionData; + + if (reductionData) { + if (reductionData.w) { + width = reductionData.w / 2; + } + + if (reductionData.h) { + height = reductionData.h / 2; + } + } + + if (width > 0) { + if (elt.clientWidth > width) { + if (!elt.reducedWidth) { + elt.reducedWidth = elt.style.width; + } + elt.style.width = width + 'px'; + } else if (width < ModalPanel.Sizer.INITIAL_MAX && /* TODO fix the dirty code */elt.reducedWidth == ModalPanel.Sizer.INITIAL_MAX + 'px') { + elt.style.width = width + 'px'; + } + } else { + if (elt.reducedWidth) { + elt.style.width = elt.reducedWidth; + elt.reducedWidth = undefined; + } + } + + if (height > 0) { + if (elt.clientHeight > height) { + if (!elt.reducedHeight) { + elt.reducedHeight = elt.style.height; + } + elt.style.height = height + 'px'; + } else if (height < ModalPanel.Sizer.INITIAL_MAX && /* TODO fix the dirty code */elt.reducedHeight == ModalPanel.Sizer.INITIAL_MAX + 'px') { + elt.style.height = height + 'px'; + } + } else { + if (elt.reducedHeight) { + elt.style.height = elt.reducedHeight; + elt.reducedHeight = undefined; + } + } + }, + + doSetupPosition: function (modalPanel, elt, left, top) { + elt.style.left = left + 'px'; + elt.style.top = top + 'px'; + }, + + doPosition: function (modalPanel, elt) { + + }, + + doDiff: function (dx, dy) { + + } + } + + })()); + richfaces.ui.PopupPanel.Sizer.Diff = function(dX, dY, dWidth, dHeight) { + + this.deltaX = dX; + this.deltaY = dY; + + this.deltaWidth = dWidth; + this.deltaHeight = dHeight; + + }; + + richfaces.ui.PopupPanel.Sizer.Diff.EMPTY = function(){ + return new richfaces.ui.PopupPanel.Sizer.Diff(0, 0, 0, 0); + }, + + richfaces.ui.PopupPanel.Sizer.N = function(){ + + } + richfaces.ui.PopupPanel.Sizer.N.prototype = richfaces.ui.PopupPanel.Sizer.prototype; + $.extend(richfaces.ui.PopupPanel.Sizer.N.prototype, (function (options) { + + return { + + name: "richfaces.ui.PopupPanel.Sizer.N", + + doPosition : function (popupPanel, elt) { + jQuery(elt).css('width',popupPanel.width() + 'px'); + this.doSetupPosition(popupPanel, elt, 0, 0); + }, + + doDiff : function(dx, dy) { + return new richfaces.ui.PopupPanel.Sizer.Diff(0, dy, 0, -dy); + }, + + } + })()); + + richfaces.ui.PopupPanel.Sizer.NW = function(){ + + } + richfaces.ui.PopupPanel.Sizer.NW.prototype = richfaces.ui.PopupPanel.Sizer.prototype; + $.extend(richfaces.ui.PopupPanel.Sizer.NW.prototype, (function (options) { + + return { + + name: "richfaces.ui.PopupPanel.Sizer.NW", + + doPosition : function (popupPanel, elt) { + this.doSetupSize(popupPanel, elt); + this.doSetupPosition(popupPanel, elt, 0, 0); + }, + + doDiff : function(dx, dy) { + return new richfaces.ui.PopupPanel.Sizer.Diff(dx, dy, -dx, -dy); + } + + } + })()); + + richfaces.ui.PopupPanel.Sizer.NE = function(){ + + } + richfaces.ui.PopupPanel.Sizer.NE.prototype = richfaces.ui.PopupPanel.Sizer.prototype; + $.extend(richfaces.ui.PopupPanel.Sizer.NE.prototype, (function (options) { + + return { + + name: "richfaces.ui.PopupPanel.Sizer.NE", + + doPosition : function (popupPanel, elt) { + this.doSetupSize(popupPanel, elt); + this.doSetupPosition(popupPanel, elt, popupPanel.width() - elt.clientWidth, 0); + }, + + doDiff : function(dx, dy) { + return new richfaces.ui.PopupPanel.Sizer.Diff(0, dy, dx, -dy); + } + + } + })()); + + richfaces.ui.PopupPanel.Sizer.NEL = function(){ + + } + richfaces.ui.PopupPanel.Sizer.NEL.prototype = richfaces.ui.PopupPanel.Sizer.prototype; + $.extend(richfaces.ui.PopupPanel.Sizer.NEL.prototype, (function (options) { + + return { + + name: "richfaces.ui.PopupPanel.Sizer.NEL", + + doPosition : function (popupPanel, elt) { + this.doSetupSize(popupPanel, elt); + this.doSetupPosition(popupPanel, elt, popupPanel.width() - elt.clientWidth, 0); + }, + + doDiff : function(dx, dy) { + return new richfaces.ui.PopupPanel.Sizer.Diff(0, dy, dx, -dy); + } + + } + })()); + + richfaces.ui.PopupPanel.Sizer.E = function(){ + + } + richfaces.ui.PopupPanel.Sizer.E.prototype = richfaces.ui.PopupPanel.Sizer.prototype; + $.extend(richfaces.ui.PopupPanel.Sizer.E.prototype, (function (options) { + + return { + + name: "richfaces.ui.PopupPanel.Sizer.E", + + doPosition : function (popupPanel, elt) { + jQuery(elt)/css('height', popupPanel.height() + 'px'); + this.doSetupPosition(popupPanel, elt, popupPanel.width() - elt.clientWidth, 0); + }, + + doDiff : function(dx, dy) { + return new richfaces.ui.PopupPanel.Sizer.Diff(0, 0, dx, 0); + } + + } + })()); + + richfaces.ui.PopupPanel.Sizer.SE = function(){ + + } + richfaces.ui.PopupPanel.Sizer.SE.prototype = richfaces.ui.PopupPanel.Sizer.prototype; + $.extend(richfaces.ui.PopupPanel.Sizer.prototype.SE, (function (options) { + + return { + + name: "richfaces.ui.PopupPanel.Sizer.SE", + + doPosition : function (popupPanel, elt) { + this.doSetupSize(popupPanel, elt); + this.doSetupPosition(popupPanel, elt, popupPanel.width() - elt.clientWidth, + popupPanel.height() - elt.clientHeight); + }, + + doDiff : function(dx, dy) { + return new richfaces.ui.PopupPanel.Sizer.Diff(0, 0, dx, dy); + } + + } + })()); + + richfaces.ui.PopupPanel.Sizer.SEL = function(){ + + } + richfaces.ui.PopupPanel.Sizer.SEL.prototype = richfaces.ui.PopupPanel.Sizer.prototype; + $.extend(richfaces.ui.PopupPanel.Sizer.SEL.prototype, (function (options) { + + return { + + name: "richfaces.ui.PopupPanel.Sizer.SEL", + + doPosition : function (popupPanel, elt) { + this.doSetupSize(PopupPanel, elt); + this.doSetupPosition(popupPanel, elt, popupPanel.width() - elt.clientWidth, + popupPanel.height() - elt.clientHeight); + }, + + doDiff : function(dx, dy) { + return new richfaces.ui.PopupPanel.Sizer.Diff(0, 0, dx, dy); + } + + } + })()); + + richfaces.ui.PopupPanel.Sizer.S = function(){ + + } + richfaces.ui.PopupPanel.Sizer.S.prototype = richfaces.ui.PopupPanel.Sizer.prototype; + $.extend(richfaces.ui.PopupPanel.Sizer.S.prototype, (function (options) { + + return { + + name: "richfaces.ui.PopupPanel.Sizer.S", + + doPosition : function (popupPanel, elt) { + jQuery(elt).css('width', popupPanel.width() + 'px'); + this.doSetupPosition(popupPanel, elt, 0, popupPanel.height() - elt.clientHeight); + }, + + doDiff : function(dx, dy) { + return new richfaces.ui.PopupPanel.Sizer.Diff(0, 0, 0, dy); + } + + } + })()); + + richfaces.ui.PopupPanel.Sizer.SWL = function(){ + + } + richfaces.ui.PopupPanel.Sizer.SWL.prototype = richfaces.ui.PopupPanel.Sizer.prototype; + $.extend(richfaces.ui.PopupPanel.Sizer.SWL.prototype, (function (options) { + + return { + + name: "richfaces.ui.PopupPanel.Sizer.SWL", + + doPosition : function (popupPanel, elt) { + this.doSetupSize(popupPanel, elt); + this.doSetupPosition(popupPanel, elt, 0, popupPanel.height() - elt.clientHeight); + }, + + doDiff : function(dx, dy) { + return new richfaces.ui.PopupPanel.Sizer.Diff(dx, 0, -dx, dy); + } + + } + })()); + + richfaces.ui.PopupPanel.Sizer.SW = function(){ + + } + richfaces.ui.PopupPanel.Sizer.SW.prototype = richfaces.ui.PopupPanel.Sizer.prototype; + $.extend(richfaces.ui.PopupPanel.Sizer.SW.prototype, (function (options) { + + return { + + name: "richfaces.ui.PopupPanel.Sizer.SW", + + doPosition : function (popupPanel, elt) { + this.doSetupSize(popupPanel, elt); + this.doSetupPosition(popupPanel, elt, 0, popupPanel.height() - elt.clientHeight); + }, + + doDiff : function(dx, dy) { + return new richfaces.ui.PopupPanel.Sizer.Diff(dx, 0, -dx, dy); + } + + } + })()); + + richfaces.ui.PopupPanel.Sizer.W = function(){ + + } + richfaces.ui.PopupPanel.Sizer.W.prototype = richfaces.ui.PopupPanel.Sizer.prototype; + $.extend(richfaces.ui.PopupPanel.Sizer.W.prototype, (function (options) { + + return { + + name: "richfaces.ui.PopupPanel.Sizer.W", + + doPosition : function (popupPanel, elt) { + jQuery(elt).css('height', popupPanel.height() + 'px'); + this.doSetupPosition(popupPanel, elt, 0, 0); + }, + + doDiff : function(dx, dy) { + return new richfaces.ui.PopupPanel.Sizer.Diff(dx, 0, -dx, 0); + } + + } + })()); + + richfaces.ui.PopupPanel.Sizer.NWL = function(){ + + } + richfaces.ui.PopupPanel.Sizer.NWL.prototype = richfaces.ui.PopupPanel.Sizer.prototype; + $.extend(richfaces.ui.PopupPanel.Sizer.NWL.prototype, (function (options) { + + return { + + name: "richfaces.ui.PopupPanel.Sizer.NWL", + + doPosition : function (popupPanel, elt) { + this.doSetupSize(popupPanel, elt); + this.doSetupPosition(popupPanel, elt, 0, 0); + }, + + doDiff : function(dx, dy) { + return new richfaces.ui.PopupPanel.Sizer.Diff(dx, dy, -dx, -dy); + } + + } + })()); + + richfaces.ui.PopupPanel.Sizer.Header = function(){ + + } + richfaces.ui.PopupPanel.Sizer.Header.prototype = richfaces.ui.PopupPanel.Sizer.prototype; + $.extend(richfaces.ui.PopupPanel.Sizer.Header.prototype, (function (options) { + + return { + + name: "richfaces.ui.PopupPanel.Sizer.Header", + + doPosition : function (popupPanel, elt) { + + }, + + doDiff : function(dx, dy) { + return new richfaces.ui.PopupPanel.Sizer.Diff(dx, dy, 0, 0); + } + + } + })()); + + +})(jQuery, window.RichFaces); \ No newline at end of file Modified: root/ui-sandbox/panels2/trunk/ui/src/main/templates/popupPanel.template.xml =================================================================== --- root/ui-sandbox/panels2/trunk/ui/src/main/templates/popupPanel.template.xml 2010-07-09 18:09:13 UTC (rev 17792) +++ root/ui-sandbox/panels2/trunk/ui/src/main/templates/popupPanel.template.xml 2010-07-09 19:36:32 UTC (rev 17793) @@ -15,9 +15,10 @@ <cc:implementation> <cdk:call expression="checkOptions(facesContext, component)" /> - <input autocomplete="off" type="hidden" id="#{clientId}OpenedState" name="#{clientId}OpenedState" /> + <div id="#{clientId}" style="visibility: hidden;"> + <button class="mp-button" id="#{clientId}FirstHref"></button> <c:if test="#{component.attributes['modal']}"> - <div onclick="#{component.attributes['onmaskclick']}" + <div id="#{clientId}_shade" onclick="#{component.attributes['onmaskclick']}" ondblclick="#{component.attributes['onmaskdblclick']}" oncontextmenu="#{component.attributes['onmaskcontextmenu']}" onmouseup="#{component.attributes['onmaskmouseup']}" @@ -28,8 +29,7 @@ </c:if> <cdk:object type="java.lang.String" name="shadowStyle" value="#{getShadowStyle(facesContext,component)}" /> - <button class="rich-mpnl-button" id="#{clientId}FirstHref"></button> - <img style="#{shadowStyle}" width="0" height="0" class="mp_shadow"/> + <div id="#{clientId}_shadow" style="#{shadowStyle}" class="mp_shadow"/> <div id="#{clientId}_container" cdk:passThruWithExclusions="id,style,class,styleClass" class="mp_container #{component.attributes['styleClass']}"> <div id="#{clientId}_header" class="mp_header #{component.attributes['headerClass']}" > <c:if test="#{component.getFacet('header')!=null and component.getFacet('header').rendered}"> @@ -37,11 +37,11 @@ <cdk:call expression="renderHeaderFacet(facesContext, component)"/> </div> </c:if> - <c:else> + <c:if test="#{component.getFacet('header')==null and component.getFacet('header').rendered}"> <div id="#{clientId}_header_content" class="mp_header_content"> <div id="#{clientId}_header_icon" class="mp_header_icon"></div>Modal panel header name </div> - </c:else> + </c:if> <c:if test="#{component.getFacet('controls')!=null and component.getFacet('controls').rendered}"> <div id="#{clientId}_header_controls" class="mp_header_controls #{component.attributes['controlsClass']}"> <cdk:call expression="renderControlsFacet(facesContext, component)"/> @@ -54,29 +54,33 @@ </div> </div> <c:if test="#{component.attributes['resizeable']}"> - <div id="#{clientId}_handler_left" class="mp_handler mp_handler_left"></div> - <div id="#{clientId}_handler_right" class="mp_handler mp_handler_right"></div> - <div id="#{clientId}_handler_top" class="mp_handler mp_handler_top"></div> + <div id="#{clientId}ResizerW" class="mp_handler mp_handler_left"></div> + <div id="#{clientId}ResizerE" class="mp_handler mp_handler_right"></div> + <div id="#{clientId}ResizerN" class="mp_handler mp_handler_top"></div> - <div id="#{clientId}_handler_bottom" class="mp_handler mp_handler_bottom"></div> - <div id="#{clientId}_handler_top_left" class="mp_handler mp_handler_top_left"></div> - <div id="#{clientId}_handler_top_right" class="mp_handler mp_handler_top_right"></div> - <div id="#{clientId}_handler_bottom_left" class="mp_handler mp_handler_bottom_left"></div> - <div id="#{clientId}_handler_bottom_right" class="mp_handler mp_handler_bottom_right"></div> + <div id="#{clientId}ResizerS" class="mp_handler mp_handler_bottom"></div> + <div id="#{clientId}ResizerNW" class="mp_handler mp_handler_top_left"></div> + <div id="#{clientId}ResizerNE" class="mp_handler mp_handler_top_right"></div> + <div id="#{clientId}ResizerSW" class="mp_handler mp_handler_bottom_left"></div> + <div id="#{clientId}ResizerSE" class="mp_handler mp_handler_bottom_right"></div> </c:if> - <button class="rich-mpnl-button" id="#{clientId}LastHref"></button> + </div> + <cdk:object type="java.lang.String" name="script" value="#{buildScript(facesContext, component)}" /> + <cdk:object type="java.lang.String" name="showScript" value="#{buildShowScript(facesContext, component)}" /> <script type="text/javascript"> - <cdk:call expression="buildScript(facesContext, component)"/> + #{script} </script> + <c:if test="#{showScript != null}"> <script type="text/javascript"> - <cdk:call expression="buildShowScript(facesContext, component);"/> + #{showScript} </script> + </c:if> +<button class="mp-button" id="#{clientId}LastHref"></button> +</div> - - </cc:implementation> </cdk:root> \ No newline at end of file