MDL-64506 templates: BS2 pull-x -> BS4 float-x
[moodle.git] / mod / lti / templates / tool_card.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 mod_lti/tool_card
20     This template provides the layout for a single tool card on the tool
21     configuration page.
23     Classes required for JS:
24     * none
26     Data attributes required for JS:
27     * none
29     Context variables required for this template:
30     * hascapabilitygroups
31     * state
32     ** pending|configured|rejected|unknown
33     ** text
34     * courseid
35     * urls
36     ** course
37     ** icon
38     * name
39     * description
40     * instancecount
42 }}
43 <div class="tool-card" data-type-id="{{id}}">
44     <div class="overlay-container">
45         <div class="img-container">
46             {{> mod_lti/loader }}
47             <div class="success-icon-container">{{#pix}} i/valid, core, {{#str}} success {{/str}}{{/pix}}</div>
48             <div class="fail-icon-container">{{#pix}} i/invalid, core, {{#str}} error {{/str}}{{/pix}}</div>
49         </div>
50         {{#hascapabilitygroups}}
51             {{> mod_lti/tool_type_capabilities_agree }}
52         {{/hascapabilitygroups}}
53     </div>
54     <div class="tool-card-content">
55         <div class="tool-card-header">
56             <div class="tool-card-subheader">
57                 <div class="tag
58                             {{#state.pending}}badge-info{{/state.pending}}
59                             {{#state.configured}}badge-success{{/state.configured}}
60                             {{#state.rejected}}badge-danger{{/state.rejected}}
61                             {{#state.unknown}}badge-warning{{/state.unknown}}">
62                     {{state.text}}
63                 </div>
64                 <div class="tool-card-actions float-sm-right">
65                     {{#courseid}}
66                         <a href="{{{urls.course}}}" title="{{#str}} courselink, mod_lti {{/str}}">{{#pix}} i/course, core, {{#str}} courselink, mod_lti {{/str}}{{/pix}}</a>
67                     {{/courseid}}
68                     <a class="edit" href="{{{urls.edit}}}" title="{{#str}} edit {{/str}}">{{#pix}} t/edit, core, {{#str}} edit {{/str}}{{/pix}}</a>
69                     <a class="delete" href="#" title="{{#str}} delete {{/str}}">{{#pix}} t/delete, core, {{#str}} delete {{/str}}{{/pix}}</a>
70                 </div>
71             </div>
72             <img class="tool-card-icon" src="{{{urls.icon}}}" alt="{{name}}"></img>
73             <div class="contenteditable-container">
74                 <h4 class="name" contenteditable="true">{{name}}</h4>
75                 <div class="overlay-container">{{> mod_lti/loader }}</div>
76             </div>
77         </div>
78         <div class="tool-card-body">
79             <div class="contenteditable-container">
80                 <p class="description" contenteditable="true">{{description}}</p>
81                 <div class="overlay-container">{{> mod_lti/loader }}</div>
82             </div>
83         </div>
84         <div class="tool-card-footer">
85             {{#state.pending}}
86                 <a class="activate btn btn-success" href="#">{{#str}} activate, mod_lti {{/str}}</a>
87             {{/state.pending}}
88             {{^state.pending}}
89                 {{#instancecount}}
90                     <p>{{#str}} toolisbeingused, mod_lti, {{instancecount}} {{/str}}</p>
91                 {{/instancecount}}
92                 {{^instancecount}}
93                     <p>{{#str}} toolisnotbeingused, mod_lti{{/str}}</p>
94                 {{/instancecount}}
95             {{/state.pending}}
96         </div>
97     </div>
98 </div>
99 {{#js}}
100     require(['jquery', 'mod_lti/tool_card_controller'], function($, controller) {
101         var cardElement = $('[data-type-id={{id}}]');
102         controller.init(cardElement);
103     });
104 {{/js}}