You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@guacamole.apache.org by vn...@apache.org on 2017/08/05 12:25:50 UTC
[4/8] incubator-guacamole-website git commit: GUACAMOLE-359: Add
support for nested menus.
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 <mj...@apache.org>
Authored: Fri Aug 4 12:59:14 2017 -0700
Committer: Michael Jumper <mj...@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');
+ });
+
+})();
+