first commit

user/templates/comboboxsearch/resultitem.mustache

@@ -0,0 +1,57 @@
+{{!
+    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_user/comboboxsearch/resultitem
+
+    Template for the individual result item.
+
+    Context variables required for this template:
+    * id - User system ID.
+    * fullname - Users' full name.
+    * profileimageurl - Link for the users' large profile image.
+    * matchingField - The field in the user object that matched the search criteria.
+    * matchingFieldName - The name of the field that was matched upon for A11y purposes.
+
+    Example context (json):
+    {
+        "id": 2,
+        "fullname": "Foo bar",
+        "profileimageurl": "http://foo.bar/pluginfile.php/79/user/icon/boost/f1?rev=7630",
+        "matchingField": "<span class=\"font-weight-bold\">Foo</span> bar",
+        "matchingFieldName": "Fullname"
+    }
+}}
+{{<core/local/comboboxsearch/resultitem }}
+    {{$arialabel}}{{fullname}}{{/arialabel}}
+    {{$shorttext}}{{fullname}}{{/shorttext}}
+    {{$content}}
+        <span class="d-block px-2 w-25">
+            {{#profileimageurl}}
+                <img class="userpicture w-100 mx-auto d-block" src="{{profileimageurl}}" alt=""/>
+            {{/profileimageurl}}
+            {{^profileimageurl}}
+                <span class="userinitials"></span>
+            {{/profileimageurl}}
+        </span>
+        <span class="d-block pr-3 w-75">
+                <span class="d-block w-100 p-0 text-truncate font-weight-bold">
+                    {{fullname}}
+                </span>
+            <span class="d-block w-100 pull-left text-truncate small" aria-hidden="true">
+                {{{matchingField}}}
+            </span>
+            <span class="sr-only" aria-label="{{#str}}usermatchedon, core{{/str}}">{{matchingFieldName}}</span>
+        </span>
+    {{/content}}
+{{/core/local/comboboxsearch/resultitem}}

user/templates/comboboxsearch/resultset.mustache

@@ -0,0 +1,75 @@
+{{!
+    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_user/comboboxsearch/resultset
+
+    Wrapping template for returned result items.
+
+    Context variables required for this template:
+    * instance - The instance ID of the combo box.
+    * users - Our returned users to render.
+    * found - Count of the found users.
+    * total - Total count of users within this report.
+    * selectall - Whether to show the select all option.
+    * searchterm - The entered text to find these results.
+    * hasusers - Allow the handling where no users exist for the returned search term.
+
+    Example context (json):
+    {
+        "instance": 25,
+        "users": [
+            {
+                "id": 2,
+                "fullname": "Foo bar",
+                "profileimageurl": "http://foo.bar/pluginfile.php/79/user/icon/boost/f1?rev=7630",
+                "matchingField": "<span class=\"font-weight-bold\">Foo</span> bar",
+                "matchingFieldName": "Fullname"
+            },
+            {
+                "id": 3,
+                "fullname": "Bar Foo",
+                "profileimageurl": "http://foo.bar/pluginfile.php/80/user/icon/boost/f1?rev=7631",
+                "matchingField": "Bar <span class=\"font-weight-bold\">Foo</span>",
+                "matchingFieldName": "Fullname"
+            }
+        ],
+        "matches": 20,
+        "selectall": true,
+        "searchterm": "Foo",
+        "hasresults": true
+    }
+}}
+{{<core/local/comboboxsearch/resultset}}
+    {{$listid}}user{{/listid}}
+    {{$results}}
+        {{#users}}
+            {{>core_user/comboboxsearch/resultitem}}
+        {{/users}}
+    {{/results}}
+    {{$selectall}}
+        {{#selectall}}
+            <li
+                id="result-row-{{instance}}-0"
+                class="w-100 p-1 border-top bottom-0 position-sticky dropdown-item d-flex small p-3"
+                role="option"
+                {{! The data-short-text attribute is provided so that aria.js would use it rather than the whole content. }}
+                data-short-text="{{searchterm}}"
+                data-value="0"
+            >
+                {{#str}}viewallresults, core, {{matches}}{{/str}}
+            </li>
+        {{/selectall}}
+    {{/selectall}}
+    {{$listclasses}}mh-100{{/listclasses}}
+{{/core/local/comboboxsearch/resultset}}

user/templates/comboboxsearch/user_selector.mustache

@@ -0,0 +1,61 @@
+{{!
+    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_user/comboboxsearch/user_selector
+
+    The user selector trigger element.
+
+    Context variables required for this template:
+    * name - The name of the input element representing the user search combobox.
+    * value - The value of the input element representing the user search combobox.
+    * currentvalue - If the user has already searched, set the value to that.
+    * courseid - The course ID.
+    * group - The group ID.
+    * resetlink - The link to reset the page.
+
+    Example context (json):
+    {
+        "name": "input-1",
+        "value": "0",
+        "currentvalue": "bar",
+        "courseid": 2,
+        "group": 25,
+        "resetlink": "grade/report/grader/index.php?id=2"
+    }
+}}
+<span class="d-none" data-region="courseid" data-courseid="{{courseid}}"></span>
+<span class="d-none" data-region="groupid" data-groupid="{{group}}"></span>
+<span class="d-none" data-region="instance" data-instance="{{instance}}"></span>
+{{< core/search_input_auto }}
+    {{$label}}{{#str}}searchusers, core{{/str}}{{/label}}
+    {{$placeholder}}{{#str}}searchusers, core{{/str}}{{/placeholder}}
+    {{$value}}{{currentvalue}}{{/value}}
+    {{$additionalattributes}}
+        role="combobox"
+        aria-expanded="false"
+        aria-controls="user-{{instance}}-result-listbox"
+        aria-autocomplete="list"
+        aria-haspopup="listbox"
+        data-input-element="user-input-{{uniqid}}-{{instance}}"
+    {{/additionalattributes}}
+{{/ core/search_input_auto }}
+{{#currentvalue}}
+    <a class="ml-2 btn btn-link border-0 align-self-center" href="{{resetlink}}" data-action="resetpage" role="link" aria-label="{{#str}}clearsearch, core{{/str}}">
+        {{#str}}clear{{/str}}
+    </a>
+{{/currentvalue}}
+<input type="hidden" name="{{name}}" value="{{value}}" id="user-input-{{uniqid}}-{{instance}}"/>