From 6f4ca47a0f42b4bc5a94e5618881e39a5ac626df Mon Sep 17 00:00:00 2001
From: Tom <mottoes_recap0u@icloud.com>
Date: Thu, 1 Jun 2023 21:41:48 +0200
Subject: [PATCH] implement on hover cid highlight

---
 src/components/styled/views/Board.styled.jsx  |  4 +-
 src/components/styled/views/Thread.styled.jsx |  4 +-
 src/components/views/Board.jsx                | 35 ++++++++++++----
 src/components/views/Thread.jsx               | 22 +++++++---
 src/utils/handleQuoteHover.js                 | 41 +++++++++++++++++++
 src/utils/removeHighlight.js                  |  9 ++++
 6 files changed, 99 insertions(+), 16 deletions(-)
 create mode 100644 src/utils/handleQuoteHover.js
 create mode 100644 src/utils/removeHighlight.js

diff --git a/src/components/styled/views/Board.styled.jsx b/src/components/styled/views/Board.styled.jsx
index 7d98fc12..95050d1a 100644
--- a/src/components/styled/views/Board.styled.jsx
+++ b/src/components/styled/views/Board.styled.jsx
@@ -1822,7 +1822,7 @@ export const BoardForm = styled.div`
       case 'Tomorrow':
         return `.highlighted {
         background-color: #1d1d21 !important;
-        border: 1px solid #111 !important;
+        outline: 1px solid #111 !important;
       }
       
       #post-menu {
@@ -1842,7 +1842,7 @@ export const BoardForm = styled.div`
       case 'Photon':
         return `.highlighted {
         background-color: #ccc !important;
-        border: 1px solid #ccc !important;
+        outline: 1px solid #ccc !important;
       }
       
       #post-menu {
diff --git a/src/components/styled/views/Thread.styled.jsx b/src/components/styled/views/Thread.styled.jsx
index ea86d1fe..e7466fc3 100644
--- a/src/components/styled/views/Thread.styled.jsx
+++ b/src/components/styled/views/Thread.styled.jsx
@@ -1020,7 +1020,7 @@ export const BoardForm = styled.div`
       case 'Tomorrow':
         return `.highlighted {
         background-color: #1d1d21 !important;
-        border: 1px solid #111 !important;
+        outline: 1px solid #111 !important;
       }
       
       #post-menu {
@@ -1042,7 +1042,7 @@ export const BoardForm = styled.div`
       case 'Photon':
         return `.highlighted {
         background-color: #ccc !important;
-        border: 1px solid #ccc !important;
+        outline: 1px solid #ccc !important;
       }
       
       #post-menu {
diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx
index 1836da0d..1c01553a 100644
--- a/src/components/views/Board.jsx
+++ b/src/components/views/Board.jsx
@@ -28,7 +28,9 @@ import getDate from '../../utils/getDate';
 import handleAddressClick from '../../utils/handleAddressClick';
 import handleImageClick from '../../utils/handleImageClick';
 import handleQuoteClick from '../../utils/handleQuoteClick';
+import handleQuoteHover from '../../utils/handleQuoteHover';
 import handleStyleChange from '../../utils/handleStyleChange';
+import removeHighlight from '../../utils/removeHighlight';
 import useClickForm from '../../hooks/useClickForm';
 import useError from '../../hooks/useError';
 import useStateString from '../../hooks/useStateString';
