Small updated to the resize system. Should now handle libraries without .$ and FF fullscreen events on Windows.

js/h5p-embed.js

@@ -152,6 +152,7 @@ var H5P = H5P || (function () {
     var $body = $classes.eq(1);
     
     var done = function (c) {
+      H5P.isFullscreen = false;
       $classes.removeClass(c);
       
       if (H5P.fullScreenBrowserPrefix === undefined) {
@@ -166,6 +167,7 @@ var H5P = H5P || (function () {
       }
     };
 
+    H5P.isFullscreen = true;
     if (fullScreenBrowserPrefix === undefined) {
       // Create semi fullscreen.
       

js/h5p.js

@@ -49,8 +49,7 @@ H5P.init = function () {
     };
 
     // Create new instance.
-    var instance = H5P.newRunnable(library, contentId);
+    var instance = H5P.newRunnable(library, contentId, $container, true);
-    instance.attach($container); // Not sent to newRunnable to avoid resize.
     
     // Check if we should add and display a fullscreen button for this H5P.
     if (contentData.fullScreen == 1) {
@@ -87,41 +86,47 @@ H5P.init = function () {
       // Make it possible to resize the iframe when the content changes size. This way we get no scrollbars.
       var iframe = window.parent.document.getElementById('h5p-iframe-' + contentId);
       var resizeIframe = function () {
-        // Use timeout to make sure the iframe is resized
+        if (window.top.H5P.isFullscreen) {
-        setTimeout(function () {
+          return; // Skip if full screen.
-          var fullscreen = $container.hasClass('h5p-fullscreen') || $container.hasClass('h5p-semi-fullscreen');
+        }
-          if (!fullscreen) {
+        
-            // Retain parent size to avoid jumping/scrolling
+        // Retain parent size to avoid jumping/scrolling
-            var parentHeight = iframe.parentElement.style.height;
+        var parentHeight = iframe.parentElement.style.height;
-            iframe.parentElement.style.height = iframe.parentElement.clientHeight + 'px'; 
+        iframe.parentElement.style.height = iframe.parentElement.clientHeight + 'px'; 
-            
+
-            // Reset iframe height, incase content has shrinked.
+        // Reset iframe height, in case content has shrinked.
-            iframe.style.height = '1px';
+        iframe.style.height = '1px';
-            
+
-            // Resize iframe so all content is visible.
+        // Resize iframe so all content is visible.
-            iframe.style.height = (iframe.contentDocument.body.scrollHeight) + 'px';
+        iframe.style.height = (iframe.contentDocument.body.scrollHeight) + 'px';
-            
+
-            // Free parent
+        // Free parent
-            iframe.parentElement.style.height = parentHeight;
+        iframe.parentElement.style.height = parentHeight;
-          }
-        }, 1);
       };
       
-      if (instance.$ !== undefined) {
+      instance.$.on('resize', function () {
-        instance.$.on('resize', resizeIframe);
+        // Use timeout to make sure iframe is resized to the correct size.
-      }
+        setTimeout(function () {
+          resizeIframe();
+        }, 1);
+      });
     }
     
-    var resize = function () {
+    // Resize everything when window is resized.
-      if (instance.$ !== undefined) {
+    $window.resize(function () {
-        // Resize content.
+      if (window.top.H5P.isFullscreen) {
+        // Use timeout to avoid bug in certain browsers when exiting fullscreen. Some browser will trigger resize before the fullscreenchange event.
+        setTimeout(function () {
+          instance.$.trigger('resize');
+        }, 1);
+      }
+      else {
         instance.$.trigger('resize');
       }
-    };
+    });
-    resize();
     
-    // Resize everything when window is resized.
+    // Resize content.
-    $window.resize(resize);
+    instance.$.trigger('resize');
   });
 
   // Insert H5Ps that should be in iframes.
@@ -206,12 +211,11 @@ H5P.fullScreen = function ($element, instance, exitCallback, body) {
     }
   };
 
+  H5P.isFullscreen = true;
   if (H5P.fullScreenBrowserPrefix === undefined) {
     // Create semi fullscreen.
     
     $classes.addClass('h5p-semi-fullscreen');
-    H5P.isFullscreen = true;
-
     var $disable = $container.prepend('<a href="#" class="h5p-disable-fullscreen" title="Disable fullscreen"></a>').children(':first');
     var keyup, disableSemiFullscreen = function () {
       $disable.remove();      
@@ -231,8 +235,8 @@ H5P.fullScreen = function ($element, instance, exitCallback, body) {
     // Create real fullscreen.
     
     var first, eventName = (H5P.fullScreenBrowserPrefix === 'ms' ? 'MSFullscreenChange' : H5P.fullScreenBrowserPrefix + 'fullscreenchange');
-    H5P.isFullscreen = true;
     document.addEventListener(eventName, function () {
+      console.log('FS changed.');
       if (first === undefined) {
         first = false;
         return;
@@ -327,10 +331,11 @@ H5P.classFromName = function (name) {
  * 
  * @param {Object} library Library/action object form params.
  * @param {Number} contentId 
- * @param {jQuery} $attachTo The element to attach the new instance to.
+ * @param {jQuery} $attachTo An optional element to attach the instance to.
+ * @param {Boolean} skipResize Optionally skip triggering of the resize event after attaching.
  * @return {Object} Instance.
  */
-H5P.newRunnable = function (library, contentId, $attachTo) {
+H5P.newRunnable = function (library, contentId, $attachTo, skipResize) {
   try {
     var nameSplit = library.library.split(' ', 2);
     var versionSplit = nameSplit[1].split('.', 2);
@@ -360,9 +365,15 @@ H5P.newRunnable = function (library, contentId, $attachTo) {
   }
   
   var instance = new constructor(library.params, contentId);
+  
+  if (instance.$ === undefined) {
+    instance.$ = H5P.jQuery(instance);
+  }
+  
   if ($attachTo !== undefined) {
     instance.attach($attachTo);
-    if (instance.$ !== undefined) {
+    
+    if (skipResize === undefined || !skipResize) {
       // Resize content.
       instance.$.trigger('resize');
     }

styles/h5p.css

@@ -149,6 +149,7 @@ div.h5p-fullscreen {
   z-index: 10;
   overflow: hidden;
   border: 0;
+  display: block;
 }
 .h5p-iframe-wrapper.h5p-semi-fullscreen .buttons button:before {
   content: 'Exit ';