moodle/lib/templates/single_select.mustache

{{!
    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/single_select

    Moodle template for a single select submit form.

    Context variables required for this template:
    * name - Element name.
    * method - get or post.
    * action - the action url to submit to.
    * classes - Element classes.
    * label - Element label.
    * disabled - true if this element is disabled.
    * title - Element title.
    * formid - optional id value for the form.
    * id - id for the element.
    * params - array of params with name and value attributes.
    * options - Array of options for the select with value, name , slected and optgroup properites.
    * labelattributes - Label attributes.
    * helpicon - Help icon.

    Example context (json):
    {
        "name": "lang",
        "method": "get",
        "action": "http://localhost/stable_master/mod/scorm/player.php",
        "classes": "langmenu",
        "label": "Zombies are coming...",
        "disabled": false,
        "title": null,
        "formid": "randomid",
        "id": "single_select5833dd4f4b08d108",
        "params": [
            {
                "name": "scoid",
                "value": "12"
            },
            {
                "name": "cm",
                "value": "15"
            },
            {
                "name": "mode",
                "value": "review"
            },
            {
                "name": "currentorg",
                "value": "eXeMapADrive4823c6301cf72b22b72"
            }
        ],
        "options": [
            {
                "value": "en",
                "name": "English ‎(en)‎",
                "selected": true,
                "optgroup": false
            },
            {
                "value": "ar",
                "name": "Muhaaaa..",
                "selected": false,
                "optgroup": false
            }
        ],
        "labelattributes": [],
        "helpicon": false
    }
}}

<div class="{{classes}} d-inline-block">
    <form method="{{method}}" action="{{action}}" class="d-flex flex-wrap align-items-center" id="{{formid}}">
        {{#params}}
            <input type="hidden" name="{{name}}" value="{{value}}">
        {{/params}}
        {{#label}}
            <label for="{{id}}"{{#labelattributes}} {{name}}="{{value}}"{{/labelattributes}}>
                {{{label}}}
            </label>
        {{/label}}
        {{#helpicon}}
            {{>core/help_icon}}
        {{/helpicon}}
        <select {{#attributes}}{{name}}="{{value}}" {{/attributes}} id="{{id}}" class="custom-select {{classes}}" name="{{name}}"
                {{#title}}title="{{.}}"{{/title}} {{#disabled}}disabled{{/disabled}}>
            {{#options}}
                {{#optgroup}}
                    <optgroup label="{{name}}">
                    {{#options}}
                    <option value="{{value}}" {{#selected}}selected{{/selected}}>{{{name}}}</option>
                    {{/options}}
                    </optgroup>
                {{/optgroup}}
                {{^optgroup}}
                    <option {{ignore}} value="{{value}}" {{#selected}}selected{{/selected}}>{{{name}}}</option>
                {{/optgroup}}
            {{/options}}
        </select>
        <noscript>
            <input type="submit" class="btn btn-secondary ml-1" value="{{#str}}go, core{{/str}}">
        </noscript>
    </form>
</div>
{{#js}}
require(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) {
    CustomEvents.define('#{{id}}', [CustomEvents.events.accessibleChange]);
    $('#{{id}}').on(CustomEvents.events.accessibleChange, function() {
        var ignore = $(this).find(':selected').attr('data-ignore');
        if (typeof ignore === typeof undefined) {
            $('#{{formid}}').submit();
        }
    });
});
{{/js}}