portals-jetspeed-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From woon...@apache.org
Subject svn commit: r892269 - /portals/jetspeed-2/applications/j2-admin/trunk/src/main/webapp/WEB-INF/view/toolbox/toolbox.jsp
Date Fri, 18 Dec 2009 15:06:21 GMT
Author: woonsan
Date: Fri Dec 18 15:06:19 2009
New Revision: 892269

URL: http://svn.apache.org/viewvc?rev=892269&view=rev
Log:
JS2-1057: Adding animation effect to preview window

Modified:
    portals/jetspeed-2/applications/j2-admin/trunk/src/main/webapp/WEB-INF/view/toolbox/toolbox.jsp

Modified: portals/jetspeed-2/applications/j2-admin/trunk/src/main/webapp/WEB-INF/view/toolbox/toolbox.jsp
URL: http://svn.apache.org/viewvc/portals/jetspeed-2/applications/j2-admin/trunk/src/main/webapp/WEB-INF/view/toolbox/toolbox.jsp?rev=892269&r1=892268&r2=892269&view=diff
==============================================================================
--- portals/jetspeed-2/applications/j2-admin/trunk/src/main/webapp/WEB-INF/view/toolbox/toolbox.jsp
(original)
+++ portals/jetspeed-2/applications/j2-admin/trunk/src/main/webapp/WEB-INF/view/toolbox/toolbox.jsp
Fri Dec 18 15:06:19 2009
@@ -186,14 +186,105 @@
     </tr>
 </table>
 
-<div id="<portlet:namespace/>previewPanel" style="BACKGROUND: #eee; BORDER: lightgrey
solid 1px; POSITION: absolute; Z-INDEX: 1000; VISIBILITY: hidden">
-  <div></div>
-  <div align="right"><a href="#"><fmt:message key="toolbox.label.close"/></a></div>
+<div id="<portlet:namespace/>previewOverlay" style="BACKGROUND-COLOR: #eee; BORDER-LEFT:
#fff solid 2px; BORDER-TOP: #fff solid 2px; BORDER-RIGHT: #aaa solid 2px; BORDER-BOTTOM: #aaa
solid 2px; DISPLAY: none; PADDING: 5px">
+    <div class="yui-widget-hd"><h2><fmt:message key="toolbox.label.preview"/></h2></div>
+	<div class="yui-widget-bd"></div>
+    <div class="yui-widget-ft" align="right"><a id="<portlet:namespace/>previewOverlayClose"
href="#"><fmt:message key="toolbox.label.close"/></a></div>
 </div>
 
 <script language="javascript">
