question/templates/tag_condition.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_question/tag_condition
  19
  20     An auto-complete select box containing a list of available tags to
  21     filter the quesiton bank questions by.
  22
  23     Classes required for JS:
  24     * none
  25
  26     Data attributes required for JS:
  27     * none
  28
  29     Context variables required for this template:
  30     * tagoptions A list of available tags
  31
  32     Example context (json):
  33     {
  34         "tagoptions": [
  35             {
  36                 "id": 1,
  37                 "name": "foo",
  38                 "selected": true
  39             },
  40             {
  41                 "id": 2,
  42                 "name": "bar",
  43                 "selected": false
  44             }
  45         ]
  46     }
  47 }}
  48 <div class="tag-condition-container" data-region="tag-condition-container-{{uniqid}}">
  49     <div class="form-group">
  50         <select multiple name="qtagids[]" class="form-control invisible" size="3" data-region="tag-select">
  51             {{#tagoptions}}
  52                 <option {{#selected}}selected{{/selected}} value="{{id}}">{{name}}</option>
  53             {{/tagoptions}}
  54         </select>
  55         {{< core/overlay_loading }}
  56             {{$hiddenclass}}{{/hiddenclass}}
  57         {{/ core/overlay_loading }}
  58     </div>
  59 </div>
  60 {{#js}}
  61 require(
  62 [
  63     'jquery',
  64     'core/form-autocomplete'
  65 ],
  66 function(
  67     $,
  68     AutoComplete
  69 ) {
  70     var root = $('[data-region="tag-condition-container-{{uniqid}}"]');
  71     var selectElement = root.find('[data-region="tag-select"]');
  72     var loadingContainer = root.find('[data-region="overlay-icon-container"]');
  73     var placeholderText = {{#quote}}{{#str}} filterbytags, core_question {{/str}}{{/quote}};
  74     var noSelectionText = {{#quote}}{{#str}} notagfiltersapplied, core_question {{/str}}{{/quote}};
  75
  76     AutoComplete.enhance(
  77         selectElement, // Element to enhance.
  78         false, // Don't allow support for creating new tags.
  79         false, // Don't allow AMD module to handle loading new tags.
  80         placeholderText, // Placeholder text.
  81         false, // Make search case insensitive.
  82         true, // Show suggestions for tags.
  83         noSelectionText // Text when no tags are selected.
  84     ).always(function() {
  85         // Hide the loading icon once the autocomplete has initialised.
  86         loadingContainer.addClass('hidden');
  87     });
  88
  89     // We need to trigger a form submission because of how the question bank
  90     // page handles reloading the questions when an option changes.
  91     selectElement.on('change', function() {
  92         selectElement.closest('form').submit();
  93     });
  94 });
  95 {{/js}}