Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

EDUCATOR-2451 | Add expand/collapse all button to course outline.

Browse Source
This commit is contained in:
Alex Dusenbery
2018-04-03 14:23:27 -04:00
committed by Alex Dusenbery
parent e60e792720
commit a515277251
4 changed files with 73 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
lms/static/sass/features/_course-experience.scss
View File

@@ -426,6 +426,18 @@ button.accordion-trigger, button.prerequisite-button {
}
}
#expand-collapse-outline-all-button {
float: right;
background-color: $white;
color: $black;
cursor: pointer;
}
// extra padding for expand/collapse text change
.expand-collapse-outline-all-extra-padding {
padding: 0 4px 0 4px;
}
.accordion-panel.is-hidden {
display: none;
}

59
openedx/features/course_experience/static/course_experience/js/CourseOutline.js
View File

@@ -34,6 +34,26 @@ export class CourseOutline { // eslint-disable-line import/prefer-default-expor
}),
);
function expandSection(sectionToggleButton) {
const $toggleButtonChevron = $(sectionToggleButton).children('.fa-chevron-right');
const $contentPanel = $(document.getElementById(sectionToggleButton.getAttribute('aria-controls')));
$contentPanel.slideDown();
$contentPanel.removeClass('is-hidden');
$toggleButtonChevron.addClass('fa-rotate-90');
sectionToggleButton.setAttribute('aria-expanded', 'true');
}
function collapseSection(sectionToggleButton) {
const $toggleButtonChevron = $(sectionToggleButton).children('.fa-chevron-right');
const $contentPanel = $(document.getElementById(sectionToggleButton.getAttribute('aria-controls')));
$contentPanel.slideUp();
$contentPanel.addClass('is-hidden');
$toggleButtonChevron.removeClass('fa-rotate-90');
sectionToggleButton.setAttribute('aria-expanded', 'false');
}
// TODO: EDUCATOR-2283 Remove check for waffle flag after it is turned on.
if (newCourseOutlineEnabled) {
[...document.querySelectorAll(('.accordion'))]
@@ -42,28 +62,41 @@ export class CourseOutline { // eslint-disable-line import/prefer-default-expor
sections.forEach(section => section.addEventListener('click', (event) => {
const sectionToggleButton = event.currentTarget;
const $toggleButtonChevron = $(sectionToggleButton).children('.fa-chevron-right');
if (sectionToggleButton.classList.contains('accordion-trigger')) {
const isExpanded = sectionToggleButton.getAttribute('aria-expanded') === 'true';
const $contentPanel = $(document.getElementById(sectionToggleButton.getAttribute('aria-controls')));
if (!isExpanded) {
$contentPanel.slideDown();
$contentPanel.removeClass('is-hidden');
$toggleButtonChevron.addClass('fa-rotate-90');
sectionToggleButton.setAttribute('aria-expanded', 'true');
expandSection(sectionToggleButton);
} else if (isExpanded) {
$contentPanel.slideUp();
$contentPanel.addClass('is-hidden');
$toggleButtonChevron.removeClass('fa-rotate-90');
sectionToggleButton.setAttribute('aria-expanded', 'false');
collapseSection(sectionToggleButton);
}
event.stopImmediatePropagation();
}
}));
});
const toggleAllButton = document.querySelector('#expand-collapse-outline-all-button');
const toggleAllSpan = document.querySelector('#expand-collapse-outline-all-span');
const extraPaddingClass = 'expand-collapse-outline-all-extra-padding';
toggleAllButton.addEventListener('click', (event) => {
const toggleAllExpanded = toggleAllButton.getAttribute('aria-expanded') === 'true';
let sectionAction;
if (toggleAllExpanded) {
toggleAllButton.setAttribute('aria-expanded', 'false');
sectionAction = collapseSection;
toggleAllSpan.classList.add(extraPaddingClass);
toggleAllSpan.innerText = 'Expand All';
} else {
toggleAllButton.setAttribute('aria-expanded', 'true');
sectionAction = expandSection;
toggleAllSpan.classList.remove(extraPaddingClass);
toggleAllSpan.innerText = 'Collapse All';
}
const sections = Array.prototype.slice.call(document.querySelectorAll('.accordion-trigger'));
sections.forEach((sectionToggleButton) => {
sectionAction(sectionToggleButton);
});
event.stopImmediatePropagation();
});
}
}
}

12
openedx/features/course_experience/templates/course_experience/course-outline-fragment-new.html
View File

@@ -14,7 +14,17 @@ from openedx.core.djangolib.markup import HTML, Text
<main role="main" class="course-outline-visualprogress" id="main" tabindex="-1">
% if blocks.get('children'):
<ol class="block-tree accordion" role="presentation">
<button class="btn btn-primary"
id="expand-collapse-outline-all-button"
aria-expanded="false"
aria-controls="course-outline-block-tree"
>
<span class="expand-collapse-outline-all-extra-padding" id="expand-collapse-outline-all-span">${_("Expand All")}</span>
</button>
<ol class="block-tree accordion"
id="course-outline-block-tree"
role="presentation"
aria-labeledby="expand-collapse-outline-all-button">
% for section in blocks.get('children'):
<% section_is_auto_opened = section.get('resume_block') is True %>
<li

4
openedx/features/course_experience/tests/views/test_course_outline.py
View File

@@ -567,6 +567,10 @@ class TestCourseOutlineResumeCourse(SharedModuleStoreTestCase, CompletionWaffleT
self.assertTrue(get_sequential_button(text_type(sequential1.location), False) in stripped_response)
self.assertTrue(get_sequential_button(text_type(sequential2.location), True) in stripped_response)
content = pq(response_content)
button = content('#expand-collapse-outline-all-button')
self.assertEqual('Expand All', button.children()[0].text)
def test_user_enrolled_after_completion_collection(self):
"""
Tests that the _completion_data_collection_start() method returns the created