mod/lti/templates/tool_card.mustache

   1 {{!
   2     This file is part of Moodle - http://moodle.org/
   3
   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.
   8
   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.
  13
  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
  19
  20     This template provides the layout for a single tool card on the tool
  21     configuration page.
  22
  23     Classes required for JS:
  24     * none
  25
  26     Data attributes required for JS:
  27     * none
  28
  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
  41
  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 pull-xs-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}}