MDL-73340 theme_boost: course index opened by default

course/format/tests/behat/course_courseindex.feature

@@ -24,6 +24,8 @@ Feature: Course index depending on role
       | user     | course | role           |
       | student1 | C1     | student        |
       | teacher1 | C1     | editingteacher |
+    # The course index is hidden by default in small devices.
+    And I change window size to "large"
 
   @javascript
   Scenario: Course index is present on course and activities.
@@ -31,19 +33,15 @@ Feature: Course index depending on role
     Given the "multilang" filter is "on"
     And the "multilang" filter applies to "content and headings"
     When I am on the "C1" "Course" page logged in as "teacher1"
-    Then I should see "Open course index"
-    And I am on the "Activity sample 1" "assign activity editing" page
+    Then I am on the "Activity sample 1" "assign activity editing" page
     And I set the field "Assignment name" in the "General" "fieldset" to "<span lang=\"en\" class=\"multilang\">Activity</span><span lang=\"de\" class=\"multilang\">Aktivität</span> sample 1"
     And I press "Save and display"
-    And I should see "Open course index"
-    And I click on "Open course index" "button"
     And I should see "Activity sample 1" in the "courseindex-content" "region"
 
   @javascript
   Scenario: Course index as a teacher
     Given I log in as "teacher1"
-    And I am on "Course 1" course homepage
-    When I click on "Open course index" "button"
+    When I am on "Course 1" course homepage
     Then I should see "Topic 1" in the "courseindex-content" "region"
     And I should see "Topic 2" in the "courseindex-content" "region"
     And I should see "Topic 3" in the "courseindex-content" "region"
@@ -60,8 +58,7 @@ Feature: Course index depending on role
     And I click on "Hide" "link" in the "Activity sample 3" activity
     And I log out
     And I log in as "teacher1"
-    And I am on "Course 1" course homepage
-    When I click on "Open course index" "button"
+    When I am on "Course 1" course homepage
     Then I should see "Topic 1" in the "courseindex-content" "region"
     And I should see "Topic 2" in the "courseindex-content" "region"
     And I should see "Topic 3" in the "courseindex-content" "region"
@@ -78,8 +75,7 @@ Feature: Course index depending on role
     And I click on "Hide" "link" in the "Activity sample 3" activity
     And I log out
     And I log in as "student1"
-    And I am on "Course 1" course homepage
-    When I click on "Open course index" "button"
+    When I am on "Course 1" course homepage
     Then I should see "Topic 1" in the "courseindex-content" "region"
     And I should not see "Topic 2" in the "courseindex-content" "region"
     And I should see "Topic 3" in the "courseindex-content" "region"
@@ -92,7 +88,6 @@ Feature: Course index depending on role
     Given I log in as "teacher1"
     And I am on "Course 1" course homepage with editing mode on
     When I delete "Activity sample 2" activity
-    And I click on "Open course index" "button"
     Then I should not see "Activity sample 2" in the "courseindex-content" "region"
 
   @javascript
@@ -100,7 +95,6 @@ Feature: Course index depending on role
     Given I log in as "teacher1"
     And I am on "Course 1" course homepage with editing mode on
     And I turn section "2" highlighting on
-    And I click on "Open course index" "button"
     # Current section is only marked visually in the course index.
     And the "class" attribute of "#courseindex-content [data-for='section'][data-number='2']" "css_element" should contain "current"
     And I should not see "Highlighted" in the "#courseindex-content [data-for='section'][data-number='1']" "css_element"
@@ -117,8 +111,7 @@ Feature: Course index depending on role
       | activity | name                         | intro                       | course | idnumber | section |
       | book     | Second activity in section 1 | Test book description       | C1     | sample4  | 1       |
     And I log in as "teacher1"
-    And I am on "Course 1" course homepage
-    When I click on "Open course index" "button"
+    When I am on "Course 1" course homepage
     # 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"
@@ -166,8 +159,7 @@ Feature: Course index depending on role
 
   @javascript
   Scenario: Course index section preferences
-    Given I am on the "C1" "Course" page logged in as "teacher1"
-    When I click on "Open course index" "button"
+    When I am on the "C1" "Course" page logged in as "teacher1"
     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"
@@ -197,7 +189,6 @@ Feature: Course index depending on role
     And I delete section "1"
     And I click on "Delete" "button" in the ".modal" "css_element"
     And I reload the page
