Categories navigation changed to collapsible tree menu

wtg · Aug 17, 2014 · c90263b · c90263b
1 parent 6415003
commit c90263b
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 57 deletions.
diff --git a/Gemfile b/Gemfile
@@ -16,6 +16,8 @@ gem 'font-awesome-sass'
 # Use kaminari for pagination
 gem 'kaminari'
 
+# Use therubyracer for a JavaScript runtime
+gem 'therubyracer'
 # Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'
 # Use CoffeeScript for .js.coffee assets and views

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -58,6 +58,7 @@ GEM
     kaminari (0.15.1)
       actionpack (>= 3.0.0)
       activesupport (>= 3.0.0)
+    libv8 (3.16.14.3)
     mail (2.5.4)
       mime-types (~> 1.16)
       treetop (~> 1.4.8)
@@ -96,6 +97,7 @@ GEM
     rake (10.3.2)
     rdoc (4.1.1)
       json (~> 1.4)
+    ref (1.0.5)
     sass (3.2.19)
     sass-rails (4.0.3)
       railties (>= 4.0.0, < 5.0)
@@ -118,6 +120,9 @@ GEM
     sqlite3 (1.3.9)
     textractor (0.2.0)
       escape (>= 0.0.4)
+    therubyracer (0.12.1)
+      libv8 (~> 3.16.14.0)
+      ref
     thor (0.19.1)
     thread_safe (0.3.4)
     tilt (1.4.1)
@@ -150,5 +155,6 @@ DEPENDENCIES
   spring
   sqlite3
   textractor
+  therubyracer
   turbolinks
   uglifier (>= 1.3.0)
diff --git a/app/assets/javascripts/categories.js b/app/assets/javascripts/categories.js
@@ -0,0 +1,23 @@
+// Show all descendant categories of the clicked parent category
+function toggleDescendants(parent_id) {
+	// Target class for the subcategories and their states (hidden or shown)
+	target_class = '.parent-id-' + parent_id.toString();
+	target_class_state = $(target_class).attr("value");
+	// Class for the tree menu's collapse/show subcategories button 
+	button_class = "button-id-" + parent_id.toString();
+
+	if (target_class_state == "hidden") {
+		// Show the hidden subcategories
+		$(target_class).css("display", "block");
+		$(target_class).attr("value", "shown");
+		// Change the orientation of the collapsible menu button
+		$("." + button_class).attr("class", "fa fa-minus-square-o " + button_class);
+	}
+	else if (target_class_state == "shown") {
+		// Hide the subcategories
+		$(target_class).css("display", "none");
+		$(target_class).attr("value", "hidden");
+		// Change the orientation of the collapsible menu button
+		$("." + button_class).attr("class", "fa fa-plus-square-o " + button_class);
+	}
+}
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -49,6 +49,14 @@ body {
   }
 }
 
