feat: iframe height

raccoongang · Mar 14, 2024 · 9a76daf · 9a76daf
1 parent ea1e9b1
commit 9a76daf
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/src/course-unit/CourseUnit.jsx b/src/course-unit/CourseUnit.jsx
@@ -90,7 +90,7 @@ const CourseUnit = ({ courseId }) => {
       setUnitXBlocks(initialXBlocksData);
     });
   };
-  console.log('unitXBlocks ===>', unitXBlocks);
+
   return (
     <>
       <Container size="xl" className="course-unit px-4">

diff --git a/src/course-unit/course-xblock/CourseXBlock.jsx b/src/course-unit/course-xblock/CourseXBlock.jsx
@@ -140,8 +140,8 @@ const CourseXBlock = ({
           )}
         />
         <Card.Section>
-          {renderError ? <RenderErrorAlert errorMessage={renderError} /> : xblockInstanceHtmlAndResources && (
-            <LibraryBlock getHandlerUrl={getHandlerUrl} view={xblockInstanceHtmlAndResources} type={type} />
+          {renderError ? <RenderErrorAlert errorMessage={renderError}/> : xblockInstanceHtmlAndResources && (
+            <LibraryBlock getHandlerUrl={getHandlerUrl} view={xblockInstanceHtmlAndResources} type={type}/>
           )}
         </Card.Section>
       </Card>

diff --git a/src/course-unit/course-xblock/library-authoring/edit-block/LibraryBlock/LibraryBlock.jsx b/src/course-unit/course-xblock/library-authoring/edit-block/LibraryBlock/LibraryBlock.jsx
@@ -66,7 +66,7 @@ class LibraryBlock extends React.Component {
       // console.log('=== DATA ===', data);
       frame.postMessage({ ...data, replyKey }, '*');
     };
-    // console.log('method ===>', method);
+    console.log('args ===>', args);
     if (method === 'bootstrap') {
       sendReply({ initialHtml: this.state.html });
     } else if (method === 'get_handler_url') {
@@ -110,14 +110,14 @@ class LibraryBlock extends React.Component {
     if (this.state.html === null) {
       return null;
     }
-    // console.log('document.cookie ======>', document.cookie);
+    // console.log('this.state.iFrameHeight ======>', this.state.iFrameHeight);
     return (
       <div style={{
-        height: `400px`,
+        height: `${this.state.iFrameHeight}px`,
         boxSizing: 'content-box',
         position: 'relative',
         overflow: 'hidden',
-        minHeight: '140px',
+        minHeight: '200px',
         margin: '24px',
       }}
       >
@@ -133,7 +133,7 @@ class LibraryBlock extends React.Component {
             top: 0,
             width: '100%',
             height: '100%',
-            minHeight: '140px',
+            minHeight: '200px',
             border: '0 none',
             backgroundColor: 'white',
           }}

diff --git a/src/course-unit/course-xblock/library-authoring/edit-block/LibraryBlock/wrap.js b/src/course-unit/course-xblock/library-authoring/edit-block/LibraryBlock/wrap.js
@@ -191,7 +191,9 @@ function blockFrameJS() {
 
   let lastHeight = -1;
   function checkFrameHeight() {
-    const newHeight = document.documentElement.scrollHeight;
+    const visibleIframeContent = document.querySelector('.xblock-render');
+    const newHeight = visibleIframeContent.scrollHeight;
+
     if (newHeight !== lastHeight) {
       postMessageToParent({ method: 'update_frame_height', height: newHeight });
       lastHeight = newHeight;
@@ -223,13 +225,13 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, studioBase
   /* Extract CSS resources. */
   const cssUrls = urlResources.filter((r) => r.mimetype === 'text/css').map((r) => r.data);
   const sheets = textResources.filter((r) => r.mimetype === 'text/css').map((r) => r.data);
-  let cssTags = cssUrls.map((url) => `<link rel="stylesheet" href="${studioBaseUrl}${url}">`).join('\n');
+  let cssTags = cssUrls.map((url) => `<link rel="stylesheet" href="${type === 'openassessment' ? url : studioBaseUrl + url}">`).join('\n');
   cssTags += sheets.map((sheet) => `<style>${sheet}</style>`).join('\n');
 
   /* Extract JS resources. */
   const jsUrls = urlResources.filter((r) => r.mimetype === 'application/javascript').map((r) => r.data);
   const scripts = textResources.filter((r) => r.mimetype === 'application/javascript').map((r) => r.data);
-  let jsTags = jsUrls.map((url) => `<script src="${studioBaseUrl}${url}"></script>`).join('\n');
+  let jsTags = jsUrls.map((url) => `<script src="${type === 'openassessment' ? url : studioBaseUrl + url}"></script>`).join('\n');
   jsTags += scripts.map((script) => `<script>${script}</script>`).join('\n');
 
   // Most older XModules/XBlocks have a ton of undeclared dependencies on various JavaScript in the global scope.
@@ -465,7 +467,7 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, studioBase
     <!-- A Studio-served stylesheet will set the body min-height to 100% (a common strategy to allow for background
     images to fill the viewport), but this has the undesireable side-effect of causing an infinite loop via the
     onResize event listeners in certain situations.  Resetting it to the default "auto" skirts the problem. -->
-    <body style="min-height: auto; background-color: white" class="wrapper-xblock level-page studio-xblock-wrapper" style="min-height: auto; background-color: white">
+    <body style=" background-color: white" class="wrapper-xblock level-page studio-xblock-wrapper" style=" background-color: white">
         <article class="xblock-render">
             <div class="xblock xblock-author_view xblock-author_view-vertical xblock-initialized">
                 <div class="reorderable-container ui-sortable">
@@ -525,7 +527,7 @@ export default function wrapBlockHtmlForIFrame(html, sourceResources, studioBase
     <!-- A Studio-served stylesheet will set the body min-height to 100% (a common strategy to allow for background
     images to fill the viewport), but this has the undesireable side-effect of causing an infinite loop via the
     onResize event listeners in certain situations.  Resetting it to the default "auto" skirts the problem. -->
-    <body style="min-height: auto; background-color: white">
+    <body style=" background-color: white">
       ${html}
       ${jsTags}
       <script>