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 <mjum...@apache.org>
Authored: Fri Aug 4 12:59:14 2017 -0700
Committer: Michael Jumper <mjum...@apache.org>
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');
+    });
+
+})();
+

Reply via email to