MDL-71683 navigation: Enable submenus within the user menu

- Part of: MDL-69588 Adds support for creating collapsible submenus within the user menu dropdown.
2021-08-23 17:46:40 +08:00
parent d9016d2fa7
commit 7318b68b77
12 changed files with 376 additions and 3 deletions
@@ -1142,6 +1142,7 @@ $string['langltr'] = 'Language direction left-to-right';
 $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['userdetails'] = 'User details';
 $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';
@@ -0,0 +1,2 @@
+define ("core/usermenu",["exports","jquery"],function(a,b){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;b=function(a){return a&&a.__esModule?a:{default:a}}(b);var c={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"},d=function(){var a=document.querySelector(c.userMenu);(0,b.default)(c.userMenu).on("shown.bs.dropdown",function(){var b=document.querySelector(c.userMenuCarouselItemActive);b.focus();a.querySelectorAll(c.userMenuCarouselItem).forEach(function(a){if(!a.classList.contains("active")){a.style.width=b.offsetWidth+"px";a.style.height=b.offsetHeight+"px"}})});a.addEventListener("click",function(d){if(d.target.matches(c.userMenuCarouselNavigationLink)){d.stopPropagation();var e=d.target.dataset.carouselTargetId,f=a.querySelector("#"+e),g=Array.from(f.parentNode.children).indexOf(f);(0,b.default)(c.userMenuCarousel).carousel(g)}});(0,b.default)(c.userMenu).on("hide.bs.dropdown",function(){(0,b.default)(c.userMenuCarousel).carousel(0)});(0,b.default)(c.userMenuCarousel).on("slid.bs.carousel",function(){var b=a.querySelector(c.userMenuCarouselItemActive);b.focus()})};a.default={init:function init(){d()}};return a.default});
+//# sourceMappingURL=usermenu.min.js.map
@@ -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 <[email protected]>
+ * @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,
+};
@@ -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}}
@@ -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}}
@@ -28,6 +28,10 @@
    * avatardata - Array of avatars to be displayed. Usually only the current user's avatar. If viewing as another user,
        includes that user's avatar.
    * userfullname - The name of the logged in user