-    And I click on "Open course index" "button"
     And I should not see "Activity sample 1" in the "courseindex-content" "region"
     And I should see "Topic 1" in the "courseindex-content" "region"
     And I should see "Activity sample 2" in the "courseindex-content" "region"
@@ -208,7 +199,6 @@ Feature: Course index depending on role
   Scenario: Adding section should alter the course index
     Given I log in as "teacher1"
     And I am on "Course 1" course homepage with editing mode on
-    And I click on "Open course index" "button"
     When I click on "Add topic" "link" in the "Topic 4" "section"
     Then I should see "Topic 5" in the "courseindex-content" "region"
 
@@ -216,7 +206,6 @@ Feature: Course index depending on role
   Scenario: Remove a section should alter the course index
     Given I log in as "teacher1"
     And I am on "Course 1" course homepage with editing mode on
-    And I click on "Open course index" "button"
     When I delete section "4"
     Then I should not see "Topic 4" in the "courseindex-content" "region"
 
@@ -224,7 +213,6 @@ Feature: Course index depending on role
   Scenario: Delete a previous section should alter the course index unnamed sections
     Given I log in as "teacher1"
     And I am on "Course 1" course homepage with editing mode on
-    And I click on "Open course index" "button"
     When I delete section "1"
     And I click on "Delete" "button" in the ".modal" "css_element"
     Then I should not see "Topic 4" in the "courseindex-content" "region"
@@ -255,7 +243,6 @@ Feature: Course index depending on role
     # Check course index link goes to the specific section.
     When I log in as "student1"
     And I am on "Course 1" course homepage
-    And I click on "Open course index" "button"
     And I click on "Topic 1" "link" in the "region-main" "region"
     And I should not see "Activity sample 3" in the "region-main" "region"
     And I click on "Activity sample 3" "link" in the "courseindex-content" "region"

course/format/tests/behat/courseindex_completion.feature

@@ -22,19 +22,19 @@ Feature: Course index completion icons
       | user     | course | role           |
       | student1 | C1     | student        |
       | teacher1 | C1     | editingteacher |
+    # The course index is hidden by default in small devices.
+    And I change window size to "large"
 
   @javascript
   Scenario: Teacher does not see completion icons.
-    Given I am on the "C1" "Course" page logged in as "teacher1"
-    When I click on "Open course index" "button"
+    When I am on the "C1" "Course" page logged in as "teacher1"
     Then I should see "Topic 1" in the "courseindex-content" "region"
     And I should see "Activity sample 1" in the "courseindex-content" "region"
     And "To do" "icon" should not exist in the "courseindex-content" "region"
 
   @javascript
   Scenario: User should see the completion icons
-    Given I am on the "C1" "Course" page logged in as "student1"
-    When I click on "Open course index" "button"
+    When I am on the "C1" "Course" page logged in as "student1"
     Then I should see "Topic 1" in the "courseindex-content" "region"
     And I should see "Activity sample 1" in the "courseindex-content" "region"
     And "To do" "icon" should exist in the "courseindex-content" "region"
@@ -42,7 +42,6 @@ Feature: Course index completion icons
   @javascript
   Scenario: Manual completion shoudl update the course index completion
     Given I am on the "C1" "Course" page logged in as "student1"
-    And I click on "Open course index" "button"
     And "To do" "icon" should exist in the "courseindex-content" "region"
     When I press "Mark as done"
     And I wait until "Done" "button" exists
@@ -54,7 +53,6 @@ Feature: Course index completion icons
   @javascript
   Scenario: Refresh the page should keep the completion consistent
     Given I am on the "C1" "Course" page logged in as "student1"
-    And I click on "Open course index" "button"
     And "To do" "icon" should exist in the "courseindex-content" "region"
     When I press "Mark as done"
     And I wait until "Done" "button" exists
@@ -68,7 +66,6 @@ Feature: Course index completion icons
       | assign   | Activity sample 2 | Test assignment description | C1     | sample2  | 1       | 1          | 1              |
     When I am on the "sample2" "Activity" page logged in as "student1"
     And I am on the "C1" "Course" page
-    And I click on "Open course index" "button"
     Then "Done" "icon" should exist in the "courseindex-content" "region"
 
   @javascript
@@ -89,7 +86,6 @@ Feature: Course index completion icons
       | slot | response |
       | 1    | False    |
     When I am on the "C1" "Course" page logged in as "student1"
