GUACAMOLE-359: Add support for nested menus.
Project: http://git-wip-us.apache.org/repos/asf/incubator-guacamole-website/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-guacamole-website/commit/7db6f6b1 Tree: http://git-wip-us.apache.org/repos/asf/incubator-guacamole-website/tree/7db6f6b1 Diff: http://git-wip-us.apache.org/repos/asf/incubator-guacamole-website/diff/7db6f6b1 Branch: refs/heads/master Commit: 7db6f6b12bbcdddbd249ba0e0dfc8ec6e68be258 Parents: 5713a8a Author: Michael Jumper <[email protected]> Authored: Fri Aug 4 12:59:14 2017 -0700 Committer: Michael Jumper <[email protected]> Committed: Fri Aug 4 14:41:55 2017 -0700 ---------------------------------------------------------------------- _includes/header.html | 19 +-------------- _includes/nav-menu.html | 28 ++++++++++++++++++++++ _layouts/default.html | 6 +++++ scripts/dropdown.js | 57 ++++++++++++++++++++++++++++++++++++++++++++ scripts/jquery.min.js | 4 ++++ styles/main.css | 38 +++++++++++++++++++++++++++++ 6 files changed, 134 insertions(+), 18 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-guacamole-website/blob/7db6f6b1/_includes/header.html ---------------------------------------------------------------------- diff --git a/_includes/header.html b/_includes/header.html index e799511..d89603c 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -2,23 +2,6 @@ <div id="header"> <h1><a href="/">{{ site.title }}</a></h1> <ul id="navigation" class="menu"> - {% assign menu_pages = site.pages %} - {% for link in site.links %} - {% assign menu_pages = menu_pages | push: link %} - {% endfor %} - {% assign menu_pages = menu_pages | sort: 'menu-weight') %} - {% for menu_page in menu_pages %} - {% if menu_page.menu-title %} - <li><a - {% if menu_page.location %} - href="{{ menu_page.location }}" - {% else %} - href="{{ menu_page.url | prepend: site.baseurl }}" - {% endif %} - {% if menu_page.menu-class %} - class="{{ menu_page.menu-class }}" - {% endif %}>{{ menu_page.menu-title }}</a></li> - {% endif %} - {% endfor %} + {% include nav-menu.html path="_links" %} </ul> </div> http://git-wip-us.apache.org/repos/asf/incubator-guacamole-website/blob/7db6f6b1/_includes/nav-menu.html ---------------------------------------------------------------------- diff --git a/_includes/nav-menu.html b/_includes/nav-menu.html new file mode 100644 index 0000000..0eb69a9 --- /dev/null +++ b/_includes/nav-menu.html @@ -0,0 +1,28 @@ +{% assign menu_pages = site.links | sort: 'menu-weight' %} +{% for menu_page in menu_pages %} + {% assign menu_dir = menu_page.path | split: '/' | pop | join: '/' %} + {% if menu_dir == include.path %} + {% if menu_page.menu-title %} + {% if menu_page.location %} + <li> + <a href="{{ menu_page.location }}" + {% if menu_page.menu-class %} + class="{{ menu_page.menu-class }}" + {% endif %}>{{ menu_page.menu-title }}</a> + </li> + {% else %} + <li class="dropdown"> + {% assign submenu = menu_page.path + | split: '.' + | pop + | join: '.' %} + <a class="dropdown-toggle {{ menu_page.menu-class }}" + href="#">{{ menu_page.menu-title }}</a> + <ul class="dropdown-menu"> + {% include nav-menu.html path=submenu %} + </ul> + </li> + {% endif %} + {% endif %} + {% endif %} +{% endfor %} http://git-wip-us.apache.org/repos/asf/incubator-guacamole-website/blob/7db6f6b1/_layouts/default.html ---------------------------------------------------------------------- diff --git a/_layouts/default.html b/_layouts/default.html index 71140f4..04d59f4 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -54,5 +54,11 @@ </script> + <!-- jQuery --> + <script src="/scripts/jquery.min.js" type="text/javascript"></script> + + <!-- Dropdown toggle --> + <script src="/scripts/dropdown.js" type="text/javascript"></script> + </body> </html> http://git-wip-us.apache.org/repos/asf/incubator-guacamole-website/blob/7db6f6b1/scripts/dropdown.js ---------------------------------------------------------------------- diff --git a/scripts/dropdown.js b/scripts/dropdown.js new file mode 100644 index 0000000..0cc62e7 --- /dev/null +++ b/scripts/dropdown.js @@ -0,0 +1,57 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. 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, 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. + */ + +/** + * Assigns click event handlers to all elements with the "dropdown-toggle" + * class which toggle the "open" class of the nearest ancestor element with the + * "dropdown" class. An additional click event handler is added to the body + * element which removes the "open" class of all "dropdown" elements, thus + * closing all open dropdowns when the user clicks outside the menu. + */ +(function initDropdowns() { + + // Automatically toggle the open state of dropdowns when their trigger + // element is clicked + $('.dropdown-toggle').click(function dropdownClicked(e) { + + // Find the relevant dropdown element + var clicked = $(e.target).closest('.dropdown'); + + // Close all other open dropdowns + $('.dropdown').not(clicked).removeClass('open'); + + // Toggle the open state of the clicked dropdown + clicked.toggleClass('open'); + e.preventDefault(); + + }); + + // Prevent clicks within the menu from propogating to ancestor elements + $('.dropdown').click(function dropdownClicked(e) { + e.stopPropagation(); + }); + + // Automatically close any open dropdown menus when the user clicks + // elsewhere + $('body').click(function closeDropdowns() { + $('.dropdown').removeClass('open'); + }); + +})(); +
