External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fixed quote scroll to start of match

Browse Source
This commit is contained in:
plebbitor
2023-04-19 10:45:42 +02:00
parent 9783a9b86f
commit 3c5b725937
3 changed files with 25 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+2 -2
View File
@@ -384,7 +384,7 @@ const Board = () => {
<Fragment key={`fr-${thread.cid}`}>
<div key={`t-${thread.cid}`} className="thread">
<div key={`c-${thread.cid}`} className="op-container">
<div key={`po-${thread.cid}`} className="post op">
<div key={`po-${thread.cid}`} className="post op op-desktop">
<hr key={`hr-${thread.cid}`} />
<div key={`pi-${thread.cid}`} className="post-info">
{commentMediaInfo?.url ? (
@@ -650,7 +650,7 @@ const Board = () => {
<div key={`mob-t-${thread.cid}`} className="thread-mobile">
<hr key={`mob-hr-${thread.cid}`} />
<div key={`mob-c-${thread.cid}`} className="op-container">
<div key={`mob-po-${thread.cid}`} className="post op">
<div key={`mob-po-${thread.cid}`} className="post op op-mobile">
<div key={`mob-pi-${thread.cid}`} className="post-info-mobile">
<button key={`mob-pb-${thread.cid}`} className="post-menu-button-mobile" onClick={() => {}} style={{ all: 'unset', cursor: 'pointer' }}>...</button>
<span key={`mob-nbm-${thread.cid}`} className="name-block-mobile">
src/components/views/Thread.jsx
+2 -5
View File
@@ -402,7 +402,7 @@ const Thread = () => {
<>
<div className="thread">
<div className="op-container">
<div className="post op">
<div className="post op op-desktop">
<div className="post-info">
{commentMediaInfo?.url ? (
<div key={`f-${comment.cid}`} className="file" style={{marginBottom: "5px"}}>
@@ -616,9 +616,6 @@ const Thread = () => {
<Link to={() => {}} className="quote-link"
onClick={(event) => {
handleQuoteClick(reply, shortParentCid, comment.shortCid, event);
if (shortParentCid === comment.shortCid) {
window.scrollTo(0, 0);
}
}}
>
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
@@ -634,7 +631,7 @@ const Thread = () => {
<div className="thread-mobile" key="thread-mobile">
<hr />
<div className="op-container" key="op-container">
<div key={`mob-po-${comment.cid}`} className="post op">
<div key={`mob-po-${comment.cid}`} className="post op op-mobile">
<div key={`mob-pi-${comment.cid}`} className="post-info-mobile">
<button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile" onClick={() => {}}>...</button>
<span className="name-block-mobile">
src/utils/handleQuoteClick.js
+21 -4
View File
@@ -1,6 +1,7 @@
function handleQuoteClick(reply, parentCid, threadCid) {
const cid = parentCid ? parentCid : reply.shortCid;
const isMobile = window.innerWidth <= 480;
const postNumberSelector = isMobile ? '.post-number-mobile' : '.post-number-desktop';
if (threadCid && cid === threadCid) {
const highlightedElements = document.querySelectorAll('.highlighted');
@@ -9,11 +10,24 @@ function handleQuoteClick(reply, parentCid, threadCid) {
el.classList.remove('highlighted');
});
const opElementSelector = isMobile ? '.op-mobile' : '.op-desktop';
const opElement = [...document.querySelectorAll(opElementSelector)]
.find(el => {
const postNumberElement = el.querySelector(postNumberSelector);
return postNumberElement && postNumberElement.innerHTML.includes(threadCid);
});
if (opElement) {
opElement.scrollIntoView({ behavior: "auto", block: "start" });
} else {
console.log('Could not find OP element');
}
return;
}
const targetElementSelector = isMobile ? '.post-reply-mobile' : '.post-reply-desktop';
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 => {
@@ -28,8 +42,11 @@ function handleQuoteClick(reply, parentCid, threadCid) {
el.classList.remove('highlighted');
});
targetElement.scrollIntoView({ behavior: "auto", block: "center" });
targetElement.classList.add('highlighted');
targetElement.scrollIntoView({ behavior: "auto", block: "start" });
if (!targetElement.classList.contains('op-mobile') && !targetElement.classList.contains('op-desktop')) {
targetElement.classList.add('highlighted');
}
} else {
console.log('Could not find target element');