Author: nbelaevski Date: 2008-04-15 13:03:10 -0400 (Tue, 15 Apr 2008) New Revision: 7845 Modified: branches/3.1.x/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanel.js branches/3.1.x/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanelBorders.js branches/3.1.x/ui/modal-panel/src/main/templates/org/richfaces/htmlModalPanel.jspx Log: http://jira.jboss.com/jira/browse/RF-3078 http://jira.jboss.com/jira/browse/RF-2366 Modified: branches/3.1.x/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanel.js =================================================================== --- branches/3.1.x/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanel.js 2008-04-15 16:26:00 UTC (rev 7844) +++ branches/3.1.x/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanel.js 2008-04-15 17:03:10 UTC (rev 7845) @@ -6,9 +6,6 @@ window.Richfaces = {}; } -sizeA = 4; -sizeB = 40; - function discardElement(element) { var garbageBin = document.getElementById('IELeakGarbageBin'); if (!garbageBin) { @@ -48,42 +45,18 @@ ModalPanel.panels = new Array(); -ModalPanel.Context = Class.create(); -ModalPanel.Context.prototype = { - initialize: function(modalPanel) { - this.cdiv = modalPanel.contentDiv; - this.isPositionFixed = Richfaces.getComputedStyle(this.cdiv, "position") == "fixed"; - }, - - left: function(offset) { - return offset; - }, - - top: function(offset) { - return offset; - }, - - width: function() { - return $(this.cdiv).offsetWidth; - }, - - height: function() { - return $(this.cdiv).offsetHeight; +function getSizeElement() { + var element; + if (RichFaces.navigatorType() != "OPERA" && document.compatMode=='CSS1Compat') { + element = document.documentElement; + } else { + element = document.body; } + + return element; } - function getSizeElement() { - var element; - if (RichFaces.navigatorType() != "OPERA" && document.compatMode=='CSS1Compat') { - element = document.documentElement; - } else { - element = document.body; - } - return element; - } - - ModalPanel.prototype = { initialize: function(id, options) { this["rich:destructor"] = "destroy"; @@ -96,17 +69,16 @@ this.baseZIndex = this.options.zindex ? this.options.zindex : 100; - this.minWidth = Math.max(this.options.minWidth, 2*sizeA + 2); - this.minHeight = Math.max(this.options.minHeight, 2*sizeA + 2); + this.minWidth = Math.max(this.options.minWidth, 2*ModalPanel.Sizer.INITIAL_MIN + 2); + this.minHeight = Math.max(this.options.minHeight, 2*ModalPanel.Sizer.INITIAL_MIN + 2); 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.context = new ModalPanel.Context(this); - this.borders = new Array(); if (this.options.resizeable) { @@ -159,7 +131,6 @@ this.eventOnHide = new Function("event",this.options.onhide).bindAsEventListener(this); } - ModalPanel.panels.push(this); this.eventFirstOnfocus = this.firstOnfocus.bindAsEventListener(this); @@ -171,7 +142,25 @@ this.selectBehavior = options.selectBehavior; }, + width: function() { + return this.getContentElement().offsetWidth; + }, + + height: function() { + return this.getContentElement().offsetHeight; + }, + + getContentElement: function() { + if (!this._sizedElement) { + this._sizedElement = this.options.autosized ? $(this.contentTable) : $(this.contentDiv); + } + + return this._sizedElement; + }, + destroy: function() { + this._sizedElement = null; + ModalPanel.panels = ModalPanel.panels.without(this); this.traverseSelects(true); @@ -450,12 +439,10 @@ Object.extend(this.userOptions, opts); } - var eContentDiv = $(this.contentDiv); + var eContentElt = this.getContentElement(); var eShadowDiv = $(this.shadowDiv); - if (this.options.autosized) { - eContentDiv.style.overflow = ""; - } else { + if (!this.options.autosized) { if (options.width && options.width == -1) options.width = 300; if (options.height && options.height == -1) @@ -470,7 +457,7 @@ if (eIframe) { eIframe.style.width = options.width + (/px/.test(options.width) ? '' : 'px'); } - eContentDiv.style.width = options.width + (/px/.test(options.width) ? '' : 'px'); + eContentElt.style.width = options.width + (/px/.test(options.width) ? '' : 'px'); eShadowDiv.style.width = options.width + (/px/.test(options.width) ? '' : 'px'); } @@ -482,7 +469,7 @@ if (eIframe) { eIframe.style.height = options.height + (/px/.test(options.height) ? '' : 'px'); } - eContentDiv.style.height = options.height + (/px/.test(options.height) ? '' : 'px'); + eContentElt.style.height = options.height + (/px/.test(options.height) ? '' : 'px'); eShadowDiv.style.height = options.height + (/px/.test(options.height) ? '' : 'px'); } @@ -547,15 +534,12 @@ _left = parseInt(options.left, 10); } else { var cw = getSizeElement().clientWidth; - if (RichFaces.navigatorType() == "OPERA") - _left = (cw - eContentDiv.style.width.replace("px", "")) / 2; - else { - var _width = Richfaces.getComputedStyleSize(eContentDiv, "width"); - if (isNaN(_width)) - _width = eContentDiv.clientWidth; - _left = (cw - _width) / 2; - } - + var _width = this.width(); //Richfaces.getComputedStyleSize(eContentElt, "width"); + if (cw >= _width) { + _left = (cw - _width) / 2; + } else { + _left = 0; + } } this.setLeft(_left); @@ -567,15 +551,11 @@ _top = parseInt(options.top, 10); } else { var cw = getSizeElement().clientHeight; - if (RichFaces.navigatorType() == "OPERA") - { - _top = (cw - eContentDiv.style.height.replace("px", "")) / 2; - } - else { - var _height = Richfaces.getComputedStyleSize(eContentDiv, "height"); - if (isNaN(_height)) - _height = eContentDiv.clientHeight; + var _height = this.height(); //Richfaces.getComputedStyleSize(eContentElt, "height"); + if (cw >= _height) { _top = (cw - _height) / 2; + } else { + _top = 0; } } @@ -690,14 +670,14 @@ var vetoeChange = false; var newSize; - var eContentDiv = $(this.contentDiv); + var eContentElt = this.getContentElement(); var eShadowDiv = $(this.shadowDiv); // Avoid currentStyle bug in opera if (RichFaces.navigatorType() != "OPERA") - newSize = Richfaces.getComputedStyleSize(eContentDiv, "width"); + newSize = Richfaces.getComputedStyleSize(eContentElt, "width"); else - newSize = this._getStyle(eContentDiv, "width"); + newSize = this._getStyle(eContentElt, "width"); var oldSize = newSize; newSize += diff.deltaWidth || 0; @@ -735,9 +715,9 @@ // Avoid currentStyle bug in opera if (RichFaces.navigatorType() != "OPERA") - newSize = Richfaces.getComputedStyleSize(eContentDiv, "height"); + newSize = Richfaces.getComputedStyleSize(eContentElt, "height"); else - newSize = this._getStyle(eContentDiv, "height")//;Richfaces.getComputedStyleSize(eContentDiv, "height"); + newSize = this._getStyle(eContentElt, "height")//;Richfaces.getComputedStyleSize(eContentDiv, "height"); var oldSize = newSize; newSize += diff.deltaHeight || 0; @@ -781,7 +761,7 @@ Element.setStyle(eCdiv, cssHash); - Element.setStyle(eContentDiv, cssHashWH); + Element.setStyle(eContentElt, cssHashWH); this.correctShadowSize(); if (this.iframe) { Element.setStyle($(this.iframe), cssHashWH); @@ -790,22 +770,22 @@ Object.extend(this.userOptions, cssHash); Object.extend(this.userOptions, cssHashWH); - var w = this.context.width(); - var h = this.context.height(); + var w = this.width(); + var h = this.height(); - this.context.reduced = null; + this.reductionData = null; - if (w <= 2*sizeB) { - this.context.reduced = {}; - this.context.reduced.w = w; + if (w <= 2*ModalPanel.Sizer.INITIAL_MAX) { + this.reductionData = {}; + this.reductionData.w = w; } - if (h <= 2*sizeB) { - if (!this.context.reduced) { - this.context.reduced = {}; + if (h <= 2*ModalPanel.Sizer.INITIAL_MAX) { + if (!this.reductionData) { + this.reductionData = {}; } - this.context.reduced.h = h; + this.reductionData.h = h; } if (this.header) { @@ -844,8 +824,7 @@ correctShadowSize: function(event) { var eShadowDiv = $(this.shadowDiv); - var eContentDiv = $(this.contentDiv); - if (!eShadowDiv || !eContentDiv) { + if (!eShadowDiv) { return; } var eIframe = $(this.iframe); @@ -857,8 +836,8 @@ dx = eShadowDiv.offsetWidth-eShadowDiv.clientWidth; dy = eShadowDiv.offsetHeight-eShadowDiv.clientHeight; } - var w = eContentDiv.offsetWidth; - var h = eContentDiv.offsetHeight; + var w = this.width(); + var h = this.height(); eShadowDiv.style.width = (w-dx)+"px"; eShadowDiv.style.height = (h-dy)+"px"; Modified: branches/3.1.x/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanelBorders.js =================================================================== --- branches/3.1.x/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanelBorders.js 2008-04-15 16:26:00 UTC (rev 7844) +++ branches/3.1.x/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanelBorders.js 2008-04-15 17:03:10 UTC (rev 7845) @@ -123,6 +123,9 @@ 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) { @@ -145,15 +148,15 @@ var width = 0; var height = 0; - var context = modalPanel.context; + var reductionData = modalPanel.reductionData; - if (context.reduced) { - if (context.reduced.w) { - width = context.reduced.w / 2; + if (reductionData) { + if (reductionData.w) { + width = reductionData.w / 2; } - if (context.reduced.h) { - height = context.reduced.h / 2; + if (reductionData.h) { + height = reductionData.h / 2; } } @@ -163,7 +166,7 @@ elt.reducedWidth = elt.style.width; } elt.style.width = width + 'px'; - } else if (width < sizeB && /* TODO fix the dirty code */elt.reducedWidth == sizeB + '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 { @@ -179,7 +182,7 @@ elt.reducedHeight = elt.style.height; } elt.style.height = height + 'px'; - } else if (height < sizeB && /* TODO fix the dirty code */elt.reducedHeight == sizeB + '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 { @@ -191,10 +194,8 @@ }, doSetupPosition: function (modalPanel, elt, left, top) { - var context = modalPanel.context; - - elt.style.left = context.left(left) + 'px'; - elt.style.top = context.top(top) + 'px'; + elt.style.left = left + 'px'; + elt.style.top = top + 'px'; }, doPosition: function (modalPanel, elt) { @@ -219,7 +220,7 @@ ModalPanel.Sizer.N = new ModalPanel.Sizer(); ModalPanel.Sizer.N.doPosition = function (modalPanel, elt) { - elt.style.width = modalPanel.context.width() + 'px'; + elt.style.width = modalPanel.width() + 'px'; this.doSetupPosition(modalPanel, elt, 0, 0); }; ModalPanel.Sizer.N.doDiff = function(dx, dy) { @@ -229,7 +230,7 @@ ModalPanel.Sizer.NEU = new ModalPanel.Sizer(); ModalPanel.Sizer.NEU.doPosition = function (modalPanel, elt) { this.doSetupSize(modalPanel, elt); - this.doSetupPosition(modalPanel, elt, modalPanel.context.width() - elt.clientWidth, 0); + 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); @@ -238,7 +239,7 @@ ModalPanel.Sizer.NEL = new ModalPanel.Sizer(); ModalPanel.Sizer.NEL.doPosition = function (modalPanel, elt) { this.doSetupSize(modalPanel, elt); - this.doSetupPosition(modalPanel, elt, modalPanel.context.width() - elt.clientWidth, 0); + 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); @@ -246,8 +247,8 @@ ModalPanel.Sizer.E = new ModalPanel.Sizer(); ModalPanel.Sizer.E.doPosition = function (modalPanel, elt) { - elt.style.height = modalPanel.context.height() + 'px'; - this.doSetupPosition(modalPanel, elt, modalPanel.context.width() - elt.clientWidth, 0); + 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); @@ -256,8 +257,8 @@ ModalPanel.Sizer.SEU = new ModalPanel.Sizer(); ModalPanel.Sizer.SEU.doPosition = function (modalPanel, elt) { this.doSetupSize(modalPanel, elt); - this.doSetupPosition(modalPanel, elt, modalPanel.context.width() - elt.clientWidth, - modalPanel.context.height() - elt.clientHeight); + 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); @@ -266,8 +267,8 @@ ModalPanel.Sizer.SEL = new ModalPanel.Sizer(); ModalPanel.Sizer.SEL.doPosition = function (modalPanel, elt) { this.doSetupSize(modalPanel, elt); - this.doSetupPosition(modalPanel, elt, modalPanel.context.width() - elt.clientWidth, - modalPanel.context.height() - elt.clientHeight); + 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); @@ -275,8 +276,8 @@ ModalPanel.Sizer.S = new ModalPanel.Sizer(); ModalPanel.Sizer.S.doPosition = function (modalPanel, elt) { - elt.style.width = modalPanel.context.width() + 'px'; - this.doSetupPosition(modalPanel, elt, 0, modalPanel.context.height() - elt.clientHeight); + 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); @@ -285,7 +286,7 @@ ModalPanel.Sizer.SWL = new ModalPanel.Sizer(); ModalPanel.Sizer.SWL.doPosition = function (modalPanel, elt) { this.doSetupSize(modalPanel, elt); - this.doSetupPosition(modalPanel, elt, 0, modalPanel.context.height() - elt.clientHeight); + 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); @@ -294,7 +295,7 @@ ModalPanel.Sizer.SWU = new ModalPanel.Sizer(); ModalPanel.Sizer.SWU.doPosition = function (modalPanel, elt) { this.doSetupSize(modalPanel, elt); - this.doSetupPosition(modalPanel, elt, 0, modalPanel.context.height() - elt.clientHeight); + 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); @@ -302,7 +303,7 @@ ModalPanel.Sizer.W = new ModalPanel.Sizer(); ModalPanel.Sizer.W.doPosition = function (modalPanel, elt) { - elt.style.height = modalPanel.context.height() + 'px'; + elt.style.height = modalPanel.height() + 'px'; this.doSetupPosition(modalPanel, elt, 0, 0); }; ModalPanel.Sizer.W.doDiff = function(dx, dy) { @@ -320,8 +321,7 @@ ModalPanel.Header = new ModalPanel.Sizer(); ModalPanel.Header.doPosition = function (modalPanel, elt) { - //elt.style.width = modalPanel.context.width() - 2*sizeA + 'px'; - //this.doSetupPosition(modalPanel, elt, 0, 0); + }; ModalPanel.Header.doDiff = function(dx, dy) { return new ModalPanel.Sizer.Diff(dx, dy, 0, 0); Modified: branches/3.1.x/ui/modal-panel/src/main/templates/org/richfaces/htmlModalPanel.jspx =================================================================== --- branches/3.1.x/ui/modal-panel/src/main/templates/org/richfaces/htmlModalPanel.jspx 2008-04-15 16:26:00 UTC (rev 7844) +++ branches/3.1.x/ui/modal-panel/src/main/templates/org/richfaces/htmlModalPanel.jspx 2008-04-15 17:03:10 UTC (rev 7845) @@ -105,15 +105,18 @@ tableStyle += "width: " + (width > 0 ? width : 1) + "px;"; tableStyle += "height: " + (height > 0 ? height : 1) + "px;"; + divStyle = ""; + } else { tableStyle = "height: 100%; width: 100%;"; + divStyle = "overflow: hidden;"; } ]]> </jsp:scriptlet> - <div id="#{clientId}ContentDiv" style="position: absolute; z-index: 2; overflow: hidden; #{component.attributes['style']}" class="dr-mpnl-pnl rich-mp-content"> + <div id="#{clientId}ContentDiv" style="#{divStyle} position: absolute; z-index: 2; #{component.attributes['style']}" class="dr-mpnl-pnl rich-mp-content"> - <table style="#{tableStyle}" border="0" cellpadding="0" cellspacing="0"> + <table id="#{clientId}ContentTable" style="#{tableStyle}" border="0" cellpadding="0" cellspacing="0"> <jsp:scriptlet> <![CDATA[if(component.getFacet("header")!=null && component.getFacet("header").isRendered()) {]]> </jsp:scriptlet>