feat(web4): scroll comments into view (#142)

Enables "scroll into view" for proposal comments functionality for NEAR-DevHub/neardevhub-bos#868 Example link to comment being scrolled into view: https://devhublink.testnet.page/proposal/127?accountId=theori.near&blockHeight=121684702
NEAR-DevHub · Jul 19, 2024 · 7673833 · 7673833
1 parent da6a04f
commit 7673833
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/src/web4/handler.rs b/src/web4/handler.rs
@@ -105,6 +105,7 @@ pub fn web4_get(contract: &Contract, request: Web4Request) -> Web4Response {
     let title = html_escape::encode_text(&title).to_string();
     let description = html_escape::encode_text(&description).to_string();
 
+    let scroll_comment_into_view_js = include_str!("./scroll_comment_into_view.js");
     let body = format!(
         r#"<!DOCTYPE html>
 <html>
@@ -152,6 +153,9 @@ pub fn web4_get(contract: &Contract, request: Web4Request) -> Web4Response {
     </div>
 </nav>
     <near-social-viewer src="{current_account_id}/widget/app" initialProps='{initial_props_json}'></near-social-viewer>
+    <script>
+        {scroll_comment_into_view_js}
+    </script>
 </body>
 </html>"#,
         url = redirect_path

diff --git a/src/web4/scroll_comment_into_view.js b/src/web4/scroll_comment_into_view.js
@@ -0,0 +1,21 @@
+(async function () {
+    const urlSearchParams = new URLSearchParams(location.search);
+    const accountId = urlSearchParams.get("accountId");
+    const blockHeight = urlSearchParams.get("blockHeight");
+    if (accountId && blockHeight) {
+      for (let n = 0; n < 20; n++) {
+        const linkElementSelector = `#${accountId.replace(
+          /[^a-z0-9]/g,
+          ""
+        )}${blockHeight}`;
+
+        const linkElement = document.querySelector(linkElementSelector);
+        if (linkElement) {
+          linkElement.scrollIntoView();
+          console.log("scrolled into view");
+          break;
+        }
+        await new Promise((resolve) => setTimeout(() => resolve(), 500));
+      }
+    }
+  })();