+    * submenus - Array of submenus within the user menu.
+      * id - The id of the submenu.
+      * title - The title of the submenu.
+      * items - Array of the submenu items used in core/user_action_menu_submenu_items.

    Example context (json):
    {
@@ -38,12 +42,19 @@
        "items": [],
        "metadata": [],
        "avatardata": [],
-        "userfullname": "Admin User"
+        "userfullname": "Admin User",
+        "submenus": [
+            {
+                "id": "86cebd87",
+                "title": "Submenu title",
+                "items": []
+            }
+        ]
    }
 }}
 <div class="usermenu">
    {{#unauthenticateduser}}
-        <span class="login">
+        <span class="login pl-2">
            {{content}}
            {{#url}}
                (<a href="{{url}}">{{#str}} login, core {{/str}}</a>)
@@ -60,8 +71,36 @@
                <b class="caret"></b>
            </a>
            <div role="menu" aria-labelledby="user-menu-toggle" id="user-action-menu" class="dropdown-menu dropdown-menu-right">
-                {{> core/user_action_menu_items }}
+                <div id="usermenu-carousel" class="carousel slide" data-touch="false" data-interval="false" data-keyboard="false">
+                    <div class="carousel-inner">
+                        <div id="carousel-item-main" class="carousel-item active" tabindex="-1" aria-label="{{#str}}usermenu{{/str}}">
+                            {{> core/user_action_menu_items }}
+                        </div>
+                        {{#submenus}}
+                            <div id="carousel-item-{{id}}" class="carousel-item submenu" tabindex="-1" aria-label="{{title}}">
+                                <div class="d-flex flex-column h-100">
+                                    <div class="header">
+                                        <a href="#" class="carousel-navigation-link text-decoration-none text-body" data-carousel-target-id="carousel-item-main" aria-label="{{#str}}usermenugoback{{/str}}">
+                                            <span class="dir-rtl-hide">{{#pix}}i/arrow-left{{/pix}}</span>
+                                            <span class="dir-ltr-hide">{{#pix}}i/arrow-right{{/pix}}</span>
+                                        </a>
+                                        <span class="pl-2">{{title}}</span>
+                                    </div>
+                                    <div class="dropdown-divider"></div>
+                                    <div class="items h-100 overflow-auto" role="menu">
+                                        {{> core/user_action_menu_submenu_items }}
+                                    </div>
+                                </div>
+                            </div>
+                        {{/submenus}}
+                    </div>
+                </div>
            </div>
        </div>
    {{/unauthenticateduser}}
 </div>
+{{#js}}
+    require(['core/usermenu'], function(UserMenu) {
+        UserMenu.init();
+    });
+{{/js}}
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
@@ -33,6 +33,46 @@
        .dropdown-toggle::after {
            display: none;
        }
+        .dropdown-menu {
+            min-width: 235px;
+            .carousel-navigation-link {
+                > * {
+                    pointer-events: none;
+                }
+            }
+            .dropdown-item {
+                padding: .25rem 1.75rem .25rem .75rem;
+                &.carousel-navigation-link::after {
+                    font-family: FontAwesome;
+                    content: $fa-var-caret-right;
+                    font-size: 1rem;
+                    right: .75rem;
+                    position: absolute;
+                }
+            }
+            .submenu {
+                .header {
+                    padding: .25rem .75rem;
+                    font-size: .975rem;
+                    .icon {
+                        font-size: 20px;
+                        height: 20px;
+                        width: 20px;
+                        margin: 0;
+                    }
+                }
+                .items {
+                    .dropdown-item {
+                        &[aria-current="true"]::before {
+                            font-family: FontAwesome;
+                            content: $fa-var-check;
+                            font-size: 0.75rem;
+                            padding-left: .25rem;
+                        }
+                    }
+                }
+            }
+        }
    }
    .moodle-actionmenu .menubar,
    .action-menu-trigger .dropdown {
@@ -40,6 +80,33 @@
        display: flex;
    }
 }
+.dir-rtl .navbar.fixed-top {
+    .usermenu {
+        .dropdown-menu {
+            .dropdown-item {
+                &.carousel-navigation-link::after {
+                    content: $fa-var-caret-left;
+                }
+            }
+            .carousel {
+                .carousel-inner {
+                    .carousel-item-prev.carousel-item-right,
+                    .carousel-item-next.carousel-item-left {
+                        transform: translateX(0);
+                    }
+                    .carousel-item-next,
+                    .carousel-item-right.active {
+                        transform: translateX(-100%);
+                    }
+                    .carousel-item-prev,
+                    .carousel-item-left.active {
+                        transform: translateX(100%);
+                    }
+                }
+            }
+        }
+    }
+}
 #page {
    margin-top: $navbar-height;
 }
@@ -19998,11 +19998,51 @@ div.editor_atto_toolbar button .icon {
      align-items: center; }
    .navbar.fixed-top .usermenu .dropdown-toggle::after {
      display: none; }
+    .navbar.fixed-top .usermenu .dropdown-menu {
+      min-width: 235px; }
+      .navbar.fixed-top .usermenu .dropdown-menu .carousel-navigation-link > * {
+        pointer-events: none; }
+      .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item {
+        padding: .25rem 1.75rem .25rem .75rem; }
+        .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item.carousel-navigation-link::after {
+          font-family: FontAwesome;
+          content: "";
+          font-size: 1rem;
+          right: .75rem;
+          position: absolute; }
+      .navbar.fixed-top .usermenu .dropdown-menu .submenu .header {
+        padding: .25rem .75rem;
+        font-size: .975rem; }
+        .navbar.fixed-top .usermenu .dropdown-menu .submenu .header .icon {
+          font-size: 20px;
+          height: 20px;
+          width: 20px;
+          margin: 0; }
+      .navbar.fixed-top .usermenu .dropdown-menu .submenu .items .dropdown-item[aria-current="true"]::before {
+        font-family: FontAwesome;
+        content: "";
+        font-size: 0.75rem;
+        padding-left: .25rem; }
  .navbar.fixed-top .moodle-actionmenu .menubar,
  .navbar.fixed-top .action-menu-trigger .dropdown {
    height: 100%;
    display: flex; }

+.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item.carousel-navigation-link::after {
+  content: ""; }
+
+.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .carousel .carousel-inner .carousel-item-prev.carousel-item-right,
+.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .carousel .carousel-inner .carousel-item-next.carousel-item-left {
+  transform: translateX(0); }
+
+.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .carousel .carousel-inner .carousel-item-next,
+.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .carousel .carousel-inner .carousel-item-right.active {
+  transform: translateX(-100%); }
+
+.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .carousel .carousel-inner .carousel-item-prev,
+.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .carousel .carousel-inner .carousel-item-left.active {
+  transform: translateX(100%); }
+
 #page {
  margin-top: 50px; }

@@ -20189,11 +20189,51 @@ div.editor_atto_toolbar button .icon {
      align-items: center; }
    .navbar.fixed-top .usermenu .dropdown-toggle::after {
      display: none; }
+    .navbar.fixed-top .usermenu .dropdown-menu {
+      min-width: 235px; }
+      .navbar.fixed-top .usermenu .dropdown-menu .carousel-navigation-link > * {
+        pointer-events: none; }
+      .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item {
+        padding: .25rem 1.75rem .25rem .75rem; }
+        .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item.carousel-navigation-link::after {
+          font-family: FontAwesome;
+          content: "";
+          font-size: 1rem;
+          right: .75rem;
+          position: absolute; }
+      .navbar.fixed-top .usermenu .dropdown-menu .submenu .header {
+        padding: .25rem .75rem;
+        font-size: .975rem; }
+        .navbar.fixed-top .usermenu .dropdown-menu .submenu .header .icon {
+          font-size: 20px;
+          height: 20px;
+          width: 20px;
+          margin: 0; }
+      .navbar.fixed-top .usermenu .dropdown-menu .submenu .items .dropdown-item[aria-current="true"]::before {
+        font-family: FontAwesome;
+        content: "";
+        font-size: 0.75rem;
+        padding-left: .25rem; }
  .navbar.fixed-top .moodle-actionmenu .menubar,
  .navbar.fixed-top .action-menu-trigger .dropdown {
    height: 100%;
    display: flex; }

+.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .dropdown-item.carousel-navigation-link::after {
+  content: ""; }
+
+.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .carousel .carousel-inner .carousel-item-prev.carousel-item-right,
+.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .carousel .carousel-inner .carousel-item-next.carousel-item-left {
+  transform: translateX(0); }
+
+.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .carousel .carousel-inner .carousel-item-next,
+.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .carousel .carousel-inner .carousel-item-right.active {
+  transform: translateX(-100%); }
+
+.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .carousel .carousel-inner .carousel-item-prev,
+.dir-rtl .navbar.fixed-top .usermenu .dropdown-menu .carousel .carousel-inner .carousel-item-left.active {
+  transform: translateX(100%); }
+
 #page {
  margin-top: 50px; }
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>`