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/>.
}}
{{!
    @template core/select_menu

    Template for select_menu output component.

    Context variables required for this template:
    * name - name of the form element
    * value - value of the form element
    * baseid - id of the dropdown element and to be used to generate id for other elements used internally
    * label - Element label
    * labelattributes - Label attributes.
    * selectedoption - Text of the selected option
    * options - Array of options for the select with value, name, selected, isgroup and id properites.

    Example context (json):
    {
        "name": "menuname",
        "value": "opt2",
        "baseid": "select-menu56789",
        "label": "Select one option",
        "headinglevel": "2",
        "labelattributes": [
            {
                "name": "class",
                "value": "fw-bold"
            }
        ],
        "selectedoption": "Second option",
        "options": [
            {
                "name": "First option",
                "value": "opt1",
                "id": "select-menu-option1",
                "selected": false
            },
            {
                "name": "Second option",
                "value": "opt2",
                "id": "select-menu-option2",
                "selected": true
            },
            {
                "selected": false,
                "isgroup": {
                    "name": "First group",
                    "id": "select-menu-group1",
                    "options": [
                        {
                            "name": "Third option",
                            "value": "opt3",
                            "id": "select-menu-option3",
                            "selected": false
                        },
                        {
                            "name": "Fourth option",
                            "value": "opt4",
                            "id": "select-menu-option4",
                            "selected": false
                        }
                    ]
                }
            },
            {
                "name": "Fifth option",
                "value": "opt5",
                "id": "select-menu-option5",
                "selected": false
            }
        ]
    }
}}
<div class="dropdown select-menu" id="{{baseid}}">
    {{#label}}{{^inlinelabel}}
        <span id="{{baseid}}-label"{{#labelattributes}} {{name}}="{{value}}"{{/labelattributes}}>{{label}}</span>
    {{/inlinelabel}}{{/label}}
    <div
        class="btn dropdown-toggle{{#inlinelabel}} d-flex text-start align-items-center p-0{{/inlinelabel}}"
        role="combobox"
        data-bs-toggle="dropdown"
        {{#label}}aria-labelledby="{{baseid}}-label"{{/label}}
        aria-haspopup="listbox"
        aria-expanded="false"
        aria-controls="{{baseid}}-listbox"
        data-input-element="{{baseid}}-input"
        tabindex="0"
    >
        {{#inlinelabel}}
            <div
                class="pe-3 text-truncate"
                {{#headinglevel}}
                role="heading"
                aria-level="{{headinglevel}}"
                {{/headinglevel}}
            >
                {{#label}}
                    <span class="d-block m-0 small" id="{{baseid}}-label"{{#labelattributes}} {{name}}="{{value}}"{{/labelattributes}}>{{label}}</span>
                {{/label}}
                <span class="fw-bold" data-selected-option>
                    {{selectedoption}}
                </span>
            </div>
        {{/inlinelabel}}
        {{^inlinelabel}}
            {{#headinglevel}}
                <span
                    role="heading"
                    aria-level="{{headinglevel}}"
                >
                    {{selectedoption}}
                </span>
            {{/headinglevel}}
            {{^headinglevel}}
                {{selectedoption}}
            {{/headinglevel}}
        {{/inlinelabel}}
    </div>
    <ul class="dropdown-menu" role="listbox" id="{{baseid}}-listbox" {{#label}}aria-labelledby="{{baseid}}-label"{{/label}}>
        {{#options}}
            {{#isgroup}}
                <li role="none">
                    <ul role="group" aria-labelledby="{{id}}">
                        <li role="presentation" id="{{id}}">{{name}}</li>
                        {{#options}}
                            {{#isdivider}}
                                <li role="separator" class="dropdown-divider"></li>
                            {{/isdivider}}
                            {{^isdivider}}
                                <li class="dropdown-item" role="option" id="{{id}}" data-value="{{value}}" {{#selected}}aria-selected="true"{{/selected}}>
                                    {{name}}
                                </li>
                            {{/isdivider}}
                        {{/options}}
                    </ul>
                </li>
            {{/isgroup}}
            {{^isgroup}}
                {{#isdivider}}
                    <li role="separator" class="dropdown-divider"></li>
                {{/isdivider}}
                {{^isdivider}}
                    <li class="dropdown-item" role="option" id="{{id}}" data-value="{{value}}" {{#selected}}aria-selected="true"{{/selected}}>
                        {{name}}
                    </li>
                {{/isdivider}}
            {{/isgroup}}
        {{/options}}
    </ul>
    <input type="hidden" name="{{name}}" value="{{value}}" id="{{baseid}}-input">
</div>
{{#js}}
    var label = document.getElementById('{{baseid}}-label');
    if (label) {
        label.addEventListener('click', function() {
            this.parentElement.querySelector('.dropdown-toggle').focus();
        });
    }
{{/js}}