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) {
|
if ($thissection->section == 0) {
|
||||||
// Section zero is always visible only as a cmlist.
|
// Section zero is always visible only as a cmlist.
|
||||||
$cmlist = new $this->cmlistclass($format, $thissection);
|
$cmlist = new $this->cmlistclass($format, $thissection);
|
||||||
|
|
|
||||||
|
|
@ -91,10 +91,14 @@ class header implements renderable, templatable {
|
||||||
|
|
||||||
$coursedisplay = $course->coursedisplay ?? COURSE_DISPLAY_SINGLEPAGE;
|
$coursedisplay = $course->coursedisplay ?? COURSE_DISPLAY_SINGLEPAGE;
|
||||||
|
|
||||||
|
if ($course->id == SITEID) {
|
||||||
|
$data->sitehome = true;
|
||||||
|
}
|
||||||
|
|
||||||
if (!$format->show_editor() && $coursedisplay == COURSE_DISPLAY_MULTIPAGE && empty($data->issinglesection)) {
|
if (!$format->show_editor() && $coursedisplay == COURSE_DISPLAY_MULTIPAGE && empty($data->issinglesection)) {
|
||||||
$data->url = course_get_url($course, $section->section);
|
$data->url = course_get_url($course, $section->section);
|
||||||
$data->name = get_section_name($course, $section);
|
|
||||||
}
|
}
|
||||||
|
$data->name = get_section_name($course, $section);
|
||||||
|
|
||||||
return $data;
|
return $data;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -70,15 +70,17 @@
|
||||||
"menu": "<a href=\"#\" class=\"d-inline-block dropdown-toggle icon-no-margin\">Edit<b class=\"caret\"></b></a>",
|
"menu": "<a href=\"#\" class=\"d-inline-block dropdown-toggle icon-no-margin\">Edit<b class=\"caret\"></b></a>",
|
||||||
"hasmenu": true
|
"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}}"
|
<li id="section-{{num}}"
|
||||||
class="section main {{#onlysummary}} section-summary {{/onlysummary}} clearfix
|
class="section main {{#onlysummary}} section-summary {{/onlysummary}} clearfix
|
||||||
{{#ishidden}} hidden {{/ishidden}} {{#iscurrent}} current {{/iscurrent}}
|
{{#ishidden}} hidden {{/ishidden}} {{#iscurrent}} current {{/iscurrent}}
|
||||||
{{#isstealth}} orphaned {{/isstealth}}"
|
{{#isstealth}} orphaned {{/isstealth}}"
|
||||||
role="region"
|
|
||||||
aria-labelledby="sectionid-{{id}}-title"
|
|
||||||
data-sectionid="{{num}}"
|
data-sectionid="{{num}}"
|
||||||
data-sectionreturnid="{{sectionreturnid}}"
|
data-sectionreturnid="{{sectionreturnid}}"
|
||||||
data-for="section"
|
data-for="section"
|
||||||
|
|
@ -92,8 +94,11 @@
|
||||||
{{> core_courseformat/local/content/section/controlmenu }}
|
{{> core_courseformat/local/content/section/controlmenu }}
|
||||||
{{/controlmenu}}
|
{{/controlmenu}}
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
{{#header}} {{> core_courseformat/local/content/section/header }} {{/header}}
|
||||||
{{#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}}
|
{{#availability}}
|
||||||
{{> core_courseformat/local/content/section/availability }}
|
{{> core_courseformat/local/content/section/availability }}
|
||||||
{{/availability}}
|
{{/availability}}
|
||||||
|
|
|
||||||
|
|
@ -21,17 +21,57 @@
|
||||||
|
|
||||||
Example context (json):
|
Example context (json):
|
||||||
{
|
{
|
||||||
|
"id": 123,
|
||||||
"name": "Section title",
|
"name": "Section title",
|
||||||
|
"title": "<a href=\"http://moodle/course/view.php?id=5#section-0\">Section title</a>",
|
||||||
"url": "#",
|
"url": "#",
|
||||||
"ishidden": true
|
"iscoursedisplaymultipage": true
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
|
||||||
<h3 class="sectionid-{{id}}-title sectionname" data-for="section_title">
|
{{#iscoursedisplaymultipage}}
|
||||||
{{#url}}
|
<h3 class="sectionid-{{id}}-title sectionname"
|
||||||
<a href="{{{url}}}" class="{{#ishidden}} dimmed_text {{/ishidden}}">{{name}}</a>
|
data-for="section_title" data-id="{{id}}" data-number="{{num}}">
|
||||||
{{/url}}
|
{{#url}}
|
||||||
{{^url}}
|
<a href="{{{url}}}" class="{{#ishidden}} dimmed_text {{/ishidden}}">{{name}}</a>
|
||||||
<span>{{{title}}}</span>
|
{{/url}}
|
||||||
{{/url}}
|
{{^url}}
|
||||||
</h3>
|
<span>{{{title}}}</span>
|
||||||
|
{{/url}}
|
||||||
|
</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