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

fix: tell MFE about xblock iframe resizes more often

Browse Source 
Previously, we missed some kinds of resize events (like css changes)
when the DOM inside an xblock changed. And then the MFE iframe
wouldn't be the right size.

This switches from a MutateObserver to the more appropriate
ResizeObserver which catches more cases.

AA-1252
This commit is contained in:
Michael Terry
2022-04-04 16:21:14 -04:00
parent 453ae1a3f3
commit 04d56f9229
1 changed files with 6 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -118,7 +118,7 @@ ${HTML(fragment.foot_html())}
(function() {
// 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
// document loads, window resizes, or DOM mutates.
// document loads, window resizes, or DOM resizes.
if (window !== window.parent) {
document.body.className += ' view-in-mfe';
var lastHeight = window.offsetHeight;
@@ -126,12 +126,11 @@ ${HTML(fragment.foot_html())}
var contentElement = document.getElementById('content');
function dispatchResizeMessage(event) {
// Note: event is actually an Array of MutationRecord objects
// when fired from the MutationObserver
var eventType = event.type || 'mutate';
// Note: event is actually an Array of ResizeObserverEntry objects when fired from the ResizeObserver
var isLoadEvent = event.type === 'load';
var newHeight = contentElement.offsetHeight;
var newWidth = contentElement.offsetWidth;
if (eventType !== 'load' && newWidth === lastWidth && newHeight === lastHeight) {
if (!isLoadEvent && newWidth === lastWidth && newHeight === lastHeight) {
// Monitor when any anchor tag is clicked, it is checked to make sure
// it is referencing an element's id or name (not an external website). If
// the href attribute is an id or name, the location of the selected focus
@@ -190,11 +189,8 @@ ${HTML(fragment.foot_html())}
window.scrollTo(0, 0);
}
// Create an observer instance linked to the callback function
const observer = new MutationObserver(dispatchResizeMessage);
// Start observing the target node for configured mutations
observer.observe(document.body, { attributes: true, childList: true, subtree: true });
const observer = new ResizeObserver(dispatchResizeMessage);
observer.observe(document.body);
window.addEventListener('load', dispatchResizeMessage);
window.addEventListener('resize', dispatchResizeMessage);