-YUI().use('jetui-portal', 'io', 'json', 'node', 'cookie', function(Y) {
-
+YUI().use('jetui-portal', 'io', 'json', 'node', 'cookie', 'overlay', 'anim', 'plugin', function(Y)
{
+    
+    var previewOverlay = null;
+    
+    function AnimPlugin(config) {
+        AnimPlugin.superclass.constructor.apply(this, arguments);
+    }
+    
+    AnimPlugin.NS = "fx";
+    AnimPlugin.NAME = "animPlugin";
+    AnimPlugin.ATTRS = {
+        duration : { value: 0.1 },
+        animVisible : {
+            valueFn : function() {
+		        var host = this.get("host");
+                var boundingBox = host.get("boundingBox");
+                var anim = new Y.Anim({
+                    node: boundingBox,
+                    to: { opacity: 1 },
+                    duration: this.get("duration")
+                });
+                if (!host.get("visible")) {
+                    boundingBox.setStyle("opacity", 0);
+                }
+                anim.on("destroy", function() {
+                    if (Y.UA.ie) {
+                        this.get("node").setStyle("opacity", 1);
+                    } else {
+                        this.get("node").setStyle("opacity", "");
+                    }
+                });
+                return anim;
+            }
+        },
+        animHidden : {
+            valueFn : function() {
+                return new Y.Anim({
+                    node: this.get("host").get("boundingBox"),
+                    to: { opacity: 0 },
+                    duration: this.get("duration")
+                });
+            }
+        }
+    }
+    
+    Y.extend(AnimPlugin, Y.Plugin.Base, {
+        initializer : function(config) {
+            this._bindAnimVisible();
+            this._bindAnimHidden();
+            this.after("animVisibleChange", this._bindAnimVisible);
+            this.after("animHiddenChange", this._bindAnimHidden);
+            this.doBefore("_uiSetVisible", this._uiAnimSetVisible);
+        },
+        destructor : function() {
+            this.get("animVisible").destroy();
+            this.get("animHidden").destroy();
+        },
+        _uiAnimSetVisible : function(val) {
+            if (this.get("host").get("rendered")) {
+                if (val) {
+                    this.get("animHidden").stop();
+                    this.get("animVisible").run();
+                } else {
+                    this.get("animVisible").stop();
+                    this.get("animHidden").run();
+                }
+                return new Y.Do.Prevent("AnimPlugin prevented default show/hide");
+            }
+        },
+        _uiSetVisible : function(val) {
+            var host = this.get("host");
+            var hiddenClass = host.getClassName("hidden");
+            if (!val) {
+                host.get("boundingBox").addClass(hiddenClass);
+            } else {
+                host.get("boundingBox").removeClass(hiddenClass);
+            }
+        },
+        _bindAnimVisible : function() {
+            var animVisible = this.get("animVisible");
+            animVisible.on("start", Y.bind(function() {
+                this._uiSetVisible(true);
+            }, this));
+        },
+        _bindAnimHidden : function() {
+            var animHidden = this.get("animHidden");
+            animHidden.after("end", Y.bind(function() {
+                this._uiSetVisible(false);
+            }, this));
+        }
+    });
+    
     var pagination = {
             portlet : { uri : null, totalSize : 0, pageSize : ${portletPageSize}, beginIndex
: 0 },
 
@@ -467,37 +558,61 @@
     
     var onPreviewPortletComplete = function(id, o, args) {
         var point = args.complete;
-        var panel = Y.Node.one("#<portlet:namespace/>previewPanel");
-        var subPanels = panel.all("DIV");
-        subPanels.item(0).setContent(o.responseText);
-        var panelDOMNode = Y.Node.getDOMNode(panel);
+        var previewNode = Y.Node.getDOMNode(Y.Node.one("#<portlet:namespace/>previewOverlay"));
+        var windowWidth = window.innerWidth;
+        var windowHeight = window.innerHeight;
+        
+        if (!previewOverlay) {
+            Y.Node.getDOMNode(Y.Node.one("#<portlet:namespace/>previewOverlay")).style.display
= "";
+            previewOverlay = new Y.Overlay({
+                contentBox: "#<portlet:namespace/>previewOverlay",
+                xy: [windowWidth, windowHeight],
+                visible: false,
+                plugins : [{fn:AnimPlugin, cfg:{duration:0.5}}]
+            });
+        }
+        
+        var previewPortletWindow = Y.Node.create(
+                "<div class='portlet'>" +
+                "<div class='PTitle'><div class='PTitleContent'></div></div>"
+ 
+                "<div class='PContentBorder'><div class='PContent'></div></div>"
+
+                "</div>"
+                );
+        previewPortletWindow.one(".PTitleContent").setContent("PickANumber");
+        previewPortletWindow.one(".PContent").setContent(o.responseText);
+        previewOverlay.set("bodyContent", previewPortletWindow);
+        previewOverlay.render();
 
-        var panelWidth = Math.max(panelDOMNode.offsetWidth, 200);
-        var panelHeight = Math.max(panelDOMNode.offsetHeight, 150);
         var windowWidth = window.innerWidth;
         var windowHeight = window.innerHeight;
-        if (point[0] > windowWidth - panelWidth) point[0] = windowWidth - panelWidth;
-        if (point[1] > windowHeight - panelHeight) point[1] = windowHeight - panelHeight;
+        var offsetWidth = Math.max(200, previewNode.offsetWidth);
+        var offsetHeight = Math.max(150, previewNode.offsetHeight);
+        point[0] += 10;
+        point[1] -= 10;
+        if (point[0] > windowWidth - offsetWidth) point[0] = windowWidth - offsetWidth;
+        if (point[1] > windowHeight - offsetHeight) point[1] = windowHeight - offsetHeight;
         
-        panel.setXY(point);
-        panelDOMNode.style.visibility = "visible";
+        previewOverlay.move(point[0], point[1]);
+        previewOverlay.show();
     };
     
     var previewPortlet = function(e) {
         var a = Y.Node.getDOMNode(e.target);
         var portletUniqueName = a.getAttribute("portletUniqueName");
         if (portletUniqueName) {
+            if (previewOverlay) {
+                previewOverlay.hide();
+            }
+            var point = [ e.pageX, e.pageY ];
             var uri = "${portalContextPath}/portlet/?mode=preview&portlet=" + portletUniqueName
+ "&entity=" + portletUniqueName;
-            var request = Y.io(uri, { on: { complete: onPreviewPortletComplete }, arguments:
{ complete: [ e.pageX, e.pageY ] } });
+            var request = Y.io(uri, { on: { complete: onPreviewPortletComplete }, arguments:
{ complete: point } });
         }
         
         e.halt();
     };
 
-    var closePreviewPanel = function(e) {
-        var panel = Y.Node.one("#<portlet:namespace/>previewPanel");
-        Y.Node.getDOMNode(panel).style.visibility = "hidden";
-        
+    var closePreviewOverlay = function(e) {
+        previewOverlay.hide();
         e.halt();
     };
     
@@ -522,6 +637,6 @@
     
     switchTab(tabId);
 
-    Y.Node.one("#<portlet:namespace/>previewPanel").one("A").on("click", closePreviewPanel);
+    Y.Node.one("#<portlet:namespace/>previewOverlayClose").on("click", closePreviewOverlay);
 });
 </script>
\ No newline at end of file



---------------------------------------------------------------------
To unsubscribe, e-mail: jetspeed-dev-unsubscribe@portals.apache.org
For additional commands, e-mail: jetspeed-dev-help@portals.apache.org


Mime
View raw message