Iframe resize message handling

examples/sample-book/ext/splice/splice-resize.js

@@ -0,0 +1,19 @@
+const bodyEl = document.body;
+bodyEl.style.background = 'red';
+
+const growBtn = document.createElement('button');
+growBtn.textContent = 'Grow';
+document.currentScript.parentElement.appendChild(growBtn);
+
+growBtn.addEventListener('click', () => {
+  const currentHeight = bodyEl.clientHeight;
+  const newHeight = currentHeight + 100;
+  bodyEl.style.height = `${newHeight}px`;
+  window.parent.postMessage(
+    {
+      subject: 'lti.frameResize',
+      height: newHeight,
+    },
+    '*'
+  )
+});

examples/sample-book/rune.xml

@@ -4398,6 +4398,24 @@ TEST_CASE( "Test the add function" ) {
         </exercise>
     </reading-questions>
 
+    <section xml:id="splice-integration">
+        <title>Splice Integration</title>
+
+        <p><url href="https://cssplice.org/">SPLICE</url> is a project to supply documentation and infrastructure to help with adopting shared standards, protocols, and tools for web-based learning tools. The project has designed a <url href="https://cssplice.org/slcp/index.html">protocol</url> for an embedded iframe to communicate with its host page.</p>
+
+        <p>One aspect is the ability of an iframe to ask for a new size. Below is a test of that capability.</p>
+
+        <interactive xml:id="splice-resize-example" platform="javascript" width="60%" aspect="2:1" source="splice/splice-resize.js"/>
+
+        <p>And here is a more complex example that uses various parts of the grading protocol.</p>
+
+        <figure xml:id="horstmann-codecheck">
+            <caption>CodeCheck <c>iframe</c></caption>
+            <interactive xml:id="interactive-horstmann-codecheck" iframe="https://codecheck.io/files/wiley/ch-bj4cc-c06_exp_6_105" width="100%" aspect="1:1" />
+        </figure>
+    </section>
+
+
     <section xml:id="atomic-video">
         <title>YouTube Video Embedding</title>
 

js/lti_iframe_resizer.js

@@ -1,17 +1,48 @@
-window.addEventListener('message', function(event) {
-    if (typeof event.data=='string' && event.data.match(/lti\.frameResize/)) {
-        var edata = JSON.parse(event.data);
+// SPLICE resize handling - https://cssplice.org/
+// Expected message format:
+// { 
+//   subject: lti.frameResize', 
+//   message_id: (a unique string ID),  // optional - not used
+//   height: ...,
+//   width: ... 
+// }
+
+window.addEventListener('message', function (event) {
+    let edata = event.data;
+
+    //MoM sends event.data as a string instead of JSON
+    if (typeof event.data == 'string' && event.data.match(/lti\.frameResize/)) {
+        edata = JSON.parse(event.data);
+    }
+
+    if (edata.subject === "lti.frameResize") {
         if ("frame_id" in edata) {
+            // MoM may send frame_id
+            let el = document.getElementById(edata['frame_id']);
             document.getElementById(edata['frame_id']).style.height = edata.height + 'px';
             if (edata.wrapheight && document.getElementById(edata['frame_id'] + 'wrap')) {
                 document.getElementById(edata['frame_id'] + 'wrap').style.height = edata.wrapheight + 'px';
             }
         } else if ("iframe_resize_id" in edata) {
+            // MoM may send iframe_resize_id
             document.getElementById(edata['iframe_resize_id']).style.height = edata.height + 'px';
+        } else {
+            // No target element specified, so resize the iframe that sent the message
+            // event.source.frameElement is only accessible if the iframe is on the same domain
+            // so loop through iframes to find the one that sent the message
+            const iFrames = document.getElementsByTagName('iframe');
+            for(const iFrame of iFrames) {
+                if(iFrame.contentWindow === event.source) {
+                    if (edata.height) iFrame.height = edata.height;
+                    if (edata.width) iFrame.width = edata.width;
+                    break;
+                }
+            }
         }
     }
-});
-
-function sendResizeRequest(el) {
+  });
+
+  // Currently only used by My Open Math to request a resize after knowls open
+  function sendResizeRequest(el) {
     el.contentWindow.postMessage("requestResize", "*");
-}
+  }

xsl/pretext-html.xsl

@@ -10156,11 +10156,9 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     </xsl:if>
 </xsl:template>
 
-<!-- MyOpenMath Javascript header -->
-<xsl:template name="myopenmath-js">
-    <xsl:if test="$b-has-myopenmath">
-        <script src="{$html.js.dir}/lti_iframe_resizer.js"></script>
-    </xsl:if>
+<!-- lti-iframe-resizer -->
+<xsl:template name="lti-iframe-resizer">
+    <script src="{$html.js.dir}/lti_iframe_resizer.js"></script>
 </xsl:template>
 
 
@@ -10494,7 +10492,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
             <xsl:call-template name="mathjax" />
             <!-- webwork's iframeResizer needs to come before sage -->
             <xsl:call-template name="webwork-js"/>
-            <xsl:call-template name="myopenmath-js"/>
+            <xsl:call-template name="lti-iframe-resizer"/>
             <xsl:apply-templates select="." mode="sagecell" />
             <xsl:call-template name="syntax-highlight"/>
             <xsl:call-template name="google-search-box-js" />
@@ -10653,7 +10651,6 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
             <xsl:call-template name="mathjax" />
             <!-- webwork's iframeResizer needs to come before sage -->
             <xsl:call-template name="webwork-js"/>
-            <xsl:call-template name="myopenmath-js"/>
             <xsl:apply-templates select="." mode="sagecell" />
             <xsl:call-template name="knowl" />
             <xsl:call-template name="fonts" />