Skip to content

Report iframed courseware content dimensions to parent window #22972

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
abutterworth merged 2 commits into from
Jan 29, 2020
Merged

Report iframed courseware content dimensions to parent window #22972

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d3ac703
Report iframed courseware content dimensions to parent window
Jan 29, 2020
912a622
Update courseware-chromeless.html
Jan 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions lms/templates/courseware/courseware-chromeless.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,3 +106,50 @@
% endif
</nav>
% endif

<script type="text/javascript">

@davestgermain davestgermain Jan 29, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not consolidate this with the earlier iframe check? Appending the <base> tag can happen here, right?

@abutterworth abutterworth Jan 29, 2020

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It can, I just thought repeating myself to keep the functionality isolated would be good. Also it's worth noting that the base tag script needs to be in the head. Not a strong reason though. Let me know if you prefer combining them.

@davidjoy davidjoy Jan 29, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I put it at the bottom originally so that most of the page would be loaded by the time it ran. It may not be important, but keeping it there may cut down on events as things resize and fill in during load.

(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.
if (window !== window.parent) {
var learningAppReferrer = "${settings.LEARNING_MICROFRONTEND_URL | n, js_escaped_string}";
if (document.referrer === learningAppReferrer) {

var lastHeight = window.offsetHeight;
var lastWidth = window.offsetWidth;
var contentElement = document.getElementById('content');

function dispatchResizeMessage() {
var newHeight = contentElement.offsetHeight;
var newWidth = contentElement.offsetWidth;

if (newWidth === lastWidth && newHeight === lastHeight) {
return;
}

window.parent.postMessage({
type: 'plugin.resize',
payload: {
width: newWidth,
height: newHeight,
}
}, document.referrer
);

lastHeight = newHeight;
lastWidth = newWidth;
}

// 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 });

window.addEventListener('load', dispatchResizeMessage);
window.addEventListener('resize', dispatchResizeMessage);
}
}
}());
</script>