Merge pull request #23 from golenkovm/h5p-resizer

Second attempt to fix H5p resizer
catalyst · Jul 15, 2022 · ed68c42 · ed68c42
2 parents 9264f99 + 3c356e6
commit ed68c42
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 66 deletions.
diff --git a/amd/build/embed.min.js b/amd/build/embed.min.js
diff --git a/amd/build/embed.min.js.map b/amd/build/embed.min.js.map
diff --git a/amd/src/embed.js b/amd/src/embed.js
@@ -12,86 +12,86 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
-
+/* eslint-disable no-undef, no-console, no-unused-vars, max-len */
 define(['jquery', 'mod_hvp/communicator'], function($, H5PEmbedCommunicator) {
 
     // Wait for instances to be initialize.
     $(document).ready(function() {
         $('.h5p-iframe').ready(function() {
-            var iFrame = document.querySelector('.h5p-iframe');
-            var H5P = iFrame.contentWindow.H5P;
+            initEmbedCommunicator = function() {
+                var resizeDelay;
+                var instance = H5P.instances[0];
+                var parentIsFriendly = false;
 
-            // Check for H5P instances.
-            if (!H5P || !H5P.instances || !H5P.instances[0]) {
-                H5P.externalDispatcher.on('initialized', function() {
-                    setupEmbedCommunicator(iFrame, H5P);
+                // Handle that the resizer is loaded after the iframe.
+                H5PEmbedCommunicator.on('ready', function() {
+                    H5PEmbedCommunicator.send('hello');
                 });
-                return;
-            }
-            setupEmbedCommunicator(iFrame, H5P);
-        });
-    });
-
-    var setupEmbedCommunicator = function (iFrame, H5P) {
-        var resizeDelay;
 
-        var instance = H5P.instances[0];
-        var parentIsFriendly = false;
-
-        // Handle that the resizer is loaded after the iframe.
-        H5PEmbedCommunicator.on('ready', function() {
-            H5PEmbedCommunicator.send('hello');
-        });
+                // Handle hello message from our parent window.
+                H5PEmbedCommunicator.on('hello', function() {
+                    // Initial setup/handshake is done.
+                    parentIsFriendly = true;
 
-        // Handle hello message from our parent window.
-        H5PEmbedCommunicator.on('hello', function() {
-            // Initial setup/handshake is done.
-            parentIsFriendly = true;
+                    // Hide scrollbars for correct size.
+                    iFrame.contentDocument.body.style.overflow = 'hidden';
 
-            // Hide scrollbars for correct size.
-            iFrame.contentDocument.body.style.overflow = 'hidden';
+                    document.body.classList.add('h5p-resizing');
 
-            document.body.classList.add('h5p-resizing');
+                    // Content need to be resized to fit the new iframe size.
+                    H5P.trigger(instance, 'resize');
+                });
 
-            // Content need to be resized to fit the new iframe size.
-            H5P.trigger(instance, 'resize');
-        });
+                // When resize has been prepared tell parent window to resize.
+                H5PEmbedCommunicator.on('resizePrepared', function() {
+                    H5PEmbedCommunicator.send('resize', {
+                        scrollHeight: iFrame.contentDocument.body.scrollHeight
+                    });
+                });
 
-        // When resize has been prepared tell parent window to resize.
-        H5PEmbedCommunicator.on('resizePrepared', function() {
-            H5PEmbedCommunicator.send('resize', {
-                scrollHeight: iFrame.contentDocument.body.scrollHeight
-            });
-        });
+                H5PEmbedCommunicator.on('resize', function() {
+                    H5P.trigger(instance, 'resize');
+                });
 
-        H5PEmbedCommunicator.on('resize', function() {
-            H5P.trigger(instance, 'resize');
-        });
+                H5P.on(instance, 'resize', function() {
+                    if (H5P.isFullscreen) {
+                        return; // Skip iframe resize.
+                    }
+
+                    // Use a delay to make sure iframe is resized to the correct size.
+                    clearTimeout(resizeDelay);
+                    resizeDelay = setTimeout(function() {
+                        // Only resize if the iframe can be resized.
+                        if (parentIsFriendly) {
+                            H5PEmbedCommunicator.send('prepareResize',
+                                {
+                                    scrollHeight: iFrame.contentDocument.body.scrollHeight,
+                                    clientHeight: iFrame.contentDocument.body.clientHeight
+                                }
+                            );
+                        } else {
+                            H5PEmbedCommunicator.send('hello');
+                        }
+                    }, 0);
+                });
 
-        H5P.on(instance, 'resize', function() {
-            if (H5P.isFullscreen) {
-                return; // Skip iframe resize.
+                // Trigger initial resize for instance.
+                H5P.trigger(instance, 'resize');
+            };
+            var iFrame = document.querySelector('.h5p-iframe');
+            var H5P = iFrame.contentWindow.H5P;
+            // Check for H5P instances.
+            if (!H5P || !H5P.instances || !H5P.instances[0]) {
+                console.warn("H5P embed.js: ACK! Embedded H5P.instances[0] in lowest iframe is not set up yet. Waiting for 'initialized' event");
+                window.H5P.externalDispatcher.on('initialized', function(event) {
+                    console.log("H5P embed.js: 'initialized' event received");
+                    H5P = iFrame.contentWindow.H5P;
+                    initEmbedCommunicator();
+                });
+            } else {
+                initEmbedCommunicator();
             }
-
-            // Use a delay to make sure iframe is resized to the correct size.
-            clearTimeout(resizeDelay);
-            resizeDelay = setTimeout(function() {
-                // Only resize if the iframe can be resized.
-                if (parentIsFriendly) {
-                    H5PEmbedCommunicator.send('prepareResize',
-                        {
-                            scrollHeight: iFrame.contentDocument.body.scrollHeight,
-                            clientHeight: iFrame.contentDocument.body.clientHeight
-                        }
-                    );
-                } else {
-                    H5PEmbedCommunicator.send('hello');
-                }
-            }, 0);
         });
-
-        // Trigger initial resize for instance.
-        H5P.trigger(instance, 'resize');
-    };
+    });
 
 });