accordion sidebar mostly working

Gemfile

@@ -11,6 +11,7 @@ gem "json", "~>1.8"
 gem "rack-codehighlighter"
 gem "sass", "~> 3.4.0"
 gem "compass", "~> 1.0"
+gem "awesome_print"
 
 group :development, :test do
   gem "rerun"

Gemfile.lock

@@ -6,6 +6,7 @@ GEM
       i18n (~> 0.7)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
+    awesome_print (1.8.0)
     chunky_png (1.3.8)
     coderay (1.1.2)
     compass (1.0.3)
@@ -40,8 +41,6 @@ GEM
     ffi (1.9.18)
     ffi (1.9.18-x86-mingw32)
     files (0.3.1)
-    foundation (1.0.4)
-      thor (>= 0.18.1)
     i18n (0.9.1)
       concurrent-ruby (~> 1.0)
     json (1.8.6)
@@ -102,7 +101,6 @@ GEM
       daemons (~> 1.0, >= 1.0.9)
       eventmachine (~> 1.0, >= 1.0.4)
       rack (>= 1, < 3)
-    thor (0.20.0)
     thread_safe (0.3.6)
     tilt (2.0.8)
     treetop (1.6.8)
@@ -123,12 +121,12 @@ PLATFORMS
 
 DEPENDENCIES
   activesupport
+  awesome_print
   coderay
   compass (~> 1.0)
   deckrb (>= 0.5.2)
   erector (>= 0.9.0)
   files
-  foundation
   json (~> 1.8)
   listen
   nokogiri (~> 1.7)

lib/app_page.rb

@@ -1,5 +1,6 @@
 require 'erector'
 require 'bootstrap_page'
+require 'awesome_print'
 
 class AppPage < BootstrapPage
 
@@ -26,24 +27,55 @@ def navbar_items
     nav_item name: "Lessons", href: "/lessons"
     nav_item name: "Labs", href: "http://testfirst.org/live"
 
-      # nav_item name: "Test First", href: "http://testfirst.org/"
+    # nav_item name: "Test First", href: "http://testfirst.org/"
     # nav_item name: "Alex", href: "http://alexchaffee.com"
     # widget DonateButton
   end
 
+  # todo: unify with app.rb
+  def all_courses
+    [
+        Course::LearnToCode,
+        Course::AgileDevelopment,
+        Course::Ruby,
+        Course::RubyTools,
+        Course::RubyBasics,
+        Course::RubyBlocks,
+        Course::RubyObjects,
+        Course::RubyAdvanced,
+        Course::Javascript,
+    ]
+  end
+
+
   def body_content
 
+    # top nav
     navbar_content
 
     #todo: add 'main' element type to Erector
