Merge pull request #365 from prometheus/hide-inactive-menus

Collapse inactive navigation menus

Merge pull request #365 from prometheus/hide-inactive-menus
Collapse inactive navigation menus
e84fc14e · Tobias Schmidt · a61a48f0 · 26063c1d · e84fc14e · e84fc14e
Commit e84fc14e authored Apr 02, 2016 by Tobias Schmidt
Showing with 58 additions and 32 deletions

docs.html layouts/docs.html +1 -1

header.html layouts/header.html +2 -5

nav.rb lib/helpers/nav.rb +24 -22

docs.css static/docs.css +9 -4

docs.js static/docs.js +22 -0

No files found.
--- a/layouts/docs.html
+++ b/layouts/docs.html
@@ -5,7 +5,7 @@
    <div class="col-md-3 side-nav-col">
      <ul class="nav navbar-nav side-nav">
        <% @items['/docs/'].children.sort_by { |i| i[:sort_rank] || 0 }.each do |i| %>
-          <%= nav(i, @item) %>
+          <%= nav(i) %>
        <% end %>
      </ul>
    </div>

--- a/layouts/header.html
+++ b/layouts/header.html
@@ -45,11 +45,8 @@
    <link href="/assets/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">

-    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
-    <!--[if lt IE 9]>
-      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
-      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-    <![endif]-->
+    <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
+    <script src="/assets/docs.js"></script>
  </head>

  <body>

--- a/lib/helpers/nav.rb
+++ b/lib/helpers/nav.rb
-def nav_title_of(i)
-  i[:nav_title] || i[:title] || ''
-end
-
-def nav(root_item, focused_item, buffer='', layer=0)
-  # Skip non-written or hidden items
+def nav(root_item, buffer='', layer=0)
  return buffer if root_item.nil? || root_item.path.nil? || root_item[:is_hidden]

-  # Open list element
-  is_active = @item_rep && @item_rep.path == root_item.path
-  if is_active
+  children = nav_children(root_item)
+
+  if nav_active?(root_item)
    buffer << "<li class=\"active\">"
  else
    buffer << "<li>"
@@ -16,29 +11,36 @@ def nav(root_item, focused_item, buffer='', layer=0)

  title = nav_title_of(root_item)
  if layer == 0
-    # Add section header.
-    buffer << "<span class=\"nav-header\"><i class=\"fa fa-#{root_item[:nav_icon]}\"></i> #{title}</span>"
+    buffer << "<span class=\"nav-header\"><i class=\"fa fa-#{root_item[:nav_icon]}\"></i> <span>#{title}</span></span>"
  else
-    # Add link.
    buffer << link_to(title, root_item.path)
  end

-  # Add children to sitemap, recursively
-  visible_children = root_item.children.select { |child| !child[:is_hidden] && child.path }
-  visible_children = visible_children.sort_by { |child| child[:sort_rank] || 0 }
-  if visible_children.size > 0
-    buffer << '<ul class="nav">'
+  if children.any?
+    buffer << %(<ul class="nav #{nav_active?(root_item) ? 'active' : ''}">)

-    visible_children.each do |child|
-      nav(child, focused_item, buffer, layer + 1)
+    children.each do |child|
+      nav(child, buffer, layer + 1)
    end

    buffer << '</ul>'
  end

-  # Close list element
  buffer << '</li>'
-
-  # Return sitemap
  buffer
 end
+
+def nav_active?(item)
+  active = @item_rep.respond_to?(:path) && @item_rep.path == item.path
+  active || nav_children(item).any? { |child| nav_active?(child) }
+end
+
+def nav_title_of(i)
+  i[:nav_title] || i[:title] || ''
+end
+
+def nav_children(item)
+  item.children
+    .select { |child| !child[:is_hidden] && child.path }
+    .sort_by { |child| child[:sort_rank] || 0 }
+end
--- a/static/docs.css
+++ b/static/docs.css
@@ -90,6 +90,7 @@ a.sc-logo img {
 }

 .side-nav .fa {
+  width: 20px;
  color: #555;
 }

@@ -102,14 +103,18 @@ a.sc-logo img {
 }

 .side-nav .nav-header {
-  color: #e6522c;
-  text-transform: uppercase;
-  font-size: 16px;
  display: block;
  margin: 20px auto 15px auto;
+  font-size: 16px;
+}
+
+.side-nav .nav-header a, .side-nav .nav-header span {
+  color: #e6522c;
+  text-transform: uppercase;
+  text-decoration: none;
 }

-.side-nav .active {
+.side-nav ul.active li.active {
  border-left: 3px solid #e6522c;
  margin-left: -2px;
  font-weight: bold;

--- a/static/docs.js
+++ b/static/docs.js
+// Use CSS to hide elements without a delay during page load.
+$('head').append('<style type="text/css"> \
+  .side-nav ul { display: none; } \
+  .side-nav ul.active { display: block; } \
+</style>');
+
+$(document).ready(function() {
+  var navToggle = function(event) {
+    event.preventDefault();
+
+    var visible = $(this).closest('li').children('ul.nav').is(':visible');
+    $(this).closest('ul').find('ul.nav').slideUp(200);
+    if (!visible) {
+      $(this).closest('li').children('ul.nav').slideDown(200);
+    }
+  };
+
+  $('.nav-header span').each(function() {
+    var link = $('<a href="#">').text($(this).text()).click(navToggle);
+    $(this).replaceWith(link);
+  });
+});