6135db2e534b7ead4af63467eb42c81b7036c232
[moodle.git] / h5p / js / embed.js
1 // This file is part of Moodle - http://moodle.org/
2 //
3 // Moodle is free software: you can redistribute it and/or modify
4 // it under the terms of the GNU General Public License as published by
5 // the Free Software Foundation, either version 3 of the License, or
6 // (at your option) any later version.
7 //
8 // Moodle is distributed in the hope that it will be useful,
9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11 // GNU General Public License for more details.
12 //
13 // You should have received a copy of the GNU General Public License
14 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 /* global H5PEmbedCommunicator:true */
17 /**
18  * When embedded the communicator helps talk to the parent page.
19  * This is a copy of the H5P.communicator, which we need to communicate in this context
20  *
21  * @type {H5PEmbedCommunicator}
22  * @module     core_h5p
23  * @copyright  2019 Joubel AS <contact@joubel.com>
24  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
25  */
26 H5PEmbedCommunicator = (function() {
27     /**
28      * @class
29      * @private
30      */
31     function Communicator() {
32         var self = this;
34         // Maps actions to functions.
35         var actionHandlers = {};
37         // Register message listener.
38         window.addEventListener('message', function receiveMessage(event) {
39             if (window.parent !== event.source || event.data.context !== 'h5p') {
40                 return; // Only handle messages from parent and in the correct context.
41             }
43             if (actionHandlers[event.data.action] !== undefined) {
44                 actionHandlers[event.data.action](event.data);
45             }
46         }, false);
48         /**
49          * Register action listener.
50          *
51          * @param {string} action What you are waiting for
52          * @param {function} handler What you want done
53          */
54         self.on = function(action, handler) {
55             actionHandlers[action] = handler;
56         };
58         /**
59          * Send a message to the all mighty father.
60          *
61          * @param {string} action
62          * @param {Object} [data] payload
63          */
64         self.send = function(action, data) {
65             if (data === undefined) {
66                 data = {};
67             }
68             data.context = 'h5p';
69             data.action = action;
71             // Parent origin can be anything.
72             window.parent.postMessage(data, '*');
73         };
74     }
76     return (window.postMessage && window.addEventListener ? new Communicator() : undefined);
77 })();
79 document.onreadystatechange = function() {
80     // Wait for instances to be initialize.
81     if (document.readyState !== 'complete') {
82         return;
83     }
85     // Check for H5P iFrame.
86     var iFrame = document.querySelector('.h5p-iframe');
87     if (!iFrame || !iFrame.contentWindow) {
88         return;
89     }
90     var H5P = iFrame.contentWindow.H5P;
92     // Check for H5P instances.
93     if (!H5P || !H5P.instances || !H5P.instances[0]) {
94         return;
95     }
97     var resizeDelay;
98     var instance = H5P.instances[0];
99     var parentIsFriendly = false;
101     // Handle that the resizer is loaded after the iframe.
102     H5PEmbedCommunicator.on('ready', function() {
103         H5PEmbedCommunicator.send('hello');
104     });
106     // Handle hello message from our parent window.
107     H5PEmbedCommunicator.on('hello', function() {
108         // Initial setup/handshake is done.
109         parentIsFriendly = true;
111         // Hide scrollbars for correct size.
112         iFrame.contentDocument.body.style.overflow = 'hidden';
114         document.body.classList.add('h5p-resizing');
116         // Content need to be resized to fit the new iframe size.
117         H5P.trigger(instance, 'resize');
118     });
120     // When resize has been prepared tell parent window to resize.
121     H5PEmbedCommunicator.on('resizePrepared', function() {
122         H5PEmbedCommunicator.send('resize', {
123             scrollHeight: iFrame.contentDocument.body.scrollHeight
124         });
125     });
127     H5PEmbedCommunicator.on('resize', function() {
128         H5P.trigger(instance, 'resize');
129     });
131     H5P.on(instance, 'resize', function() {
132         if (H5P.isFullscreen) {
133             return; // Skip iframe resize.
134         }
136         // Use a delay to make sure iframe is resized to the correct size.
137         clearTimeout(resizeDelay);
138         resizeDelay = setTimeout(function() {
139             // Only resize if the iframe can be resized.
140             if (parentIsFriendly) {
141                 H5PEmbedCommunicator.send('prepareResize',
142                     {
143                         scrollHeight: iFrame.contentDocument.body.scrollHeight,
144                         clientHeight: iFrame.contentDocument.body.clientHeight
145                     }
146                 );
147             } else {
148                 H5PEmbedCommunicator.send('hello');
149             }
150         }, 0);
151     });
153     // Trigger initial resize for instance.
154     H5P.trigger(instance, 'resize');
155 };