mod/lti/templates/contentitem.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/contentitem
  19
  20     Provides a template for the creation of a new external tool instance via the content-item message.
  21
  22     Classes required for JS:
  23     * none
  24
  25     Data attributes required for JS:
  26     * none
  27
  28     Context variables required for this template:
  29     * url The URL the iframe has to load.
  30     * postData The JSON object that contains the information to be POSTed for the ContentItemSelectionRequest.
  31
  32     Example context (json):
  33     {
  34         "url": "/",
  35         "postData": {
  36             "id": "1",
  37             "course": "1",
  38             "title": "Sample title",
  39             "text": "This is a description"
  40         }
  41     }
  42
  43 }}
  44 <div id="contentitem-container" class="contentitem-container">
  45     <div class="contentitem-loading-container loading-screen">
  46         {{> mod_lti/loader }}
  47         <p class="loading-text">{{#str}} loadinghelp, moodle {{/str}}</p>
  48         <p id="tool-loading-failed" class="hidden">{{#str}} register_warning, mod_lti {{/str}}</p>
  49     </div>
  50     <div class="contentitem-page">
  51         <iframe id="contentitem-page-iframe" name="contentitem-page-iframe" class="hidden" tabindex="0">
  52         </iframe>
  53         <form target="contentitem-page-iframe" action="{{url}}" id="contentitem-request-form" method="post">
  54             <input type="hidden" name="id" value="{{postData.id}}" />
  55             <input type="hidden" name="course" value="{{postData.course}}" />
  56             <input type="hidden" name="title" value="{{postData.title}}" />
  57             <input type="hidden" name="text" value="{{postData.text}}" />
  58         </form>
  59     </div>
  60 </div>
  61 {{#js}}
  62     require(['jquery'], function($) {
  63         var loadingContainer = $('.contentitem-loading-container');
  64         var iframe = $('#contentitem-page-iframe');
  65         var timeout = setTimeout(function () {
  66             var failedContainer = $('#tool-loading-failed');
  67             failedContainer.removeClass('hidden');
  68         }, 20000);
  69
  70         // Submit form.
  71         $('#contentitem-request-form').submit();
  72
  73         iframe.on('load', function() {
  74             loadingContainer.addClass('hidden');
  75             iframe.removeClass('hidden');
  76
  77             // Adjust iframe's width to the fit the container's width.
  78             var containerWidth = $('div.contentitem-container').width();
  79             $('#contentitem-page-iframe').width(containerWidth + 'px');
  80
  81             // Adjust iframe's height to 75% of the width.
  82             var containerHeight = containerWidth * 0.75;
  83             $('#contentitem-page-iframe').height(containerHeight + 'px');
  84         });
  85     });
  86 {{/js}}