MDL-78955 lib: merge choicelist templates
This commit is contained in:
Ferran Recio
@@ -80,51 +80,6 @@
|
||||
}}
|
||||
<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>
|
||||
{{> core/local/choicelist/option}}
|
||||
{{/options}}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
{{!
|
||||
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/option
|
||||
|
||||
Default template for a choicelist option.
|
||||
|
||||
Any mustache can user this template to render options in a custom choicelist wrapper.
|
||||
|
||||
Classes required for JS:
|
||||
* none
|
||||
|
||||
Context variables required for this template:
|
||||
* optionuniqid String - unique option id.
|
||||
* value String - option value.
|
||||
* name String - options name.
|
||||
* optionnumber Number - option number.
|
||||
|
||||
Example context (json):
|
||||
{
|
||||
"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",
|
||||
"selected": true
|
||||
}
|
||||
}}
|
||||
<div
|
||||
class="d-flex flex-row align-items-start p-2 mb-1 {{!
|
||||
}} position-relative rounded dropdown-item-outline {{!
|
||||
}} {{#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">
|
||||
<span class="{{^selected}} d-none {{/selected}}" data-for="checkedIcon">
|
||||
{{#pix}} i/checkedcircle, core, {{#str}} selected, form {{/str}} {{/pix}}
|
||||
</span>
|
||||
<span class="{{#selected}} d-none {{/selected}}" data-for="uncheckedIcon">
|
||||
{{#pix}} i/uncheckedcircle{{/pix}}
|
||||
</span>
|
||||
</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>
|
||||
@@ -95,60 +95,7 @@
|
||||
<div class="pb-2 border-bottom">{{{dialogcontent}}}</div>
|
||||
{{/dialogcontent}}
|
||||
{{#choices}}
|
||||
<div class="d-flex flex-column" role="listbox">
|
||||
{{#options}}
|
||||
<div
|
||||
class="d-flex flex-row align-items-start p-2 mb-1 {{!
|
||||
}} position-relative rounded dropdown-item-outline {{!
|
||||
}} {{#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">
|
||||
<span class="{{^selected}} d-none {{/selected}}" data-for="checkedIcon">
|
||||
{{#pix}} i/checkedcircle, core, {{#str}} selected, form {{/str}} {{/pix}}
|
||||
</span>
|
||||
<span class="{{#selected}} d-none {{/selected}}" data-for="uncheckedIcon">
|
||||
{{#pix}} i/uncheckedcircle{{/pix}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="option-name">
|
||||
<a
|
||||
class="stretched-link {{!
|
||||
}} {{#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}}
|
||||
{{#disabled}} aria-disabled="true" {{/disabled}}
|
||||
{{$extras}}
|
||||
{{#extras}}
|
||||
{{attribute}}="{{value}}"
|
||||
{{/extras}}
|
||||
{{/extras}}
|
||||
>
|
||||
{{name}}
|
||||
</a>
|
||||
{{#description}}
|
||||
<div id="{{optionuniqid}}" class="small text-muted">
|
||||
{{{description}}}
|
||||
</div>
|
||||
{{/description}}
|
||||
</div>
|
||||
</div>
|
||||
{{/options}}
|
||||
</div>
|
||||
{{> core/local/choicelist }}
|
||||
{{/choices}}
|
||||
{{/ dialogcontent }}
|
||||
{{/ core/local/dropdown/dialog }}
|
||||
|
||||
Reference in New Issue
Block a user