@@ -968,7 +970,9 @@ const Board = () => {
                                   <div key={`div-${index}`} style={{display: 'inline-block'}}>
                                   <Link key={`ql-${index}`}
                                   to={() => {}} className="quote-link" 
-                                  onClick={(event) => handleQuoteClick(reply, null, event)}>
+                                  onClick={(event) => handleQuoteClick(reply, null, event)}
+                                  onMouseOver={(event) => handleQuoteHover(reply, null, event)}
+                                  onMouseLeave={removeHighlight}>
                                     c/{reply.shortCid}</Link>
                                     &nbsp;
                                   </div>
@@ -1188,7 +1192,9 @@ const Board = () => {
                                     <div key={`div-${index}`} style={{display: 'inline-block'}}>
                                     <Link to={() => {}} key={`ql-${index}`}
                                       className="quote-link" 
-                                      onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}>
+                                      onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
+                                      onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
+                                      onMouseLeave={removeHighlight}>
                                       c/{reply.shortCid}</Link>
                                       &nbsp;
                                     </div>
@@ -1254,7 +1260,10 @@ const Board = () => {
                               reply.content?.length > 500 ?
                               <Fragment key={`fragment8-${index}`}>
                                 <blockquote key={`pm-${index}`} comment={reply} className="post-message">
-                                  <Link to={() => {}} key={`r-pm-${index}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
+                                  <Link to={() => {}} key={`r-pm-${index}`} className="quotelink" 
+                                  onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
+                                  onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
+                                  onMouseLeave={removeHighlight}>
                                       {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                                   </Link>
                                   <Post content={reply.content?.slice(0, 500)} key={`post-${index}`} />
@@ -1273,7 +1282,10 @@ const Board = () => {
                                 </blockquote>
                               </Fragment>
                             : <blockquote key={`pm-${index}`} className="post-message">
-                                <Link to={() => {}} key={`r-pm-${index}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
+                                <Link to={() => {}} key={`r-pm-${index}`} className="quotelink" 
+                                onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
+                                onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
+                                onMouseLeave={removeHighlight}>
                                     {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                                 </Link>
                                 <Post content={reply.content} key={`post-${index}`} comment={reply} />
@@ -1570,7 +1582,10 @@ const Board = () => {
                             reply.content?.length > 500 ?
                             <Fragment key={`fragment15-${index}`}>
                               <blockquote key={`mob-pm-${index}`} className="post-message">
-                                <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
+                                <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" 
+                                onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
+                                onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
+                                onMouseLeave={removeHighlight}>
                                   {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                                 </Link>
                                 <Post content={reply.content?.slice(0, 500)} key={`post-mobile-${index}`} comment={reply} />
@@ -1589,7 +1604,10 @@ const Board = () => {
                               </blockquote>
                             </Fragment>
                           : <blockquote key={`mob-pm-${index}`} className="post-message">
-                              <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, shortParentCid, thread.shortCid, event)}>
+                              <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" 
+                              onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
+                              onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, event)}
+                              onMouseLeave={removeHighlight}>
                                 {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
                               </Link>
                               <Post content={reply.content} key={`post-mobile-${index}`} comment={reply} />
@@ -1608,7 +1626,10 @@ const Board = () => {
                               .map((reply, index) => (
                                 <div key={`div-back${index}`} style={{display: 'inline-block'}}>
                                 <Link key={`ql-${index}`} to={() => {}}
-                                onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)} className="quote-link">
+                                onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
+                                onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
+                                onMouseLeave={removeHighlight} 
+                                className="quote-link">
                                   c/{reply.shortCid}</Link>
                                   &nbsp;
                                 </div>
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index b1542fa3..f005df9f 100644
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -27,7 +27,9 @@ import getDate from '../../utils/getDate';
 import handleAddressClick from '../../utils/handleAddressClick';
 import handleImageClick from '../../utils/handleImageClick';
 import handleQuoteClick from '../../utils/handleQuoteClick';
+import handleQuoteHover from '../../utils/handleQuoteHover';
 import handleStyleChange from '../../utils/handleStyleChange';
+import removeHighlight from '../../utils/removeHighlight';
 import useClickForm from '../../hooks/useClickForm';
 import useError from '../../hooks/useError';
 import useStateString from '../../hooks/useStateString';
@@ -923,7 +925,9 @@ const Thread = () => {
                               <div key={`div-${index}`} style={{display: 'inline-block'}}>
                               <span style={{cursor: 'pointer'}} key={`ql-${index}`}
                                 className="quote-link" 
-                                onClick={(event) => handleQuoteClick(reply, null, event)}>
+                                onClick={(event) => handleQuoteClick(reply, null, event)}
+                                onMouseOver={(event) => handleQuoteHover(reply, null, event)}
+                                onMouseLeave={removeHighlight}>
                                 c/{reply.shortCid}</span>
                                 &nbsp;
                               </div>
@@ -1106,7 +1110,9 @@ const Thread = () => {
                                   <div key={`div-${index}`} style={{display: 'inline-block'}}>
                                   <span style={{cursor: 'pointer'}} key={`ql-${index}`}
                                     className="quote-link" 
-                                    onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}>
+                                    onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
+                                    onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
+                                    onMouseLeave={removeHighlight}>
                                     c/{reply.shortCid}</span>
                                     &nbsp;
                                   </div>
@@ -1171,7 +1177,9 @@ const Thread = () => {
                               onClick={(event) => {
                                 handleQuoteClick(reply, shortParentCid, comment.shortCid, event);
                               }}
-                            >
+                              onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, comment.shortCid, event)}
+                              onMouseLeave={removeHighlight}
+                              >
                               {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
                             </span>
                             <Post content={reply.content} comment={reply} key={`post-${index}`} />
@@ -1414,7 +1422,9 @@ const Thread = () => {
                           ) : null}
                         <blockquote key={`mob-pm-${index}`} className="post-message-mobile">
                           <span style={{cursor: 'pointer'}} key={`mob-ql-${index}`} className="quotelink-mobile" 
-                          onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}>
+                          onClick={(event) => handleQuoteClick(reply, shortParentCid, comment.shortCid, event)}
+                          onMouseOver={(event) => handleQuoteHover(reply, shortParentCid, comment.shortCid, event)}
+                          onMouseLeave={removeHighlight}>
                             {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
                           </span>
                           <Post content={reply.content} comment={reply} key={`post-mobile-${index}`} />
@@ -1432,7 +1442,9 @@ const Thread = () => {
                           .map((reply, index) => (
                             <div key={`div-back${index}`} style={{display: 'inline-block'}}>
                             <span style={{cursor: 'pointer'}} key={`ql-${index}`} className="quote-link" 
-                            onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}>
+                            onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
+                            onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
+                            onMouseLeave={removeHighlight}>
                               c/{reply.shortCid}</span>
                               &nbsp;
                             </div>
diff --git a/src/utils/handleQuoteHover.js b/src/utils/handleQuoteHover.js
new file mode 100644
index 00000000..c8d084c9
--- /dev/null
+++ b/src/utils/handleQuoteHover.js
@@ -0,0 +1,41 @@
+function handleQuoteHover(reply, parentCid) {
+  const cid = parentCid ? parentCid : reply.shortCid;
+  const isMobile = window.innerWidth <= 480;
+  const postNumberSelector = isMobile ? '.post-number-mobile' : '.post-number-desktop';
+
+  const targetElementSelector = isMobile ? '.post-reply-mobile, .op-mobile' : '.post-reply-desktop, .op-desktop';
+
+  const targetElement = [...document.querySelectorAll(targetElementSelector)]
+    .find(el => {
+      const postNumberElement = el.querySelector(postNumberSelector);
+      return postNumberElement && postNumberElement.innerHTML.includes(cid);
+    });
+
+  if (targetElement) {
+    const isInViewport = (element) => {
+      const bounding = element.getBoundingClientRect();
+      return (
+        bounding.top >= 0 &&
+        bounding.left >= 0 &&
+        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
+      );
+    };
+
+    if (isInViewport(targetElement)) {
+      const highlightedElements = document.querySelectorAll('.highlighted');
+
+      highlightedElements.forEach(el => {
+        el.classList.remove('highlighted');
+      });
+
+      if (!targetElement.classList.contains('op-mobile') && !targetElement.classList.contains('op-desktop')) {
+        targetElement.classList.add('highlighted');
+      }
+    }
+  } else {
+    return;
+  }
+};
+
+export default handleQuoteHover;
\ No newline at end of file
diff --git a/src/utils/removeHighlight.js b/src/utils/removeHighlight.js
new file mode 100644
index 00000000..8a4f0858
--- /dev/null
+++ b/src/utils/removeHighlight.js
@@ -0,0 +1,9 @@
+function removeHighlight() {
+  const highlightedElements = document.querySelectorAll('.highlighted');
+
+  highlightedElements.forEach(el => {
+    el.classList.remove('highlighted');
+  });
+};
+
+export default removeHighlight;
\ No newline at end of file