MDL-67917 user: Use custom templates for participant value selection
authorAndrew Nicols <andrew@nicols.co.uk>
Thu, 26 Mar 2020 00:55:18 +0000 (08:55 +0800)
committerAndrew Nicols <andrew@nicols.co.uk>
Wed, 27 May 2020 02:49:43 +0000 (10:49 +0800)
Part of MDL-67743

user/amd/build/local/participantsfilter/filter.min.js
user/amd/build/local/participantsfilter/filter.min.js.map
user/amd/src/local/participantsfilter/filter.js
user/templates/local/participantsfilter/autocomplete_layout.mustache [new file with mode: 0644]
user/templates/local/participantsfilter/autocomplete_selection.mustache [new file with mode: 0644]
user/templates/local/participantsfilter/autocomplete_selection_items.mustache [new file with mode: 0644]

index cb8df33..740ef17 100644 (file)
Binary files a/user/amd/build/local/participantsfilter/filter.min.js and b/user/amd/build/local/participantsfilter/filter.min.js differ
index a04aeda..5670dd2 100644 (file)
Binary files a/user/amd/build/local/participantsfilter/filter.min.js.map and b/user/amd/build/local/participantsfilter/filter.min.js.map differ
index 2cc72af..b3180ad 100644 (file)
@@ -93,7 +93,14 @@ export default class {
             null,
 
             // Close the suggestions if this is not a multi-select.
-            !dataSource.multiple
+            !dataSource.multiple,
+
+            // Template overrides.
+            {
+                items: 'core_user/local/participantsfilter/autocomplete_selection_items',
+                layout: 'core_user/local/participantsfilter/autocomplete_layout',
+                selection: 'core_user/local/participantsfilter/autocomplete_selection',
+            }
         );
     }
 
diff --git a/user/templates/local/participantsfilter/autocomplete_layout.mustache b/user/templates/local/participantsfilter/autocomplete_layout.mustache
new file mode 100644 (file)
index 0000000..4c9665f
--- /dev/null
@@ -0,0 +1,38 @@
+{{!
+    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/local/participantsfilter/autocomplete_layout
+
+    Moodle template for the layout of autocomplete elements.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * data-region="form_autocomplete-input"
+    * data-region="form_autocomplete-suggestions"
+    * data-region="form_autocomplete-selection"
+
+    Context variables required for this template:
+    * none
+
+    Example context (json):
+    {}
+}}
+<div data-region="form_autocomplete-input"></div>
+<div data-region="form_autocomplete-suggestions"></div>
+<div data-region="form_autocomplete-selection"></div>
diff --git a/user/templates/local/participantsfilter/autocomplete_selection.mustache b/user/templates/local/participantsfilter/autocomplete_selection.mustache
new file mode 100644 (file)
index 0000000..a4348e4
--- /dev/null
@@ -0,0 +1,49 @@
+{{!
+    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/local/participantsfilter/autocomplete_selection
+
+    Moodle template for the wrapper of currently selected items in an autocomplate form element.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * multiple True if this field allows multiple selections
+    * selectionId The dom id of the current selection list.
+    * items List of items with label and value fields (used by the partial).
+    * noSelectionString String to use when no items are selected (used by the partial).
+
+    Example context (json):
+    { "multiple": true, "selectionId": 1, "items": [
+        { "label": "Item label with <strong>tags</strong>", "value": "5" },
+        { "label": "Another item label with <strong>tags</strong>", "value": "4" }
+    ], "noSelectionString": "No selection" }
+}}
+<div{{!
+    }} class="d-inline-block px-2{{#multiple}} form-autocomplete-multiple{{/multiple}}"{{!
+    }} id="{{selectionId}}"{{!
+    }} role="list"{{!
+    }} aria-atomic="true"{{!
+    }}{{#multiple}} tabindex="0" aria-multiselectable="true"{{/multiple}}{{!
+    }}>
+<span class="accesshide">{{#str}}selecteditems, form{{/str}}</span>
+    {{> core/form_autocomplete_selection_items }}
+</div>
diff --git a/user/templates/local/participantsfilter/autocomplete_selection_items.mustache b/user/templates/local/participantsfilter/autocomplete_selection_items.mustache
new file mode 100644 (file)
index 0000000..c4d9889
--- /dev/null
@@ -0,0 +1,51 @@
+{{!
+    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/local/participantsfilter/autocomplete_selection_items
+
+    Moodle template for the currently selected items in an autocomplete form element.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * data-value
+
+    Context variables required for this template:
+    * items List of items with label and value fields.
+    *   - value Value of the selected item.
+    *   - label HTML representing the value.
+    * noSelectionString String to use when no items are selected
+
+    Example context (json):
+    {
+        "items": [
+            { "label": "Item label with <strong>tags</strong>", "value": "5" },
+            { "label": "Another item label with <strong>tags</strong>", "value": "4" }
+        ],
+        "noSelectionString": "No selection"
+    }
+}}
+{{#items}}
+    <span role="listitem" data-value="{{value}}" aria-selected="true"
+            class="d-inline-block bg-dark text-white rounded font-weight-bold px-1 m-1">
+        {{label}}<i class="icon fa fa-times pl-2 mr-0"></i>
+    </span>
+{{/items}}
+{{^items}}
+    <span class="mb-3 mr-1">{{noSelectionString}}</span>
+{{/items}}