[ICE-2368] PanelPopup autoCentre and autoPosition attributes - ICEsoft JIRA Issue Tracker

Details

Type: New Feature
Status: Closed
Priority: Major
Resolution: Fixed
Affects Version/s: 1.7DR#2
Fix Version/s: 1.7Beta1
Component/s: ICE-Components
Labels:
None
Environment:
n/a

Assignee Priority:
P2
Affects:

Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

Description

autoCentre:
This new attribute would have the effect of maintaining the popup in the centre of the screen whether the user resized the browser or scrolled the document.

autoPosition:
This attribute, declaring an x & y value for the placement of the popup in px, would have the effect of maintaining the position through scroll events

Options
- Sort By Name
- Sort By Date
- Ascending
- Descending
- Download All

Attachments

Hide
Test_AutoPositionAndAutoCentre.war

22/Nov/07 4:28 PM

5.51 MB

Philip Breau
META-INF/MANIFEST.MF 0.0 kB

centre.js 0.1 kB

WEB-INF/lib/xercesImpl.jar 1.15 MB

WEB-INF/lib/icefaces-comps.jar 1.47 MB

WEB-INF/lib/commons-collections.jar 558 kB

WEB-INF/lib/backport-util-concurrent.jar 343 kB

WEB-INF/lib/commons-beanutils.jar 184 kB

WEB-INF/lib/commons-logging.jar 52 kB

WEB-INF/lib/el-api.jar 24 kB

WEB-INF/lib/jstl.jar 17 kB

main.jspx 2 kB

WEB-INF/.../krysalis-jCharts-1.0.0-alpha-1.jar 151 kB

WEB-INF/web.xml 3 kB

WEB-INF/lib/xml-apis.jar 190 kB

WEB-INF/lib/icefaces.jar 718 kB

WEB-INF/lib/commons-digester.jar 107 kB

WEB-INF/lib/jsf-api.jar 356 kB

WEB-INF/lib/jsf-impl.jar 778 kB

WEB-INF/lib/commons-fileupload.jar 52 kB

WEB-INF/classes/Bean.java 2 kB

WEB-INF/faces-config.xml 0.5 kB

WEB-INF/classes/Bean.class 2 kB

Download Zip
Show

Test_AutoPositionAndAutoCentre.war

22/Nov/07 4:28 PM

5.51 MB

Philip Breau

Issue Links

is duplicated by

ICE-2592 Always visible component/panel

Closed

Activity

Ascending order - Click to sort in descending order

Hide

Permalink

Philip Breau added a comment - 22/Nov/07 4:25 PM

suggested impl:

Index: D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopup.java
===================================================================
— D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopup.java (revision 15197)
+++ D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopup.java (working copy)
@@ -100,8 +100,40 @@

The current modal state.
*/
private Boolean modal = null;
+ /**
+ * The current autoCentre state.
+ */
+ private Boolean autoCentre = null;

/**
+ public boolean isAutoCentre()
Unknown macro: {+ if (autoCentre != null) { + return autoCentre.booleanValue(); + }+ ValueBinding vb = getValueBinding("autoCentre");+ Boolean boolVal =+ vb != null ? (Boolean) vb.getValue(getFacesContext()) }

+
+ public void setAutoCentre(boolean autoCentre)
{ + this.autoCentre = Boolean.valueOf(autoCentre); + }
+
+ private String autoPosition = null;
+
+ public String getAutoPosition()

Unknown macro: {+ if (autoPosition != null) { + return autoPosition; + }+ ValueBinding vb = getValueBinding("autoPosition");+ return vb != null ? (String) vb.getValue(getFacesContext()) }

+
+ public void setAutoPosition(String val)
{ + this.autoPosition = val; + }
+
+ /**

Creates an instance and sets renderer type to "com.icesoft.faces.PanelPopup".
*/
public PanelPopup() { Index: D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java =================================================================== --- D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java (revision 15197) +++ D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java (working copy) @@ -223,6 +223,32 @@ String call = addJavascriptCalls(uiComponent, "DRAG", handleId, facesContext); JavascriptContext.addJavascriptCall(facesContext, call); }
+
+ //autoPosition handling
+ String autoPositionJS = null;
+ if( panelPopup.getAutoPosition() != null )
{ + String positions = panelPopup.getAutoPosition(); + String x = positions.substring(0,positions.indexOf(',')); + String y = positions.substring(positions.indexOf(',')+1); + autoPositionJS = "Ice.autoPosition.start('" + clientId + "'," + x + "," + y +");"; + }
+ else
{ + autoPositionJS = "Ice.autoPosition.stop('" + clientId + "');"; + }
+ JavascriptContext.addJavascriptCall(facesContext, autoPositionJS);
+
+ //autoCentre handling
+ boolean autoCentre = panelPopup.isAutoCentre();
+ String centreJS;
+ if( autoCentre )
{ + centreJS = "Ice.autoCentre.start('" + clientId + "');"; + + }
+ else
{ + centreJS = "Ice.autoCentre.stop('" + clientId + "');"; + }
+ JavascriptContext.addJavascriptCall(facesContext, centreJS);
+
}

