Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add ability to observe iframe content height on content load and change (#30942)

Browse Source 
These changes allow the ability to adapt to update/resize the unit content after loading and interaction. Main cases were with Open Response Assessment (ORA) and Discussion blocks.
This commit is contained in:
Ihor Romaniuk
2022-09-27 18:21:14 +03:00
committed by GitHub
parent 07c3b9b718
commit 60f81897a8
1 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
lms/templates/courseware/courseware-chromeless.html
View File

@@ -118,7 +118,7 @@ ${HTML(fragment.foot_html())}
(function() { (function() {
// If this view is rendered in an iframe within the learning microfrontend app // If this view is rendered in an iframe within the learning microfrontend app
// it will report the height of its contents to the parent window when the // it will report the height of its contents to the parent window when the
// document loads, window resizes, or DOM resizes. // document loads, window resizes, or DOM mutates.
if (window !== window.parent) { if (window !== window.parent) {
document.body.className += ' view-in-mfe'; document.body.className += ' view-in-mfe';
var lastHeight = window.offsetHeight; var lastHeight = window.offsetHeight;
@@ -126,7 +126,7 @@ ${HTML(fragment.foot_html())}
var contentElement = document.getElementById('content'); var contentElement = document.getElementById('content');
function dispatchResizeMessage(event) { function dispatchResizeMessage(event) {
// Note: event is actually an Array of ResizeObserverEntry objects when fired from the ResizeObserver // Note: event is actually an Array of MutationRecord objects when fired from the MutationObserver
var isLoadEvent = event.type === 'load'; var isLoadEvent = event.type === 'load';
var newHeight = contentElement.offsetHeight; var newHeight = contentElement.offsetHeight;
var newWidth = contentElement.offsetWidth; var newWidth = contentElement.offsetWidth;
@@ -189,8 +189,11 @@ ${HTML(fragment.foot_html())}
window.scrollTo(0, 0); window.scrollTo(0, 0);
} }
const observer = new ResizeObserver(dispatchResizeMessage); // Create an observer instance linked to the callback function
observer.observe(document.body); const observer = new MutationObserver(dispatchResizeMessage);
// Start observing the target node for configured mutations
observer.observe(document.body, { attributes: true, childList: true, subtree: true });
window.addEventListener('load', dispatchResizeMessage); window.addEventListener('load', dispatchResizeMessage);
window.addEventListener('resize', dispatchResizeMessage); window.addEventListener('resize', dispatchResizeMessage);