🐛 Apply scroll to top on resize only to ask Sophia page

SoftInstigate · Sep 12, 2024 · 0e15c6a · 0e15c6a
1 parent 370d8ec
commit 0e15c6a
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 56 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -56,32 +56,4 @@
    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
    <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
    {% include plausible.html %}
-   <script>
-    var lastVH = -1;
-    const w = window.visualViewport || window;
-    document.documentElement.style.setProperty('--vh', `${(w.height || w.innerHeight).toFixed(2) * 0.01}px`);
-    // console.debug('set css variable --vh =', document.documentElement.style.getPropertyValue('--vh'));
-
-    w.addEventListener('resize', debounce(() => {
-      const _vh = ((w.height || w.innerHeight) * 0.01).toFixed(2);
-
-      if (lastVH === _vh) {
-        return;
-      }
-
-      lastVH = _vh;
-
-      document.documentElement.style.setProperty('--vh', `${_vh}px`);
-      window.scrollTo({top:0, left:0,behavior: 'instant'});
-      // console.debug('set css variable --vh =', _vh);
-    }), timeout = 100)
-
-   function debounce(func, timeout = 300) {
-    let timer;
-    return (...args) => {
-      clearTimeout(timer);
-      timer = setTimeout(() => { func.apply(this, args); }, timeout);
-    };
-}
-   </script>
 </head>
diff --git a/docs/sophia.md b/docs/sophia.md
@@ -3,5 +3,29 @@ layout: no-footer
 ---
 
 <div class="iframe-parent m-0 p-0">
-    <iframe src="https://sophia.restheart.com" scrolling="yes"></iframe>
+  <!-- set the --vh property to set the height of the iframe correctly on desktop and mobile screen
+       also scrolls to top on viewport resize
+  -->
+  <script>
+    var lastVH = -1;
+    const w = window.visualViewport || window;
+    document.documentElement.style.setProperty('--vh', `${(w.height || w.innerHeight).toFixed(2) * 0.01}px`);
+    // console.debug('set css variable --vh =', document.documentElement.style.getPropertyValue('--vh'));
+    w.addEventListener('resize', debounce(() => {
+      const _vh = ((w.height || w.innerHeight) * 0.01).toFixed(2);
+      if (lastVH === _vh) { return; }
+      lastVH = _vh;
+      document.documentElement.style.setProperty('--vh', `${_vh}px`);
+      window.scrollTo({top:0, left:0,behavior: 'instant'});
+      // console.debug('set css variable --vh =', _vh);
+    }), timeout = 100);
+    function debounce(func, timeout = 300) {
+      let timer;
+      return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => { func.apply(this, args); }, timeout);
+      };
+    }
+  </script>
+  <iframe src="https://sophia.restheart.com" scrolling="yes"></iframe>
 </div>
diff --git a/index.md b/index.md
@@ -38,35 +38,26 @@ stars-bounce: true
     </div>
 </section>
 
-<!-- <span id="start" class="hline"></span>
-<span id="end" class="hline"></span>
-<span id="st" class="hline"></span> -->
-
+<!-- scroll to bottom of sophia iframe chat when it resizes -->
 <script>
-    var preventScroll = 0; // dirty trick to avoid scrolling on first load
-    document.addEventListener("DOMContentLoaded", () => preventScroll = 0);
-
-    iframeResize({
-        license: 'GPLv3',
-        waitForLoad: true,
-        onResized: ({ iframe, height, width, type }) => {
-            if (document.readyState === 'complete') {
-                // const start = document.getElementById('start');
-                // const end = document.getElementById('end');
-                // const st = document.getElementById('st');
-                if (preventScroll > 3) {
-                    const offset = iframe.offsetTop;
-                    const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
-                    // start.style.top = (offset)+'px';
-                    // end.style.top = (height+offset)+'px';
-                    // st.style.top = (height+offset-vh)+'px';
-                    window.scrollTo({top: height+offset-vh, left: 0, behavior: 'smooth'});
-                } else {
-                    preventScroll++;
-                }
-            }
+  var preventScroll = 0; // trick to avoid scrolling on first load
+  document.addEventListener("DOMContentLoaded", () => preventScroll = 0);
+  iframeResize({
+    license: 'GPLv3',
+    waitForLoad: true,
+    onResized: ({ iframe, height, width, type }) => {
+      console.log('onResized');
+      if (document.readyState === 'complete') {
+        if (preventScroll > 3) {
+          const offset = iframe.offsetTop;
+          const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+          window.scrollTo({top: height+offset-vh, left: 0, behavior: 'smooth'});
+        } else {
+          preventScroll++;
         }
-    }, '#sophiaFrame' );
+      }
+    }
+  }, '#sophiaFrame' );
 </script>
 
 <div class="container text-center mt-5 mw-800 px-0">