diff --git a/navigation-api-portlet/src/main/java/org/gatein/portlet/quickstart/navigation/NavigationPortlet.java b/navigation-api-portlet/src/main/java/org/gatein/portlet/quickstart/navigation/NavigationPortlet.java index 649e5b49..cd9188f5 100644 --- a/navigation-api-portlet/src/main/java/org/gatein/portlet/quickstart/navigation/NavigationPortlet.java +++ b/navigation-api-portlet/src/main/java/org/gatein/portlet/quickstart/navigation/NavigationPortlet.java @@ -59,10 +59,9 @@ protected void doView(RenderRequest request, RenderResponse response) throws Por PortalRequest portalRequest = PortalRequest.getInstance(); Navigation navigation = PortalRequest.getInstance().getNavigation(); - + + // Diving two levels so the information about children count of children nodes is available Node rootNode = navigation.getRootNode(Nodes.visitNodes(2)); - - System.out.println(rootNode.isChildrenLoaded()); navigationRootNodeBean = new NavigationNodeBean(rootNode); @@ -94,15 +93,11 @@ protected void doView(RenderRequest request, RenderResponse response) throws Por @Override public void serveResource(ResourceRequest request, ResourceResponse response) throws PortletException, IOException { - PortalRequest portalRequest = PortalRequest.getInstance(); - Navigation navigation = PortalRequest.getInstance().getNavigation(); String chosenNodeURI = request.getParameter("uri"); Node chosenNode = navigation.getNode(NodePath.fromString(chosenNodeURI), Nodes.visitNodes(2)); - - System.out.println(chosenNode.isChildrenLoaded()); request.setAttribute("parentNode", new NavigationNodeBean(chosenNode)); diff --git a/navigation-api-portlet/src/main/webapp/css/QuickstartStylesheet.css b/navigation-api-portlet/src/main/webapp/css/QuickstartStylesheet.css index 4f5bb72c..592af242 100644 --- a/navigation-api-portlet/src/main/webapp/css/QuickstartStylesheet.css +++ b/navigation-api-portlet/src/main/webapp/css/QuickstartStylesheet.css @@ -1,7 +1,7 @@ /* * JBoss, Home of Professional Open Source * Copyright , Red Hat, Inc. and/or its affiliates, and individual - * contributors by the @authors tag. See the copyright.txt in the + * contributors by the @authors tag. See the copyright.txt in the * distribution for a full listing of individual contributors. * * Licensed under the Apache License, Version 2.0 (the "License"); @@ -9,7 +9,7 @@ * You may obtain a copy of the License at * http://www.apache.org/licenses/LICENSE-2.0 * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, + * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. @@ -20,9 +20,7 @@ font-size: 1.1em; } -/* - Topmenu section -*/ +/* Topmenu section */ .gtnQuickstartNavigationPortlet .topmenu { display: block; background: #023866; @@ -32,17 +30,17 @@ } /* Common nodes */ - .gtnQuickstartNavigationPortlet .topmenu > .menuitem { display: inline-block; position: relative; border-radius: 0.5em; margin-right: 0.5em; - color: yellow; + color: white; background: #225886; } -.gtnQuickstartNavigationPortlet .topmenu > .menuitem > a { +.gtnQuickstartNavigationPortlet .topmenu > .menuitem > a, +.gtnQuickstartNavigationPortlet .topmenu > .menuitem > span { padding: .5em 1em; display: inline-block; height: 1.25em; @@ -55,31 +53,19 @@ color: inherit; } -.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel a.caret { +.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel > a.caret, +.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel.active:hover > a.caret { border-left: 1px solid #124876; } -/* Basic node */ -.gtnQuickstartNavigationPortlet .topmenu > .menuitem:not(.multilevel):hover, -/* Page with children - page */ -.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel a:first-child:hover, -/* Page with children - caret */ -.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel a.caret:hover { - background: #0f69a7; -} - -.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel a:first-child:hover { - border-radius: .5em 0 0 .5em; -} - -.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel a.caret:hover { - border-radius: 0 .5em .5em 0; +.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel.active > a.caret { + border-left: 1px solid #e0e0e0; } /* Currently visited Node */ .gtnQuickstartNavigationPortlet .topmenu > .menuitem.active { - background: green; - color: black; + background: white; + color: #023866; } .gtnQuickstartNavigationPortlet .topmenu > .menuitem.active:hover { @@ -101,176 +87,160 @@ overflow: hidden; } -/* .gtnQuickstartNavigationPortlet .topmenu > .menuitem.active > a > i { - border-top-color: #0f69a7; + border-top-color: black; } -*/ -/* Right-arrow in top-menu */ -/* -.gtnQuickstartNavigationPortlet .submenu i { - position: absolute; - text-indent: -99999px; - width: 0em; - - right: .35em; - top: .35em; - - border-left: 0.35em solid #023866; - border-right: 0.35em solid transparent; - border-top: 0.35em solid transparent; - border-bottom: 0.35em solid transparent; +.gtnQuickstartNavigationPortlet .topmenu > .menuitem.active:hover > a { + color: white; } - - -.gtnQuickstartNavigationPortlet .topmenu > .menuiteml > a:first-child{ - border-radius: .5em; - bottom: 0; +.gtnQuickstartNavigationPortlet .topmenu > .menuitem.active:hover > a > i { + border-top-color: white; } -.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel > a:first-child{ - border-radius: .5em 0 0 .5em; - bottom: 0; +.gtnQuickstartNavigationPortlet .topmenu > .menuitem:not(.multilevel) i { + margin-left: .5em; } -.gtnQuickstartNavigationPortlet .topmenu > .menuitem > a.caret{ - background: #0f69a7; - color: white; - width: 0; - border-radius: 0 .5em .5em 0; - margin-left: -0.25em; - border-left: 1px solid #023866; +/* Basic node */ +.gtnQuickstartNavigationPortlet .topmenu > .menuitem:not(.multilevel):hover, +/* Page with children - page */ +.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel > a:first-child:hover, +/* Page with children - caret */ +.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel > a.caret:hover { + background: #0f69a7; } -.gtnQuickstartNavigationPortlet .submenu .menuitem > a:not(.menucaret):first-child { - display: inline-block; - width: 100%; +.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel > a:first-child:hover { + border-radius: 0.6em 0 0 0.6em; } -.gtnQuickstartNavigationPortlet .submenu .menuitem > a:not(.menucaret):first-child:hover { - background: #0f69a7; +.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel > a.caret:hover { + border-radius: 0 0.6em 0.6em 0; } -.gtnQuickstartNavigationPortlet .submenu a.caret{ +/*********************** + * Submenu section * + ***********************/ +.gtnQuickstartNavigationPortlet .submenu { + list-style: none; + padding: 0.3em 0; position: absolute; - display: inline-block; - color: white; - text-align: center; - width: 1em; - border-radius: 0 .5em .5em 0; - - border-left: 1px solid #ccc; - - width: 1.5em; - height: 1em; - right: 0; + left: auto; + top: .5em; + min-width: 10em; + position: absolute; + z-index: 5; + color: black; + background-clip: padding-box; + background-color: #FFFFFF; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 6px 6px 6px 6px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } -.gtnQuickstartNavigationPortlet .submenu a.menuhandler > i { - top: auto; +.gtnQuickstartNavigationPortlet .submenu > .menuitem, +.gtnQuickstartNavigationPortlet .submenu > .menuitem > a:first-child +{ + position: relative; + display: block; } -.gtnQuickstartNavigationPortlet .submenu a.caret i{ - top: .15em; - +.gtnQuickstartNavigationPortlet .submenu > .menuitem.multilevel > a:first-child { + display: block; + margin-right: 2em; } -.gtnQuickstartNavigationPortlet .topmenu > .menuitem.multilevel > a:first-child:hover { - background: yellow; - border-radius: .5em 0 0 .5em; +.gtnQuickstartNavigationPortlet .submenu > .menuitem i { + position: absolute; + text-indent: -99999px; + width: 0em; + right: .35em; + top: .75em; + border-left: 0.35em solid #023866; + border-right: 0.35em solid transparent; + border-top: 0.35em solid transparent; + border-bottom: 0.35em solid transparent; } -.gtnQuickstartNavigationPortlet .topmenu > .menuitem > a.caret:hover { - background: #1f79b7; +.gtnQuickstartNavigationPortlet .submenu > .menuitem.multilevel > a.caret { + position: absolute; + display: block; + width:1em; + right:0; + top:0; } -.gtnQuickstartNavigationPortlet .topmenu > .menuitem.active { - background: #fff; +.gtnQuickstartNavigationPortlet .submenu > .menuitem.multilevel > a.caret > i { + position: relative; + left: .35em; + top: 0; } - -.gtnQuickstartNavigationPortlet .topmenu > .menuitem.active > a { - color: #f57a00; +.gtnQuickstartNavigationPortlet .submenu > .menuitem > a:hover > i, +.gtnQuickstartNavigationPortlet .submenu > .menuitem.multilevel > a.caret:hover > i { + border-left-color: white; } -.gtnQuickstartNavigationPortlet .topmenu > .menuitem:hover { - background: #0f69a7; +.gtnQuickstartNavigationPortlet .submenu > .menuitem > a:hover, +.gtnQuickstartNavigationPortlet .submenu > .menuitem.active > a:first-child +{ + background: #0F69A7; color: white; } -.gtnQuickstartNavigationPortlet .topmenu > .menuitem > a.caret:hover > i { - border-top-color: white; +.gtnQuickstartNavigationPortlet .submenu > .menuitem > a, +.gtnQuickstartNavigationPortlet .submenu > .menuitem > span { + display: block; + padding: 0.5em; } -*/ -/* -* Submenu section -*/ -.gtnQuickstartNavigationPortlet .submenu { - list-style: none; - padding: 0.5em; - position: absolute; - background-color: white; - border-radius: 0.4em; - border: 0.0625em solid rgba(0, 0, 0, 0.2); - box-shadow: 0 0.3em 0.62em rgba(0, 0, 0, 0.4); - left: auto; - top: .5em; - min-width: 10em; - position: absolute; - z-index: 1000; +.gtnQuickstartNavigationPortlet .submenu > .menuitem > a { + position: relative; +} + +.gtnQuickstartNavigationPortlet .submenu > .menuitem > a.caret:hover { + background: #0F69A7; } .gtnQuickstartNavigationPortlet .topmenu > .menuitem > .submenu { left: 0; - top: 2.25em; + top: 2.35em; } .gtnQuickstartNavigationPortlet .topmenu > .menuitem > .submenu:before, - .gtnQuickstartNavigationPortlet .topmenu > .menuitem > .submenu:after { +.gtnQuickstartNavigationPortlet .topmenu > .menuitem > .submenu:after { content: ""; display: inline-block; position: absolute; } .gtnQuickstartNavigationPortlet .topmenu > .menuitem > .submenu:before { - border-bottom: 0.4375em solid rgba(0, 0, 0, 0.2); - border-left: 0.4375em solid transparent; - border-right: 0.4375em solid transparent; - left: 0.3em; - top: -0.4375em; + border-bottom: 0.5375em solid rgba(0, 0, 0, 0.2); + border-left: 0.5375em solid transparent; + border-right: 0.5375em solid transparent; + left: 0.5em; + top: -0.5375em; } .gtnQuickstartNavigationPortlet .topmenu > .menuitem > .submenu:after { - border-bottom: 0.375em solid #FFF; - border-left: 0.375em solid transparent; - border-right: 0.375em solid transparent; - left: 0.3625em; - top: -0.375em; + border-bottom: 0.475em solid #FFF; + border-left: 0.475em solid transparent; + border-right: 0.475em solid transparent; + left: 0.5625em; + top: -0.4em; } .gtnQuickstartNavigationPortlet .submenu .submenu { - top: 0; + top: -.4em; left: 100%; position: absolute; } -.gtnQuickstartNavigationPortlet .submenu i { - display: inline-block; - - position: relative; - text-indent: -99999px; - - width: 0em; - height: 0em; - - right: 0; - top: 0; - - border-left: 0.35em solid transparent; - border-right: 0.35em solid transparent; - border-top: 0.35em solid white; - border-bottom: 0.35em solid transparent; -} +.gtnQuickstartNavigationPortlet .submenu .submenu.inverse { + top: -.4em; + left: auto; + right: 100%; + position: absolute; +} \ No newline at end of file diff --git a/navigation-api-portlet/src/main/webapp/js/dropdown.jquery.js b/navigation-api-portlet/src/main/webapp/js/dropdown.jquery.js index f5d86d6e..346cf7b5 100644 --- a/navigation-api-portlet/src/main/webapp/js/dropdown.jquery.js +++ b/navigation-api-portlet/src/main/webapp/js/dropdown.jquery.js @@ -19,8 +19,7 @@ * jQuery drop-down menu plugin for quickstart navigation portlet interface. * Features: * - Basic on-click drop-down support. - * - Dynamically respond to window changes, distributes menus not to be outside the window. - * - Marking the currently opened node for better orientation. + * - Dynamically respond to window changes, distribute menus not to be outside the window. */ (function($) { $.fn.dropdownmenu = function(options) { @@ -30,24 +29,18 @@ menuElement: ".menuitem", // Selector for the to-be-collapsed element inside this parent element. arrowElement: ".menuhandler", - // Class which is set to the to-be-collapsed element when it's collapsed. - collapsedClass: "expanded", // Selector for the submenu element. submenuElement: ".submenu", // Class which is set to the menu which does not fit on screen. - inverseSubmenuClass: "inverse", - // Class which is set to the last opened menuitem. - lastOpenedClass: "current" + inverseSubmenuClass: "inverse" }, options); - console && console.log("Drop-down intialized"); - // Remember the topmenu element to be able to check if submenu fits into resized window var topmenu = $(this); // Traverse opened submenus from parent menu and inverse them if needed function findAndCheckOpenedSubmenu(parentMenu) { - var openedSubmenu = parentMenu.children(settings.menuElement + ":not(." + settings.collapsedClass + ")").children(settings.submenuElement).first(); + var openedSubmenu = parentMenu.children(settings.menuElement).children(settings.submenuElement).first(); // if no submenu is found, do nothing if (openedSubmenu.offset() === null) { @@ -84,30 +77,9 @@ function openSubmenu(menuItem) { // Close sibling submenus so that only the submenu opened above is present menuItem.siblings().each(function() { - //console&&console.log("close!!! "+$(this).html()); - $(this).toggleClass(settings.collapsedClass, true); + $(this).children().remove(".submenu"); }); - // Close all submenus and reset the current class if present in them - menuItem.find(settings.menuElement).each(function() { - if (!$(this).hasClass(settings.collapsedClass)) - $(this).addClass(settings.collapsedClass); - - $(this).removeClass(settings.lastOpenedClass); - }); - - // Open the submenu under the menu handler - menuItem.toggleClass(settings.collapsedClass); - - // Mark current menuitem and unmark its parent - if (!menuItem.hasClass(settings.collapsedClass)) { - menuItem.addClass(settings.lastOpenedClass); - menuItem.parent().parent().removeClass(settings.lastOpenedClass); - } else { - menuItem.removeClass(settings.lastOpenedClass); - menuItem.parent().parent().addClass(settings.lastOpenedClass); - } - // Find the newly opened submenu var submenuElement = menuItem.children(settings.submenuElement); @@ -127,25 +99,17 @@ */ $(this).on("click", settings.arrowElement, function(e) { - console && console.log("Click event: " + $(this).attr('href')); - - // Prevent links from opening new pages - e.preventDefault(); var menuItem = $(this).parent(settings.menuElement); - //console && console.log("Children: " + menuItem.children(".submenu").length); - if (menuItem.children(".submenu").length === 0) { - console && console.log("Is not collapsed..."); $.ajax({ type: "POST", - url: $(this).attr('href'), + url: $(this).attr('href').substring(1), cache: false, dataType: "text", success: function(data) { - console && console.log("Ajax done:"); menuItem.append(data); openSubmenu(menuItem); }, @@ -155,7 +119,6 @@ } }); } else { - console && console.log("Is collapsed..."); menuItem.children().remove(".submenu"); } }); diff --git a/navigation-api-portlet/src/main/webapp/js/navigation.js b/navigation-api-portlet/src/main/webapp/js/navigation.js index 6baf40a5..0a61e7d9 100644 --- a/navigation-api-portlet/src/main/webapp/js/navigation.js +++ b/navigation-api-portlet/src/main/webapp/js/navigation.js @@ -17,11 +17,4 @@ (function($){ $(".gtnQuickstartNavigationPortlet .topmenu").dropdownmenu(); - - $(".gtnQuickstartNavigationPortlet .collapsibleToggle").click( function(){ - visibleClass = "visible-element"; - $(this).toggleClass(visibleClass); - $(".gtnQuickstartNavigationPortlet .topmenu").toggleClass(visibleClass); - }); - })(jQuery); \ No newline at end of file diff --git a/navigation-api-portlet/src/main/webapp/jsp/node.jsp b/navigation-api-portlet/src/main/webapp/jsp/node.jsp index 7712bc29..e542476a 100644 --- a/navigation-api-portlet/src/main/webapp/jsp/node.jsp +++ b/navigation-api-portlet/src/main/webapp/jsp/node.jsp @@ -36,7 +36,7 @@
  1. + -->
  2. @@ -44,7 +44,7 @@ <%-- Node is a clickable page and contains children nodes --%> ${child.name}${resourceBundle.getString("label.children")} + -->${resourceBundle.getString("label.children")} <%-- Node is a clickable page but doesn't contain any children nodes --%> @@ -52,7 +52,7 @@ <%-- Node is not a clickable page but contains children nodes, it's a "category" node --%> - ${child.name}${resourceBundle.getString("label.children")} + ${child.name}${resourceBundle.getString("label.children")} <%-- Do nothing with non-clickable "category" nodes without children nodes --%>