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

feat: handle navigation and resize events from discussions MFE (#30164)

Browse Source 
The discussions MFE sends resize and navigation events via the postMessage API, we can use these events to resize the iframe and make sure that the iframe loads the correct page on refresh.

Co-authored-by: Hamza Khchine <hamza.Khchine@opencraft.com>

Co-authored-by: Hamza Khchine <hamza.Khchine@opencraft.com>
This commit is contained in:
Kshitij Sobti
2022-04-04 15:17:57 +05:30
committed by GitHub
parent 07f6a9fecc
commit 73c7d7166f
1 changed files with 25 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
lms/djangoapps/discussion/templates/discussion/discussion_mfe_embed.html
View File

@@ -7,10 +7,33 @@
<%!
import json
from django.utils.translation import ugettext as _
from openedx.core.djangolib.js_utils import js_escaped_string
%>
<%block name="js_extra">
<script>
window.addEventListener("load", function () {
const mfeUrl = (new URL("${discussions_mfe_url | n, js_escaped_string}"));
const iframe = document.querySelector('#discussions-mfe-tab-embed');
iframe.src = mfeUrl.href + window.location.hash.slice(1);
window.addEventListener("message", (event) => {
const payload = event.data.payload;
if (event.origin !== mfeUrl.origin) {
return;
}
if (event.data.type === "discussions.navigate" && payload.path){
window.history.pushState(null, "", "#" + payload.path);
}
if (event.data.type === "plugin.resize") {
iframe.height = payload.height;
}
});
});
</script>
</%block>
<section class="discussion discussion-board page-content-container" id="discussion-container"
data-course-id="${course_key}" >
data-course-id="${course_key}">
<%include file="_switch_experience_fragment.html" />
<iframe id='discussions-mfe-tab-embed' src='${discussions_mfe_url}'></iframe>
<iframe id='discussions-mfe-tab-embed' src=''></iframe>
</section>