Proyectos de Subversion Moodle

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 1441
Línea 20... Línea 20...
20 
 * @copyright  2021 Moodle
 20 
 * @copyright  2021 Moodle
21 
 * @author     Mihail Geshoski <mihail@moodle.com>
 21 
 * @author     Mihail Geshoski <mihail@moodle.com>
22 
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 22 
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
23 
 */
 23 
 */
Línea 24... Línea 24...
24 
 
 24 
 
25 
import $ from 'jquery';
 25 
import Carousel from 'theme_boost/bootstrap/carousel';
Línea 26... Línea 26...
26 
import {space, enter} from 'core/key_codes';
 26 
import {space, enter} from 'core/key_codes';
27 
 
 27 
 
28 
/**
 28 
/**
Línea 39... Línea 39...
39 
/**
 39 
/**
40 
 * Register event listeners.
 40 
 * Register event listeners.
41 
 */
 41 
 */
42 
const registerEventListeners = () => {
 42 
const registerEventListeners = () => {
43 
    const userMenu = document.querySelector(selectors.userMenu);
 43 
    const userMenu = document.querySelector(selectors.userMenu);
- 
 
 44 
    const userMenuCarousel = document.querySelector(selectors.userMenuCarousel);
Línea 44... Línea 45...
44 
 
 45 
 
45 
    // Handle the 'shown.bs.dropdown' event (Fired when the dropdown menu is fully displayed).
 46 
    // Handle the 'shown.bs.dropdown' event (Fired when the dropdown menu is fully displayed).
46 
    $(selectors.userMenu).on('shown.bs.dropdown', () => {
 47 
    userMenu.addEventListener('shown.bs.dropdown', () => {
47 
        const activeCarouselItem = document.querySelector(selectors.userMenuCarouselItemActive);
 48 
        const activeCarouselItem = document.querySelector(selectors.userMenuCarouselItemActive);
48 
        // Set the focus on the active carousel item.
 49 
        // Set the focus on the active carousel item.
Línea 49... Línea 50...
49 
        activeCarouselItem.focus();
 50 
        activeCarouselItem.focus();
Línea 94... Línea 95...
94 
        const targetedCarouselItemId = e.target.dataset.carouselTargetId;
 95 
        const targetedCarouselItemId = e.target.dataset.carouselTargetId;
95 
        const targetedCarouselItem = userMenu.querySelector('#' + targetedCarouselItemId);
 96 
        const targetedCarouselItem = userMenu.querySelector('#' + targetedCarouselItemId);
96 
        // Get the position (index) of the targeted carousel item within the parent container element.
 97 
        // Get the position (index) of the targeted carousel item within the parent container element.
97 
        const index = Array.from(targetedCarouselItem.parentNode.children).indexOf(targetedCarouselItem);
 98 
        const index = Array.from(targetedCarouselItem.parentNode.children).indexOf(targetedCarouselItem);
98 
        // Navigate to the targeted carousel item.
 99 
        // Navigate to the targeted carousel item.
99 
        $(selectors.userMenuCarousel).carousel(index);
 100 
        Carousel.getOrCreateInstance(userMenuCarousel).to(index);
100 
 
 - 
 
101 
    };
 101 
    };
Línea 102... Línea 102...
102 
 
 102 
 
103 
    // Handle the 'hide.bs.dropdown' event (Fired when the dropdown menu is being closed).
 103 
    // Handle the 'hide.bs.dropdown' event (Fired when the dropdown menu is being closed).
104 
    $(selectors.userMenu).on('hide.bs.dropdown', () => {
 104 
    userMenu.addEventListener('hide.bs.dropdown', () => {
105 
        // Reset the state once the user menu dropdown is closed and return back to the first (main) carousel item
 105 
        // Reset the state once the user menu dropdown is closed and return back to the first (main) carousel item
106 
        // if necessary.
 106 
        // if necessary.
107 
        $(selectors.userMenuCarousel).carousel(0);
 107 
        Carousel.getOrCreateInstance(userMenuCarousel).to(0);
Línea 108... Línea 108...
108 
    });
 108 
    });
109 
 
 109 
 
110 
    // Handle the 'slid.bs.carousel' event (Fired when the carousel has completed its slide transition).
 110 
    // Handle the 'slid.bs.carousel' event (Fired when the carousel has completed its slide transition).
111 
    $(selectors.userMenuCarousel).on('slid.bs.carousel', () => {
 111 
    userMenuCarousel?.addEventListener('slid.bs.carousel', () => {
112 
        const activeCarouselItem = userMenu.querySelector(selectors.userMenuCarouselItemActive);
 112 
        const activeCarouselItem = userMenu.querySelector(selectors.userMenuCarouselItemActive);
113 
        // Set the focus on the newly activated carousel item.
 113 
        // Set the focus on the newly activated carousel item.
114 
        activeCarouselItem.focus();
 114 
        activeCarouselItem.focus();