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

Merge pull request #30176 from openedx/mikix/resize-more

Browse Source 
fix: tell MFE about xblock iframe resizes more often
This commit is contained in:
Michael Terry
2022-04-07 11:14:46 -04:00
committed by GitHub
parent b9d6e01a05 04d56f9229
commit dc55021e8e
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);