private String modalJavascript(Boolean modal, Boolean visible,
@@ -230,7 +256,8 @@
String call = null;
if (modal != null) {
if (modal.booleanValue() && visible.booleanValue()) {

call = "Ice.modal.start('" + clientId + "');";
+ call = "Ice.modal.start('" + clientId + "');";
+
if (log.isTraceEnabled()) { log.trace("Starting Modal Function"); }

Index: D:/Documents and Settings/pbreau/workspace/ICEfaces/component-metadata/src/main/resources/conf/ice_cust_properties/cust-panelpopup-props.xml
===================================================================
— D:/Documents and Settings/pbreau/workspace/ICEfaces/component-metadata/src/main/resources/conf/ice_cust_properties/cust-panelpopup-props.xml (revision 15197)
+++ D:/Documents and Settings/pbreau/workspace/ICEfaces/component-metadata/src/main/resources/conf/ice_cust_properties/cust-panelpopup-props.xml (working copy)
@@ -111,4 +111,24 @@
<property-extension>
<category>ICE_LAYOUT</category>
</property-extension>
+</property>
+<property>
+ <description>Used to keep the popup centred on the screen through
+ scrolling and window resizing events.
+ </description>
+ <property-name>autoCentre</property-name>
+ <property-class>boolean</property-class>
+ <property-extension>
+ <category>ICE_LAYOUT</category>
+ </property-extension>
+</property>
+<property>
+ <description>Used to keep the popup positioned on the screen through
+ scrolling events. Use a string of x and y px values (e.g. autoPostion="35,200").
+ </description>
+ <property-name>autoPosition</property-name>
+ <property-class>java.lang.String</property-class>
+ <property-extension>
+ <category>ICE_LAYOUT</category>
+ </property-extension>
</property>
\ No newline at end of file

Index: D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/lib/extras/style.js
===================================================================
— D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/lib/extras/style.js (revision 15197)
+++ D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/lib/extras/style.js (working copy)
@@ -139,9 +139,11 @@
}

var modal = document.getElementById(target);
-
+
+
modal.style.zIndex = parseInt(iframe.style.zIndex) + 1;
Ice.modal.target = modal;
+
Ice.modal.id = target;
Ice.modal.running = true;
modal.style.visibility = 'visible';
@@ -155,6 +157,7 @@
logger.debug('removed modal iframe for : ' + target);
}
Ice.modal.running = false;
+
}
},
keypress:function(event)

{ @@ -200,3 +203,73 @@ }

;