-    element('main', class: [:container]) {
-      call_block
-      widget @widget if @widget
-      div.pre_footer {
+    element('main', class: 'container-fluid') {
+      div(class: "row") {
+
+        # first the sidebar
+        div(class: "col-md-3 col-xs-1", id: 'sidebar') {
+          ap self
+          widget CoursesSidebar.new(courses: all_courses, current: @widget)
+        }
+
+        # now the real body
+        div(class: "col-md-9 col-xs-11") {
+          call_block
+          widget @widget if @widget
+
+          div.pre_footer {
+
+          }
+        }
       }
     }
 
-    div.footer {
+    center.footer(class: ['footer', 'navbar-light', 'bg-light']) {
       text "Unless otherwise noted, all contents copyright ", raw('&copy;'), " 2013-2017 by "
       a "Alex Chaffee.", href: "http://alexchaffee.com"
       br

lib/bootstrap_page.rb

@@ -51,9 +51,7 @@ def head_content
     font "Museo500"
     stylesheet name: "coderay"
     stylesheet name: "codelikethis"
-  end
 
-  def body_scripts
     # todo: parameterize using CDN vs local file for jQuery
     script src: "https://code.jquery.com/jquery-3.2.1.slim.min.js",
            integrity: "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN",
@@ -74,6 +72,9 @@ def body_scripts
            integrity: "sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ",
            crossorigin: "anonymous"
 
+  end
+
+  def body_scripts
     # load this application's JS from /js/app.js
     script src: "/js/app.js"
   end

lib/course.rb

@@ -5,6 +5,7 @@
 require 'courses_table'
 require 'lesson'
 require 'lab'
+require 'awesome_print'
 
 class Course < Erector::Widget
 
@@ -24,16 +25,20 @@ def initialize name = "course", &block
     instance_eval &block if block
   end
 
+  def current= course_or_lesson
+    @current = course_or_lesson
+  end
+
   def lessons
-    @stuff.select{|thing| thing.is_a? Lesson}
+    @stuff.select {|thing| thing.is_a? Lesson}
   end
 
   def lesson_names
     lessons.map(&:name)
   end
 
   def labs
-    @stuff.select{|thing| thing.is_a? Lab}
+    @stuff.select {|thing| thing.is_a? Lab}
   end
 
   def lab_names
@@ -59,19 +64,19 @@ def content
     end
   end
 
-  def list_items items = @stuff
-    ul {
-      items.each do |item|
-        li {
-          item_name = item.display_name
-          item_name = "Lab: #{item_name}" if item.is_a? Lab
-          a href: item.href do
-            text item_name
-            span.video_link "Video" if item.respond_to? :video? and item.video?
-          end
-        }
-      end
-    }
+  def list_items items = @stuff, options = {}
+    options = options.dup
+    element_name = options.delete(:element) || 'li'
+    items.each do |item|
+      div(class: ['list-group-item', ('active' if @current == item)]) {
+        item_name = item.display_name
+        item_name = "Lab: #{item_name}" if item.is_a? Lab
+        a href: item.href do
+          text item_name
+          span.video_link "Video" if item.respond_to? :video? and item.video?
+        end
+      }
+    end
   end
 
   def list_lessons
@@ -132,12 +137,12 @@ def courses_dir
 
   private
 
-    def this_lesson_index(lesson_name)
-      lesson_names.index { |name| name == lesson_name }
-    end
+  def this_lesson_index(lesson_name)
+    lesson_names.index {|name| name == lesson_name}
+  end
 
-    def this_item_index(lesson_name)
-      (@stuff.map(&:name).index { |name| name == lesson_name }) or raise "No lesson named #{lesson_name}"
-    end
+  def this_item_index(lesson_name)
+    (@stuff.map(&:name).index {|name| name == lesson_name}) or raise "No lesson named #{lesson_name}"
+  end
 
 end

lib/courses_sidebar.rb

@@ -0,0 +1,94 @@
+require 'erector'
+
+class CoursesSidebar < Erector::Widget
+
+  external :style, <<-CSS
+  #sidebar .active {
+    background-color: #EEF;
+  }
+#sidebar a {
+  color: black;
+}
+  CSS
+
+  needs :courses, :current
+
+  def current_course
+    if @current.is_a?(Course)
+      @current
+    elsif @current.is_a?(Lesson)
+      @current.course
+    end
+  end
+
+  def current_lesson
+    @current if @current.is_a?(Lesson)
+  end
+
+  def content
+    h3 "Courses"
+    div(id: html_id) {
+      @courses.each do |course|
+        course_row(course)
+      end
+    }
+  end
+
+  def html_id
+    "sidebar-courses"
+  end
+
+  def course_row(course)
+    classes = ['list-group-item', ('active' if current_course == course)]
+
+    div(class: classes) {
+      lessons_id = "sidebar-#{course.name}-lessons"
+
+      a course.display_name,
+        href: "##{lessons_id}",
+        'data-toggle': 'collapse',
+        'data-target': "##{lessons_id}",
+        'data-parent': html_id
+
+      # button "lessons",
+      #        class: 'btn',
+      #        type: 'button',
+      #        'data-toggle': 'collapse',
+      #        'data-target': "##{lessons_id}"
+      # 'aria-expanded': false
+      # 'aria-controls': '???'
+
+      # labs_id = "sidebar-#{course.name}-labs"
+      # button "labs",
+      #        class: 'btn btn-primary',
+      #        type: 'button',
+      #        'data-toggle': 'collapse',
+      #        'data-target': labs_id,
+      #        'aria-expanded': false
+      #        # 'aria-controls': '???'
+
+      div(class: ['collapse', ('show' if course.lessons.include?(@current))],
+        id: lessons_id,
+        'data-parent': "##{html_id}") {
+        div(class: 'list-group') {
+          course.current = @current
+          widget course, {}, :content_method_name => :list_lessons
+        }
+      }
+
+      # ul(class: 'list-group', id: labs_id) {
+      #   widget course, {}, :content_method_name => :list_labs
+      # }
+    }
+
+    script raw(<<-JS)
+    // when a collapsible is shown
+    $('#sidebar .collapse').on('show.bs.collapse', function() {
+      console.log("hello!");
+      // then hide all currently shown
+      $('#sidebar .collapse.show').collapse('hide');
+    });
+    JS
+  end
+
+end

lib/courses_table.rb

@@ -60,18 +60,20 @@ class CoursesTable < Erector::Widget
 
   CSS
 
-    module ::Enumerable
-      def select_with_index
-        index = -1
-        select { |x| yield(x, index += 1) }
-      end
-      def odds
-        select_with_index {|x,i| i.odd?}
-      end
-      def evens
-        select_with_index {|x,i| i.even?}
-      end
+  module ::Enumerable
+    def select_with_index
+      index = -1
+      select {|x| yield(x, index += 1)}
+    end
+
+    def odds
+      select_with_index {|x, i| i.odd?}
+    end
+
+    def evens
+      select_with_index {|x, i| i.even?}
     end
+  end
 
 
   def content
@@ -95,10 +97,14 @@ def course_row(course)
         a course.display_name, href: course.href
       }
       td.lessons(valign: "top") {
-        widget course, {}, :content_method_name => :list_lessons
+        ul {
+          widget course, {}, :content_method_name => :list_lessons
+        }
       }
       td.lessons(valign: "top") {
-        widget course, {}, :content_method_name => :list_labs
+        ul {
+          widget course, {}, :content_method_name => :list_labs
+        }
       }
     }
   end

lib/enumerable_extensions.rb

@@ -0,0 +1,12 @@
+module ::Enumerable
+  def select_with_index
+    index = -1
+    select { |x| yield(x, index += 1) }
+  end
+  def odds
+    select_with_index {|x,i| i.odd?}
+  end
+  def evens
+    select_with_index {|x,i| i.even?}
+  end
+end

lib/lesson.rb

@@ -85,7 +85,7 @@ class Lesson < Erector::Widget
   }
 "
 
-  attr_reader :name
+  attr_reader :name, :course
 
   def initialize course, name
     @course, @name = course, name