EDUCATIC
/
h5p-php-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Made resize script smarter to avoid flickering.

pull/6/head
Frode Petterson 2015-10-26 14:13:21 +01:00
parent f35e36cf5a
commit 876135436c
1 changed files with 12 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
js/h5p-resizer.js
View File

@ -19,6 +19,7 @@
actionHandlers.hello = function (iframe, data, respond) { actionHandlers.hello = function (iframe, data, respond) {
// Make iframe responsive // Make iframe responsive
iframe.style.width = '100%'; iframe.style.width = '100%';
iframe.contentDocument.body.style.height = 'auto';
// Tell iframe that it needs to resize when our window resizes // Tell iframe that it needs to resize when our window resizes
var resize = function (event) { var resize = function (event) {
@ -46,16 +47,6 @@
* @param {Function} respond Send a response to the iframe * @param {Function} respond Send a response to the iframe
*/ */
actionHandlers.prepareResize = function (iframe, data, respond) { actionHandlers.prepareResize = function (iframe, data, respond) {
responseData = {};
// Create spaceholder and insert after iframe.
var spaceholder = document.createElement('div');
spaceholder.style.height = (iframe.clientHeight - 1) + 'px';
iframe.parentNode.insertBefore(spaceholder, iframe.nextSibling);
// Reset iframe height, in case content has shrinked.
iframe.style.height = '1px';
respond('resizePrepared'); respond('resizePrepared');
}; };
@ -68,14 +59,21 @@
* @param {Function} respond Send a response to the iframe * @param {Function} respond Send a response to the iframe
*/ */
actionHandlers.resize = function (iframe, data, respond) { actionHandlers.resize = function (iframe, data, respond) {
// Resize iframe so all content is visible. if (iframe.clientHeight === iframe.contentDocument.body.scrollHeight &&
iframe.style.height = data.height + 'px'; iframe.contentDocument.body.scrollHeight === iframe.contentWindow.document.body.clientHeight) {
iframe.parentNode.removeChild(iframe.nextSibling); return; // Do not resize unless page and scrolling differs
}
// Reset iframe height, in case content has shrinked.
iframe.style.height = iframe.contentWindow.document.body.clientHeight + 'px';
// Resize iframe so all content is visible. Use scrollHeight to make sure we get everything
iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
}; };
/** /**
* Keyup event handler. Exits full screen on escape. * Keyup event handler. Exits full screen on escape.
* *
* @param {Event} event * @param {Event} event
*/ */
var escape = function (event) { var escape = function (event) {