mirror of
https://github.com/moodle/moodle.git
synced 2025-01-18 22:08:20 +01:00
93 lines
3.9 KiB
Plaintext
93 lines
3.9 KiB
Plaintext
{{!
|
|
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/comboboxsearch
|
|
|
|
Combobox search selector dropdown.
|
|
|
|
Context variables required for this template:
|
|
* label - The label for the the combobox.
|
|
* name - The name of the input element representing the combobox.
|
|
* value - The value of the input element representing the combobox.
|
|
* renderlater - This determines if we show a placeholder whilst fetching content to replace within the placeholder region
|
|
* buttonheader - The header to be shown above the button
|
|
* buttoncontent - The string to be shown to users to trigger the dropdown
|
|
* usebutton - If we want to use a button to trigger the dropdown, or just the dropdown itself
|
|
* dropdowncontent - If rendering now, The content within the dropdown
|
|
* parentclasses - Our class for the DOM Node that the default bootstrap dropdown events are tagged onto
|
|
* buttonclasses - If you want special handling add classes here
|
|
* dropdownclasses - If you want special handling or sizing etc add classes here
|
|
* instance - The instance ID of the tertiary navigation dropdown
|
|
|
|
Example context (json):
|
|
{
|
|
"label": "Example searchable combobox",
|
|
"name": "input-1",
|
|
"value": "0",
|
|
"renderlater": false,
|
|
"buttonheader": "Example:",
|
|
"usebutton": true,
|
|
"buttoncontent": "Dropdown button",
|
|
"dropdowncontent": "Some body content to render right now",
|
|
"parentclasses": "my-dropdown",
|
|
"buttonclasses": "my-button",
|
|
"dropdownclasses": "my-cool-dropdown",
|
|
"instance": 25
|
|
}
|
|
}}
|
|
{{#buttonheader}}
|
|
<small>{{.}}</small>
|
|
{{/buttonheader}}
|
|
<div class="{{#parentclasses}}{{.}}{{/parentclasses}} dropdown" data-instance="{{instance}}">
|
|
|
|
{{#usebutton}}
|
|
<div tabindex="0"
|
|
data-toggle="dropdown"
|
|
aria-expanded="false"
|
|
role="combobox"
|
|
aria-haspopup="dialog"
|
|
aria-controls="dialog-{{instance}}-{{uniqid}}"
|
|
class="{{#buttonclasses}}{{.}}{{/buttonclasses}} btn dropdown-toggle d-flex text-left align-items-center p-0 font-weight-bold"
|
|
aria-label="{{label}}"
|
|
data-input-element="input-{{instance}}-{{uniqid}}">
|
|
{{{buttoncontent}}}
|
|
</div>
|
|
<input type="hidden" name="{{name}}" value="{{value}}" id="input-{{instance}}-{{uniqid}}"/>
|
|
{{/usebutton}}
|
|
|
|
{{^usebutton}}{{{buttoncontent}}}{{/usebutton}}
|
|
|
|
<div class="{{#dropdownclasses}}{{.}}{{/dropdownclasses}} dropdown-menu"
|
|
id="dialog-{{instance}}-{{uniqid}}"
|
|
{{#usebutton}}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="{{label}}"
|
|
{{/usebutton}}
|
|
>
|
|
<div class="w-100 p-3" data-region="placeholder">
|
|
{{#renderlater}}
|
|
<div class="d-flex flex-column align-items-stretch justify-content-between" style="height: 150px; width: 300px;">
|
|
<div class="bg-pulse-grey w-100 h-100 my-1"></div>
|
|
<div class="bg-pulse-grey w-100 h-100 my-1"></div>
|
|
<div class="bg-pulse-grey w-100 h-100 my-1"></div>
|
|
</div>
|
|
{{/renderlater}}
|
|
{{^renderlater}}
|
|
{{{dropdowncontent}}}
|
|
{{/renderlater}}
|
|
</div>
|
|
</div>
|
|
</div>
|