MDL-71683 navigation: Enable submenus within the user menu

- Part of: MDL-69588 Adds support for creating collapsible submenus within the user menu dropdown.
moodle · Aug 23, 2021 · 7318b68 · 7318b68
1 parent d9016d2
commit 7318b68
Show file tree

Hide file tree

Showing 12 changed files with 376 additions and 3 deletions.
diff --git a/lang/en/moodle.php b/lang/en/moodle.php
@@ -1142,6 +1142,7 @@
 $string['langrtl'] = 'Language direction right-to-left';
 $string['language'] = 'Language';
 $string['languagegood'] = 'This language pack is up-to-date! :-)';
+$string['languageselector'] = 'Language selector';
 $string['last'] = 'Last';
 $string['lastaccess'] = 'Last access';
 $string['lastcourseaccess'] = 'Last access to course';
@@ -2217,6 +2218,7 @@
 $string['userfiles'] = 'User files';
 $string['userlist'] = 'User list';
 $string['usermenu'] = 'User menu';
+$string['usermenugoback'] = 'Go back to user menu';
 $string['username'] = 'Username';
 $string['usernameemail'] = 'Username / email';
 $string['usernameemailmatch'] = 'The username and email address do not relate to the same user';

diff --git a/lib/amd/build/usermenu.min.js b/lib/amd/build/usermenu.min.js
diff --git a/lib/amd/build/usermenu.min.js.map b/lib/amd/build/usermenu.min.js.map
diff --git a/lib/amd/src/usermenu.js b/lib/amd/src/usermenu.js
@@ -0,0 +1,107 @@
+// 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/>.
+
+/**
+ * Initializes and handles events in the user menu.
+ *
+ * @module     core/usermenu
+ * @package    core
+ * @copyright  2021 Moodle
+ * @author     Mihail Geshoski <mihail@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import $ from 'jquery';
+
+/**
+ * User menu constants.
+ */
+const selectors = {
+    userMenu: '.usermenu',
+    userMenuCarousel: '.usermenu #usermenu-carousel',
+    userMenuCarouselItem: '.usermenu #usermenu-carousel .carousel-item',
+    userMenuCarouselItemActive: '.usermenu #usermenu-carousel .carousel-item.active',
+    userMenuCarouselNavigationLink: '.usermenu #usermenu-carousel .carousel-navigation-link',
+};
+
+/**
+ * Register event listeners.
+ */
+const registerEventListeners = () => {
+    const userMenu = document.querySelector(selectors.userMenu);
+
+    // Handle the 'shown.bs.dropdown' event (Fired when the dropdown menu is fully displayed).
+    $(selectors.userMenu).on('shown.bs.dropdown', () => {
+        const activeCarouselItem = document.querySelector(selectors.userMenuCarouselItemActive);
+        // Set the focus on the active carousel item.
+        activeCarouselItem.focus();
+
+        userMenu.querySelectorAll(selectors.userMenuCarouselItem).forEach(element => {
+            // Resize all non-active carousel items to match the height and width of the current active (main)
+            // carousel item to avoid sizing inconsistencies. This has to be done once the dropdown menu is fully
+            // displayed ('shown.bs.dropdown') as the offsetWidth and offsetHeight cannot be obtained when the
+            // element is hidden.
+            if (!element.classList.contains('active')) {
+                element.style.width = activeCarouselItem.offsetWidth + 'px';
+                element.style.height = activeCarouselItem.offsetHeight + 'px';
+            }
+        });
+    });
+
+    // Handle click events in the user menu.
+    userMenu.addEventListener('click', (e) => {
+
+        // Handle click event on the carousel navigation (control) links in the user menu.
+        if (e.target.matches(selectors.userMenuCarouselNavigationLink)) {
+            // By default the user menu dropdown element closes on a click event. This behaviour is not desirable
+            // as we need to be able to navigate through the carousel items (submenus of the user menu) within the
+            // user menu. Therefore, we need to prevent the propagation of this event and then manually call the
+            // carousel transition.
+            e.stopPropagation();
+            // The id of the targeted carousel item.
+            const targetedCarouselItemId = e.target.dataset.carouselTargetId;
+            const targetedCarouselItem = userMenu.querySelector('#' + targetedCarouselItemId);
+            // Get the position (index) of the targeted carousel item within the parent container element.
+            const index = Array.from(targetedCarouselItem.parentNode.children).indexOf(targetedCarouselItem);
+            // Navigate to the targeted carousel item.
+            $(selectors.userMenuCarousel).carousel(index);
+        }
+    });
+
+    // Handle the 'hide.bs.dropdown' event (Fired when the dropdown menu is being closed).
+    $(selectors.userMenu).on('hide.bs.dropdown', () => {
+        // Reset the state once the user menu dropdown is closed and return back to the first (main) carousel item
+        // if necessary.
+        $(selectors.userMenuCarousel).carousel(0);
+    });
+
+    // Handle the 'slid.bs.carousel' event (Fired when the carousel has completed its slide transition).
+    $(selectors.userMenuCarousel).on('slid.bs.carousel', () => {
+        const activeCarouselItem = userMenu.querySelector(selectors.userMenuCarouselItemActive);
+        // Set the focus on the newly activated carousel item.
+        activeCarouselItem.focus();
+    });
+};
+
+/**
+ * Initialize the user menu.
+ */
+const init = () => {
+    registerEventListeners();
+};
+
+export default {
+    init: init,
+};
diff --git a/lib/templates/user_action_menu_items.mustache b/lib/templates/user_action_menu_items.mustache
@@ -26,6 +26,11 @@
           * url - The href for the link.
           * pixicon - (Optional) The Moodle icon to use
           * imgsrc - (Optional) If provided, uses this as source for an image tag. Note: pixicon is preferred.
