Proyectos de Subversion Moodle

{{!

    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>