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

/**

 * Dropdown status JS controls.

 *

 * The status controls enable extra configurarions for the dropdown like:

 * - Sync the button text with the selected option.

 * - Update the status of the button when the selected option changes. This will

 *   trigger a "change" event when the status changes.

 *

 * @module      core/local/dropdown/status

 * @copyright   2023 Ferran Recio <ferran@moodle.com>

 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 */

import {DropdownDialog} from 'core/local/dropdown/dialog';

const Selectors = {

    checkedIcon: '[data-for="checkedIcon"]',

    option: '[role="option"]',

    optionItem: '[data-optionnumber]',

    optionIcon: '.option-icon',

    selectedOption: '[role="option"][aria-selected="true"]',

    uncheckedIcon: '[data-for="uncheckedIcon"]',

};

const Classes = {

    selected: 'selected',

    disabled: 'disabled',

    hidden: 'd-none',

};

/**

 * Dropdown dialog class.

 * @private

 */

export class DropdownStatus extends DropdownDialog {

    /**

     * Constructor.

     * @param {HTMLElement} element The element to initialize.

     */

    constructor(element) {

        super(element);

        this.buttonSync = element.dataset.buttonSync == 'true';

        this.updateStatus = element.dataset.updateStatus == 'true';

    }

    /**

     * Initialize the subpanel element.

     *

     * This method adds the event listeners to the subpanel and the position classes.

     * @private

     */

    init() {

        super.init();

        if (this.element.dataset.dropdownStatusInitialized) {

            return;

        }

        this.panel.addEventListener('click', this._contentClickHandler.bind(this));

        if (this.element.dataset.buttonSync == 'true') {

            this.setButtonSyncEnabled(true);

        }

        if (this.element.dataset.updateStatus == 'true') {

            this.setUpdateStatusEnabled(true);

        }

        this.element.dataset.dropdownStatusInitialized = true;

    }

    /**

     * Handle click events on the status content.

     * @param {Event} event The event.

     * @private

     */

    _contentClickHandler(event) {

        const option = event.target.closest(Selectors.option);

        if (!option) {

            return;

        }

        if (option.getAttribute('aria-disabled') === 'true') {

            return;

        }

        if (option.getAttribute('aria-selected') === 'true') {

            return;

        }

        if (this.isUpdateStatusEnabled()) {

            this.setSelectedValue(option.dataset.value);

        }

    }

    /**

     * Sets the selected value.

     * @param {string} value The value to set.

     */

    setSelectedValue(value) {

        const selected = this.panel.querySelector(Selectors.selectedOption);

        if (selected && selected.dataset.value === value) {

            return;

        }

        if (selected) {

            this._updateOptionChecked(selected, false);

        }

        const option = this.panel.querySelector(`${Selectors.option}[data-value="${value}"]`);

        if (option) {

            this._updateOptionChecked(option, true);

        }

        if (this.isButtonSyncEnabled()) {

            this.syncButtonText();

        }

        // Emit standard radio button event with the selected option.

        this.element.dispatchEvent(new Event('change'));

    }

    /**

     * Update the option checked content.

     * @private

     * @param {HTMLElement} option the option element to set

     * @param {Boolean} checked the new checked value

     */

    _updateOptionChecked(option, checked) {

        option.setAttribute('aria-selected', checked.toString());

        option.classList.toggle(Classes.selected, checked);

        option.classList.toggle(Classes.disabled, checked);

        const optionItem = option.closest(Selectors.optionItem);

        if (optionItem) {

            this._updateOptionItemChecked(optionItem, checked);

        }

        if (checked) {

            this.element.dataset.value = option.dataset.value;

        } else if (this.element.dataset.value === option.dataset.value) {

            delete this.element.dataset.value;

        }

    }

    /**

     * Update the option item checked content.

     * @private

     * @param {HTMLElement} optionItem

     * @param {Boolean} checked

     */

    _updateOptionItemChecked(optionItem, checked) {

        const selectedClasses = optionItem.dataset.selectedClasses ?? Classes.selected;

        for (const selectedClass of selectedClasses.split(' ')) {

            optionItem.classList.toggle(selectedClass, checked);

        }

        if (checked) {

            optionItem.dataset.selected = checked;

        } else {

            delete optionItem?.dataset.selected;

        }

        const checkedIcon = optionItem.querySelector(Selectors.checkedIcon);

        if (checkedIcon) {

            checkedIcon.classList.toggle(Classes.hidden, !checked);

        }

        const uncheckedIcon = optionItem.querySelector(Selectors.uncheckedIcon);

        if (uncheckedIcon) {

            uncheckedIcon.classList.toggle(Classes.hidden, checked);

        }

    }

    /**

     * Return the selected value.

     * @returns {string|null} The selected value.

     */

    getSelectedValue() {

        const selected = this.panel.querySelector(Selectors.selectedOption);

        return selected?.dataset.value ?? null;

    }

    /**

     * Set the button sync value.

     *

     * If the sync is enabled, the button text will show the selected option.

     *

     * @param {Boolean} value The value to set.

     */

    setButtonSyncEnabled(value) {

        if (value) {

            this.element.dataset.buttonSync = 'true';

        } else {

            delete this.element.dataset.buttonSync;

        }

        if (value) {

            this.syncButtonText();

        }

    }

    /**

     * Return if the button sync is enabled.

     * @returns {Boolean} The button sync value.

     */

    isButtonSyncEnabled() {

        return this.element.dataset.buttonSync == 'true';

    }

    /**

     * Sync the button text with the selected option.

     */

    syncButtonText() {

        const selected = this.panel.querySelector(Selectors.selectedOption);

        if (!selected) {

            return;

        }

        let newText = selected.textContent;

        const optionIcon = this._getOptionIcon(selected);

        if (optionIcon) {

            newText = optionIcon.innerHTML + newText;

        }

        this.button.innerHTML = newText;

    }

    /**

     * Set the update status value.

     *

     * @param {Boolean} value The value to set.

     */

    setUpdateStatusEnabled(value) {

        if (value) {

            this.element.dataset.updateStatus = 'true';

        } else {

            delete this.element.dataset.updateStatus;

        }

    }

    /**

     * Return if the update status is enabled.

     * @returns {Boolean} The update status value.

     */

    isUpdateStatusEnabled() {

        return this.element.dataset.updateStatus == 'true';

    }

    _getOptionIcon(option) {

        const optionItem = option.closest(Selectors.optionItem);

        if (!optionItem) {

            return null;

        }

        return optionItem.querySelector(Selectors.optionIcon);

    }

}

/**

 * Get the dropdown dialog instance form a selector.

 * @param {string} selector The query selector to init.

 * @returns {DropdownStatus|null} The dropdown dialog instance if any.

 */

export const getDropdownStatus = (selector) => {

    const dropdownElement = document.querySelector(selector);

    if (!dropdownElement) {

        return null;

    }

    return new DropdownStatus(dropdownElement);

};

/**

 * Initialize module.

 *

 * @method

 * @param {string} selector The query selector to init.

 */

export const init = (selector) => {

    const dropdown = getDropdownStatus(selector);

    if (!dropdown) {

        throw new Error(`Dopdown status element not found: ${selector}`);

    }

    dropdown.init();

};