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: [email protected]
For additional commands, e-mail: [email protected]
