mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-14 13:02:07 +02:00
Code Issues Projects Releases Wiki Activity

MDL-71212 core_course: adds controls to the course index drawer.

Browse Source
This commit is contained in:
Stefan Topfstedt 2023-06-12 09:07:38 -07:00
parent e998f14061
commit 7b04638c52
29 changed files with 258 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/tool/lp/tests/behat/course_competencies.feature
View File

@ -35,7 +35,7 @@ Feature: See the competencies for an activity on the course competencies page.
And I select "Test-Comp2" of the competency tree
And I click on "Add" "button" in the "Competency picker" "dialogue"
And I am on the PageName1 "page activity editing" page
And I follow "Expand all"
And I click on "Expand all" "link" in the "region-main" "region"
And I set the field "Course competencies" to "Test-Comp1"
And I press "Save and return to course"
And I log out

2
badges/tests/behat/criteria_activity.feature
View File

@ -83,7 +83,7 @@ Feature: Award badges based on activity completion
And I follow "Course Badge"
And I select "Criteria" from the "jump" singleselect
And I set the field "type" to "Activity completion"
And I click on "Expand all" "link"
And I click on "Expand all" "link" in the "region-main" "region"
And I set the field "Quiz - Test quiz name" to "1"
And I set the field "<aggregationcriteria>" to "1"
And I press "Save"

6
completion/tests/behat/activity_completion_criteria.feature
View File

@ -30,7 +30,7 @@ Feature: Allow to mark course as completed without cron for activity completion
And I set the field "Enable completion tracking" to "Yes"
And I click on "Save and display" "button"
And I am on the "Test assignment name" "assign activity editing" page
And I follow "Expand all"
And I click on "Expand all" "link" in the "region-main" "region"
And I set the field "Completion tracking" to "Show activity as complete when conditions are met"
And I set the field "completionusegrade" to "1"
And I press "Save and return to course"
@ -42,7 +42,7 @@ Feature: Allow to mark course as completed without cron for activity completion
@javascript
Scenario: Update course completion when student marks activity as complete
Given I am on the "Test assignment name" "assign activity editing" page logged in as teacher1
And I follow "Expand all"
And I click on "Expand all" "link" in the "region-main" "region"
And I set the field "Completion tracking" to "Students can manually mark the activity as completed"
And I press "Save and return to course"
When I am on the "Completion course" course page logged in as student1
@ -72,7 +72,7 @@ Feature: Allow to mark course as completed without cron for activity completion
| name | Test assignment name2 |
| idnumber | assign2 |
And I am on the "Test assignment name2" "assign activity editing" page logged in as admin
And I follow "Expand all"
And I click on "Expand all" "link" in the "region-main" "region"
And I set the field "Completion tracking" to "Show activity as complete when conditions are met"
And I set the field "completionusegrade" to "1"
And I press "Save and return to course"

2
course/format/amd/build/local/courseeditor/mutations.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
course/format/amd/build/local/courseeditor/mutations.min.js.map
View File

File diff suppressed because one or more lines are too long

11
course/format/amd/src/local/courseeditor/mutations.js
View File

