Sidebar box to navigate through learning path

...When viewing an item in that learning path

app/assets/javascripts/application.js

@@ -260,6 +260,8 @@ document.addEventListener("turbolinks:load", function(e) {
 
     Collections.init();
 
+    LearningPaths.init();
+
     $('.tess-expandable').each(function () {
         var limit = this.dataset.heightLimit || 300;
 
@@ -326,12 +328,6 @@ document.addEventListener("turbolinks:load", function(e) {
         }, 1);
     });
 
-    $('.learning-path-topic-title').click(function () {
-        const container = $(this).closest('.learning-path-topic');
-        const contents = container.find('.learning-path-topic-contents');
-        $(this).find('.expand-icon, .collapse-icon').toggleClass('collapse-icon').toggleClass('expand-icon');
-        contents.slideToggle();
-    });
 });
 
 function truncateWithEllipses(text, max)

app/assets/javascripts/learning_paths.js

@@ -0,0 +1,17 @@
+var LearningPaths = {
+    init: function () {
+        $('.learning-path-topic-title').click(function () {
+            const container = $(this).closest('.learning-path-topic');
+            const contents = container.find('.learning-path-topic-contents');
+            $(this).find('.expand-icon, .collapse-icon').toggleClass('collapse-icon').toggleClass('expand-icon');
+            contents.slideToggle();
+        });
+
+        if (window.location.hash) {
+            var topic = $('.learning-path-topic' + window.location.hash);
+            if (topic.length) {
+                $('.learning-path-topic-title', topic).click();
+            }
+        }
+    }
+}

app/controllers/materials_controller.rb

@@ -4,6 +4,7 @@ class MaterialsController < ApplicationController
   before_action :set_material, only: [:show, :edit, :update, :destroy, :update_collections, :clone,
                                       :add_term, :reject_term, :add_data, :reject_data]
   before_action :set_breadcrumbs
+  before_action :set_learning_path_navigation, only: :show
 
   include SearchableIndex
   include ActionView::Helpers::TextHelper
@@ -178,4 +179,10 @@ def material_params
                                      event_ids: [], locked_fields: [])
   end
 
+  def set_learning_path_navigation
+    return unless params[:lp]
+    topic_link_id, topic_item_id = params[:lp].split(':')
+    @learning_path_topic_link = LearningPathTopicLink.find_by_id(topic_link_id)
+    @learning_path_topic_item = LearningPathTopicItem.find_by_id(topic_item_id)
+  end
 end

app/helpers/learning_paths_helper.rb

@@ -0,0 +1,7 @@
+module LearningPathsHelper
+
+  def learning_path_breadcrumb_param(topic_link, topic_item)
+    { lp: [topic_link, topic_item].map(&:id).join(':') }
+  end
+
+end

app/views/events/_event.html.erb

@@ -1,6 +1,8 @@
+<% learning_path_topic_item ||= nil %>
+<% collection_item ||= learning_path_topic_item %>
 <li class="masonry-brick media-item long">
   <%= link_to event, class: 'link-overlay with-left-icon' do %>
-    <%= item_order_badge(collection_item) if defined? collection_item %>
+    <%= item_order_badge(collection_item) if collection_item %>
     <div class="with-left-icon">
       <div class="icon-container hidden-xs">
         <i class="icon icon-h2 <%= event.presence %>-event-icon"></i><br/>
@@ -52,6 +54,6 @@
       <% end %>
     </div>
 
-    <%= item_comment(collection_item) if defined? collection_item %>
+    <%= item_comment(collection_item) if collection_item %>
   <% end %>
 </li>

app/views/learning_path_topic_items/_learning_path_topic_item.html.erb

@@ -1,2 +1,3 @@
 <% resource = learning_path_topic_item.resource %>
-<%= render partial: resource, locals: { collection_item: learning_path_topic_item } %>
+<% locals = local_assigns.merge(collection_item: local_assigns.delete(:learning_path_topic_item)) %>
+<%= render partial: resource, locals: locals %>

app/views/learning_paths/partials/_navigation.html.erb

