lib/templates/select_menu.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/select_menu
  19
  20     Template for select_menu output component.
  21
  22     Context variables required for this template:
  23     * name - name of the form element
  24     * value - value of the form element
  25     * baseid - id of the dropdown element and to be used to generate id for other elements used internally
  26     * label - Element label
  27     * labelattributes - Label attributes.
  28     * selectedoption - Text of the selected option
  29     * options - Array of options for the select with value, name, selected, isgroup and id properites.
  30
  31     Example context (json):
  32     {
  33         "name": "menuname",
  34         "value": "opt2",
  35         "baseid": "select-menu56789",
  36         "label": "Select one option",
  37         "labelattributes": [
  38             {
  39                 "name": "class",
  40                 "value": "font-weight-bold"
  41             }
  42         ],
  43         "selectedoption": "Second option",
  44         "options": [
  45             {
  46                 "name": "First option",
  47                 "value": "opt1",
  48                 "id": "select-menu-option1",
  49                 "selected": false
  50             },
  51             {
  52                 "name": "Second option",
  53                 "value": "opt2",
  54                 "id": "select-menu-option2",
  55                 "selected": true
  56             },
  57             {
  58                 "selected": false,
  59                 "isgroup": {
  60                     "name": "First group",
  61                     "id": "select-menu-group1",
  62                     "options": [
  63                         {
  64                             "name": "Third option",
  65                             "value": "opt3",
  66                             "id": "select-menu-option3",
  67                             "selected": false
  68                         },
  69                         {
  70                             "name": "Fourth option",
  71                             "value": "opt4",
  72                             "id": "select-menu-option4",
  73                             "selected": false
  74                         }
  75                     ]
  76                 }
  77             },
  78             {
  79                 "name": "Fifth option",
  80                 "value": "opt5",
  81                 "id": "select-menu-option5",
  82                 "selected": false
  83             }
  84         ]
  85     }
  86 }}
  87 <div class="dropdown select-menu" id="{{baseid}}">
  88     {{#label}}
  89         <label id="{{baseid}}-label"{{#labelattributes}} {{name}}="{{value}}"{{/labelattributes}}>{{label}}</label>
  90     {{/label}}
  91     <div
  92         class="btn dropdown-toggle"
  93         role="combobox"
  94         data-toggle="dropdown"
  95         {{#label}}aria-labelledby="{{baseid}}-label"{{/label}}
  96         aria-haspopup="listbox"
  97         aria-expanded="false"
  98         aria-controls="{{baseid}}-listbox"
  99         data-input-element="{{baseid}}-input"
 100         tabindex="0"
 101     >
 102         {{selectedoption}}
 103     </div>
 104     <ul class="dropdown-menu" role="listbox" id="{{baseid}}-listbox" {{#label}}aria-labelledby="{{baseid}}-label"{{/label}}>
 105         {{#options}}
 106             {{#isgroup}}
 107                 <li role="none">
 108                     <ul role="group" aria-labelledby="{{id}}">
 109                         <li role="presentation" id="{{id}}">{{name}}</li>
 110                         {{#options}}
 111                             <li class="dropdown-item" role="option" id="{{id}}" data-value="{{value}}" {{#selected}}aria-selected="true"{{/selected}}>
 112                                 {{name}}
 113                             </li>
 114                         {{/options}}
 115                     </ul>
 116                 </li>
 117             {{/isgroup}}
 118             {{^isgroup}}
 119                 <li class="dropdown-item" role="option" id="{{id}}" data-value="{{value}}" {{#selected}}aria-selected="true"{{/selected}}>
 120                     {{name}}
 121                 </li>
 122             {{/isgroup}}
 123         {{/options}}
 124     </ul>
 125     <input type="hidden" name="{{name}}" value="{{value}}" id="{{baseid}}-input">
 126 </div>
 127 {{#js}}
 128     var label = document.getElementById('{{baseid}}-label');
 129     if (label) {
 130         label.addEventListener('click', function() {
 131             this.parentElement.querySelector('.dropdown-toggle').focus();
 132         });
 133     }
 134 {{/js}}