+.header {
+  background-color: whitesmoke;
+  border-bottom: 1px whitesmoke solid;
+  margin-bottom: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
 footer {
   font-size: 14px;
   clear: both;

diff --git a/app/models/category.rb b/app/models/category.rb
@@ -46,6 +46,17 @@ def depth
     ancestors.count
   end
 
+  # Figure out a node's level in the tree
+  def node_depth
+    node = self
+    level = 0
+    while(node.parent != nil)
+      node = node.parent
+      level += 1
+    end
+    level
+  end
+
   # The group of category who share a common parent
   def self_and_siblings
     parent ? parent.children : Category.roots

diff --git a/app/views/categories/_categories_nav.html.erb b/app/views/categories/_categories_nav.html.erb
@@ -1,35 +1,23 @@
-<div class="categories_nav">
+<!-- Document upload button & modal -->
+<%= render partial: "documents/upload" %>
 
-  <!-- Document upload button & modal -->
-  <%= render partial: "documents/upload" %>
-
-  <!-- Previous category navigation -->
-  <%= render partial: "categories/previous_navigation" %>
-
-  <div class="categories_list">
-    <!-- Title -->
-    <% if @category %>
-      <h4> <%= "#{@category.name}" %> </h4>
-    <% else %>
-      <h4> Browse categories </h4>
-    <% end %>
-
-    <!-- Category list -->
-    <ul class="nav nav-stacked">
-      <% categories.each do |cat| %>
-        <li>
-          <%= link_to cat.name, category_path(cat, view_style: "grid") %>
-        </li>
-      <% end %>
-    </ul>
-
-    <!-- New category button and Edit categories button -->
-    <% if !current_user.nil? and current_user.is_admin? %>
-      <hr />
-      <div class="category_btn">
-        <%= link_to "New Category", new_category_path, :class => "category_text" %>
-        <%= link_to "Edit Categories", manage_categories_path, :class => "category_text" %>
-      </div>
+<!-- Category list -->
+<ul style="list-style-type: none; padding-left: 15px;" >
+  <% categories.each do |root| %>
+    <!-- Show root categories -->
+    <li style="display:block-inline" value="root">
+      <i class="fa fa-plus-square-o button-id-<%=root.id%>" onclick="toggleDescendants(<%= root.id %>)"></i>
+      <%= link_to root.name, category_path(root, view_style: "grid") %>
+    </li>
+    <!-- Subcategories are intially hidden in a tree menu -->
+    <% root.descendants.each do |cat| %>
+      <li class="parent-id-<%=cat.parent_id%>" style="padding-left:<%= 20 * cat.node_depth %>px; display: none" value="hidden"> 
+        <!-- only show the subcategories toggle button if this subcategory has descendants -->
+        <% if cat.descendants.length > 0 %>
+          <i class="fa fa-plus-square-o button-id-<%=cat.id%>" onclick="toggleDescendants(<%= cat.id %>)"></i>
+        <% end %>
+        <%= link_to cat.name, category_path(cat, view_style: "grid") %>
+      </li>
     <% end %>
-  </div>
-</div>
+  <% end %>
+</ul>
diff --git a/app/views/categories/_previous_navigation.html.erb b/app/views/categories/_previous_navigation.html.erb
diff --git a/app/views/categories/index.html.erb b/app/views/categories/index.html.erb
@@ -1,6 +1,9 @@
-<%= render partial: "categories_nav", locals: {categories: @categories} %>
-<h3> Featured Categories </h3>
-<%= render partial: "featured_categories", locals: {featured: @featured} %>
-<hr />
-<h3> Recent Documents </h3>
-<%= render partial: "latest_documents", locals: {latest_docs: @latest_docs} %>
+<% if !@featured.nil? and @featured.length > 0 %>
+	<h3> Featured Categories </h3>
+	<%= render partial: "featured_categories", locals: {featured: @featured} %>
+<% end %>
+<% if !@latest_docs.nil? and @latest_docs.length > 0 %>
+	<hr />
+	<h3> Recent Documents </h3>
+	<%= render partial: "latest_documents", locals: {latest_docs: @latest_docs} %>
+<% end %>
diff --git a/app/views/categories/show.html.erb b/app/views/categories/show.html.erb
@@ -1,5 +1,3 @@
-<%= render partial: "categories_nav", locals: {parent: @category, categories: @subcategories} %>
-
 <% if @view_style == "grid" %>
   <%= render partial: "documents/documents_grid" %>
 <% else %>

diff --git a/app/views/layouts/_header.erb b/app/views/layouts/_header.erb
@@ -10,6 +10,9 @@
       <% if current_user.is_admin? %>
         <%= link_to "Groups", groups_path, :class => "btn btn-default" %>
         <%= link_to "Users", users_path, :class => "btn btn-default" %>
+        <!-- New category button and Edit categories button -->
+        <%= link_to "New Category", new_category_path, :class => "btn btn-default" %>
+        <%= link_to "Edit Categories", manage_categories_path, :class => "btn btn-default" %>
       <% end %>
     <% end %>
   </div>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -10,10 +10,16 @@
   <body>
 
     <%= render partial: "layouts/messages" %>
-    <div class="page">
+    <div class="row header">
       <%= render partial: "layouts/header" %>
-      <hr />
-      <%= yield %>
+    </div>
+    <div class="row">
+      <div class="col-md-3">
+        <%= render partial: "categories/categories_nav.html.erb", locals: {categories: Category.roots} %>
+      </div>
+      <div class="col-md-9">
+        <%= yield %>
+      </div>
     </div>
   </body>
 </html>