-    And I click on "Open course index" "button"
     And "Failed" "icon" should exist in the "courseindex-content" "region"
 
   @javascript
@@ -110,5 +106,4 @@ Feature: Course index completion icons
       | slot | response |
       | 1    | True    |
     When I am on the "C1" "Course" page logged in as "student1"
-    And I click on "Open course index" "button"
     And "Done" "icon" should exist in the "courseindex-content" "region"

course/format/tests/behat/courseindex_keyboardnav.feature

@@ -17,11 +17,13 @@ Feature: Verify that courseindex is usable with the keyboard
       | book     | Activity sample 2 | Test book description       | C1     | sample2  | 2       |
       | choice   | Activity sample 3 | Test choice description     | C1     | sample3  | 3       |
     Given I am on the "C1" "Course" page logged in as "admin"
+    And I change window size to "large"
+    And I click on "Close course index" "button"
     And I click on "Open course index" "button"
     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
-    Then the focused element is ".courseindex-section" "css_element"
+    And the focused element is ".courseindex-section" "css_element"
 
   @javascript
   Scenario: General focus on open course index.

theme/boost/amd/src/drawers.js

@@ -45,6 +45,8 @@ const SELECTORS = {
 
 const CLASSES = {
     SCROLLED: 'scrolled',
+    SHOW: 'show',
+    NOTINITIALISED: 'not-initialized',
 };
 
 /**
@@ -281,7 +283,11 @@ export default class Drawers {
     constructor(drawerNode) {
         this.drawerNode = drawerNode;
 
-        if (this.drawerNode.classList.contains('show')) {
+        if (isSmall()) {
+            this.closeDrawer({focusOnOpenButton: false, updatePreferences: false});
+        }
+
+        if (this.drawerNode.classList.contains(CLASSES.SHOW)) {
             this.openDrawer({focusOnCloseButton: false});
         } else if (this.drawerNode.dataset.forceopen == 1) {
             if (!isSmall()) {
@@ -299,6 +305,8 @@ export default class Drawers {
         addInnerScrollListener(this.drawerNode);
 
         drawerMap.set(drawerNode, this);
+
+        drawerNode.classList.remove(CLASSES.NOTINITIALISED);
     }
 
     /**
@@ -307,7 +315,7 @@ export default class Drawers {
      * @returns {boolean}
      */
     get isOpen() {
-        return this.drawerNode.classList.contains('show');
+        return this.drawerNode.classList.contains(CLASSES.SHOW);
     }
 
     /**
@@ -430,7 +438,7 @@ export default class Drawers {
         }
 
         Aria.unhide(this.drawerNode);
-        this.drawerNode.classList.add('show');
+        this.drawerNode.classList.add(CLASSES.SHOW);
 
         const preference = this.drawerNode.dataset.preference;
         if (preference && !isSmall() && (this.drawerNode.dataset.forceopen != 1)) {
@@ -472,8 +480,12 @@ export default class Drawers {
 
     /**
      * Close the drawer.
+     *
+     * @param {object} args
+     * @param {boolean} [args.focusOnOpenButton=true] Whether to alter page focus when opening the drawer
+     * @param {boolean} [args.updatePreferences=true] Whether to update the user prewference
      */
-    closeDrawer() {
+    closeDrawer({focusOnOpenButton = true, updatePreferences = true} = {}) {
 
         const pendingPromise = new Pending('theme_boost/drawers:close');
 
@@ -492,7 +504,7 @@ export default class Drawers {
         }
 
         const preference = this.drawerNode.dataset.preference;
-        if (preference) {
+        if (preference && updatePreferences && !isSmall()) {
             M.util.set_user_preference(preference, false);
         }
 
@@ -503,7 +515,7 @@ export default class Drawers {
         }
 
         Aria.hide(this.drawerNode);
-        this.drawerNode.classList.remove('show');
+        this.drawerNode.classList.remove(CLASSES.SHOW);
 
         getBackdrop().then(backdrop => {
             backdrop.hide();
@@ -522,7 +534,7 @@ export default class Drawers {
             disableButtonTooltip(openButton, true);
         }
         setTimeout(() => {
-            if (openButton) {
+            if (openButton && focusOnOpenButton) {
                 openButton.focus();
             }
             pendingPromise.resolve();
@@ -535,7 +547,7 @@ export default class Drawers {
      * Toggle visibility of the drawer.
      */
     toggleVisibility() {
-        if (this.drawerNode.classList.contains('show')) {
+        if (this.drawerNode.classList.contains(CLASSES.SHOW)) {
             this.closeDrawer();
         } else {
             this.openDrawer();

theme/boost/layout/drawers.php

@@ -35,7 +35,7 @@ user_preference_allow_ajax_update('drawer-open-index', PARAM_BOOL);
 user_preference_allow_ajax_update('drawer-open-block', PARAM_BOOL);
 
 if (isloggedin()) {
-    $courseindexopen = (get_user_preferences('drawer-open-index') == true);
+    $courseindexopen = (get_user_preferences('drawer-open-index', true) == true);
     $blockdraweropen = (get_user_preferences('drawer-open-block') == true);
 } else {
     $courseindexopen = false;

theme/boost/scss/moodle/drawer.scss

@@ -171,6 +171,10 @@ $right-drawer-width: 320px;
     position: fixed;
     height: 100vh;
     top: 0;
+
+    &.not-initialized {
+        display: none;
+    }
 }
 
 @mixin drawertypes() {
@@ -220,6 +224,10 @@ $right-drawer-width: 320px;
 @include media-breakpoint-up(lg) {
     .drawer {
         z-index: inherit;
+
+        &.not-initialized {
+            display: block;
+        }
     }
 }
 

theme/boost/style/moodle.css

@@ -14928,6 +14928,8 @@ body.drawer-ease {
   @media (prefers-reduced-motion: reduce) {
     .drawer {
       transition: none; } }
+  .drawer.not-initialized {
+    display: none; }
   .drawer.drawer-right {
     width: 315px;
     max-width: 315px;
@@ -14953,7 +14955,9 @@ body.drawer-ease {
 
 @media (min-width: 992px) {
   .drawer {
-    z-index: inherit; } }
+    z-index: inherit; }
+    .drawer.not-initialized {
+      display: block; } }
 
 .drawer-md,
 .drawer-sm {
@@ -14982,6 +14986,8 @@ body.drawer-ease {
       transition: none; } }
 
 @media (max-width: 991.98px) {
+    .drawer-md.not-initialized {
+      display: none; }
     .drawer-md.drawer-right {
       width: 315px;
       max-width: 315px;
@@ -15019,6 +15025,8 @@ body.drawer-ease {
       transition: none; } }
 
 @media (max-width: 767.98px) {
+    .drawer-sm.not-initialized {
+      display: none; }
     .drawer-sm.drawer-right {
       width: 315px;
       max-width: 315px;

theme/boost/templates/drawer.mustache

@@ -27,7 +27,7 @@
     }
 }}
 <div {{!
-    }} class="{{$drawerclasses}}{{/drawerclasses}}"{{!
+    }} class="{{$drawerclasses}}{{/drawerclasses}} not-initialized"{{!
     }} data-region="fixed-drawer"{{!
     }} id="{{$id}}{{/id}}"{{!
     }} data-preference="{{$drawerpreferencename}}{{/drawerpreferencename}}"{{!

theme/classic/style/moodle.css

@@ -14928,6 +14928,8 @@ body.drawer-ease {
   @media (prefers-reduced-motion: reduce) {
     .drawer {
       transition: none; } }
+  .drawer.not-initialized {
+    display: none; }
   .drawer.drawer-right {
     width: 315px;
     max-width: 315px;
@@ -14953,7 +14955,9 @@ body.drawer-ease {
 
 @media (min-width: 992px) {
   .drawer {
-    z-index: inherit; } }
+    z-index: inherit; }
+    .drawer.not-initialized {
+      display: block; } }
 
 .drawer-md,
 .drawer-sm {
@@ -14982,6 +14986,8 @@ body.drawer-ease {
       transition: none; } }
 
 @media (max-width: 991.98px) {
+    .drawer-md.not-initialized {
+      display: none; }
     .drawer-md.drawer-right {
       width: 315px;
       max-width: 315px;
@@ -15019,6 +15025,8 @@ body.drawer-ease {
       transition: none; } }
 
 @media (max-width: 767.98px) {
+    .drawer-sm.not-initialized {
+      display: none; }
     .drawer-sm.drawer-right {
       width: 315px;
       max-width: 315px;