rave-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlu...@apache.org
Subject svn commit: r1161213 - in /incubator/rave/trunk/rave-portal/src/main/webapp: WEB-INF/views/home.jsp css/default.css script/rave_layout.js
Date Wed, 24 Aug 2011 17:43:15 GMT
Author: carlucci
Date: Wed Aug 24 17:43:15 2011
New Revision: 1161213

URL: http://svn.apache.org/viewvc?rev=1161213&view=rev
Log:
RAVE-212: implement page popup menu.  This is a sub task of RAVE-163: Page Management (CRUD)

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_layout.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=1161213&r1=1161212&r2=1161213&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 Wed Aug 24 17:43:15
2011
@@ -56,13 +56,32 @@
                 </select>
             </fieldset>
         </form>
-    </div>
+    </div>    
+    <input id="currentPageId" type="hidden" value="${page.id}" />
     <button id="add_page">Add Page</button>
     <%-- render the page tabs --%>
     <div id="tabs" class="rave-ui-tabs">
         <c:forEach var="userPage" items="${pages}">
-             <div id="tab-${userPage.id}" class="rave-ui-tab<c:if test="${page.id ==
userPage.id}"> rave-ui-tab-selected</c:if>" onclick="rave.viewPage(${userPage.id});">
-                <span id="pageTitle-${userPage.id}" class="pageTitle"><c:out value="${userPage.name}"/></span><c:if
test="${page.id == userPage.id}"><span class="ui-icon ui-icon-close">Remove Tab</span></c:if>
+             <%-- determine if the current page in the list matches the page the user
is viewing --%>
+             <c:set var="isCurrentPage">
+                 <c:choose>
+                     <c:when test="${page.id == userPage.id}">true</c:when>
+                     <c:otherwise>false</c:otherwise>
+                 </c:choose>
+             </c:set>                 
+            
+             <div id="tab-${userPage.id}" class="rave-ui-tab<c:if test="${isCurrentPage}">
rave-ui-tab-selected</c:if>" onclick="rave.viewPage(${userPage.id});">
+                <span id="pageTitle-${userPage.id}" class="pageTitle"><c:out value="${userPage.name}"/></span>
+                <c:if test="${isCurrentPage}">                   
+                    <div id="pageMenuWrapper">
+                        <span id="pageMenuButton" class="ui-icon ui-icon-circle-triangle-s"></span>
+                        <div id="pageMenu" class="page-menu">
+                            <div id="pageMenuEdit" class="page-menu-item">Edit Page</div>
+                            <div id="pageMenuDelete" class="page-menu-item">Delete
Page</div>
+                            <div id="pageMenuMove" class="page-menu-item">Move Page</div>
+                        </div>
+                    </div>
+                </c:if>
             </div>
         </c:forEach>        
     </div>   

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=1161213&r1=1161212&r2=1161213&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 Wed Aug 24 17:43:15 2011
@@ -524,3 +524,26 @@ span.error, label.error {
 #dialog input { width: 95%; }
 #dialog textarea { width: 95%; }
 #add_page { cursor: pointer; }
+
+/* page menu related styles */
+#pageMenuWrapper {
+    position: relative;   
+    display: inline-block;
+    vertical-align: middle;
+}
+.page-menu {
+    border: 1px solid black; 
+    position: absolute; 
+    display: none; 
+    left: 18px; 
+    top: 0px;
+    width: 80px;   
+    background-color: #FFFFFF;
+    z-index: 1000;
+}
+.page-menu-item {
+    padding: 3px;
+}
+.page-menu-item:hover {
+    background-color: #B4C4CF;
+}
\ No newline at end of file

