You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@rave.apache.org by mf...@apache.org on 2011/07/15 22:19:19 UTC
svn commit: r1147303 - in /incubator/rave/trunk/rave-portal/src/main/webapp:
WEB-INF/views/home.jsp css/default.css script/rave.js
Author: mfranklin
Date: Fri Jul 15 20:19:18 2011
New Revision: 1147303
URL: http://svn.apache.org/viewvc?rev=1147303&view=rev
Log:
Added maximize & minimize operations to resize widget wrapper divs (Fixes RAVE-53)
Modified:
incubator/rave/trunk/rave-portal/src/main/webapp/WEB-INF/views/home.jsp
incubator/rave/trunk/rave-portal/src/main/webapp/css/default.css
incubator/rave/trunk/rave-portal/src/main/webapp/script/rave.js
Modified: incubator/rave/trunk/rave-portal/src/main/webapp/WEB-INF/views/home.jsp
URL: http://svn.apache.org/viewvc/incubator/rave/trunk/rave-portal/src/main/webapp/WEB-INF/views/home.jsp?rev=1147303&r1=1147302&r2=1147303&view=diff
==============================================================================
--- incubator/rave/trunk/rave-portal/src/main/webapp/WEB-INF/views/home.jsp (original)
+++ incubator/rave/trunk/rave-portal/src/main/webapp/WEB-INF/views/home.jsp Fri Jul 15 20:19:18 2011
@@ -29,68 +29,68 @@
<c:set var="opensocial_engine_url" value="${openSocialEnv.engineProtocol}://${openSocialEnv.engineRoot}${openSocialEnv.engineGadgetPath}"/>
<rave:rave_generic_page pageTitle="Home - Rave">
-<c:set var="defaultPage" value="${pages[0]}"/>
-<div id="header">
- <div class="header-a">
- <a href="<spring:url value="/j_spring_security_logout" htmlEscape="true" />">Logout</a>
- </div>
- <div class="widget-a">
- <a href="<spring:url value="/app/store?referringPageId=${defaultPage.id}" />">Widget Store</a>
+ <c:set var="defaultPage" value="${pages[0]}"/>
+ <div id="header">
+ <div class="header-a">
+ <a href="<spring:url value="/j_spring_security_logout" htmlEscape="true" />">Logout</a>
+ </div>
+ <div class="widget-a">
+ <a href="<spring:url value="/app/store?referringPageId=${defaultPage.id}" />">Widget Store</a>
+ </div>
+ <h1>Hello ${defaultPage.owner.username}, welcome to Rave!</h1>
</div>
- <h1>Hello ${defaultPage.owner.username}, welcome to Rave!</h1>
-</div>
-
-<div id="content">
-<c:forEach var="region" items="${defaultPage.regions}">
-<div class="region" id="region-${region.id}-id" >
- <c:forEach var="regionWidget" items="${region.regionWidgets}">
- <div class="widget-wrapper" id="widget-wrapper-${regionWidget.id}">
- <div class="widget-title-bar" >
- <span id="widget-${regionWidget.id}-title">${regionWidget.widget.title}</span>
- <!-- These are toolbar buttons -->
- <div id="widget-${regionWidget.id}-toolbar" style="float:right;">
- <button id="widget-${regionWidget.id}-max"
- class="widget-toolbar-btn">
- </button>
- <button id="widget-${regionWidget.id}-remove"
- class="widget-toolbar-btn">
- </button>
+ <div id="content">
+ <c:forEach var="region" items="${defaultPage.regions}">
+ <div class="region" id="region-${region.id}-id">
+ <c:forEach var="regionWidget" items="${region.regionWidgets}">
+ <div class="widget-wrapper" id="widget-${regionWidget.id}-wrapper">
+ <div class="widget-title-bar">
+ <span id="widget-${regionWidget.id}-title">${regionWidget.widget.title}</span>
+ <!-- These are toolbar buttons -->
+ <div id="widget-${regionWidget.id}-toolbar" style="float:right;">
+ <button id="widget-${regionWidget.id}-max"
+ class="widget-toolbar-btn">
+ </button>
+ <button id="widget-${regionWidget.id}-remove"
+ class="widget-toolbar-btn">
+ </button>
+ </div>
+ </div>
+ <div class="widget" id="widget-${regionWidget.id}-body">
+ <%-- Widget will be rendered here --%>
+ </div>
+ </div>
+ </c:forEach>
</div>
- </div>
- <div class="widget" id="widget-${regionWidget.id}-body">
- <%-- Widget will be rendered here --%>
- </div>
+ </c:forEach>
+ <div class="clear-float"> </div>
</div>
- </c:forEach>
-</div>
-</c:forEach>
-<div class="clear-float"> </div>
-<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
-<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js"></script>
-<script src="${opensocial_engine_url}/js/container.js?c=1&container=default&debug=1"></script>
-<script src="<spring:url value="/script/rave.js"/>"></script>
-<script src="<spring:url value="/script/rave_api.js"/>"></script>
-<script src="<spring:url value="/script/rave_opensocial.js"/>"></script>
-<script src="<spring:url value="/script/rave_wookie.js"/>"></script>
-<script>
- //Define the global widgets variable
- //This array will be populated by RegionWidgetRender providers.
- var widgets = [];
- <%--
- Among other things, the render-widget tag will populate the widgets[] array.
- See the markup text in OpenSocialWidgetRenderer.java, for example.
- --%>
- <c:forEach var="region" items="${defaultPage.regions}">
- <c:forEach var="regionWidget" items="${region.regionWidgets}">
- <portal:render-widget regionWidget="${regionWidget}" />
- </c:forEach>
- </c:forEach>
+ <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
+ <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js"></script>
+ <script src="${opensocial_engine_url}/js/container.js?c=1&container=default&debug=1"></script>
+ <script src="<spring:url value="/script/rave.js"/>"></script>
+ <script src="<spring:url value="/script/rave_api.js"/>"></script>
+ <script src="<spring:url value="/script/rave_opensocial.js"/>"></script>
+ <script src="<spring:url value="/script/rave_wookie.js"/>"></script>
+ <script>
+ //Define the global widgets variable
+ //This array will be populated by RegionWidgetRender providers.
+ var widgets = [];
+ <%--
+ Among other things, the render-widget tag will populate the widgets[] array.
+ See the markup text in OpenSocialWidgetRenderer.java, for example.
+ --%>
+ <c:forEach var="region" items="${defaultPage.regions}">
+ <c:forEach var="regionWidget" items="${region.regionWidgets}">
+ <portal:render-widget regionWidget="${regionWidget}" />
+ </c:forEach>
+ </c:forEach>
- $(function() {
- rave.setContext("<spring:url value="/app/" />");
- rave.initProviders();
- rave.initWidgets(widgets);
- rave.initUI();
- });
-</script>
+ $(function() {
+ rave.setContext("<spring:url value="/app/" />");
+ rave.initProviders();
+ rave.initWidgets(widgets);
+ rave.initUI();
+ });
+ </script>
</rave:rave_generic_page>
Modified: incubator/rave/trunk/rave-portal/src/main/webapp/css/default.css
URL: http://svn.apache.org/viewvc/incubator/rave/trunk/rave-portal/src/main/webapp/css/default.css?rev=1147303&r1=1147302&r2=1147303&view=diff
==============================================================================
--- incubator/rave/trunk/rave-portal/src/main/webapp/css/default.css (original)
+++ incubator/rave/trunk/rave-portal/src/main/webapp/css/default.css Fri Jul 15 20:19:18 2011
@@ -168,6 +168,24 @@ h1, h2, h3, h4, h5, h6 {
box-shadow: 2px 2px 4px #666666;
border-radius: 0px 0px 5px 5px;
}
+
+.widget-wrapper-transitional {
+ position: absolute;
+ z-index: 1000;
+ left:0.25%;
+ top: 51px;
+}
+
+.widget-wrapper-canvas {
+ position: absolute;
+ z-index: 1000;
+ left:0.25%;
+ top: 51px;
+ width: 99.5%;
+ height: 100%;
+ opacity: 1;
+ vertical-align: top;
+}
.region {
float: left;
display: block;
Modified: incubator/rave/trunk/rave-portal/src/main/webapp/script/rave.js
URL: http://svn.apache.org/viewvc/incubator/rave/trunk/rave-portal/src/main/webapp/script/rave.js?rev=1147303&r1=1147302&r2=1147303&view=diff
==============================================================================
--- incubator/rave/trunk/rave-portal/src/main/webapp/script/rave.js (original)
+++ incubator/rave/trunk/rave-portal/src/main/webapp/script/rave.js Fri Jul 15 20:19:18 2011
@@ -46,7 +46,7 @@ var rave = rave || (function() {
revert: true, // smooth snap animation
cursor: 'move', // the cursor to show while dnd
handle: '.widget-title-bar', // the draggable handle
- forcePlaceholderSize: true, // size the placeholder to the size of the gadget
+ forcePlaceholderSize: true, // size the placeholder to the size of the widget
start: dragStart,
stop : dragStop
});
@@ -63,22 +63,7 @@ var rave = rave || (function() {
//to prevent the iframe from intercepting mouse events
//which kills drag performance
$(".widget").each(function(index, element) {
- // create the iframe overlay and size it to the iframe it will be covering
- var overlay = $('<div></div>');
- var jqElm = $(element);
- var styleMap = {
- position: "absolute",
- height : jqElm.height(),
- width : jqElm.width(),
- opacity : 0.7,
- background : "#FFFFFF"
- };
-
- // style it and give it the marker class
- $(overlay).css(styleMap);
- $(overlay).addClass("dnd-overlay");
- // add it to the dom before the iframe so it covers it
- jqElm.prepend(overlay[0]);
+ addOverlay($(element));
});
}
@@ -102,36 +87,57 @@ var rave = rave || (function() {
* Takes care of the UI part of the widget rendering. Depends heavily on the HTML structure
*/
function initGadgetUI() {
- $("div[id^='region-']").each(function(regionIndex) {
- var regionElement = $(this);
- var regionId = regionElement.attr("id");
- regionId = regionId.substring("region-".length, regionId.lastIndexOf('-'));
- regionElement.children("div[id^='widget-wrapper-']").each(function(wrapperIndex) {
- var widgetElement = $(this);
- var widgetId = widgetElement.attr("id").substr("widget-wrapper-".length);
- styleGadgetButtons(widgetId);
- });
+ $(".widget-wrapper").each(function(){
+ var widgetId = extractObjectIdFromElementId($(this).attr("id"));
+ styleGadgetButtons(widgetId);
});
}
function maximizeAction(args) {
- alert("Maximize button not yet implemented");
+ $("#widget-" + args.data.id + "-wrapper").removeClass("widget-wrapper").addClass("widget-wrapper-canvas");
+ addOverlay($("body"));
+ $("#widget-" + args.data.id + "-max").click({id:args.data.id}, minimizeAction);
+
+ }
+
+ function minimizeAction(args) {
+ $("#widget-" + args.data.id + "-wrapper").removeClass("widget-wrapper-canvas").addClass("widget-wrapper");
+ $(".dnd-overlay").remove();
+ $("#widget-" + args.data.id + "-max").click({id:args.data.id}, maximizeAction);
}
function deleteAction(args) {
- if (confirm("Are you sure you want to remove this gadget from your page")) {
+ if (confirm("Are you sure you want to remove this widget from your page")) {
rave.api.rpc.removeWidget({
regionWidgetId: args.data.id,
successCallback: function() {
- $("#widget-wrapper-" + args.data.id).remove();
+ $("#widget-" + args.data.id + "-wrapper").remove();
}
});
}
}
+ function addOverlay(jqElm) {
+ var overlay = $('<div></div>');
+ var styleMap = {
+ position: "absolute",
+ height : jqElm.height(),
+ width : jqElm.width(),
+ 'z-index': 10,
+ opacity : 0.7,
+ background : "#FFFFFF"
+ };
+
+ // style it and give it the marker class
+ $(overlay).css(styleMap);
+ $(overlay).addClass("dnd-overlay");
+ // add it to the dom before the iframe so it covers it
+ jqElm.prepend(overlay[0]);
+ }
+
/**
- * Applies styling to the several buttons in the widget / gadget toolbar
- * @param widgetId identifier of the widget / gadget
+ * Applies styling to the several buttons in the widget toolbar
+ * @param widgetId identifier of the region widget
*/
function styleGadgetButtons(widgetId) {
$("#widget-" + widgetId + "-max").button({
@@ -276,10 +282,10 @@ var rave = rave || (function() {
registerProvider : addProviderToList,
/**
- * Renders an error in place of the gadget
+ * Renders an error in place of the widget
*
* @param id the RegionWidgetId of the widget to render in error mode
- * @param message The message to display to the suer
+ * @param message The message to display to the user
*/
errorWidget: renderErrorWidget,