MDL-78665 output: add default template to choicelist
The choicelist output class is designed to represent a user choice in several formats like a dropdown or subpanel. In general, other components are free to render the choice in its own way. However, to simplify the logic the choicelist now provide a default template to be used in any div or panel.
This commit is contained in:
Ferran Recio
@@ -18,6 +18,7 @@ namespace core\output;
|
||||
|
||||
use renderable;
|
||||
use renderer_base;
|
||||
use core\output\named_templatable;
|
||||
|
||||
/**
|
||||
* A generic user choice output class.
|
||||
@@ -29,7 +30,7 @@ use renderer_base;
|
||||
* @copyright 2023 Ferran Recio <[email protected]>
|
||||
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
||||
*/
|
||||
class choicelist implements renderable {
|
||||
class choicelist implements renderable, named_templatable {
|
||||
|
||||
/** @var object[] The user choices. */
|
||||
protected $options = [];
|
||||
@@ -185,4 +186,14 @@ class choicelist implements renderable {
|
||||
'hasoptions' => !empty($options),
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the name of the template to use for this templatable.
|
||||
*
|
||||
* @param renderer_base $renderer The renderer requesting the template name
|
||||
* @return string
|
||||
*/
|
||||
public function get_template_name(renderer_base $renderer): string {
|
||||
return 'core/local/choicelist';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
{{!
|
||||
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/local/choicelist
|
||||
|
||||
Default template for a choicelist object.
|
||||
|
||||
Classes required for JS:
|
||||
* none
|
||||
|
||||
Context variables required for this template:
|
||||
* buttoncontent String - the dropdown trigger button content.
|
||||
* choices Array - the status options.
|
||||
|
||||
Example context (json):
|
||||
{
|
||||
"hasoptions": true,
|
||||
"dialogcontent": "Dialog content",
|
||||
"options": [
|
||||
{
|
||||
"optionid": "option1",
|
||||
"value": "value1",
|
||||
"name": "First option",
|
||||
"description": "First option description",
|
||||
"hasicon": false,
|
||||
"first": true,
|
||||
"optionnumber": 1,
|
||||
"optionuniqid": "option1uniqid",
|
||||
"selected": true
|
||||
},
|
||||
{
|
||||
"optionid": "option2",
|
||||
"value": "value2",
|
||||
"name": "Second option",
|
||||
"description": "Second option description",
|
||||
"icon": {
|
||||
"extraclasses": "iconhelp",
|
||||
"attributes": [
|
||||
{"name": "src", "value": "../../../pix/help.svg"},
|
||||
{"name": "alt", "value": "Help icon"}
|
||||
]
|
||||
},
|
||||
"hasicon": true,
|
||||
"optionnumber": 2,
|
||||
"optionuniqid": "option2uniqid"
|
||||
},
|
||||
{
|
||||
"optionid": "option3",
|
||||
"value": "value3",
|
||||
"name": "Third option",
|
||||
"description": "Third option description",
|
||||
"icon": {
|
||||
"extraclasses": "iconhelp",
|
||||
"attributes": [
|
||||
{"name": "src", "value": "../../../pix/help.svg"},
|
||||
{"name": "alt", "value": "Help icon"}
|
||||
]
|
||||
},
|
||||
"hasicon": true,
|
||||
"disabled": true,
|
||||
"optionnumber": 3,
|
||||
"optionuniqid": "option3uniqid"
|
||||
}
|
||||
]
|
||||
}
|
||||
}}
|
||||
<div class="d-flex flex-column choicelist" role="listbox">
|
||||
{{#options}}
|
||||
<div
|
||||
class="d-flex flex-row align-items-start p-2 position-relative rounded {{!
|
||||
}} {{#disabled}} dimmed_text {{/disabled}} {{!
|
||||
}} {{#selected}} bg-light selected {{/selected}}"
|
||||
data-optionnumber="{{optionnumber}}"
|
||||
data-selected="{{selected}}"
|
||||
>
|
||||
{{#icon}}
|
||||
<div class="option-icon">
|
||||
{{>core/pix_icon}}
|
||||
</div>
|
||||
{{/icon}}
|
||||
<div class="option-select-indicator">
|
||||
{{#selected}}
|
||||
{{#pix}} i/checkedcircle, core, {{#str}} selected, form {{/str}} {{/pix}}
|
||||
{{/selected}}
|
||||
{{^selected}}
|
||||
{{#pix}} i/uncheckedcircle{{/pix}}
|
||||
{{/selected}}
|
||||
</div>
|
||||
<div class="option-name">
|
||||
<a
|
||||
class="stretched-link text-wrap {{!
|
||||
}} {{#disabled}} disabled {{/disabled}} {{!
|
||||
}} {{#selected}} selected disabled {{/selected}}"
|
||||
role="option"
|
||||
{{#selected}} aria-selected="true" {{/selected}}
|
||||
{{#description}} aria-describedby="{{optionuniqid}}" {{/description}}
|
||||
data-value="{{value}}"
|
||||
{{#hasurl}} href="{{{url}}}" {{/hasurl}}
|
||||
{{! If there is no url, supose JS will handle it somehow. }}
|
||||
{{^hasurl}} href="#" {{/hasurl}}
|
||||
{{#disabled}} tabindex="-1" {{/disabled}}
|
||||
{{#extras}}
|
||||
{{attribute}}="{{value}}"
|
||||
{{/extras}}
|
||||
>
|
||||
{{name}}
|
||||
</a>
|
||||
{{#description}}
|
||||
<div id="{{optionuniqid}}" class="option-description small text-muted text-wrap">
|
||||
{{{description}}}
|
||||
</div>
|
||||
{{/description}}
|
||||
</div>
|
||||
</div>
|
||||
{{/options}}
|
||||
</div>
|
||||
Reference in New Issue
Block a user