+        * submenulink - If a submenu link is provided render it.
+          * submenuid - The id of the targeted submenu.
+          * title - The text to be shown for the link.
+          * pixicon - (Optional) The Moodle icon to use.
+          * imgsrc - (Optional) If provided, uses this as source for an image tag. Note: pixicon is preferred.
         * divider - Whether a divider is to be displayed or not
 
     Example context (json):
@@ -40,6 +45,15 @@
                 },
                 "divider": 1
             },
+            {
+                "submenulink": {
+                    "title": "Title",
+                    "submenuid": "86cebd87",
+                    "pixicon": "t/dashboard",
+                    "imgsrc": "https://raw.githubusercontent.com/moodle/moodle/master/pix/t/check.png"
+                },
+                "divider": 1
+            }
         ]
     }
 }}
@@ -55,5 +69,16 @@
             {{title}}
         </a>
     {{/link}}
+    {{#submenulink}}
+        <a href="#" class="carousel-navigation-link dropdown-item" role="menuitem" data-carousel-target-id="carousel-item-{{submenuid}}">
+            {{#pixicon}}
+                {{#pix}}{{pixicon}}{{/pix}}
+            {{/pixicon}}
+            {{^pixicon}}
+                {{#imgsrc}}<img aria-hidden="true" src="{{imgsrc}}" alt="{{title}}"/>{{/imgsrc}}
+            {{/pixicon}}
+            {{title}}
+        </a>
+    {{/submenulink}}
     {{#divider}}<div class="dropdown-divider" role="presentation"></div>{{/divider}}
 {{/items}}
diff --git a/lib/templates/user_action_menu_submenu_items.mustache b/lib/templates/user_action_menu_submenu_items.mustache
@@ -0,0 +1,48 @@
+{{!
+    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 core/user_action_menu_submenus
+
+    Template for the submenus in the user action menu.
+
+    Context variables required for this template:
+    * items - The submenu items
+      * link - If a link is provided render it.
+        * title - The title added to the link.
+        * text - The text to be shown for the link.
+        * url - The href for the link.
+        * isactive - (Optional) Whether the item is currently active (has been selected).
+
+    Example context (json):
+    {
+        "items": {
+            "link": {
+                "title": "Submenu item 1",
+                "text": "Submenu item 1",
+                "url": "https://example.com/",
+                "isactive": 0
+            }
+        }
+    }
+}}
+{{#items}}
+    {{#link}}
+        <a href="{{{url}}}" class="dropdown-item pl-5" role="menuitem" title="{{title}}" {{#isactive}}aria-current="true"{{/isactive}}>
+            {{text}}
+        </a>
+    {{/link}}
+{{/items}}