Modified: incubator/rave/trunk/rave-portal/src/main/webapp/script/rave_layout.js
URL: http://svn.apache.org/viewvc/incubator/rave/trunk/rave-portal/src/main/webapp/script/rave_layout.js?rev=1161213&r1=1161212&r2=1161213&view=diff
==============================================================================
--- incubator/rave/trunk/rave-portal/src/main/webapp/script/rave_layout.js (original)
+++ incubator/rave/trunk/rave-portal/src/main/webapp/script/rave_layout.js Wed Aug 24 17:43:15
2011
@@ -20,8 +20,7 @@
 var rave = rave || {};
 rave.layout = rave.layout || (function() {
     var $tab_title_input = $("#tab_title"),
-        $page_layout_input = $("#pageLayout"),
-        $tab_content_input = $("#tab_content");
+        $page_layout_input = $("#pageLayout");
         
     // modal dialog init: custom buttons and a "close" callback reseting the form inside
     var $dialog = $( "#dialog" ).dialog({
@@ -46,7 +45,81 @@ rave.layout = rave.layout || (function()
    
     // define the form object    
     var $form = $("#pageForm", $dialog);  
+    
+    // page menu related functions
+    var pageMenu = (function() {
+        var $button = $("#pageMenuButton");
+        var $menu = $("#pageMenu");
+        var $menuItemEdit = $("#pageMenuEdit");
+        var $menuItemDelete = $("#pageMenuDelete");
+        var $menuItemMove = $("#pageMenuMove");
+        
+        function hideMenu() {
+            $menu.hide();
+        }
+        
+        function showMenu() {
+            $menu.show();
+        }
+        
+        /**
+         * Initializes the private pageMenu closure
+         * - binds click event handler to menu button
+         * - binds menu item click event handlers
+         * - binds body click event handler to close the menu
+         */
+        function init() {
+            // initialize the page menu and button
+            $button.bind('click', function(event) {  
+                $menu.toggle();
+                // prevent the menu button click event from bubbling up to parent 
+                // DOM object event handlers such as the page tab click event
+                event.stopPropagation();
+            });         
+
+            // setup the edit page menu item
+            $menuItemEdit.bind('click', function(event) {
+                alert("Edit not yet implemented!");
+                pageMenu.hide();
+                // prevent the menu button click event from bubbling up to parent 
+                // DOM object event handlers such as the page tab click event
+                event.stopPropagation();
+            });
+
+            // setup the delete page menu item
+            $menuItemDelete.bind('click', function(event) {
+                // send the rpc request to delete the page
+                rave.api.rest.deletePage({pageId: getCurrentPageId(), successCallback: rave.viewPage});
 
+                pageMenu.hide();
+                // prevent the menu button click event from bubbling up to parent 
+                // DOM object event handlers such as the page tab click event
+                event.stopPropagation();
+            });
 
+
+            // setup the edit page menu item
+            $menuItemMove.bind('click', function(event) {
+                alert("Move not yet implemented!");
+                pageMenu.hide();
+                // prevent the menu button click event from bubbling up to parent 
+                // DOM object event handlers such as the page tab click event
+                event.stopPropagation();
+            });       
+
+            // close the page menu if the user clicks outside of it           
+            $("html").click(pageMenu.hide);
+        }
+        
+        return {
+            init: init,
+            hide: hideMenu,
+            show: showMenu
+        }
+    })();
+
+    /**
+     * Submits the RPC call to add a new page if form validation passes
+     */        
     function addPage() {
         // if the form has passed validation submit the request
         if ($("#pageForm").valid()) {        
@@ -61,13 +134,18 @@ rave.layout = rave.layout || (function()
                                   } 
             });      
         }
-    }
+    }      
     
-    function deletePage(pageId) {
-        // send the rpc request to delete the page
-        rave.api.rest.deletePage({pageId: pageId, successCallback: rave.viewPage});  
+    /**
+     * Returns the pageId of the currently viewed page
+     */
+    function getCurrentPageId() {
+        return $("#currentPageId").val();
     }
    
+   /***
+    * initializes the rave.layout namespace code
+    */
     function init() {
         // add_page button to open the dialog for creating a new page
         $( "#add_page" )
@@ -76,17 +154,14 @@ rave.layout = rave.layout || (function()
                         $dialog.dialog( "open" );
                 });
 
-        // close icon: removing the tab on click
-        // TODO - move this into a common page menu in the future along with edit page, etc
-        $( "#tabs span.ui-icon-close" ).live( "click", function() {
-                var pageId = this.parentNode.id.replace("tab-","");            
-                deletePage(pageId);                       
-        });    
+       pageMenu.init();
+
     }
    
     // public rave.layout API
     return {
-        init: init 
+        init: init,
+        getCurrentPageId: getCurrentPageId
     };
     
 })();
\ No newline at end of file



Mime
View raw message