Merge pull request #1190 from Kotlin/website_docs_df_iframes_fix

fix snippets iframes

Author: AndreiKingsley

core/src/test/kotlin/org/jetbrains/kotlinx/dataframe/explainer/SamplesRenderingUtils.kt

@@ -32,6 +32,71 @@ val WritersideStyle = DataFrameHtmlData(
             padding: 6px;
         }
         """.trimIndent(),
+    script =
+        """
+function sendHeight() {
+    let totalHeight = 0;
+
+    const detailsElements = document.querySelectorAll('details');
+
+    detailsElements.forEach(detail => {
+       
+        const summary = detail.querySelector('summary');
+        if (summary) {
+            totalHeight += summary.offsetHeight;
+        }
+
+      
+        if (detail.open) {
+            const table = detail.querySelector('table.dataframe');
+            if (table) {
+                totalHeight += table.offsetHeight;
+
+                const styles = getComputedStyle(table);
+                totalHeight += parseFloat(styles.marginTop) + parseFloat(styles.marginBottom) + 10;
+            }
+
+            const description = detail.querySelector('.dataframe_description');
+            if (description) {
+                totalHeight += description.offsetHeight;
+            }
+        }
+    });
+    
+    totalHeight = Math.ceil(totalHeight + 16);
+
+    window.parent.postMessage({type: 'iframeHeight', height: totalHeight}, '*');
+}
+
+function repeatHeightCalculation(maxRetries = 10, interval = 100) {
+    let retries = 0;
+    const intervalId = setInterval(() => {
+        sendHeight();
+        retries++;
+        if (retries >= maxRetries) clearInterval(intervalId);
+    }, interval);
+}
+
+window.addEventListener('load', () => {
+    repeatHeightCalculation();
+
+    document.querySelectorAll('details').forEach(detail => {
+        detail.addEventListener('toggle', () => {
+            setTimeout(sendHeight, 30);
+        });
+    });
+});
+
+const allObservedTables = document.querySelectorAll('table.dataframe');
+allObservedTables.forEach((table) => {
+    const observer = new MutationObserver(sendHeight);
+    observer.observe(table, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+    });
+});
+        """.trimIndent()
 )
 
 val WritersideFooter: (DataFrame<*>) -> String = { "" }

docs/StardustDocs/cfg/buildprofiles.xml

@@ -13,7 +13,7 @@
         <algolia-api-key>bce9ba6ce7419efe813d671244d3bf6a</algolia-api-key>
         <search-scopes-provider>https://www.jetbrains.com/search/json/</search-scopes-provider>
         <generate-sitemap-url-prefix>https://kotlin.github.io/dataframe/</generate-sitemap-url-prefix>
-        <analytics-head-script-file>resize-iframes.js</analytics-head-script-file>
+        <analytics-head-script-file>google-search.html</analytics-head-script-file>
         <enable-browser-edits>true</enable-browser-edits>
         <browser-edits-url>https://github.com/Kotlin/dataframe/edit/master/docs/StardustDocs/</browser-edits-url>
         <include-in-head>include-head.html</include-in-head>

docs/StardustDocs/cfg/google-search.html

@@ -0,0 +1,13 @@
+<meta name="google-site-verification" content="Lffz_ab-_S5cmA07ZXVbucHVklaRsnk8gEt8frHKjMk"/>
+<!-- Google Analytics -->
+<script>
+    (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+        var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&amp;l=' + l : '';
+        j.async = true;
+        j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-5P98');
+</script>
+<!-- End Google Analytics -->

docs/StardustDocs/cfg/include-head.html

@@ -1 +1,2 @@
-<script src="static/custom.js"></script>
+<script src="static/iframe-config.js"></script>
+<script src="static/iframe-config-old.js"></script>

docs/StardustDocs/cfg/resize-iframes.js

@@ -198,5 +198,4 @@
     </toc-element>
     <toc-element topic="Compiler-Plugin.md"/>
     <toc-element topic="_shadow_resources.md" hidden="true"/>
-    <toc-element topic="_shadow_resources_snippets.md" hidden="true"/>
 </instance-profile>

docs/StardustDocs/cfg/static/custom.js renamed to docs/StardustDocs/cfg/static/iframe-config.js

@@ -513,6 +513,68 @@
     }
 })()
 
+function sendHeight() {
+    let totalHeight = 0;
+
+    const detailsElements = document.querySelectorAll('details');
+
+    detailsElements.forEach(detail => {
+       
+        const summary = detail.querySelector('summary');
+        if (summary) {
+            totalHeight += summary.offsetHeight;
+        }
+
+      
+        if (detail.open) {
+            const table = detail.querySelector('table.dataframe');
+            if (table) {
+                totalHeight += table.offsetHeight;
+
+                const styles = getComputedStyle(table);
+                totalHeight += parseFloat(styles.marginTop) + parseFloat(styles.marginBottom) + 10;
+            }
+
+            const description = detail.querySelector('.dataframe_description');
+            if (description) {
+                totalHeight += description.offsetHeight;
+            }
+        }
+    });
+    
+    totalHeight = Math.ceil(totalHeight + 16);
+
+    window.parent.postMessage({type: 'iframeHeight', height: totalHeight}, '*');
+}
+
+function repeatHeightCalculation(maxRetries = 10, interval = 100) {
+    let retries = 0;
+    const intervalId = setInterval(() => {
+        sendHeight();
+        retries++;
+        if (retries >= maxRetries) clearInterval(intervalId);
+    }, interval);
+}
+
+window.addEventListener('load', () => {
+    repeatHeightCalculation();
+
+    document.querySelectorAll('details').forEach(detail => {
+        detail.addEventListener('toggle', () => {
+            setTimeout(sendHeight, 30);
+        });
+    });
+});
+
+const allObservedTables = document.querySelectorAll('table.dataframe');
+allObservedTables.forEach((table) => {
+    const observer = new MutationObserver(sendHeight);
+    observer.observe(table, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+    });
+});
 /*<!--*/
 call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\">firstName</span>", children: [], rightAlign: false, values: ["Alice","Bob","Charlie","Charlie","Bob","Alice","Charlie"] }, 
 { name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: ["Cooper","Dylan","Daniels","Chaplin","Marley","Wolf","Byrd"] }, 

docs/StardustDocs/d.tree

@@ -613,6 +613,68 @@
     }
 })()
 
+function sendHeight() {
+    let totalHeight = 0;
+
+    const detailsElements = document.querySelectorAll('details');
+
+    detailsElements.forEach(detail => {
+       
+        const summary = detail.querySelector('summary');
+        if (summary) {
+            totalHeight += summary.offsetHeight;
+        }
+
+      
+        if (detail.open) {
+            const table = detail.querySelector('table.dataframe');
+            if (table) {
+                totalHeight += table.offsetHeight;
+
+                const styles = getComputedStyle(table);
+                totalHeight += parseFloat(styles.marginTop) + parseFloat(styles.marginBottom) + 10;
+            }
+
+            const description = detail.querySelector('.dataframe_description');
+            if (description) {
+                totalHeight += description.offsetHeight;
+            }
+        }
+    });
+    
+    totalHeight = Math.ceil(totalHeight + 16);
+
+    window.parent.postMessage({type: 'iframeHeight', height: totalHeight}, '*');
+}
+
+function repeatHeightCalculation(maxRetries = 10, interval = 100) {
+    let retries = 0;
+    const intervalId = setInterval(() => {
+        sendHeight();
+        retries++;
+        if (retries >= maxRetries) clearInterval(intervalId);
+    }, interval);
+}
+
+window.addEventListener('load', () => {
+    repeatHeightCalculation();
+
+    document.querySelectorAll('details').forEach(detail => {
+        detail.addEventListener('toggle', () => {
+            setTimeout(sendHeight, 30);
+        });
+    });
+});
+
+const allObservedTables = document.querySelectorAll('table.dataframe');
+allObservedTables.forEach((table) => {
+    const observer = new MutationObserver(sendHeight);
+    observer.observe(table, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+    });
+});
 /*<!--*/
 call_DataFrame(function() { DataFrame.addTable({ cols: [{ name: "<span title=\"firstName: String\">firstName</span>", children: [], rightAlign: false, values: ["Alice","Bob","Charlie","Charlie","Bob","Alice","Charlie"] }, 
 { name: "<span title=\"lastName: String\">lastName</span>", children: [], rightAlign: false, values: ["Cooper","Dylan","Daniels","Chaplin","Marley","Wolf","Byrd"] },