mirror of
https://github.com/moodle/moodle.git
synced 2025-08-06 17:36:38 +02:00
MDL-71037 course: Make sections collapsible for Topics/Weeks format.
This commit is contained in:
Ilya Tregubov
parent
5ea3545115
commit
f2e28c0561
5 changed files with 268 additions and 15 deletions
|
|
@ -152,6 +152,18 @@ class section implements renderable, templatable {
|
|||
}
|
||||
}
|
||||
|
||||
$coursedisplay = $course->coursedisplay ?? COURSE_DISPLAY_SINGLEPAGE;
|
||||
if ($coursedisplay == COURSE_DISPLAY_MULTIPAGE) {
|
||||
$data->iscoursedisplaymultipage = true;
|
||||
}
|
||||
|
||||
if ($course->id == SITEID) {
|
||||
$data->sitehome = true;
|
||||
}
|
||||
|
||||
// For now sections are always expanded. User preferences will be done in MDL-71211.
|
||||
$data->isactive = true;
|
||||
|
||||
if ($thissection->section == 0) {
|
||||
// Section zero is always visible only as a cmlist.
|
||||
$cmlist = new $this->cmlistclass($format, $thissection);
|
||||
|
|
|
|||
|
|
@ -91,10 +91,14 @@ class header implements renderable, templatable {
|
|||
|
||||
$coursedisplay = $course->coursedisplay ?? COURSE_DISPLAY_SINGLEPAGE;
|
||||
|
||||
if ($course->id == SITEID) {
|
||||
$data->sitehome = true;
|
||||
}
|
||||
|
||||
if (!$format->show_editor() && $coursedisplay == COURSE_DISPLAY_MULTIPAGE && empty($data->issinglesection)) {
|
||||
$data->url = course_get_url($course, $section->section);
|
||||
$data->name = get_section_name($course, $section);
|
||||
}
|
||||
$data->name = get_section_name($course, $section);
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,15 +70,17 @@
|
|||
"menu": "<a href=\"#\" class=\"d-inline-block dropdown-toggle icon-no-margin\">Edit<b class=\"caret\"></b></a>",
|
||||
"hasmenu": true
|
||||
},
|
||||
"cmcontrols": "[Add an activity or resource]"
|
||||
"cmcontrols": "[Add an activity or resource]",
|
||||
"iscoursedisplaymultipage": true,
|
||||
"sectionreturnid": 0,
|
||||
"isactive": true,
|
||||
"sitehome": false
|
||||
}
|
||||
}}
|
||||
<li id="section-{{num}}"
|
||||
class="section main {{#onlysummary}} section-summary {{/onlysummary}} clearfix
|
||||
{{#ishidden}} hidden {{/ishidden}} {{#iscurrent}} current {{/iscurrent}}
|
||||
{{#isstealth}} orphaned {{/isstealth}}"
|
||||
role="region"
|
||||
aria-labelledby="sectionid-{{id}}-title"
|
||||
data-sectionid="{{num}}"
|
||||
data-sectionreturnid="{{sectionreturnid}}"
|
||||
data-for="section"
|
||||
|
|
@ -92,8 +94,11 @@
|
|||
{{> core_courseformat/local/content/section/controlmenu }}
|
||||
{{/controlmenu}}
|
||||
</div>
|
||||
<div class="content">
|
||||
{{#header}} {{> core_courseformat/local/content/section/header }} {{/header}}
|
||||
<div id="coursecontentcollapse{{num}}"
|
||||
class="content {{^iscoursedisplaymultipage}}
|
||||
{{^sitehome}}course-content-item-content collapse {{#isactive}}show{{/isactive}}{{/sitehome}}
|
||||
{{/iscoursedisplaymultipage}}">
|
||||
{{#availability}}
|
||||
{{> core_courseformat/local/content/section/availability }}
|
||||
{{/availability}}
|
||||
|
|
|
|||
|
|
@ -21,17 +21,57 @@
|
|||
|
||||
Example context (json):
|
||||
{
|
||||
"id": 123,
|
||||
"name": "Section title",
|
||||
"title": "<a href=\"http://moodle/course/view.php?id=5#section-0\">Section title</a>",
|
||||
"url": "#",
|
||||
"ishidden": true
|
||||
"iscoursedisplaymultipage": true
|
||||
}
|
||||
}}
|
||||
|
||||
<h3 class="sectionid-{{id}}-title sectionname" data-for="section_title">
|
||||
{{#iscoursedisplaymultipage}}
|
||||
<h3 class="sectionid-{{id}}-title sectionname"
|
||||
data-for="section_title" data-id="{{id}}" data-number="{{num}}">
|
||||
{{#url}}
|
||||
<a href="{{{url}}}" class="{{#ishidden}} dimmed_text {{/ishidden}}">{{name}}</a>
|
||||
{{/url}}
|
||||
{{^url}}
|
||||
<span>{{{title}}}</span>
|
||||
{{/url}}
|
||||
</h3>
|
||||
</h3>
|
||||
{{/iscoursedisplaymultipage}}
|
||||
{{^iscoursedisplaymultipage}}
|
||||
{{#sitehome}}
|
||||
<h2 class="sectionid-{{id}}-title sectionname"
|
||||
data-for="section_title" data-id="{{id}}" data-number="{{num}}">
|
||||
{{#url}}
|
||||
<a href="{{{url}}}" class="{{#ishidden}} dimmed_text {{/ishidden}}">{{name}}</a>
|
||||
{{/url}}
|
||||
{{^url}}
|
||||
<span>{{{title}}}</span>
|
||||
{{/url}}
|
||||
</h2>
|
||||
{{/sitehome}}
|
||||
{{^sitehome}}
|
||||
<div class="d-flex">
|
||||
<a role="button" data-toggle="collapse"
|
||||
href="#coursecontentcollapse{{num}}"
|
||||
id="collapssesection{{num}}"
|
||||
aria-expanded="{{#isactive}}true{{/isactive}}{{^isactive}}false{{/isactive}}"
|
||||
aria-controls="coursecontentcollapse{{num}}"
|
||||
class="btn btn-icon mr-1 icons-collapse-expand {{^isactive}}collapsed{{/isactive}}"
|
||||
aria-label="{{name}}">
|
||||
<span class="expanded-icon icon-no-margin p-2" data-toggle="tooltip" title="{{#str}} collapse, core {{/str}}">
|
||||
{{#pix}} t/expandedchevron, core {{/pix}}
|
||||
</span>
|
||||
<span class="collapsed-icon icon-no-margin p-2" data-toggle="tooltip" title="{{#str}} expand, core {{/str}}">
|
||||
{{#pix}} t/collapsedchevron, core {{/pix}}
|
||||
</span>
|
||||
</a>
|
||||
<h3 class="sectionid-{{id}}-title sectionname course-content-item {{^visible}}dimmed{{/visible}}"
|
||||
id="coursecontentsection{{num}}" data-for="section_title" data-id="{{id}}" data-number="{{num}}">
|
||||
{{{title}}}
|
||||
</h3>
|
||||
</div>
|
||||
{{/sitehome}}
|
||||
{{/iscoursedisplaymultipage}}
|
||||
|
|
|
|||
192
course/tests/behat/course_collapse_sections.feature
Normal file
192
course/tests/behat/course_collapse_sections.feature
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
@core @core_course
|
||||
Feature: Collapse course sections
|
||||
In order to quickly access the course structure
|
||||
As a user
|
||||
I need to collapse/extend sections for Topics/Weeks formats.
|
||||
|
||||
Background:
|
||||
Given the following "users" exist:
|
||||
| username | firstname | lastname | email |
|
||||
| teacher1 | Teacher | 1 | teacher1@example.com |
|
||||
| student1 | Student | 1 | student1@example.com |
|
||||
And the following "course" exists:
|
||||
| fullname | Course 1 |
|
||||
| shortname | C1 |
|
||||
| category | 0 |
|
||||
| enablecompletion | 1 |
|
||||
| numsections | 5 |
|
||||
| startdate | 957139200 |
|
||||
| enablecompletion | 1 |
|
||||
And the following "activities" exist:
|
||||
| activity | name | intro | course | idnumber | section | completion |
|
||||
| assign | Assignment 1 | Test assignment description1 | C1 | assign1 | 1 | 1 |
|
||||
| assign | Assignment 2 | Test assignment description2 | C1 | assign2 | 2 | 1 |
|
||||
| book | Book 2 | Test book description2 | C1 | book2 | 2 | 1 |
|
||||
| book | Book 3 | Test book description3 | C1 | book3 | 3 | 1 |
|
||||
| forum | Forum 4 | Test forum description4 | C1 | forum4 | 4 | 1 |
|
||||
| forum | Forum 5 | Test forum description5 | C1 | forum5 | 5 | 1 |
|
||||
And the following "course enrolments" exist:
|
||||
| user | course | role |
|
||||
| student1 | C1 | student |
|
||||
| teacher1 | C1 | editingteacher |
|
||||
And I log in as "admin"
|
||||
And I am on "Course 1" course homepage with editing mode on
|
||||
When I edit the section "4"
|
||||
And I expand all fieldsets
|
||||
And I press "Add restriction..."
|
||||
And I click on "Date" "button" in the "Add restriction..." "dialogue"
|
||||
And I set the field "direction" to "until"
|
||||
And I set the field "x[year]" to "2013"
|
||||
And I press "Save changes"
|
||||
And I hide section "5"
|
||||
And I log out
|
||||
|
||||
@javascript
|
||||
Scenario: No chevron on site home
|
||||
Given I log in as "admin"
|
||||
And I am on site homepage
|
||||
And I turn editing mode on
|
||||
And I add a "Forum" to section "1" and I fill the form with:
|
||||
| Forum name | Test forum post backup name |
|
||||
| Description | Test forum post backup description |
|
||||
And I click on "Edit summary" "link" in the "region-main" "region"
|
||||
And I click on "Custom" "checkbox"
|
||||
And I set the field "New value for Section name" to "New section name"
|
||||
When I press "Save changes"
|
||||
Then "[data-toggle=collapse]" "css_element" should not exist in the "region-main" "region"
|
||||
|
||||
@javascript
|
||||
Scenario: Expand/collapse sections for Topics format.
|
||||
Given I log in as "student1"
|
||||
And I am on "Course 1" course homepage
|
||||
And "[data-toggle=collapse]" "css_element" should exist in the "region-main" "region"
|
||||
And I should see "Assignment 1" in the "region-main" "region"
|
||||
And I should see "Assignment 2" in the "region-main" "region"
|
||||
And I should see "Book 2" in the "region-main" "region"
|
||||
And I should see "Book 3" in the "region-main" "region"
|
||||
And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
|
||||
And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
|
||||
And I should not see "Forum 4"
|
||||
And I should see "Not available" in the "#section-5 .availabilityinfo" "css_element"
|
||||
And I should not see "Forum 5"
|
||||
When I click on "#collapssesection3" "css_element"
|
||||
And I should see "Assignment 1" in the "region-main" "region"
|
||||
And I should see "Assignment 2" in the "region-main" "region"
|
||||
And I should see "Book 2" in the "region-main" "region"
|
||||
And I should not see "Book 3" in the "region-main" "region"
|
||||
And I click on "#collapssesection1" "css_element"
|
||||
And I click on "#collapssesection2" "css_element"
|
||||
And I click on "#collapssesection4" "css_element"
|
||||
And I click on "#collapssesection5" "css_element"
|
||||
Then I should not see "Assignment 1" in the "region-main" "region"
|
||||
And I should not see "Assignment 2" in the "region-main" "region"
|
||||
And I should not see "Book 2" in the "region-main" "region"
|
||||
And I should not see "Book 3" in the "region-main" "region"
|
||||
And I should not see "Available until" in the "#section-4 .availabilityinfo" "css_element"
|
||||
And I should not see "Not available" in the "#section-5 .availabilityinfo" "css_element"
|
||||
And I click on "#collapssesection1" "css_element"
|
||||
And I click on "#collapssesection2" "css_element"
|
||||
And I click on "#collapssesection3" "css_element"
|
||||
And I click on "#collapssesection4" "css_element"
|
||||
And I click on "#collapssesection5" "css_element"
|
||||
And I should see "Assignment 1" in the "region-main" "region"
|
||||
And I should see "Assignment 2" in the "region-main" "region"
|
||||
And I should see "Book 2" in the "region-main" "region"
|
||||
And I should see "Book 3" in the "region-main" "region"
|
||||
And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
|
||||
And I should see "Not available" in the "#section-5 .availabilityinfo" "css_element"
|
||||
|
||||
@javascript
|
||||
Scenario: Expand/collapse sections for Weeks format.
|
||||
Given I log in as "teacher1"
|
||||
And I am on "Course 1" course homepage
|
||||
When I navigate to "Settings" in current page administration
|
||||
And I expand all fieldsets
|
||||
And I set the following fields to these values:
|
||||
| Format | Weekly format |
|
||||
And I press "Save and display"
|
||||
And I should see "Assignment 1" in the "region-main" "region"
|
||||
And I should see "Assignment 2" in the "region-main" "region"
|
||||
And I should see "Book 2" in the "region-main" "region"
|
||||
And I should see "Book 3" in the "region-main" "region"
|
||||
And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
|
||||
And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
|
||||
And I should see "Forum 4"
|
||||
And I should see "Hidden from students" in the "#section-5 .availabilityinfo" "css_element"
|
||||
And I should see "Forum 5"
|
||||
When I click on "#collapssesection3" "css_element"
|
||||
And I should see "Assignment 1" in the "region-main" "region"
|
||||
And I should see "Assignment 2" in the "region-main" "region"
|
||||
And I should see "Book 2" in the "region-main" "region"
|
||||
And I should not see "Book 3" in the "region-main" "region"
|
||||
And I click on "#collapssesection1" "css_element"
|
||||
And I click on "#collapssesection2" "css_element"
|
||||
And I click on "#collapssesection4" "css_element"
|
||||
And I click on "#collapssesection5" "css_element"
|
||||
Then I should not see "Assignment 1" in the "region-main" "region"
|
||||
And I should not see "Assignment 2" in the "region-main" "region"
|
||||
And I should not see "Book 2" in the "region-main" "region"
|
||||
And I should not see "Book 3" in the "region-main" "region"
|
||||
And I should not see "Available until" in the "#section-4 .availabilityinfo" "css_element"
|
||||
And I should not see "Not available" in the "#section-5 .availabilityinfo" "css_element"
|
||||
And I click on "#collapssesection1" "css_element"
|
||||
And I click on "#collapssesection2" "css_element"
|
||||
And I click on "#collapssesection3" "css_element"
|
||||
And I click on "#collapssesection4" "css_element"
|
||||
And I click on "#collapssesection5" "css_element"
|
||||
And I should see "Assignment 1" in the "region-main" "region"
|
||||
And I should see "Assignment 2" in the "region-main" "region"
|
||||
And I should see "Book 2" in the "region-main" "region"
|
||||
And I should see "Book 3" in the "region-main" "region"
|
||||
And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
|
||||
And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
|
||||
And I should see "Forum 4"
|
||||
And I should see "Hidden from students" in the "#section-5 .availabilityinfo" "css_element"
|
||||
And I should see "Forum 5"
|
||||
|
||||
@javascript
|
||||
Scenario: Users don't see chevron on one section per page for Topics format
|
||||
Given I log in as "teacher1"
|
||||
And I am on "Course 1" course homepage
|
||||
When I navigate to "Settings" in current page administration
|
||||
And I expand all fieldsets
|
||||
And I set the following fields to these values:
|
||||
| Course layout | Show one section per page |
|
||||
And I press "Save and display"
|
||||
And "[data-toggle=collapse]" "css_element" should not exist in the "region-main" "region"
|
||||
And I follow "Topic 2"
|
||||
And I should see "Assignment 2" in the "region-main" "region"
|
||||
And "[data-toggle=collapse]" "css_element" should not exist in the "region-main" "region"
|
||||
Then "Topic 1" "section" should not exist
|
||||
And "Topic 3" "section" should not exist
|
||||
And I am on "Course 1" course homepage with editing mode on
|
||||
And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
|
||||
And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
|
||||
And I should see "Forum 4"
|
||||
And I should see "Hidden from students" in the "#section-5 .availabilityinfo" "css_element"
|
||||
And I should see "Forum 5"
|
||||
|
||||
@javascript
|
||||
Scenario: Users don't see chevron on one section per page for Weeks format
|
||||
Given I log in as "teacher1"
|
||||
And I am on "Course 1" course homepage
|
||||
When I navigate to "Settings" in current page administration
|
||||
And I expand all fieldsets
|
||||
And I set the following fields to these values:
|
||||
| Format | Weekly format |
|
||||
| Course layout | Show one section per page |
|
||||
And I press "Save and display"
|
||||
And "[data-toggle=collapse]" "css_element" should not exist in the "region-main" "region"
|
||||
And I follow "8 May - 14 May"
|
||||
And I should see "Assignment 2" in the "region-main" "region"
|
||||
And "[data-toggle=collapse]" "css_element" should not exist in the "region-main" "region"
|
||||
Then "1 May - 7 May" "section" should not exist
|
||||
And "15 May - 21 May" "section" should not exist
|
||||
And I log out
|
||||
And I log in as "student1"
|
||||
And I am on "Course 1" course homepage
|
||||
And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
|
||||
And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
|
||||
And I should not see "Forum 4"
|
||||
And I should see "Not available" in the "#section-5 .availabilityinfo" "css_element"
|
||||
And I should not see "Forum 5"
|
||||
Loading…
Add table
Add a link
Reference in a new issue