Medienlounge: Unterschied zwischen den Versionen
(Test H5P Aufgabe) |
Keine Bearbeitungszusammenfassung |
||
Zeile 31: | Zeile 31: | ||
</div> | </div> | ||
// H5P iframe Resizer | |||
(function () { | |||
if (!window.postMessage || !window.addEventListener || window.h5pResizerInitialized) { | |||
return; // Not supported | |||
} | |||
window.h5pResizerInitialized = true; | |||
// Map actions to handlers | |||
var actionHandlers = {}; | |||
/** | |||
* Prepare iframe resize. | |||
* | |||
* @private | |||
* @param {Object} iframe Element | |||
* @param {Object} data Payload | |||
* @param {Function} respond Send a response to the iframe | |||
*/ | |||
actionHandlers.hello = function (iframe, data, respond) { | |||
// Make iframe responsive | |||
iframe.style.width = '100%'; | |||
// Bugfix for Chrome: Force update of iframe width. If this is not done the | |||
// document size may not be updated before the content resizes. | |||
iframe.getBoundingClientRect(); | |||
// Tell iframe that it needs to resize when our window resizes | |||
var resize = function () { | |||
if (iframe.contentWindow) { | |||
// Limit resize calls to avoid flickering | |||
respond('resize'); | |||
} | |||
else { | |||
// Frame is gone, unregister. | |||
window.removeEventListener('resize', resize); | |||
} | |||
}; | |||
window.addEventListener('resize', resize, false); | |||
// Respond to let the iframe know we can resize it | |||
respond('hello'); | |||
}; | |||
/** | |||
* Prepare iframe resize. | |||
* | |||
* @private | |||
* @param {Object} iframe Element | |||
* @param {Object} data Payload | |||
* @param {Function} respond Send a response to the iframe | |||
*/ | |||
actionHandlers.prepareResize = function (iframe, data, respond) { | |||
// Do not resize unless page and scrolling differs | |||
if (iframe.clientHeight !== data.scrollHeight || | |||
data.scrollHeight !== data.clientHeight) { | |||
// Reset iframe height, in case content has shrinked. | |||
iframe.style.height = data.clientHeight + 'px'; | |||
respond('resizePrepared'); | |||
} | |||
}; | |||
/** | |||
* Resize parent and iframe to desired height. | |||
* | |||
* @private | |||
* @param {Object} iframe Element | |||
* @param {Object} data Payload | |||
* @param {Function} respond Send a response to the iframe | |||
*/ | |||
actionHandlers.resize = function (iframe, data) { | |||
// Resize iframe so all content is visible. Use scrollHeight to make sure we get everything | |||
iframe.style.height = data.scrollHeight + 'px'; | |||
}; | |||
/** | |||
* Keyup event handler. Exits full screen on escape. | |||
* | |||
* @param {Event} event | |||
*/ | |||
var escape = function (event) { | |||
if (event.keyCode === 27) { | |||
exitFullScreen(); | |||
} | |||
}; | |||
// Listen for messages from iframes | |||
window.addEventListener('message', function receiveMessage(event) { | |||
if (event.data.context !== 'h5p') { | |||
return; // Only handle h5p requests. | |||
} | |||
// Find out who sent the message | |||
var iframe, iframes = document.getElementsByTagName('iframe'); | |||
for (var i = 0; i < iframes.length; i++) { | |||
if (iframes[i].contentWindow === event.source) { | |||
iframe = iframes[i]; | |||
break; | |||
} | |||
} | |||
if (!iframe) { | |||
return; // Cannot find sender | |||
} | |||
// Find action handler handler | |||
if (actionHandlers[event.data.action]) { | |||
actionHandlers[event.data.action](iframe, event.data, function respond(action, data) { | |||
if (data === undefined) { | |||
data = {}; | |||
} | |||
data.action = action; | |||
data.context = 'h5p'; | |||
event.source.postMessage(data, event.origin); | |||
}); | |||
} | |||
}, false); | |||
// Let h5p iframes know we're ready! | |||
var iframes = document.getElementsByTagName('iframe'); | |||
var ready = { | |||
context: 'h5p', | |||
action: 'ready' | |||
}; | |||
for (var i = 0; i < iframes.length; i++) { | |||
if (iframes[i].src.indexOf('h5p') !== -1) { | |||
iframes[i].contentWindow.postMessage(ready, '*'); | |||
} | |||
} | |||
})(); | |||
... | ... |
Version vom 18. Dezember 2019, 17:35 Uhr
Willkommen in der Medienlounge!
Wie heißt die Hauptstadt von Deutschland? (Berlin) (!Hamburg) (!München) (!Köln)
Memory
Erstelle ein Memory. Ersetze einfach die vorgegebenen Elemente. |
Dein Memory-Titel
Finde die Paare.
Deutschland | Berlin |
Frankreich | Paris |
Spanien | Madrid |
// H5P iframe Resizer (function () {
if (!window.postMessage || !window.addEventListener || window.h5pResizerInitialized) { return; // Not supported } window.h5pResizerInitialized = true;
// Map actions to handlers var actionHandlers = {};
/** * Prepare iframe resize. * * @private * @param {Object} iframe Element * @param {Object} data Payload * @param {Function} respond Send a response to the iframe */ actionHandlers.hello = function (iframe, data, respond) { // Make iframe responsive iframe.style.width = '100%';
// Bugfix for Chrome: Force update of iframe width. If this is not done the // document size may not be updated before the content resizes. iframe.getBoundingClientRect();
// Tell iframe that it needs to resize when our window resizes var resize = function () { if (iframe.contentWindow) { // Limit resize calls to avoid flickering respond('resize'); } else { // Frame is gone, unregister. window.removeEventListener('resize', resize); } }; window.addEventListener('resize', resize, false);
// Respond to let the iframe know we can resize it respond('hello'); };
/** * Prepare iframe resize. * * @private * @param {Object} iframe Element * @param {Object} data Payload * @param {Function} respond Send a response to the iframe */ actionHandlers.prepareResize = function (iframe, data, respond) { // Do not resize unless page and scrolling differs if (iframe.clientHeight !== data.scrollHeight || data.scrollHeight !== data.clientHeight) {
// Reset iframe height, in case content has shrinked. iframe.style.height = data.clientHeight + 'px'; respond('resizePrepared'); } };
/** * Resize parent and iframe to desired height. * * @private * @param {Object} iframe Element * @param {Object} data Payload * @param {Function} respond Send a response to the iframe */ actionHandlers.resize = function (iframe, data) { // Resize iframe so all content is visible. Use scrollHeight to make sure we get everything iframe.style.height = data.scrollHeight + 'px'; };
/** * Keyup event handler. Exits full screen on escape. * * @param {Event} event */ var escape = function (event) { if (event.keyCode === 27) { exitFullScreen(); } };
// Listen for messages from iframes window.addEventListener('message', function receiveMessage(event) { if (event.data.context !== 'h5p') { return; // Only handle h5p requests. }
// Find out who sent the message var iframe, iframes = document.getElementsByTagName('iframe'); for (var i = 0; i < iframes.length; i++) { if (iframes[i].contentWindow === event.source) { iframe = iframes[i]; break; } }
if (!iframe) { return; // Cannot find sender }
// Find action handler handler if (actionHandlers[event.data.action]) { actionHandlers[event.data.action](iframe, event.data, function respond(action, data) { if (data === undefined) { data = {}; } data.action = action; data.context = 'h5p'; event.source.postMessage(data, event.origin); }); } }, false);
// Let h5p iframes know we're ready! var iframes = document.getElementsByTagName('iframe'); var ready = { context: 'h5p', action: 'ready' }; for (var i = 0; i < iframes.length; i++) { if (iframes[i].src.indexOf('h5p') !== -1) { iframes[i].contentWindow.postMessage(ready, '*'); } }
})();
...