Author: nbelaevski
Date: 2007-03-14 15:28:17 -0400 (Wed, 14 Mar 2007)
New Revision: 72
Modified:
trunk/richfaces/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanel.js
trunk/richfaces/modal-panel/src/main/templates/org/richfaces/htmlModalPanel.jspx
Log:
ModalPanel functionality reviewed:
1. MP moves its content direct to body DOM element to solve zIndex issues
- MPs collect "space garbage" on every AJAX request
2. Fixed disabling of SELECTs inside the MP
Modified:
trunk/richfaces/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanel.js
===================================================================
---
trunk/richfaces/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanel.js 2007-03-14
19:13:42 UTC (rev 71)
+++
trunk/richfaces/modal-panel/src/main/resources/org/richfaces/renderkit/html/scripts/modalPanel.js 2007-03-14
19:28:17 UTC (rev 72)
@@ -31,6 +31,37 @@
}
}
+ModalPanel.ajaxListener = {
+ onafterajax: function(req, event, data) {
+ var i = 0;
+ while (i < this.panels.length) {
+ var panel = this.panels[i];
+
+ var elt = panel.markerId;
+
+ if (!Richfaces.isNodeInDOMTree(elt)) {
+ panel.destroy();
+
+ this.panels.splice(i, 1);
+ //check all panels again. maybe we've removed parent of any panel just now
+ i = 0;
+ } else {
+ i++;
+ }
+ }
+ },
+
+ panels: new Array(),
+
+ addPanel: function(panel) {
+ if (panel) {
+ this.panels.push(panel);
+ }
+ }
+};
+
+A4J.AJAX.AddListener(ModalPanel.ajaxListener);
+
ModalPanel.Context = Class.create();
ModalPanel.Context.prototype = {
initialize: function(modalPanel) {
@@ -69,8 +100,10 @@
ModalPanel.prototype = {
initialize: function(id, options) {
- this.id = $(id);
+ this.markerId = $(id);
+ this.id = $(id + "Container");
+
this.options = options;
this.baseZIndex = this.options.zindex ? this.options.zindex : 100;
@@ -131,6 +164,16 @@
}
},
+ destroy: function() {
+ var parent = this.id.parentNode;
+
+ this.traverseSelects(true);
+
+ if (parent) {
+ parent.removeChild(this.id);
+ }
+ },
+
initIframe : function() {
if (this.contentWindow) {
Element.setStyle(this.contentWindow.document.body, { "margin" : "0px
0px 0px 0px" });
@@ -157,23 +200,44 @@
return ;
}
- var selects = document.getElementsByTagName("SELECT");
+ var children = document.body.childNodes;
+ for (var k = 0; k < children.length; k++) {
+ var child = children[k];
+ if (child != this.id) {
+
+ var selects = child.getElementsByTagName("SELECT");
+
+ for (var i = 0; i < selects.length; i++) {
+ var elt = selects[i];
+
+ if (enable) {
+ if (elt._mdwCount) {
+ elt._mdwCount -= 1;
- for (var i = 0; i < selects.length; i++) {
- var elt = selects[i];
-
- if (enable) {
- if (elt._mdwDisabled) {
- elt._mdwDisabled = undefined;
- } else {
- elt.disabled = false;
+ if (elt._mdwCount == 0) {
+ if (elt._mdwDisabled) {
+ elt._mdwDisabled = undefined;
+ } else {
+ elt.disabled = false;
+ }
+
+ elt._mdwCount = undefined;
+ }
+ }
+ } else {
+ if (elt._mdwCount) {
+ elt._mdwCount += 1;
+ } else {
+ if (elt.disabled) {
+ elt._mdwDisabled = true;
+ } else {
+ elt.disabled = true;
+ }
+
+ elt._mdwCount = 1;
+ }
+ }
}
- } else {
- if (elt.disabled) {
- elt._mdwDisabled = true;
- } else {
- elt.disabled = true;
- }
}
}
},
@@ -195,6 +259,11 @@
},
show: function(opts) {
+ if (this.id.parentNode != document.body) {
+ document.body.appendChild(this.id.parentNode.removeChild(this.id));
+ ModalPanel.ajaxListener.addPanel(this);
+ }
+
var options = {};
if (!this.cdiv.mpSet) {
@@ -475,13 +544,13 @@
}
Richfaces.showModalPanel = function (id, opts) {
- var panel = $(id);
+ var panel = $(id + "Container");
if (panel && panel.modalPanel)
panel.modalPanel.show(opts);
}
Richfaces.hideModalPanel = function (id) {
- var panel = $(id);
+ var panel = $(id + "Container");
if (panel && panel.modalPanel)
panel.modalPanel.hide();
}
Modified:
trunk/richfaces/modal-panel/src/main/templates/org/richfaces/htmlModalPanel.jspx
===================================================================
---
trunk/richfaces/modal-panel/src/main/templates/org/richfaces/htmlModalPanel.jspx 2007-03-14
19:13:42 UTC (rev 71)
+++
trunk/richfaces/modal-panel/src/main/templates/org/richfaces/htmlModalPanel.jspx 2007-03-14
19:28:17 UTC (rev 72)
@@ -26,105 +26,109 @@
<f:clientid var="clientId"/>
<div id="#{clientId}"
- name="#{clientId}"
- x:passThruWithExclusions="value,name,type,id"
- style="position: relative; display: none;"
- class="rich-modalpanel"
+ style="display: none;"
<f:call name="checkOptions" />
-
- <div class="dr-mpnl-mask-div rich-mpnl-mask-div"
id="#{clientId}Div"
- style="background-color: #d0d0d0; filter: alpha(opacity=50); opacity: 0.5;
z-index: #{component.zindex - 2};"></div>
- <div class="dr-mpnl-mask-div rich-mpnl-mask-div"
id="#{clientId}CursorDiv"
- style="background-color: #d0d0d0; filter: alpha(opacity=1); opacity: 0.01;
z-index: #{component.zindex - 200 }"></div>
-
- <div id="#{clientId}CDiv" class="dr-mpnl-panel rich-mpnl_panel"
style="z-index: #{component.zindex - 1};">
-
- <iframe frameborder="0" scrolling="no"
id="#{clientId}IFrame"
- style="position: absolute; width: 100%; height: 100%; background-color: white;
overflow-y: hidden; z-index: #{component.zindex - 2};">
- </iframe>
-
- <jsp:scriptlet>
- <![CDATA[
- if (component.isResizeable()) {
- for (int i = 0; i < RESIZERS.length; i++) {
- variables.setVariable("resizer", RESIZERS[i]);
-
- boolean isHor = i / 3 % 2 == 0;
- String style = isHor ? "width: 40px; height: 4px;" : "height: 40px;
width: 4px;";
-
- //higher z-index for corner elements
- style += "z-index: " + ((i % 3 == 1 ? 0 : 1) + component.getZindex()) +
";";
- variables.setVariable("resizerStyle", style);
- ]]>
- </jsp:scriptlet>
- <div id="#{clientId}Resizer#{resizer}" class="dr-mpnl-resizer
rich-mpnl-resizer" style="#{resizerStyle}">
- </div>
- <jsp:scriptlet>
- <![CDATA[
+
+ <div id="#{clientId}Container"
+ style="position: relative; display: none;"
+ class="rich-modalpanel"
+ x:passThruWithExclusions="id,style,class"
+ >
+ <div class="dr-mpnl-mask-div rich-mpnl-mask-div"
id="#{clientId}Div"
+ style="background-color: #d0d0d0; filter: alpha(opacity=50); opacity: 0.5;
z-index: #{component.zindex - 2};"></div>
+ <div class="dr-mpnl-mask-div rich-mpnl-mask-div"
id="#{clientId}CursorDiv"
+ style="background-color: #d0d0d0; filter: alpha(opacity=1); opacity: 0.01;
z-index: #{component.zindex - 200 }"></div>
+
+ <div id="#{clientId}CDiv" class="dr-mpnl-panel rich-mpnl_panel"
style="z-index: #{component.zindex - 1};">
+
+ <iframe frameborder="0" scrolling="no"
id="#{clientId}IFrame"
+ style="position: absolute; width: 100%; height: 100%; background-color: white;
overflow-y: hidden; z-index: #{component.zindex - 2};">
+ </iframe>
+
+ <jsp:scriptlet>
+ <![CDATA[
+ if (component.isResizeable()) {
+ for (int i = 0; i < RESIZERS.length; i++) {
+ variables.setVariable("resizer", RESIZERS[i]);
+
+ boolean isHor = i / 3 % 2 == 0;
+ String style = isHor ? "width: 40px; height: 4px;" : "height:
40px; width: 4px;";
+
+ //higher z-index for corner elements
+ style += "z-index: " + ((i % 3 == 1 ? 0 : 1) + component.getZindex()) +
";";
+ variables.setVariable("resizerStyle", style);
+ ]]>
+ </jsp:scriptlet>
+ <div id="#{clientId}Resizer#{resizer}" class="dr-mpnl-resizer
rich-mpnl-resizer" style="#{resizerStyle}">
+ </div>
+ <jsp:scriptlet>
+ <![CDATA[
+ }
}
- }
- ]]>
- </jsp:scriptlet>
-
- <div style="position: absolute; width: 100%; height: 100%; overflow: hidden;
z-index: #{component.zindex - 1};"
- class="dr-mpnl-pnl" >
- <table style="height: 100%; width: 100%;" border="0"
cellpadding="0" cellspacing="0">
- <jsp:scriptlet>
- <![CDATA[if(component.getFacet("header")!=null &&
component.getFacet("header").isRendered()) {]]>
- </jsp:scriptlet>
- <tr style="height: 1%;">
- <td class="dr-mpnl-header rich-mpnl-header" style="position:
relative; vertical-align: middle; z-index: #{component.zindex + 2 }"
width="100%">
- <div id="#{clientId}Header" style="position: relative;"
class="dr-mpnl-pnl-text dr-mpnl-pnl-h rich-mpnl-pnl-text
rich-mpnl-pnl-h#{component.attributes['headerClass']}"
- nowrap="nowrap">
- <u:insertFacet name="header" />
- </div>
-
- <jsp:scriptlet>
- <![CDATA[if(component.getFacet("controls")!=null &&
component.getFacet("controls").isRendered()) {]]>
- </jsp:scriptlet>
- <div style="position: absolute; top: 3px; right: 3px;"
class="dr-mpnl-pnl-text rich-mpnl-pnl-text
#{component.attributes['controlsClass']}">
- <u:insertFacet name="controls" />
+ ]]>
+ </jsp:scriptlet>
+
+ <div style="position: absolute; width: 100%; height: 100%; overflow: hidden;
z-index: #{component.zindex - 1};"
+ class="dr-mpnl-pnl" >
+ <table style="height: 100%; width: 100%;" border="0"
cellpadding="0" cellspacing="0">
+ <jsp:scriptlet>
+ <![CDATA[if(component.getFacet("header")!=null &&
component.getFacet("header").isRendered()) {]]>
+ </jsp:scriptlet>
+ <tr style="height: 1%;">
+ <td class="dr-mpnl-header rich-mpnl-header" style="position:
relative; vertical-align: middle; z-index: #{component.zindex + 2 }"
width="100%">
+ <div id="#{clientId}Header" style="position: relative;"
class="dr-mpnl-pnl-text dr-mpnl-pnl-h rich-mpnl-pnl-text
rich-mpnl-pnl-h#{component.attributes['headerClass']}"
+ nowrap="nowrap">
+ <u:insertFacet name="header" />
</div>
- <jsp:scriptlet>
- <![CDATA[}]]>
- </jsp:scriptlet>
- </td>
- </tr>
- <jsp:scriptlet>
- <![CDATA[}]]>
- </jsp:scriptlet>
- <tr>
- <td class="dr-mpnl-pnl-b rich-mpnl-pnl-b"
valign="top">
- <vcp:body>
- <f:call name="renderChildren" />
- </vcp:body>
- </td>
- </tr>
- </table>
+
+ <jsp:scriptlet>
+ <![CDATA[if(component.getFacet("controls")!=null &&
component.getFacet("controls").isRendered()) {]]>
+ </jsp:scriptlet>
+ <div style="position: absolute; top: 3px; right: 3px;"
class="dr-mpnl-pnl-text rich-mpnl-pnl-text
#{component.attributes['controlsClass']}">
+ <u:insertFacet name="controls" />
+ </div>
+ <jsp:scriptlet>
+ <![CDATA[}]]>
+ </jsp:scriptlet>
+ </td>
+ </tr>
+ <jsp:scriptlet>
+ <![CDATA[}]]>
+ </jsp:scriptlet>
+ <tr>
+ <td class="dr-mpnl-pnl-b rich-mpnl-pnl-b"
valign="top">
+ <vcp:body>
+ <f:call name="renderChildren" />
+ </vcp:body>
+ </td>
+ </tr>
+ </table>
+ </div>
</div>
+
+ <f:clientid var="clientId"/>
+
+ <script type="text/javascript">
+ new ModalPanel('#{clientId}',
+ {
+ width: #{component.width},
+ height: #{component.height},
+
+ minWidth: #{component.minWidth},
+ minHeight: #{component.minHeight},
+
+ resizeable: #{component.resizeable},
+ moveable: #{component.moveable},
+
+ left: "#{component.left}",
+ top: "#{component.top}",
+
+ zindex: #{component.zindex}
+ });
+ </script>
</div>
-
- <f:clientid var="clientId"/>
+ </div>
- <script type="text/javascript">
- new ModalPanel('#{clientId}',
- {
- width: #{component.width},
- height: #{component.height},
-
- minWidth: #{component.minWidth},
- minHeight: #{component.minHeight},
-
- resizeable: #{component.resizeable},
- moveable: #{component.moveable},
-
- left: "#{component.left}",
- top: "#{component.top}",
-
- zindex: #{component.zindex}
- });
- </script>
- </div>
</f:root>
\ No newline at end of file