From deb2370bb9a63107453737846882e76555876a08 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Tue, 10 Dec 2024 12:25:51 -0800
Subject: [PATCH 1/2] lti_iframe_resizer no longer MoM specific

---
 js/lti_iframe_resizer.js | 45 +++++++++++++++++++++++++++++++++-------
 xsl/pretext-html.xsl     | 11 ++++------
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/js/lti_iframe_resizer.js b/js/lti_iframe_resizer.js
index 896054901..cd5ff952f 100644
--- a/js/lti_iframe_resizer.js
+++ b/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", "*");
-}
\ No newline at end of file
+  }
\ No newline at end of file
diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl
index ae5f76928..932554786 100644
--- a/xsl/pretext-html.xsl
+++ b/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" />

From d268129b4953d49722e2b531918fc225fb68a64c Mon Sep 17 00:00:00 2001
From: Brad Miller <bonelake@mac.com>
Date: Tue, 10 Dec 2024 14:09:55 -0800
Subject: [PATCH 2/2] Splice samples in sample-book

---
 .../sample-book/ext/splice/splice-resize.js   | 19 +++++++++++++++++++
 examples/sample-book/rune.xml                 | 18 ++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 examples/sample-book/ext/splice/splice-resize.js

diff --git a/examples/sample-book/ext/splice/splice-resize.js b/examples/sample-book/ext/splice/splice-resize.js
new file mode 100644
index 000000000..1cab4ce57
--- /dev/null
+++ b/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,
+    },
+    '*'
+  )
+});
\ No newline at end of file
diff --git a/examples/sample-book/rune.xml b/examples/sample-book/rune.xml
index d87341186..f7e7ed2cf 100644
--- a/examples/sample-book/rune.xml
+++ b/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>