@@ -0,0 +1,23 @@
+<h4 class="nav-heading"><%= LearningPath.model_name.human %></h4>
+<div class="nav-block learning-path-navigation">
+  <%= link_to(topic_link.learning_path.title, topic_link.learning_path) %><br/>
+  <%= topic_link.topic.title %>
+
+  <%= item_comment(topic_item) %>
+
+  <div>
+    <% next_item = topic_item.next_item %>
+    <% if next_item %>
+      <strong><%= t('learning_paths.next_item') %>:</strong><br/>
+      <%= link_to(next_item.resource.title, polymorphic_path(next_item.resource, **learning_path_breadcrumb_param(topic_link, next_item))) %>
+    <% else %>
+      <% next_topic = topic_link.next_topic %>
+      <% if next_topic %>
+        <strong><%= t('learning_paths.next_topic') %>:</strong><br/>
+        <%= link_to(next_topic.topic.title, learning_path_path(next_topic.learning_path, anchor: "topic-#{next_topic.id}")) %>
+      <% else %>
+        <span class="empty"><%= t('learning_paths.end_of') %></span>
+      <% end %>
+    <% end %>
+  </div>
+</div>

app/views/learning_paths/show.html.erb

@@ -60,7 +60,7 @@
 
       <div class="learning-path-topics">
         <% @learning_path.topic_links.joins(:topic).each do |lpt| %>
-          <div class="learning-path-topic">
+          <div class="learning-path-topic" id="topic-<%= lpt.id -%>">
             <div class="learning-path-topic-order"><%= lpt.order %></div>
             <div class="learning-path-topic-title">
               <h4><%= lpt.topic.title %> <i class="icon icon-md expand-icon"></i></h4>
@@ -79,8 +79,9 @@
               <% end %>
 
               <ul style="padding-left: 0; overflow: auto;">
-                <% lpt.topic.materials.each do |object| %>
-                  <%= render object %>
+                <% lpt.topic.material_items.each do |object| %>
+                  <%= render partial: object.to_partial_path, locals: { learning_path_topic_item: object,
+                                                                        topic_link: lpt } %>
                 <% end %>
               </ul>
             </div>

app/views/materials/_material.html.erb

@@ -1,6 +1,10 @@
+<% learning_path_topic_item ||= nil %>
+<% collection_item ||= learning_path_topic_item %>
+<% link_params = (defined? topic_link) ? learning_path_breadcrumb_param(topic_link, collection_item) : {} %>
+<% show_order = false unless defined? show_order %>
 <li class="masonry-brick media-item long">
-  <%= link_to material, class: 'link-overlay' do %>
-    <%= item_order_badge(collection_item) if defined? collection_item %>
+  <%= link_to material_path(material, **link_params), class: 'link-overlay' do %>
+    <%= item_order_badge(collection_item) if show_order && collection_item %>
 
     <div class="masonry-brick-heading">
       <div class="masonry-icons">
@@ -31,6 +35,6 @@
       <%= keywords_and_topics(material) %>
     </div>
 
-    <%= item_comment(collection_item) if defined? collection_item %>
+    <%= item_comment(collection_item) if collection_item %>
   <% end %>
 </li>

app/views/materials/show.html.erb

@@ -1,5 +1,8 @@
 <div class="wrapper collapsing-wrapper">
   <div class="collapsing-sidebar" id="sidebar">
+    <%= render partial: 'learning_paths/partials/navigation',
+               locals: { topic_link: @learning_path_topic_link,
+                         topic_item: @learning_path_topic_item } if @learning_path_topic_link && @learning_path_topic_item %>
     <%= render partial: 'content_providers/partials/content_provider_info', locals: { content_provider: @material.content_provider } %>
     <%= render partial: 'nodes/partials/associated_node_info', locals: { associated_nodes: @material.associated_nodes } %>
     <%= render(partial: 'users/partials/user_info', locals: { user: @material.user }) if current_user.try(:is_admin?) %>

config/locales/en.yml

@@ -670,6 +670,9 @@ en:
       resource_type: 'Select the type of resource that best matches the learning path. '
       url: 'Preferred URL to direct people to your learning path landing page.'
       version: 'Indicate the current version of the learning path.'
+    next_topic: Next topic
+    next_item: Next
+    end_of: End of learning path
   profile:
     user:
       disclaimer: >