lib/templates/single_select.mustache

   1 {{!
   2     This file is part of Moodle - http://moodle.org/
   3
   4     Moodle is free software: you can redistribute it and/or modify
   5     it under the terms of the GNU General Public License as published by
   6     the Free Software Foundation, either version 3 of the License, or
   7     (at your option) any later version.
   8
   9     Moodle is distributed in the hope that it will be useful,
  10     but WITHOUT ANY WARRANTY; without even the implied warranty of
  11     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  12     GNU General Public License for more details.
  13
  14     You should have received a copy of the GNU General Public License
  15     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  16 }}
  17 {{!
  18     @template core/single_select
  19
  20     Moodle template for a single select submit form.
  21
  22     Context variables required for this template:
  23     * name - Element name.
  24     * method - get or post.
  25     * action - the action url to submit to.
  26     * classes - Element classes.
  27     * label - Element label.
  28     * disabled - true if this element is disabled.
  29     * title - Element title.
  30     * formid - optional id value for the form.
  31     * id - id for the element.
  32     * params - array of params with name and value attributes.
  33     * options - Array of options for the select with value, name , slected and optgroup properites.
  34     * labelattributes - Label attributes.
  35     * helpicon - Help icon.
  36
  37     Example context (json):
  38     {
  39         "name": "lang",
  40         "method": "get",
  41         "action": "http://localhost/stable_master/mod/scorm/player.php",
  42         "classes": "langmenu",
  43         "label": "Zombies are coming...",
  44         "disabled": false,
  45         "title": null,
  46         "formid": "randomid",
  47         "id": "single_select5833dd4f4b08d108",
  48         "params": [
  49             {
  50                 "name": "scoid",
  51                 "value": "12"
  52             },
  53             {
  54                 "name": "cm",
  55                 "value": "15"
  56             },
  57             {
  58                 "name": "mode",
  59                 "value": "review"
  60             },
  61             {
  62                 "name": "currentorg",
  63                 "value": "eXeMapADrive4823c6301cf72b22b72"
  64             }
  65         ],
  66         "options": [
  67             {
  68                 "value": "en",
  69                 "name": "English ‎(en)‎",
  70                 "selected": true,
  71                 "optgroup": false
  72             },
  73             {
  74                 "value": "ar",
  75                 "name": "Muhaaaa..",
  76                 "selected": false,
  77                 "optgroup": false
  78             }
  79         ],
  80         "labelattributes": [],
  81         "helpicon": false
  82     }
  83 }}
  84
  85 <div class="{{classes}} d-inline-block">
  86     <form method="{{method}}" action="{{action}}" class="d-flex flex-wrap align-items-center" id="{{formid}}">
  87         {{#params}}
  88             <input type="hidden" name="{{name}}" value="{{value}}">
  89         {{/params}}
  90         {{#label}}
  91             <label for="{{id}}"{{#labelattributes}} {{name}}="{{value}}"{{/labelattributes}}>
  92                 {{{label}}}
  93             </label>
  94         {{/label}}
  95         {{#helpicon}}
  96             {{>core/help_icon}}
  97         {{/helpicon}}
  98         <select {{#attributes}}{{name}}="{{value}}" {{/attributes}} id="{{id}}" class="custom-select {{classes}}" name="{{name}}"
  99                 {{#title}}title="{{.}}"{{/title}} {{#disabled}}disabled{{/disabled}}>
 100             {{#options}}
 101                 {{#optgroup}}
 102                     <optgroup label="{{name}}">
 103                     {{#options}}
 104                     <option value="{{value}}" {{#selected}}selected{{/selected}}>{{{name}}}</option>
 105                     {{/options}}
 106                     </optgroup>
 107                 {{/optgroup}}
 108                 {{^optgroup}}
 109                     <option {{ignore}} value="{{value}}" {{#selected}}selected{{/selected}}>{{{name}}}</option>
 110                 {{/optgroup}}
 111             {{/options}}
 112         </select>
 113         <noscript>
 114             <input type="submit" class="btn btn-secondary ml-1" value="{{#str}}go, core{{/str}}">
 115         </noscript>
 116     </form>
 117 </div>
 118 {{#js}}
 119 require(['jquery', 'core/custom_interaction_events'], function($, CustomEvents) {
 120     CustomEvents.define('#{{id}}', [CustomEvents.events.accessibleChange]);
 121     $('#{{id}}').on(CustomEvents.events.accessibleChange, function() {
 122         var ignore = $(this).find(':selected').attr('data-ignore');
 123         if (typeof ignore === typeof undefined) {
 124             $('#{{formid}}').submit();
 125         }
 126     });
 127 });
 128 {{/js}}