From 4da1bc2d6044216f8adc6767adf7cc74d1565a47 Mon Sep 17 00:00:00 2001
From: Erik Demaine <edemaine@mit.edu>
Date: Thu, 17 Mar 2022 18:54:11 -0400
Subject: [PATCH] Clicking message scrolls TOC (#598)

---
 CHANGELOG.md          |  3 +++
 client/message.coffee | 20 +++++++++++++++++++-
 client/message.styl   |  6 ++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fdfe23f..a9c9fbc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,9 @@ instead of version numbers.
   so it's much easier to tell where you are.
   The color is more intense for messages fully in view.
   [[#597](https://github.com/edemaine/coauthor/issues/597)]
+* Clicking on a message header scrolls the table of contents to align the
+  corresponding item, to the extent possible.
+  [[#598](https://github.com/edemaine/coauthor/issues/598)]
 
 ## 2022-03-15
 
diff --git a/client/message.coffee b/client/message.coffee
index 0dde41b..ed45ad1 100644
--- a/client/message.coffee
+++ b/client/message.coffee
@@ -2296,9 +2296,27 @@ export WrappedSubmessage = React.memo ({message, read}) ->
       #else
       #  console.warn "No-op update tag '#{tag}' = '#{tagVal}' in message #{message._id}"
     false  ## prevent form from submitting
+  ## Scroll the table of contents (if visible) to align with this message.
+  showTOC = (e) ->
+    ## Ignore propagated events e.g. from Action dropdown button.
+    return unless e.target.className.startsWith 'panel-heading'
+    e.preventDefault()
+    toc = document.querySelector 'nav.contents'
+    return unless toc?
+    item = toc.querySelector "a[data-id='#{message._id}']"
+    return unless item?
+    msgTop = e.currentTarget.getBoundingClientRect().top
+    itemTop = 0
+    item = item.parentNode
+    while item? and not /sticky/.test item.className
+      itemTop += item.offsetTop
+      item = item.offsetParent
+    toc.scroll
+      top: itemTop - msgTop - 9  # fudge factor to align heading with toc item
+      behavior: 'smooth'
 
   <div className="panel message #{messagePanelClass message, editing}" data-message={message._id} id={message._id} ref={setRef}>
-    <div className="panel-heading clearfix">
+    <div className="panel-heading clearfix" onClick={showTOC}>
       {if editing and not history?
         <input className="push-down form-control title" type="text" placeholder="Title" value={editTitle} onChange={onChangeTitle} tabIndex={tabindex0+18}/>
       else
diff --git a/client/message.styl b/client/message.styl
index be368bc..c8945b1 100644
--- a/client/message.styl
+++ b/client/message.styl
@@ -286,6 +286,12 @@ nav.contents
     border-bottom-left-radius: 5px
     height: 4px
 
+// Message heading
+
+.message
+  > .panel-heading:hover
+    border-color: red
+
 // Message body
 
 .message-body