Author: woonsan
Date: Fri Mar 5 16:53:37 2010
New Revision: 919489
URL: http://svn.apache.org/viewvc?rev=919489&view=rev
Log:
JS2-1057: Simplifying the popup menu for page management in the page navigator.
To-do: Add page management jax-rs service and use it in page navigator.
Modified:
portals/jetspeed-2/applications/j2-admin/trunk/src/main/webapp/WEB-INF/view/spaces/page-navigator.jsp
Modified:
portals/jetspeed-2/applications/j2-admin/trunk/src/main/webapp/WEB-INF/view/spaces/page-navigator.jsp
URL:
http://svn.apache.org/viewvc/portals/jetspeed-2/applications/j2-admin/trunk/src/main/webapp/WEB-INF/view/spaces/page-navigator.jsp?rev=919489&r1=919488&r2=919489&view=diff
==============================================================================
---
portals/jetspeed-2/applications/j2-admin/trunk/src/main/webapp/WEB-INF/view/spaces/page-navigator.jsp
(original)
+++
portals/jetspeed-2/applications/j2-admin/trunk/src/main/webapp/WEB-INF/view/spaces/page-navigator.jsp
Fri Mar 5 16:53:37 2010
@@ -56,11 +56,9 @@
String title = folderMenu.getTitle(renderRequest.getLocale());
String path = folderMenu.getUrl();
String url = folderMenu.getUrl();
- // FIXME: how can we decide this menu element is editable or not?
- boolean editable = (renderRequest.getUserPrincipal() != null &&
"admin".equals(renderRequest.getUserPrincipal().getName()));
+ boolean editable = element.isEditable();
out.write("<li editable='" + editable + "' path='" + path + "'
class='expanded'>");
out.write("<a href='#'>" + title + "</a>");
- out.write("<a class='dropdown'></a>");
out.write("\n");
List<MenuElement> childElements = (List<MenuElement>)
folderMenu.getElements();
@@ -87,11 +85,11 @@
String url = option.getUrl();
String path = option.getUrl();
String title = option.getTitle(renderRequest.getLocale());
- // FIXME: how can we decide this menu element is editable or not?
- boolean editable = (renderRequest.getUserPrincipal() != null &&
"admin".equals(renderRequest.getUserPrincipal().getName()));
+ boolean editable = element.isEditable();
out.write("<li editable='" + editable + "' path='" + path +"'>");
+ out.write("<div>");
out.write("<a href='" + pageNavigator.getAbsoluteUrl(url,
renderResponse, rc) + "'>" + title + "</a>");
- out.write("<a class='dropdown'></a>");
+ out.write("</div>");
out.write("</li>");
out.write("\n");
}
@@ -175,112 +173,35 @@
</form>
-<div id="<portlet:namespace/>nodeEditorOverlay" 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: 10px">
- <div class="yui-widget-hd">
- <table border="0" width="100%" cellpadding="0" cellspacing="0">
- <tr>
- <td><h2><fmt:message
key="spaces.pages.label.siteNodeEditor"/></h2></td>
- <td align="right"><a id="<portlet:namespace/>nodeEditorOverlayClose"
href="#"><img border="0" alt="<fmt:message key='spaces.pages.label.close'/>"
src="<%=contextPath%>/decorations/images/close.gif"/></a></td>
- </tr>
- </table>
- </div>
- <div class="yui-widget-bd"></div>
- <div class="yui-widget-ft" align="center"><a
id="<portlet:namespace/>nodeEditorOverlayCloseButton" href="#"><fmt:message
key="spaces.pages.label.close"/></a></div>
-</div>
+<span class="yui-skin-sam">
+ <span id="<portlet:namespace/>nodePopupMenu" class="yui-menu
yui-menu-horizontal yui-splitbuttonnav yui-skin-sam"
+ style="position: absolute; left: 10px; top: 10px; display: none">
+ <span class="yui-menu-content" style="border: none">
+ <ul>
+ <li>
+ <span class="yui-menu-label" style="width: 14px">
+ <a href="#"></a>
+ <a href="#<portlet:namespace/>menuOptions"
class="yui-menu-toggle">-</a>
+ </span>
+ <div id="<portlet:namespace/>menuOptions" class="yui-menu">
+ <div class="yui-menu-content">
+ <ul>
+ <li class="yui-menuitem"><a
id="<portlet:namespace/>nodePopupMenu_rename" class="yui-menuitem-content"
href="#">Rename</a></li>
+ <li class="yui-menuitem"><a
id="<portlet:namespace/>nodePopupMenu_delete" class="yui-menuitem-content"
href="#">Delete</a></li>
+ <li class="yui-menuitem"><a
id="<portlet:namespace/>nodePopupMenu_move" class="yui-menuitem-content"
href="#">Move</a></li>
+ <li class="yui-menuitem"><a
id="<portlet:namespace/>nodePopupMenu_copy" class="yui-menuitem-content"
href="#">Copy</a></li>
+ </ul>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </span>
+ </span>
+</span>
<script language="javascript">
-YUI().use('jetui-portal', 'io', 'json', 'node', 'cookie', 'overlay', 'anim',
'plugin', 'event-mouseenter', function(Y) {
+YUI().use('jetui-portal', 'io', 'json', 'node', 'plugin', 'event-mouseenter',
'node-menunav', function(Y) {
- var nodeEditorOverlay = 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 onMenuItemClick = function(e) {
var a = e.target;
var menuitem = a.get("parentNode");
@@ -300,92 +221,72 @@
}
};
- var onMenuItemDropDownClick = function(e) {
- var a = e.target;
- var menuitem = a.get("parentNode");
- var point = [ e.pageX, e.pageY ];
- var nodeEditorNode =
Y.Node.getDOMNode(Y.Node.one("#<portlet:namespace/>nodeEditorOverlay"));
- var windowWidth = window.innerWidth;
- var windowHeight = window.innerHeight;
-
- if (!nodeEditorOverlay) {
-
Y.Node.getDOMNode(Y.Node.one("#<portlet:namespace/>nodeEditorOverlay")).style.display
= "";
- nodeEditorOverlay = new Y.Overlay({
- contentBox: "#<portlet:namespace/>nodeEditorOverlay",
- xy: [windowWidth, windowHeight],
- visible: false,
- plugins : [{fn:AnimPlugin, cfg:{duration:0.1}}]
- });
- }
-
- var inheritDecoName = "<%=theme.getPageLayoutDecoration().getName()%>";
- var nodeType = "page";
- var nodePath = menuitem.getAttribute("path");
- var src =
"<%=basePath%>/system/sitemanager/nodeeditor.psml?_inheritdeco=" +
inheritDecoName + "&_jssmnodetype=" + nodeType + "&_jssmnodepath=" + nodePath;
- var offsetWidth = 700;
- var offsetHeight = 500;
- var nodwViewWindow = Y.Node.create("<iframe width='" + offsetWidth +
"' height='" + offsetHeight + "' frameborder='0' scrolling='auto'
align='bottom' marginwidth='0' marginheight='0' src='" + src + "'></iframe>");
-
- nodeEditorOverlay.set("bodyContent", nodwViewWindow);
- nodeEditorOverlay.set("zIndex", 16777271);
- var portal = (JETUI_YUI ? JETUI_YUI.getPortalInstance() : null);
- if (portal) {
- portal.setScreenMask(true);
- }
- nodeEditorOverlay.render();
-
- point[0] = (windowWidth - offsetWidth) / 2;
- point[1] = (windowHeight - offsetHeight) / 2;
-
- nodeEditorOverlay.move(point[0], point[1]);
- nodeEditorOverlay.show();
- };
+ var nodePopupMenu = null;
+ var curNodeListItem = null;
var onMenuItemMouseEnter = function(e) {
+ if (nodePopupMenu == null) {
+ nodePopupMenu = Y.Node.one("#<portlet:namespace/>nodePopupMenu");
+ }
var li = e.target;
if ("true" == li.getAttribute("editable")) {
- var dropDown = li.one(".dropdown");
- if (dropDown) {
- dropDown.removeClass("dropdown");
- dropDown.addClass("dropdownActive");
- dropDown.on("click", onMenuItemDropDownClick);
- }
+ var liElem = Y.Node.getDOMNode(li);
+ var xy = li.getXY();
+ nodePopupMenu.setStyle("display", "block");
+ nodePopupMenu.setStyle("left", "" + (xy[0] + liElem.offsetWidth
- 12) + "px");
+ nodePopupMenu.setStyle("top", "" + xy[1] + "px");
+ curNodeListItem = li;
}
e.halt();
};
- var onMenuItemMouseLeave = function(e) {
- var li = e.target;
- var dropDown = li.one(".dropdownActive");
- if (dropDown) {
- dropDown.removeClass("dropdownActive");
- dropDown.addClass("dropdown");
+ var onRenameClick = function(e) {
+ if (!curNodeListItem) {
+ return;
+ }
+ var currentTitle = curNodeListItem.one("A").get("text");
+ var title = prompt("Please enter the title.", currentTitle);
+ if (title) {
+ curNodeListItem.one("A").set("text", title);
}
e.halt();
};
-
- var closeNodeEditorOverlay = function(e) {
- nodeEditorOverlay.hide();
- var portal = (JETUI_YUI ? JETUI_YUI.getPortalInstance() : null);
- if (portal) {
- portal.setScreenMask(false);
+
+ var onDeleteClick = function(e) {
+ if (!curNodeListItem) {
+ return;
+ }
+ var cf = confirm("Are you sure to delete this item?");
+ if (cf) {
+ }
+ e.halt();
+ };
+
+ var onMoveClick = function(e) {
+ if (!curNodeListItem) {
+ return;
+ }
+ e.halt();
+ };
+
+ var onCopyClick = function(e) {
+ if (!curNodeListItem) {
+ return;
}
e.halt();
- window.location.reload();
};
var pageNavMenu = Y.Node.one("#<portlet:namespace/>pageNavMenu");
pageNavMenu.all("A").each(function(v, k) {
v.on("click", onMenuItemClick);
});
-
+
<c:if test="${pageEditable}">
pageNavMenu.all("LI").each(function(v, k) {
v.on("mouseenter", onMenuItemMouseEnter);
- v.on("mouseleave", onMenuItemMouseLeave);
});
</c:if>
-
+
var portalPagePath = "<%=portalPagePath%>";
var curMenuItem = null;
pageNavMenu.all("LI").each(function(v, k) {
@@ -394,8 +295,14 @@
v.addClass("active");
}
});
+
+ var nodePopupMenu = Y.one("#<portlet:namespace/>nodePopupMenu");
+ nodePopupMenu.plug(Y.Plugin.NodeMenuNav, { autoSubmenuDisplay: false,
mouseOutHideDelay: 0 });
- Y.Node.one("#<portlet:namespace/>nodeEditorOverlayClose").on("click",
closeNodeEditorOverlay);
-
Y.Node.one("#<portlet:namespace/>nodeEditorOverlayCloseButton").on("click",
closeNodeEditorOverlay);
+ Y.Node.one("#<portlet:namespace/>nodePopupMenu_rename").on("click",
onRenameClick);
+ Y.Node.one("#<portlet:namespace/>nodePopupMenu_delete").on("click",
onDeleteClick);
+ Y.Node.one("#<portlet:namespace/>nodePopupMenu_move").on("click",
onMoveClick);
+ Y.Node.one("#<portlet:namespace/>nodePopupMenu_copy").on("click",
onCopyClick);
+
});
</script>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
