Author: nbelaevski Date: 2008-02-04 11:03:22 -0500 (Mon, 04 Feb 2008) New Revision: 5785 Modified: trunk/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/css/modalPanel.xcss trunk/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanel.js trunk/ui/modal-panel/src/main/templates/org/richfaces/htmlModalPanel.jspx Log: http://jira.jboss.com/jira/browse/RF-2128 Modified: trunk/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/css/modalPanel.xcss =================================================================== --- trunk/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/css/modalPanel.xcss 2008-02-04 16:01:33 UTC (rev 5784) +++ trunk/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/css/modalPanel.xcss 2008-02-04 16:03:22 UTC (rev 5785) @@ -48,15 +48,11 @@ } .dr-mpnl-pnl-a { + outline-style: none; position: absolute; left: -32000px; } - .rich-mp-content { - height: 100%; - width: 100%; - } - </f:verbatim> <u:selector name=".dr-mpnl-spacer, .dr-mpnl-resizer"> @@ -72,8 +68,6 @@ border-style: solid; padding : 1px; background-color: inherit; - height: 100%; - width: 100%; } .dr-mpnl-pnl-h{ Modified: trunk/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanel.js =================================================================== --- trunk/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanel.js 2008-02-04 16:01:33 UTC (rev 5784) +++ trunk/ui/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanel.js 2008-02-04 16:03:22 UTC (rev 5785) @@ -73,7 +73,7 @@ ModalPanel.Context = Class.create(); ModalPanel.Context.prototype = { initialize: function(modalPanel) { - this.cdiv = modalPanel.contentTable; + this.cdiv = modalPanel.contentDiv; this.isPositionFixed = Richfaces.getComputedStyle(this.cdiv, "position") == "fixed"; }, @@ -125,7 +125,6 @@ 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); @@ -354,54 +353,48 @@ } }, - processAllFocusElements: function(root) { + processAllFocusElements: function(root, callback) { if (root.focus && // Many not visible elements have focus method, we is had to avoid processing them. /^a|input|select|button|textarea$/i.test(root.tagName) && !root.disabled && !/^hidden$/.test(root.type) && !/^none$/.test(root.style.display)) { - this.execute(root); + + callback.call(this, root); } else { - if (root.id && root.id==this.cdiv) - this.inModalPanel = true; - var child = root.firstChild; - while (child) { - this.processAllFocusElements(child); - child = child.nextSibling; + if (root != this.id) { + var child = root.firstChild; + while (child) { + this.processAllFocusElements(child, callback); + child = child.nextSibling; + } } - if (root.id && root.id==this.cdiv) - this.inModalPanel = false; } }, processTabindexes: function(input) { - if (!this.inModalPanel) { - if (!this.firstOutside) - this.firstOutside = input; - this.lastOutside = input; - if (input.tabIndex) { - input.prevTabIndex = input.tabIndex; - } - input.tabIndex = undefined; - if (input.accesskey) { - input.prevAccesskey = input.accesskey; - } - input.accesskey = undefined; + if (!this.firstOutside) + this.firstOutside = input; + this.lastOutside = input; + if (input.tabIndex) { + input.prevTabIndex = input.tabIndex; } + input.tabIndex = undefined; + if (input.accesskey) { + input.prevAccesskey = input.accesskey; + } + input.accesskey = undefined; }, restoreTabindexes: function(input) { - if (!this.inModalPanel) { - if (input.prevTabIndex) - input.tabIndex = input.prevTabIndex; - if (input.prevAccesskey) - input.accesskey = input.prevAccesskey; - } + if (input.prevTabIndex) + input.tabIndex = input.prevTabIndex; + if (input.prevAccesskey) + input.accesskey = input.prevAccesskey; }, preventFocus: function() { - this.execute = this.processTabindexes; - this.processAllFocusElements(document); + this.processAllFocusElements(document, this.processTabindexes); if (this.firstOutside) { Event.observe(this.firstOutside, "focus", this.eventFirstOnfocus); @@ -412,8 +405,7 @@ }, restoreFocus: function() { - this.execute = this.restoreTabindexes; - this.processAllFocusElements(document); + this.processAllFocusElements(document, this.restoreTabindexes); if (this.firstOutside) { Event.stopObserving(this.firstOutside, "focus", this.eventFirstOnfocus); @@ -488,13 +480,13 @@ options.height = 200; } - var eContentTable = $(this.contentTable); + var eContentDiv = $(this.contentDiv); if (options.width && options.width != -1) { if (this.minWidth > options.width) { options.width = this.minWidth; } - eContentTable.style.width = options.width + (/px/.test(options.width) ? '' : 'px'); + eContentDiv.style.width = options.width + (/px/.test(options.width) ? '' : 'px'); } if (options.height && options.height != -1) { @@ -502,7 +494,7 @@ options.height = this.minHeight; } - eContentTable.style.height = options.height + (/px/.test(options.height) ? '' : 'px'); + eContentDiv.style.height = options.height + (/px/.test(options.height) ? '' : 'px'); } eCdiv.mpSet = true; @@ -717,6 +709,10 @@ } }, + _getStyle: function(elt, name) { + return parseInt(elt.style[name].replace("px", ""), 10); + }, + doResizeOrMove: function(diff) { var vetoes = {}; var cssHash = {}; @@ -725,9 +721,9 @@ var vetoeChange = false; var newSize; - var eContentTable = $(this.contentTable); + var eContentDiv = $(this.contentDiv); - newSize = Richfaces.getComputedStyleSize(eContentTable, "width"); + newSize = this._getStyle(eContentDiv, "width");//Richfaces.getComputedStyleSize(eContentDiv, "width"); var oldSize = newSize; newSize += diff.deltaWidth || 0; @@ -758,12 +754,12 @@ } var newPos; - newPos = Richfaces.getComputedStyleSize(eCdiv, "left"); + newPos = this._getStyle(eCdiv, "left");//Richfaces.getComputedStyleSize(eCdiv, "left"); newPos += diff.deltaX; cssHash.left = newPos + 'px'; } - newSize = Richfaces.getComputedStyleSize(eContentTable, "height"); + newSize = this._getStyle(eContentDiv, "height")//;Richfaces.getComputedStyleSize(eContentDiv, "height"); var oldSize = newSize; newSize += diff.deltaHeight || 0; @@ -799,7 +795,7 @@ eCdiv.mpTop = newPos; cssHash.top = newPos + 'px'; } else { - newPos = Richfaces.getComputedStyleSize(eCdiv, "top"); + newPos = this._getStyle(eCdiv, "top");//Richfaces.getComputedStyleSize(eCdiv, "top"); newPos += diff.deltaY; cssHash.top = newPos + 'px'; } @@ -807,7 +803,7 @@ Element.setStyle(eCdiv, cssHash); - Element.setStyle(eContentTable, cssHashWH); + Element.setStyle(eContentDiv, cssHashWH); this.correctShadowSizeEx(); Object.extend(this.userOptions, cssHash); @@ -871,8 +867,8 @@ correctShadowSizeEx: function() { var eShadowDiv = $(this.shadowDiv); - var eContentTable = $(this.contentTable); - if (!eShadowDiv || !eContentTable) { + var eContentDiv = $(this.contentDiv); + if (!eShadowDiv || !eContentDiv) { return; } var eIframe = $(this.iframe); @@ -884,8 +880,8 @@ dx = eShadowDiv.offsetWidth-eShadowDiv.clientWidth; dy = eShadowDiv.offsetHeight-eShadowDiv.clientHeight; } - var w = eContentTable.offsetWidth; - var h = eContentTable.offsetHeight; + var w = eContentDiv.offsetWidth; + var h = eContentDiv.offsetHeight; eShadowDiv.style.width = (w-dx)+"px"; eShadowDiv.style.height = (h-dy)+"px"; Modified: trunk/ui/modal-panel/src/main/templates/org/richfaces/htmlModalPanel.jspx =================================================================== --- trunk/ui/modal-panel/src/main/templates/org/richfaces/htmlModalPanel.jspx 2008-02-04 16:01:33 UTC (rev 5784) +++ trunk/ui/modal-panel/src/main/templates/org/richfaces/htmlModalPanel.jspx 2008-02-04 16:03:22 UTC (rev 5785) @@ -48,9 +48,10 @@ onmousedown="#{component.attributes['onmaskmousedown']}" onmousemove="#{component.attributes['onmaskmousemove']}" onmouseover="#{component.attributes['onmaskmouseover']}" - onmouseout="#{component.attributes['onmaskmouseout']}" /> - <div class="dr-mpnl-mask-div rich-mpnl-mask-div" id="#{clientId}CursorDiv" - style="filter: alpha(opacity=1); z-index: -200"></div> + onmouseout="#{component.attributes['onmaskmouseout']}"> + + <a href="#" class="dr-mpnl-pnl-a" id="#{clientId}FirstHref">_</a> + </div> <div id="#{clientId}CDiv" class="dr-mpnl-panel rich-mpnl_panel" style="width: 1px; height: 1px; z-index: 2;"> @@ -80,15 +81,9 @@ <div id="#{clientId}ShadowDiv" class="dr-mpnl-shadow rich-mpnl-shadow" style="#{component.shadowStyle}" > </div> - <table id="#{clientId}ContentTable" cellpadding="0" cellspacing="0" border="0" - style="position: absolute; z-index: 2; width: #{component.minWidth}px; height: #{component.minHeight}px; #{component.attributes['style']};"> - <tbody> - <tr> - <td class="dr-mpnl-pnl"> - <div id="#{clientId}ContentDiv" style="overflow: hidden;" class="rich-mp-content"> + <div id="#{clientId}ContentDiv" style="position: absolute; z-index: 2; overflow: hidden; width: #{component.minWidth}px; height: #{component.minHeight}px; #{component.attributes['style']}" class="dr-mpnl-pnl rich-mp-content"> - <a href="#" class="dr-mpnl-pnl-a" id="#{clientId}FirstHref" >_</a> <table style="height: 100%; width: 100%;" border="0" cellpadding="0" cellspacing="0"> <jsp:scriptlet> <![CDATA[if(component.getFacet("header")!=null && component.getFacet("header").isRendered()) {]]> @@ -120,14 +115,18 @@ <f:call name="renderChildren" /> </vcp:body> <f:clientid var="clientId"/> - <a href="#" class="dr-mpnl-pnl-a" id="#{clientId}LastHref" >_</a> </td> </tr> </table> </div> - </td></tr></tbody></table> </div> + <div class="dr-mpnl-mask-div rich-mpnl-mask-div" id="#{clientId}CursorDiv" + style="filter: alpha(opacity=1); z-index: -200"> + + <a href="#" class="dr-mpnl-pnl-a" id="#{clientId}LastHref">_</a> + </div> + <script type="text/javascript"> new ModalPanel('#{clientId}', {