MDL-53172 core: toggle and select in inplace_editable
[moodle.git] / lib / templates / inplace_editable.mustache
1 {{!
2     This file is part of Moodle - http://moodle.org/
4     Moodle is free software: you can redistribute it and/or modify
5     it under the terms of the GNU General Public License as published by
6     the Free Software Foundation, either version 3 of the License, or
7     (at your option) any later version.
9     Moodle is distributed in the hope that it will be useful,
10     but WITHOUT ANY WARRANTY; without even the implied warranty of
11     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12     GNU General Public License for more details.
14     You should have received a copy of the GNU General Public License
15     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 }}
17 {{!
18     @template core/inplace_editable
20     Displays the value that can be edited inline.
22     Classes required for JS:
23     * none
25     Data attributes required for JS:
26     * data-inplaceeditable
27     * data-inplaceeditablelink
28     * data-component
29     * data-itemtype
30     * data-itemid
31     * data-value
32     * data-editlabel
33     * data-type
34     * data-options
36     Context variables required for this template:
37     * none
39     Example context (json):
40     {
41         "displayvalue" : "<a href=\"#\">Moodle</a>",
42         "value" : "Moodle",
43         "itemid" : "1",
44         "component" : "core_unknown",
45         "itemtype" : "unknown",
46         "edithint" : "Edit this",
47         "editlabel" : "New name for this",
48         "type" : "text",
49         "options" : ""
50     }
51 }}
52 {{#component}}
53 <span class="inplaceeditable inplaceeditable-{{type}}" data-inplaceeditable="1" data-component="{{component}}" data-itemtype="{{itemtype}}" data-itemid="{{itemid}}"
54     data-value="{{value}}" data-editlabel="{{editlabel}}" data-type="{{type}}" data-options="{{options}}">
55         {{{displayvalue}}}
56         <a href="#" class="quickeditlink visibleifjs" data-inplaceeditablelink="1" title="{{edithint}}">
57             {{#pix}}t/editstring,core,{{edithint}}{{/pix}}
58         </a>
59 </span>
60 {{#js}}
61     require(['core/inplace_editable'], function(ie) { ie.init_inplace_editable(); });
62 {{/js}}
63 {{/component}}
64 {{^component}}
65     {{{displayvalue}}}
66 {{/component}}