AutorÃa | Ultima modificación | Ver Log |
{{!
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_form/filetypes-browser
The template is used to render the content of the UI widget allowing the
user to select individual file types or their groups.
Classes required for JS:
* none
Data attributes required for JS:
* none
Context variables required for this template:
* groups
* key
* name
* selectable
* expanded
* ext
* types
* key
* name
* selected
* expanded
* ext
Example context (json):
{
"groups": [
{
"key": "web_file",
"name": "Web files",
"selectable": true,
"selected": false,
"ext": ".css .html .xhtml .htm .js",
"types": [
{
"key": ".css",
"name": "Cascading Style-Sheet",
"selected": true,
"ext": ".css"
},
{
"key": ".htm",
"name": "HTML text",
"selected": false,
"ext": ".htm .xhtml .html"
}
]
},
{
"key": "web_audio",
"name": "Web-safe audio files",
"selectable": false,
"selected": false,
"ext": null,
"types": [
{
"key": "audio/mp3",
"name": "Audio file (MP3)",
"selected": false,
"ext": ".mp3"
}
]
}
]
}
}}
<div data-filetypesbrowserbody="{{elementid}}" role="tree">
{{#groups}}
<div data-filetypesbrowserkey="{{key}}" role="treeitem" aria-expanded="{{#expanded}}true{{/expanded}}{{^expanded}}false{{/expanded}}">
<label>
{{#selectable}}
<input data-filetypesbrowserkey="{{key}}" type="checkbox" {{#selected}}checked{{/selected}}>
<strong data-filetypesname="{{key}}">{{name}}</strong>
<small class="muted" data-filetypesextensions="{{key}}">
{{ext}}
</small>
{{/selectable}}
{{^selectable}}
<strong>{{name}}</strong>
{{/selectable}}
</label>
{{#types.0}}
{{! The tree provides its own accessibility controls, these two links are here for mouse users.
For that reason, we hide them from assistive technologies. }}
<small aria-hidden="true" data-filetypesbrowserfeature="hideifexpanded" class="float-right float-right"><a href="#">{{#str}}expand{{/str}}</a></small>
<small aria-hidden="true" data-filetypesbrowserfeature="hideifcollapsed" class="float-right float-right"><a href="#">{{#str}}collapse{{/str}}</a></small>
{{/types.0}}
<ul class="unstyled list-unstyled" role="group">
{{#types}}
<li data-filetypesbrowserkey="{{key}}" style="margin-left: 2em" role="treeitem">
<label>
<input data-filetypesbrowserkey="{{key}}" type="checkbox" {{#selected}}checked{{/selected}}>
<span data-filetypesname="{{key}}">{{name}}</span>
<small class="muted" data-filetypesextensions="{{key}}">
{{ext}}
</small>
</label>
</li>
{{/types}}
</ul>
<hr style="clear:both">
</div>
{{/groups}}
</div>