From eca83ba70a0da206e53de9449fd1a01174673885 Mon Sep 17 00:00:00 2001
From: Brian Jacobel <bjacobel@gmail.com>
Date: Tue, 7 Feb 2017 11:27:40 -0500
Subject: [PATCH] Outline will only show section and subsection, not unit

---
 lms/envs/common.py                            |  1 +
 .../js/courseware/course_outline_factory.js   | 29 +++++++++++++++++++
 lms/templates/courseware/course-outline.html  | 25 +++++++---------
 requirements/edx/base.txt                     |  2 ++
 4 files changed, 43 insertions(+), 14 deletions(-)
 create mode 100644 lms/static/js/courseware/course_outline_factory.js

diff --git a/lms/envs/common.py b/lms/envs/common.py
index eb8c3020d5..519dfd4063 100644
--- a/lms/envs/common.py
+++ b/lms/envs/common.py
@@ -1736,6 +1736,7 @@ REQUIRE_JS_PATH_OVERRIDES = {
     'js/student_account/logistration_factory': 'js/student_account/logistration_factory.js',
     'js/student_profile/views/learner_profile_factory': 'js/student_profile/views/learner_profile_factory.js',
     'js/courseware/courseware_factory': 'js/courseware/courseware_factory.js',
+    'js/courseware/course_outline_factory': 'js/courseware/course_outline_factory.js',
     'js/groups/views/cohorts_dashboard_factory': 'js/groups/views/cohorts_dashboard_factory.js',
     'draggabilly': 'js/vendor/draggabilly.js'
 }
diff --git a/lms/static/js/courseware/course_outline_factory.js b/lms/static/js/courseware/course_outline_factory.js
new file mode 100644
index 0000000000..3f2d3643c5
--- /dev/null
+++ b/lms/static/js/courseware/course_outline_factory.js
@@ -0,0 +1,29 @@
+(function(define) {
+    'use strict';
+
+    define([
+        'jquery',
+        'edx-ui-toolkit/js/utils/constants'
+    ],
+        function($, constants) {
+            return function(root) {
+                // In the future this factory could instantiate a Backbone view or React component that handles events
+                $(root).keydown(function(event) {
+                    var $focusable = $('.outline-item.focusable'),
+                        currentFocusIndex = $.inArray(event.target, $focusable);
+
+                    switch (event.keyCode) {  // eslint-disable-line default-case
+                    case constants.keyCodes.down:
+                        event.preventDefault();
+                        $focusable.eq(Math.min(currentFocusIndex + 1, $focusable.length - 1)).focus();
+                        break;
+                    case constants.keyCodes.up:
+                        event.preventDefault();
+                        $focusable.eq(Math.max(currentFocusIndex - 1, 0)).focus();
+                        break;
+                    }
+                });
+            };
+        }
+    );
+}).call(this, define || RequireJS.define);
diff --git a/lms/templates/courseware/course-outline.html b/lms/templates/courseware/course-outline.html
index 66559d7052..2e1d9f2c53 100644
--- a/lms/templates/courseware/course-outline.html
+++ b/lms/templates/courseware/course-outline.html
@@ -3,23 +3,20 @@
 <%namespace name='static' file='../static_content.html'/>
 
 <%!
-import json
-import pprint
 from django.utils.translation import ugettext as _
 %>
 
-<section class="course-outline" id="course-outline">
-    <ul>
-        % for unit in blocks.get('children') or []:
-            <li>${ unit['display_name'] }</li>
-            <ul>
-                % for section in unit.get('children') or []:
-                    <li>${ section['display_name'] }</li>
-                    <ul>
-                        % for subsection in section.get('children') or []:
-                            <li>${ subsection['display_name'] }</li>
-                        % endfor
-                    </ul>
+<%static:require_module_async module_name="js/courseware/course_outline_factory" class_name="CourseOutlineFactory">
+    CourseOutlineFactory('.block-tree');
+</%static:require_module_async>
+
+<section class="course-outline" id="main">
+    <ul class="block-tree" role="tree">
+        % for section in blocks.get('children') or []:
+            <li class="outline-item focusable" role="treeitem" tabindex="0" aria-expanded="true">${ section['display_name'] }</li>
+            <ul class="outline-item focusable" role="group" tabindex="0">
+                % for subsection in section.get('children') or []:
+                    <li class="outline-item focusable" role="treeitem" tabindex="0" aria-expanded="true">${ subsection['display_name'] }</li>
                 % endfor
             </ul>
         % endfor
diff --git a/requirements/edx/base.txt b/requirements/edx/base.txt
index f5455c8fa5..c165ac72bf 100644
--- a/requirements/edx/base.txt
+++ b/requirements/edx/base.txt
@@ -111,7 +111,9 @@ django-ratelimit-backend==1.0
 unicodecsv==0.9.4
 django-require==1.0.11
 pyuca==1.1
+web-fragments==0.1.0
 wrapt==1.10.5
+XBlock==0.4.14
 zendesk==1.1.1
 
 # This needs to be installed *after* Cython, which is in pre.txt