From 1566c4e2b46e0294cd3c6385304152661455042d Mon Sep 17 00:00:00 2001 From: Frode Petterson Date: Wed, 30 Apr 2014 15:59:19 +0200 Subject: [PATCH] Small updated to the resize system. Should now handle libraries without .$ and FF fullscreen events on Windows. --- js/h5p-embed.js | 2 ++ js/h5p.js | 83 ++++++++++++++++++++++++++++--------------------- styles/h5p.css | 1 + 3 files changed, 50 insertions(+), 36 deletions(-) diff --git a/js/h5p-embed.js b/js/h5p-embed.js index 3a3c58b..b94fd29 100644 --- a/js/h5p-embed.js +++ b/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. diff --git a/js/h5p.js b/js/h5p.js index 36c2ab8..c94845d 100644 --- a/js/h5p.js +++ b/js/h5p.js @@ -49,8 +49,7 @@ H5P.init = function () { }; // Create new instance. - var instance = H5P.newRunnable(library, contentId); - instance.attach($container); // Not sent to newRunnable to avoid resize. + var instance = H5P.newRunnable(library, contentId, $container, true); // 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 - setTimeout(function () { - var fullscreen = $container.hasClass('h5p-fullscreen') || $container.hasClass('h5p-semi-fullscreen'); - if (!fullscreen) { - // Retain parent size to avoid jumping/scrolling - var parentHeight = iframe.parentElement.style.height; - iframe.parentElement.style.height = iframe.parentElement.clientHeight + 'px'; - - // Reset iframe height, incase content has shrinked. - iframe.style.height = '1px'; - - // Resize iframe so all content is visible. - iframe.style.height = (iframe.contentDocument.body.scrollHeight) + 'px'; - - // Free parent - iframe.parentElement.style.height = parentHeight; - } - }, 1); + if (window.top.H5P.isFullscreen) { + return; // Skip if full screen. + } + + // Retain parent size to avoid jumping/scrolling + var parentHeight = iframe.parentElement.style.height; + iframe.parentElement.style.height = iframe.parentElement.clientHeight + 'px'; + + // Reset iframe height, in case content has shrinked. + iframe.style.height = '1px'; + + // Resize iframe so all content is visible. + iframe.style.height = (iframe.contentDocument.body.scrollHeight) + 'px'; + + // Free parent + iframe.parentElement.style.height = parentHeight; }; - if (instance.$ !== undefined) { - instance.$.on('resize', resizeIframe); - } + instance.$.on('resize', function () { + // Use timeout to make sure iframe is resized to the correct size. + setTimeout(function () { + resizeIframe(); + }, 1); + }); } - var resize = function () { - if (instance.$ !== undefined) { - // Resize content. + // Resize everything when window is resized. + $window.resize(function () { + 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. - $window.resize(resize); + // Resize content. + 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('').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'); } diff --git a/styles/h5p.css b/styles/h5p.css index 61bfe79..c485572 100644 --- a/styles/h5p.css +++ b/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 ';