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/local/dropdown/dialog
Displays a dropdown dialog component.
Classes required for JS:
* none
Context variables required for this template:
* buttoncontent String - the dropdown trigger button content.
* dialogcontent String - the dropdown dialog content.
Optional blocks:
* dropdownclasses - additional classes for the dropdown.
* buttonclasses - additional classes for the dropdown trigger button.
* dialogclasses - additional classes for the dropdown dialog.
* dialogcontent - the dropdown dialog content.
* buttoncontent - the dropdown trigger button content.
* extras - custom HTML attributes for the component.
* dropdownid - the dropdown id (will be auto-generate if no id is passed).
Example context (json):
{
"dropdownid": "internaldropdownid",
"buttonid": "internalbuttonid",
"buttoncontent": "Trigger button",
"dialogcontent": "<a href=\"#\">Moodle</a>",
"extras": [
{
"attribute": "data-example",
"value": "stickyfooter"
}
],
"buttonclasses": "extraclasses",
"dialogclasses": "extraclasses",
"classes": "extraclasses"
}
}}
<div
class="dropdown {{!
}} {{$ dropdownclasses }} {{!
}} {{#classes}} {{classes}} {{/classes}} {{!
}} {{/ dropdownclasses }}"
id="{{$ dropdownid }}{{!
}}{{#dropdownid}}{{dropdownid}}{{/dropdownid}}{{!
}}{{^dropdownid}}dropdownDialog_{{uniqid}}{{/dropdownid}}{{!
}}{{/ dropdownid }}"
{{$ extras }}
{{#extras}}
{{attribute}}="{{value}}"
{{/extras}}
{{/ extras }}
>
<button
class="{{#buttonclasses}} {{buttonclasses}} {{/buttonclasses}} btn--dialog"
type="button"
id="{{#buttonid}}{{buttonid}}{{/buttonid}}{{^buttonid}}dropdownDialog{{uniqid}}{{/buttonid}}"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-for="dropdowndialog_button"
>
<svg width="20" height="20" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V15"></path>
<circle cx="12" cy="9" r="1" fill="currentColor"></circle>
<circle cx="12" cy="12" r="7.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>
</svg>
</button>
<div
class="dropdown-menu {{!
}} dropright {{!
}} {{$ dialogclasses }} {{!
}} {{#dialogclasses}} {{dialogclasses}} {{/dialogclasses}} {{!
}} {{/ dialogclasses }}"
aria-labelledby="{{#buttonid}}{{buttonid}}{{/buttonid}}{{^buttonid}}dropdownDialog{{uniqid}}{{/buttonid}}"
data-for="dropdowndialog_dialog"
>
<span class="badge badge-xs badge-light">{{$ buttoncontent }}{{{ buttoncontent }}}{{/ buttoncontent }}</span>
<div data-for="dropdowndialog_content">
{{$ dialogcontent }}
{{{dialogcontent}}}
{{/ dialogcontent }}
</div>
</div>
</div>
{{#js}}
require(['core/local/dropdown/dialog'], function(Module) {
Module.init('#' + '{{$ dropdownid }}{{!
}}{{#dropdownid}}{{dropdownid}}{{/dropdownid}}{{!
}}{{^dropdownid}}dropdownDialog_{{uniqid}}{{/dropdownid}}{{!
}}{{/ dropdownid }}');
});
{{/js}}