@ -501,6 +501,17 @@ export default class {
await this._callEditWebservice('section_index_collapsed', course.id, collapsedIds);
}
/**
* Update the course index collapsed attribute of all sections.
*
* @param {StateManager} stateManager the current state manager
* @param {boolean} collapsed the new collapsed value
*/
async allSectionsIndexCollapsed(stateManager, collapsed) {
const sectionIds = stateManager.getIds('section');
this.sectionIndexCollapsed(stateManager, sectionIds, collapsed);
}
/**
* Update the course content collapsed attribute of some sections.
*

29
course/format/tests/behat/course_courseindex.feature
View File

@ -186,6 +186,35 @@ Feature: Course index depending on role
And I should see "Topic 3" in the "courseindex-content" "region"
And I should see "Activity sample 3" in the "courseindex-content" "region"
@javascript
Scenario: Course index toggling all sections
When I am on the "Course 1" course page logged in as teacher1
# Sections should be opened by default.
Then I should see "Topic 1" in the "courseindex-content" "region"
And I should see "Activity sample 1" in the "courseindex-content" "region"
And I should see "Topic 2" in the "courseindex-content" "region"
And I should see "Activity sample 2" in the "courseindex-content" "region"
And I should see "Topic 3" in the "courseindex-content" "region"
And I should see "Activity sample 3" in the "courseindex-content" "region"
# Collapse all sections
And I click on "Course index options" "button" in the "#courseindexdrawercontrols" "css_element"
And I click on "Collapse all" "link" in the "#courseindexdrawercontrols" "css_element"
And I should see "Topic 1" in the "courseindex-content" "region"
And I should not see "Activity sample 1" in the "courseindex-content" "region"
And I should see "Topic 2" in the "courseindex-content" "region"
And I should not see "Activity sample 2" in the "courseindex-content" "region"
And I should see "Topic 3" in the "courseindex-content" "region"
And I should not see "Activity sample 3" in the "courseindex-content" "region"
# Expand all sections
And I click on "Course index options" "button" in the "#courseindexdrawercontrols" "css_element"
And I click on "Expand all" "link" in the "#courseindexdrawercontrols" "css_element"
And I should see "Topic 1" in the "courseindex-content" "region"
And I should see "Activity sample 1" in the "courseindex-content" "region"
And I should see "Topic 2" in the "courseindex-content" "region"
And I should see "Activity sample 2" in the "courseindex-content" "region"
And I should see "Topic 3" in the "courseindex-content" "region"
And I should see "Activity sample 3" in the "courseindex-content" "region"
@javascript
Scenario: Course index section preferences
When I am on the "C1" "Course" page logged in as "teacher1"

3
course/format/tests/behat/courseindex_keyboardnav.feature
View File

@ -23,11 +23,13 @@ Feature: Verify that courseindex is usable with the keyboard
And I should see "Topic 1" in the "courseindex-content" "region"
And the focused element is "[data-preference='drawer-open-index'] .drawertoggle" "css_element"
And I press the tab key
And I press the tab key
And the focused element is ".courseindex-section" "css_element"
@javascript
Scenario: General focus on open course index.
When I press the shift tab key
And I press the shift tab key
And the focused element is "[data-preference='drawer-open-index'] .drawertoggle" "css_element"
And I press enter
Then I should not see "Topic 1" in the "courseindex-content" "region"
@ -35,6 +37,7 @@ Feature: Verify that courseindex is usable with the keyboard
@javascript @accessibility
Scenario: Course index should be accessible.
When I press the shift tab key
And I press the shift tab key
And I press enter
Then the page should meet accessibility standards with "wcag143" extra tests
And I press enter

1
lang/en/courseformat.php
View File

@ -45,6 +45,7 @@ $string['cmmove_info'] = 'Move {$a} after';
$string['cmsmove_title'] = 'Move selected activities';
$string['cmsmove_info'] = 'Move {$a} activities after';
$string['courseindex'] = 'Course index';
$string['courseindexoptions'] = 'Course index options';
$string['nobulkaction'] = 'No bulk actions available';
$string['preference:coursesectionspreferences'] = 'Section user preferences for course {$a}';
$string['privacy:metadata:preference:coursesectionspreferences'] = 'Section user preferences like collapsed and expanded.';

2
lib/amd/build/local/reactive/statemanager.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
lib/amd/build/local/reactive/statemanager.min.js.map
View File

File diff suppressed because one or more lines are too long

15
lib/amd/src/local/reactive/statemanager.js
View File

@ -467,6 +467,21 @@ export default class StateManager {
return current;
}
/**
* Get all element ids from the given state.
*
* @param {String} name the state object name
* @return {Array} the element ids.
*/
getIds(name) {
const state = this.state;
const current = state[name];
if (!(current instanceof StateMap)) {
throw Error(`${name} is not an instance of StateMap`);
}
return [...state[name].keys()];
}
/**
* Register a state modification and generate the necessary events.
*

2
mod/assign/tests/behat/hide_grader.feature
View File

@ -59,7 +59,7 @@ Feature: Hide grader identities identity from students
# Enable the hidden grader option
Given I am on the "Test assignment name" Activity page logged in as teacher1
And I navigate to "Settings" in current page administration
And I follow "Expand all"
And I click on "Expand all" "link" in the "region-main" "region"
And I set the field "Hide grader identity from students" to "1"
And I press "Save and return to course"
And I log out

2
mod/assign/tests/behat/remove_submission.feature
View File

@ -132,7 +132,7 @@ Feature: Remove a submission
| gradingduedate_enabled | 0 |
And I am on the "Test assignment with time limit" Activity page logged in as admin
And I navigate to "Settings" in current page administration
And I follow "Expand all"
And I click on "Expand all" "link" in the "region-main" "region"
# Set 'Time limit' to 5 seconds.
And I set the field "timelimit[enabled]" to "1"
And I set the field "timelimit[number]" to "5"

14
mod/assign/tests/behat/set_availability.feature
View File

@ -47,7 +47,7 @@ Feature: Set availability dates for an assignment
Scenario: Student cannot submit an assignment prior to the 'allow submissions from' date
Given I am on the "Assignment name" Activity page logged in as teacher1
And I navigate to "Settings" in current page administration
And I follow "Expand all"
And I click on "Expand all" "link" in the "region-main" "region"
# Set 'Allow submissions from' to tomorrow at noon.
And I set the field "Allow submissions from" to "##tomorrow noon##"
And I press "Save and return to course"
@ -79,7 +79,7 @@ Feature: Set availability dates for an assignment
Scenario: Student can submit an assignment before the due date
Given I am on the "Assignment name" Activity page logged in as teacher1
And I navigate to "Settings" in current page administration
And I follow "Expand all"
And I click on "Expand all" "link" in the "region-main" "region"
# Set 'Allow submissions from' to now.
And I set the field "Allow submissions from" to "##now##"
# Set 'Due date' to 2 days 5 hours 30 minutes in the future.
@ -107,7 +107,7 @@ Feature: Set availability dates for an assignment
Scenario: Student can submit an assignment after the due date and the submission is marked as late
Given I am on the "Assignment name" Activity page logged in as teacher1
And I navigate to "Settings" in current page administration
And I follow "Expand all"
And I click on "Expand all" "link" in the "region-main" "region"
# Set 'Allow submissions from' to 3 days ago.
And I set the field "Allow submissions from" to "##3 days ago##"
# Set 'Due date' to 2 days 5 hours 30 minutes ago.
@ -144,7 +144,7 @@ Feature: Set availability dates for an assignment
And I log out
And I am on the "Assignment name" Activity page logged in as teacher1
And I navigate to "Settings" in current page administration
And I follow "Expand all"
And I click on "Expand all" "link" in the "region-main" "region"
# Set 'Time limit' to 20 seconds.
And I set the field "timelimit[enabled]" to "1"
And I set the field "timelimit[number]" to "20"
@ -173,7 +173,7 @@ Feature: Set availability dates for an assignment
And I log out
And I am on the "Assignment name" Activity page logged in as teacher1
And I navigate to "Settings" in current page administration
And I follow "Expand all"
And I click on "Expand all" "link" in the "region-main" "region"
# Set 'Time limit' to 5 seconds.
And I set the field "timelimit[enabled]" to "1"
And I set the field "timelimit[number]" to "5"
@ -198,7 +198,7 @@ Feature: Set availability dates for an assignment
Scenario: Student cannot submit an assignment after the cut-off date
Given I am on the "Assignment name" Activity page logged in as teacher1
And I navigate to "Settings" in current page administration
And I follow "Expand all"
And I click on "Expand all" "link" in the "region-main" "region"
# Set 'Allow submissions from' to 3 days ago.
And I set the field "Allow submissions from" to "##3 days ago##"
# Set 'Due date' to 2 days 5 hours 30 minutes ago.
@ -222,7 +222,7 @@ Feature: Set availability dates for an assignment
Scenario: Late submission will be calculated only when the student starts the assignment
Given I am on the "Test late assignment with time limit" Activity page logged in as admin
And I navigate to "Settings" in current page administration
And I follow "Expand all"
And I click on "Expand all" "link" in the "region-main" "region"
# Set 'Time limit' to 5 seconds.
And I set the field "timelimit[enabled]" to "1"
And I set the field "timelimit[number]" to "5"

2
mod/bigbluebuttonbn/tests/behat/guest_access.feature
View File

@ -30,7 +30,7 @@ Feature: Guest access allows external users to connect to a meeting
| bigbluebuttonbn_guestaccess_enabled | 1 |
When I am on the "RoomRecordings" "bigbluebuttonbn activity editing" page logged in as "admin"
Then I should see "Guest access"
Then I click on "Expand all" "link"
And I click on "Expand all" "link" in the "region-main" "region"
Then I should see "Allow guest access"
And I should not see "Meeting link"
And I should not see "Meeting password"

2
mod/workshop/tests/behat/workshop_late_submission.feature
View File

@ -43,7 +43,7 @@ Feature: Workshop 'Late submissions are allowed' task
When I am on the "TestWorkshop1" "workshop activity" page logged in as teacher1
Then I should see "Late submissions are allowed"
And I navigate to "Settings" in current page administration
And I follow "Expand all"
And I click on "Expand all" "link" in the "region-main" "region"
And I set the field "id_submissionend_day" to "1"
And I set the field "id_submissionend_month" to "January"
And I set the field "id_submissionend_year" to "2018"

2
question/bank/customfields/tests/behat/customfield_question.feature
View File

@ -42,7 +42,7 @@ Feature: A teacher can edit question with custom fields
Scenario: Edit a previously created question and see the custom field in the overview table and in the question preview.
When I choose "Edit question" action for "First question" in the question bank
And I should see "Category for test"
And I click on "Expand all" "link"
And I click on "Expand all" "link" in the "region-main" "region"
And I should see "Field 1"
And I set the following fields to these values:
| Field 1 | custom field text |

2
question/bank/customfields/tests/behat/customfield_question_visbility.feature
View File

@ -43,7 +43,7 @@ Feature: The visibility of question custom fields control where they are display
Scenario: Display custom question fields to teachers based on their visibility.
When I choose "Edit question" action for "First question" in the question bank
And I should see "Category for test"
And I click on "Expand all" "link"
And I click on "Expand all" "link" in the "region-main" "region"
And I should see "Field 1"
And I should see "Field 2"
And I should see "Field 3"

2
report/competency/tests/behat/breakdown_by_activity.feature
View File

@ -42,7 +42,7 @@ Feature: See the competencies for an activity
And I select "Test-Comp2" of the competency tree
And I click on "Add" "button" in the "Competency picker" "dialogue"
And I am on the PageName1 "page activity editing" page
And I follow "Expand all"
And I click on "Expand all" "link" in the "region-main" "region"
And I set the field "Course competencies" to "Test-Comp1"
And I press "Save and return to course"

11
theme/boost/amd/build/courseindexdrawercontrols.min.js vendored Normal file
View File

@ -0,0 +1,11 @@
define("theme_boost/courseindexdrawercontrols",["exports","core/reactive","core_courseformat/courseeditor"],(function(_exports,_reactive,_courseeditor){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;
/**
* Controls for the course index drawer, such as expand-all/collapse-all sections.
*
* @module theme_boost/courseindexdrawercontrols
* @copyright 2023 Stefan Topfstedt
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
class Component extends _reactive.BaseComponent{create(){this.name="courseindexdrawercontrols",this.selectors={COLLAPSEALL:'[data-action="collapseallcourseindexsections"]',EXPANDALL:'[data-action="expandallcourseindexsections"]'}}static init(target,selectors){return new Component({element:document.getElementById(target),reactive:(0,_courseeditor.getCurrentCourseEditor)(),selectors:selectors})}stateReady(){const expandAllBtn=this.getElement(this.selectors.EXPANDALL);expandAllBtn&&this.addEventListener(expandAllBtn,"click",this._expandAllSections);const collapseAllBtn=this.getElement(this.selectors.COLLAPSEALL);collapseAllBtn&&this.addEventListener(collapseAllBtn,"click",this._collapseAllSections)}_collapseAllSections(){this._toggleAllSections(!0)}_expandAllSections(){this._toggleAllSections(!1)}_toggleAllSections(expandOrCollapse){this.reactive.dispatch("allSectionsIndexCollapsed",expandOrCollapse)}}return _exports.default=Component,_exports.default}));
//# sourceMappingURL=courseindexdrawercontrols.min.js.map

1
theme/boost/amd/build/courseindexdrawercontrols.min.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"courseindexdrawercontrols.min.js","sources":["../src/courseindexdrawercontrols.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Controls for the course index drawer, such as expand-all/collapse-all sections.\n *\n * @module theme_boost/courseindexdrawercontrols\n * @copyright 2023 Stefan Topfstedt\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport {BaseComponent} from 'core/reactive';\nimport {getCurrentCourseEditor} from 'core_courseformat/courseeditor';\n\nexport default class Component extends BaseComponent {\n\n create() {\n this.name = 'courseindexdrawercontrols';\n this.selectors = {\n COLLAPSEALL: `[data-action=\"collapseallcourseindexsections\"]`,\n EXPANDALL: `[data-action=\"expandallcourseindexsections\"]`,\n };\n }\n\n /**\n * @param {element|string} target the DOM main element or its ID\n * @param {object} selectors optional css selector overrides\n * @return {Component}\n */\n static init(target, selectors) {\n return new Component({\n element: document.getElementById(target),\n reactive: getCurrentCourseEditor(),\n selectors,\n });\n }\n\n /**\n * Initial state ready method.\n */\n stateReady() {\n // Attach the on-click event handlers to the expand-all and collapse-all buttons, if present.\n const expandAllBtn = this.getElement(this.selectors.EXPANDALL);\n if (expandAllBtn) {\n this.addEventListener(expandAllBtn, 'click', this._expandAllSections);\n\n }\n const collapseAllBtn = this.getElement(this.selectors.COLLAPSEALL);\n if (collapseAllBtn) {\n this.addEventListener(collapseAllBtn, 'click', this._collapseAllSections);\n }\n }\n\n /**\n * On-click event handler for the collapse-all button.\n * @private\n */\n _collapseAllSections() {\n this._toggleAllSections(true);\n }\n\n /**\n * On-click event handler for the expand-all button.\n * @private\n */\n _expandAllSections() {\n this._toggleAllSections(false);\n }\n\n /**\n * Collapses or expands all sections in the course index.\n * @param {boolean} expandOrCollapse set to TRUE to collapse all, and FALSE to expand all.\n * @private\n */\n _toggleAllSections(expandOrCollapse) {\n this.reactive.dispatch('allSectionsIndexCollapsed', expandOrCollapse);\n }\n}\n"],"names":["Component","BaseComponent","create","name","selectors","COLLAPSEALL","EXPANDALL","target","element","document","getElementById","reactive","stateReady","expandAllBtn","this","getElement","addEventListener","_expandAllSections","collapseAllBtn","_collapseAllSections","_toggleAllSections","expandOrCollapse","dispatch"],"mappings":";;;;;;;;MAyBqBA,kBAAkBC,wBAErCC,cACOC,KAAO,iCACPC,UAAY,CACfC,6DACAC,sEASQC,OAAQH,kBACX,IAAIJ,UAAU,CACnBQ,QAASC,SAASC,eAAeH,QACjCI,UAAU,0CACVP,UAAAA,YAOJQ,mBAEQC,aAAeC,KAAKC,WAAWD,KAAKV,UAAUE,WAChDO,mBACGG,iBAAiBH,aAAc,QAASC,KAAKG,0BAG9CC,eAAiBJ,KAAKC,WAAWD,KAAKV,UAAUC,aAClDa,qBACGF,iBAAiBE,eAAgB,QAASJ,KAAKK,sBAQxDA,4BACOC,oBAAmB,GAO1BH,0BACOG,oBAAmB,GAQ1BA,mBAAmBC,uBACZV,SAASW,SAAS,4BAA6BD"}

2
theme/boost/amd/build/drawers.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
theme/boost/amd/build/drawers.min.js.map
View File

File diff suppressed because one or more lines are too long

89
theme/boost/amd/src/courseindexdrawercontrols.js Normal file
View File

@ -0,0 +1,89 @@
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Controls for the course index drawer, such as expand-all/collapse-all sections.
*
* @module theme_boost/courseindexdrawercontrols
* @copyright 2023 Stefan Topfstedt
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
import {BaseComponent} from 'core/reactive';
import {getCurrentCourseEditor} from 'core_courseformat/courseeditor';
export default class Component extends BaseComponent {
create() {
this.name = 'courseindexdrawercontrols';
this.selectors = {
COLLAPSEALL: `[data-action="collapseallcourseindexsections"]`,
EXPANDALL: `[data-action="expandallcourseindexsections"]`,
};
}
/**
* @param {element|string} target the DOM main element or its ID
* @param {object} selectors optional css selector overrides
* @return {Component}
*/
static init(target, selectors) {
return new Component({
element: document.getElementById(target),
reactive: getCurrentCourseEditor(),
selectors,
});
}
/**
* Initial state ready method.
*/
stateReady() {
// Attach the on-click event handlers to the expand-all and collapse-all buttons, if present.
const expandAllBtn = this.getElement(this.selectors.EXPANDALL);
if (expandAllBtn) {
this.addEventListener(expandAllBtn, 'click', this._expandAllSections);
}
const collapseAllBtn = this.getElement(this.selectors.COLLAPSEALL);
if (collapseAllBtn) {
this.addEventListener(collapseAllBtn, 'click', this._collapseAllSections);
}
}
/**
* On-click event handler for the collapse-all button.
* @private
*/
_collapseAllSections() {
this._toggleAllSections(true);
}
/**
* On-click event handler for the expand-all button.
* @private
*/
_expandAllSections() {
this._toggleAllSections(false);
}
/**
* Collapses or expands all sections in the course index.
* @param {boolean} expandOrCollapse set to TRUE to collapse all, and FALSE to expand all.
* @private
*/
_toggleAllSections(expandOrCollapse) {
this.reactive.dispatch('allSectionsIndexCollapsed', expandOrCollapse);
}
}

13
theme/boost/amd/src/drawers.js
View File

@ -42,6 +42,7 @@ const SELECTORS = {
DRAWERS: '[data-region="fixed-drawer"]',
DRAWERCONTENT: '.drawercontent',
PAGECONTENT: '#page-content',
HEADERCONTENT: '.drawerheadercontent',
};
const CLASSES = {
@ -421,8 +422,10 @@ export default class Drawers {
return;
}
// Hide close button while the drawer is showing to prevent glitchy effects.
// Hide close button and header content while the drawer is showing to prevent glitchy effects.
this.drawerNode.querySelector(SELECTORS.CLOSEBTN)?.classList.toggle('hidden', true);
this.drawerNode.querySelector(SELECTORS.HEADERCONTENT)?.classList.toggle('hidden', true);
// Remove open tooltip if still visible.
let openButton = getDrawerOpenButton(this.drawerNode.id);
@ -458,13 +461,15 @@ export default class Drawers {
.catch();
}
// Show close button once the drawer is fully opened.
// Show close button and header content once the drawer is fully opened.
const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);
const headerContent = this.drawerNode.querySelector(SELECTORS.HEADERCONTENT);
if (focusOnCloseButton && closeButton) {
disableButtonTooltip(closeButton, true);
}
setTimeout(() => {
closeButton.classList.toggle('hidden', false);
headerContent.classList.toggle('hidden', false);
if (focusOnCloseButton) {
closeButton.focus();
}
@ -490,9 +495,11 @@ export default class Drawers {
return;
}
// Hide close button while the drawer is hiding to prevent glitchy effects.
// Hide close button and header content while the drawer is hiding to prevent glitchy effects.
const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);
closeButton?.classList.toggle('hidden', true);
const headerContent = this.drawerNode.querySelector(SELECTORS.HEADERCONTENT);
headerContent?.classList.toggle('hidden', true);
// Remove the close button tooltip if visible.
if (closeButton.hasAttribute('data-original-title')) {
// The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.

57
theme/boost/templates/courseindexdrawercontrols.mustache Normal file
View File

@ -0,0 +1,57 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template theme_boost/courseindexdrawercontrols
This template will render "expand-all" and "collapse-all" buttons for the course index drawer.
Example context (json):
{
}
}}
<div id="courseindexdrawercontrols" class="dropdown">
<button class="btn btn-icon rounded-circle"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
title="{{#str}}courseindexoptions, courseformat{{/str}}"
>
<i class="icon fa fa-ellipsis-v fa-fw m-0" aria-hidden="true"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item"
href="#"
data-action="expandallcourseindexsections"
>
<i class="icon fa fa-angles-down" aria-hidden="true"></i>
{{#str}}expandall{{/str}}
</a>
<a class="dropdown-item"
href="#"
data-action="collapseallcourseindexsections"
>
<i class="icon fa fa-angles-right" aria-hidden="true"></i>
{{#str}}collapseall{{/str}}
</a>
</div>
</div>
{{#js}}
require(['theme_boost/courseindexdrawercontrols'], function(component) {
component.init('courseindexdrawercontrols');
});
{{/js}}

3
theme/boost/templates/drawer.mustache
View File

@ -47,6 +47,9 @@
>
{{#pix}} e/cancel, core {{/pix}}
</button>
<div class="drawerheadercontent hidden">
{{$drawerheadercontent}}{{/drawerheadercontent}}
</div>
</div>
<div class="drawercontent drag-container" data-usertour="scroller">
{{$drawercontent}}{{/drawercontent}}

3
theme/boost/templates/drawers.mustache
View File

@ -61,6 +61,9 @@
{{#courseindex}}
{{< theme_boost/drawer }}
{{$id}}theme_boost-drawers-courseindex{{/id}}
{{$drawerheadercontent}}
{{> theme_boost/courseindexdrawercontrols}}
{{/drawerheadercontent}}
{{$drawerclasses}}drawer drawer-left {{#courseindexopen}}show{{/courseindexopen}}{{/drawerclasses}}
{{$drawercontent}}
{{{courseindex}}}