+Ice.autoCentre = Class.create();
+Ice.autoCentre = {
+ id:null,
+ keepCentred:function(){
+ var scrollX = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
+ var scrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+ var div = document.getElementById(Ice.autoCentre.id);
+ if( div ){
+ var x = Math.round( (Element.getWidth(document.body) - Element.getWidth(div)) / 2 + scrollX );
+ if( x < 0 ) x = 0;
+ var y = Math.round( ((window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - Element.getHeight(div)) / 2 + scrollY );
+ if( y < 0 ) y = 0;
+ x = x + "px"; y = y + "px";
+ Element.setStyle(div,

{position:'absolute'}

);
+ Element.setStyle(div,

{left: x}

);
+ Element.setStyle(div,

{top:y}

);
+ }
+
+
+ },
+ start:function(target)

{ + Ice.autoCentre.id = target; + Ice.autoCentre.keepCentred(); + Event.observe(window, 'resize', Ice.autoCentre.keepCentred); + Event.observe(window, 'scroll', Ice.autoCentre.keepCentred); + }

,
+ stop:function(target) {
+ if (Ice.autoCentre.id == target)

{ + Event.stopObserving(window, 'resize', Ice.autoCentre.keepCentred); + Event.stopObserving(window, 'scroll', Ice.autoCentre.keepCentred); + }

+ }
+};
+
+
+Ice.autoPosition = Class.create();
+Ice.autoPosition = {
+ id:null,
+ xPos:null,
+ yPos:null,
+ keepPositioned:function(){
+ var scrollX = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
+ var scrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+ var div = document.getElementById(Ice.autoPosition.id);
+ if( div ){
+ var x = Math.round( Ice.autoPosition.xPos + scrollX ) + "px";
+ var y = Math.round( Ice.autoPosition.yPos + scrollY ) + "px";
+ Element.setStyle(div,

{position:'absolute'}

);
+ Element.setStyle(div,

{left: x}

);
+ Element.setStyle(div,

{top:y}

);
+ }
+
+
+ },
+ start:function(target,x,y)

{ + Ice.autoPosition.id = target; + Ice.autoPosition.xPos = x; + Ice.autoPosition.yPos = y; + Ice.autoPosition.keepPositioned(); + Event.observe(window, 'scroll', Ice.autoPosition.keepPositioned); + }

,
+ stop:function(target) {
+ if (Ice.autoPosition.id == target)

{ + Event.stopObserving(window, 'scroll', Ice.autoPosition.keepPositioned); + }

+ }
+};
+
+
+

Show

Philip Breau added a comment - 22/Nov/07 4:25 PM suggested impl: Index: D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopup.java =================================================================== — D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopup.java (revision 15197) +++ D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopup.java (working copy) @@ -100,8 +100,40 @@ The current modal state. */ private Boolean modal = null; + /** + * The current autoCentre state. + */ + private Boolean autoCentre = null; /** + public boolean isAutoCentre() Unknown macro: {+ if (autoCentre != null) { + return autoCentre.booleanValue(); + }+ ValueBinding vb = getValueBinding("autoCentre");+ Boolean boolVal =+ vb != null ? (Boolean) vb.getValue(getFacesContext()) } + + public void setAutoCentre(boolean autoCentre) { + this.autoCentre = Boolean.valueOf(autoCentre); + } + + private String autoPosition = null; + + public String getAutoPosition() Unknown macro: {+ if (autoPosition != null) { + return autoPosition; + }+ ValueBinding vb = getValueBinding("autoPosition");+ return vb != null ? (String) vb.getValue(getFacesContext()) } + + public void setAutoPosition(String val) { + this.autoPosition = val; + } + + /** Creates an instance and sets renderer type to "com.icesoft.faces.PanelPopup". */ public PanelPopup() { Index: D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java =================================================================== --- D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java (revision 15197) +++ D:/Documents and Settings/pbreau/workspace/ICEfaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java (working copy) @@ -223,6 +223,32 @@ String call = addJavascriptCalls(uiComponent, "DRAG", handleId, facesContext); JavascriptContext.addJavascriptCall(facesContext, call); } + + //autoPosition handling + String autoPositionJS = null; + if( panelPopup.getAutoPosition() != null ) { + String positions = panelPopup.getAutoPosition(); + String x = positions.substring(0,positions.indexOf(',')); + String y = positions.substring(positions.indexOf(',')+1); + autoPositionJS = "Ice.autoPosition.start('" + clientId + "'," + x + "," + y +");"; + } + else { + autoPositionJS = "Ice.autoPosition.stop('" + clientId + "');"; + } + JavascriptContext.addJavascriptCall(facesContext, autoPositionJS); + + //autoCentre handling + boolean autoCentre = panelPopup.isAutoCentre(); + String centreJS; + if( autoCentre ) { + centreJS = "Ice.autoCentre.start('" + clientId + "');"; + + } + else { + centreJS = "Ice.autoCentre.stop('" + clientId + "');"; + } + JavascriptContext.addJavascriptCall(facesContext, centreJS); + } private String modalJavascript(Boolean modal, Boolean visible, @@ -230,7 +256,8 @@ String call = null; if (modal != null) { if (modal.booleanValue() && visible.booleanValue()) { call = "Ice.modal.start('" + clientId + "');"; + call = "Ice.modal.start('" + clientId + "');"; + if (log.isTraceEnabled()) { log.trace("Starting Modal Function"); } Index: D:/Documents and Settings/pbreau/workspace/ICEfaces/component-metadata/src/main/resources/conf/ice_cust_properties/cust-panelpopup-props.xml =================================================================== — D:/Documents and Settings/pbreau/workspace/ICEfaces/component-metadata/src/main/resources/conf/ice_cust_properties/cust-panelpopup-props.xml (revision 15197) +++ D:/Documents and Settings/pbreau/workspace/ICEfaces/component-metadata/src/main/resources/conf/ice_cust_properties/cust-panelpopup-props.xml (working copy) @@ -111,4 +111,24 @@ <property-extension> <category>ICE_LAYOUT</category> </property-extension> +</property> +<property> + <description>Used to keep the popup centred on the screen through + scrolling and window resizing events. + </description> + <property-name>autoCentre</property-name> + <property-class>boolean</property-class> + <property-extension> + <category>ICE_LAYOUT</category> + </property-extension> +</property> +<property> + <description>Used to keep the popup positioned on the screen through + scrolling events. Use a string of x and y px values (e.g. autoPostion="35,200"). + </description> + <property-name>autoPosition</property-name> + <property-class>java.lang.String</property-class> + <property-extension> + <category>ICE_LAYOUT</category> + </property-extension> </property> \ No newline at end of file Index: D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/lib/extras/style.js =================================================================== — D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/lib/extras/style.js (revision 15197) +++ D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/lib/extras/style.js (working copy) @@ -139,9 +139,11 @@ } var modal = document.getElementById(target); - + + modal.style.zIndex = parseInt(iframe.style.zIndex) + 1; Ice.modal.target = modal; + Ice.modal.id = target; Ice.modal.running = true; modal.style.visibility = 'visible'; @@ -155,6 +157,7 @@ logger.debug('removed modal iframe for : ' + target); } Ice.modal.running = false; + } }, keypress:function(event) { @@ -200,3 +203,73 @@ } ; +Ice.autoCentre = Class.create(); +Ice.autoCentre = { + id:null, + keepCentred:function(){ + var scrollX = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft; + var scrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; + var div = document.getElementById(Ice.autoCentre.id); + if( div ){ + var x = Math.round( (Element.getWidth(document.body) - Element.getWidth(div)) / 2 + scrollX ); + if( x < 0 ) x = 0; + var y = Math.round( ((window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - Element.getHeight(div)) / 2 + scrollY ); + if( y < 0 ) y = 0; + x = x + "px"; y = y + "px"; + Element.setStyle(div, {position:'absolute'} ); + Element.setStyle(div, {left: x} ); + Element.setStyle(div, {top:y} ); + } + + + }, + start:function(target) { + Ice.autoCentre.id = target; + Ice.autoCentre.keepCentred(); + Event.observe(window, 'resize', Ice.autoCentre.keepCentred); + Event.observe(window, 'scroll', Ice.autoCentre.keepCentred); + } , + stop:function(target) { + if (Ice.autoCentre.id == target) { + Event.stopObserving(window, 'resize', Ice.autoCentre.keepCentred); + Event.stopObserving(window, 'scroll', Ice.autoCentre.keepCentred); + } + } +}; + + +Ice.autoPosition = Class.create(); +Ice.autoPosition = { + id:null, + xPos:null, + yPos:null, + keepPositioned:function(){ + var scrollX = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft; + var scrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; + var div = document.getElementById(Ice.autoPosition.id); + if( div ){ + var x = Math.round( Ice.autoPosition.xPos + scrollX ) + "px"; + var y = Math.round( Ice.autoPosition.yPos + scrollY ) + "px"; + Element.setStyle(div, {position:'absolute'} ); + Element.setStyle(div, {left: x} ); + Element.setStyle(div, {top:y} ); + } + + + }, + start:function(target,x,y) { + Ice.autoPosition.id = target; + Ice.autoPosition.xPos = x; + Ice.autoPosition.yPos = y; + Ice.autoPosition.keepPositioned(); + Event.observe(window, 'scroll', Ice.autoPosition.keepPositioned); + } , + stop:function(target) { + if (Ice.autoPosition.id == target) { + Event.stopObserving(window, 'scroll', Ice.autoPosition.keepPositioned); + } + } +}; + + +

6 older comments

Hide

Permalink

Adnan Durrani added a comment - 11/Jan/08 6:20 PM

That was the only place. Thanks,

Show

Adnan Durrani added a comment - 11/Jan/08 6:20 PM That was the only place. Thanks,

Hide

Permalink

Ken Fyten added a comment - 15/Jan/08 12:57 PM

Need to add switches to turn on autoposition and autocenter in Comp. Showcase demo for panelPopup.

Show

Ken Fyten added a comment - 15/Jan/08 12:57 PM Need to add switches to turn on autoposition and autocenter in Comp. Showcase demo for panelPopup.

Hide

Permalink

Philip Breau added a comment - 31/Jan/08 12:11 PM

Component Showcase example added in svn rev #15688

Show

Philip Breau added a comment - 31/Jan/08 12:11 PM Component Showcase example added in svn rev #15688

Hide

Permalink

Ken Fyten added a comment - 05/Feb/08 3:55 PM

The autocentre and autoposition attributes are displaying the panelPopup and then moving them, which doesn't provide the best user experience. They should be changed to position the panelPopup and then make it visible.

Show

Ken Fyten added a comment - 05/Feb/08 3:55 PM The autocentre and autoposition attributes are displaying the panelPopup and then moving them, which doesn't provide the best user experience. They should be changed to position the panelPopup and then make it visible.

Hide

Permalink

Mircea Toma added a comment - 06/Feb/08 6:51 PM

Keep popup panel invisible while calculating its postion.

Show

Mircea Toma added a comment - 06/Feb/08 6:51 PM Keep popup panel invisible while calculating its postion.

People

Assignee:

Mircea Toma

Reporter:

Philip Breau

Votes:

1 Vote for this issue

Watchers:

2 Start watching this issue

Dates

Created:

13/Nov/07 5:54 PM

Updated:

06/Feb/08 6:51 PM

Resolved:

06/Feb/08 6:51 PM