Proyectos de Subversion Moodle

// 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/>.

/**
 * Course index keyboard navigation and aria-tree compatibility.
 *
 * Node tree and bootstrap collapsibles don't use the same HTML structure. However,
 * all keybindings and logic is compatible. This class translate the primitive opetations
 * to a bootstrap collapsible structure.
 *
 * @module     core_courseformat/local/courseeditor/contenttree
 * @class      core_courseformat/local/courseeditor/contenttree
 * @copyright  2021 Ferran Recio <ferran@moodle.com>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

// The core/tree uses jQuery to expand all nodes.
import Collapse from 'theme_boost/bootstrap/collapse';
import jQuery from 'jquery';
import Tree from 'core/tree';
import {getList, getFirst} from 'core/normalise';

export default class extends Tree {

    /**
     * Setup the core/tree keyboard navigation.
     *
     * @param {Element|undefined} mainElement an alternative main element in case it is not from the parent component
     * @param {Object|undefined} selectors alternative selectors
     * @param {boolean} preventcache if the elements cache must be disabled.
     */
    constructor(mainElement, selectors, preventcache) {
        // Init this value with the parent DOM element.
        super(mainElement);

        // Get selectors from parent.
        this.selectors = {
            SECTION: selectors.SECTION,
            TOGGLER: selectors.TOGGLER,
            COLLAPSE: selectors.COLLAPSE,
            ENTER: selectors.ENTER ?? selectors.TOGGLER,
        };

        // The core/tree library saves the visible elements cache inside the main tree node.
        // However, in edit mode content can change suddenly so we need to refresh caches when needed.
        if (preventcache) {
            this._getVisibleItems = this.getVisibleItems;
            this.getVisibleItems = () => {
                this.refreshVisibleItemsCache();
                return this._getVisibleItems();
            };
        }
        this.treeRoot[0].querySelectorAll(selectors.COLLAPSE).forEach(toggler => {
            const collapsible = document.getElementById(toggler.getAttribute('href').replace('#', ''));
            collapsible.addEventListener('hidden.bs.collapse', () => this.refreshVisibleItemsCache());
            collapsible.addEventListener('shown.bs.collapse', () => this.refreshVisibleItemsCache());
        });
        // Register a custom callback for pressing enter key.
        this.registerEnterCallback(this.enterCallback.bind(this));
    }

    /**
     * Return the current active node.
     *
     * @return {Element|undefined} the active item if any
     */
    getActiveItem() {
        const activeItem = this.treeRoot.data('activeItem');
        if (activeItem) {
            return getList(activeItem)[0];
        }
        return undefined;
    }

    /**
     * Handle enter key on a collpasible node.
     *
     * @param {JQuery} jQueryItem the jQuery object
     */
    enterCallback(jQueryItem) {
        const item = getList(jQueryItem)[0];
        if (this.isGroupItem(jQueryItem)) {
            // Group elements is like clicking a topic but without loosing the focus.
            const enter = item.querySelector(this.selectors.ENTER);
            if (enter.getAttribute('href') !== '#') {
                window.location.href = enter.getAttribute('href');
            }
            enter.click();
        } else {
            // Activity links just follow the link href.
            const link = item.querySelector('a');
            if (link.getAttribute('href') !== '#') {
                window.location.href = link.getAttribute('href');
            } else {
                link.click();
            }
            return;
        }
    }

    /**
     * Handle an item click.
     *
     * @param {Event} event the click event
     * @param {jQuery} jQueryItem the item clicked
     */
    handleItemClick(event, jQueryItem) {
        const isChevron = event.target.closest(this.selectors.COLLAPSE);
        // Only chevron clicks toogle the sections always.
        if (isChevron) {
            super.handleItemClick(event, jQueryItem);
            return;
        }
        // This is a title or activity name click.
        jQueryItem.focus();
        if (this.isGroupItem(jQueryItem)) {
            this.expandGroup(jQueryItem);
        }
    }

    /**
     * Check if a gorup item is collapsed.
     *
     * @param {JQuery} jQueryItem  the jQuery object
     * @returns {boolean} if the element is collapsed
     */
    isGroupCollapsed(jQueryItem) {
        const item = getList(jQueryItem)[0];
        const toggler = item.querySelector(`[aria-expanded]`);
        return toggler.getAttribute('aria-expanded') === 'false';
    }

    /**
     * Toggle a group item.
     *
     * @param {JQuery} item  the jQuery object
     */
    toggleGroup(item) {
        const toggler = getFirst(item).querySelector(this.selectors.COLLAPSE);
        let collapsibleId = toggler.dataset?.target ?? toggler.getAttribute('href');
        if (!collapsibleId) {
            return;
        }
        collapsibleId = collapsibleId.replace('#', '');

        const collapsible = document.getElementById(collapsibleId);
        if (collapsible) {
            Collapse.getOrCreateInstance(collapsible).toggle();
        }
    }

    /**
     * Expand a group item.
     *
     * @param {JQuery} item  the jQuery object
     */
    expandGroup(item) {
        if (this.isGroupCollapsed(item)) {
            this.toggleGroup(item);
        }
    }

    /**
     * Collpase a group item.
     *
     * @param {JQuery} item  the jQuery object
     */
    collapseGroup(item) {
        if (!this.isGroupCollapsed(item)) {
            this.toggleGroup(item);
        }
    }

    /**
     * Expand all groups.
     */
    expandAllGroups() {
        const togglers = getList(this.treeRoot)[0].querySelectorAll(this.selectors.SECTION);
        togglers.forEach(item => {
            this.expandGroup(jQuery(item));
        });
    }
}