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

added user address highlighting

Browse Source
This commit is contained in:
plebbitor
2023-04-20 17:20:26 +02:00
parent e6ff25fcd0
commit 3234699b69
3 changed files with 62 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+17 -4
View File
@@ -14,6 +14,7 @@ import SettingsModal from '../SettingsModal';
import findShortParentCid from '../../utils/findShortParentCid';
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
import getDate from '../../utils/getDate';
import handleAddressClick from '../../utils/handleAddressClick';
import handleQuoteClick from '../../utils/handleQuoteClick';
import handleStyleChange from '../../utils/handleStyleChange';
import renderComments from '../../utils/renderComments';
@@ -449,7 +450,10 @@ const Board = () => {
Anonymous</span>}
&nbsp;
(u/
<span key={`pa-${thread.cid}`} className="poster-address">
<span key={`pa-${thread.cid}`} className="poster-address address-desktop"
id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(thread.author.shortAddress)}
>
{thread.author.shortAddress}
</span>)
&nbsp;
@@ -542,7 +546,10 @@ const Board = () => {
: <span key={`mob-n-${reply.cid}`} className="name">
Anonymous</span>}
&nbsp;
<span key={`pa-${reply.cid}`} className="poster-address">
<span key={`pa-${reply.cid}`} className="poster-address address-desktop"
id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(reply.author.shortAddress)}
>
(u/
<span key={`mob-ha-${reply.cid}`}>
{reply.author.shortAddress}
@@ -675,7 +682,10 @@ const Board = () => {
: <span key={`mob-n-${thread.cid}`} className="name-mobile">
Anonymous</span>}
&nbsp;
<span key={`mob-pa-${thread.cid}`} className="poster-address-mobile">
<span key={`mob-pa-${thread.cid}`} className="poster-address-mobile address-mobile"
id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(thread.author.shortAddress)}
>
(u/
<span key={`mob-ha-${thread.cid}`} className="highlight-address-mobile">
{thread.author.shortAddress}
@@ -801,7 +811,10 @@ const Board = () => {
: <span key={`mob-n-${reply.cid}`} className="name-mobile">
Anonymous</span>}
&nbsp;
<span key={`mob-pa-${reply.cid}`} className="poster-address-mobile">
<span key={`mob-pa-${reply.cid}`} className="poster-address-mobile address-mobile"
id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(reply.author.shortAddress)}
>
(u/
<span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile">
{reply.author.shortAddress}
src/components/views/Thread.jsx
+16 -4
View File
@@ -14,6 +14,7 @@ import SettingsModal from '../SettingsModal';
import findShortParentCid from '../../utils/findShortParentCid';
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
import getDate from '../../utils/getDate';
import handleAddressClick from '../../utils/handleAddressClick';
import handleQuoteClick from '../../utils/handleQuoteClick';
import handleStyleChange from '../../utils/handleStyleChange';
import renderThreadComments from '../../utils/renderThreadComments';
@@ -467,7 +468,9 @@ const Thread = () => {
Anonymous</span>}
&nbsp;
&nbsp;
<span className="poster-address">
<span className="poster-address address-desktop"
id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(comment.author?.shortAddress)}>
(u/
<span key={`pa-${comment.cid}`} className="poster-address">
{comment.author?.shortAddress}
@@ -532,7 +535,10 @@ const Thread = () => {
: <span key={`mob-n-${reply.cid}`} className="name">
Anonymous</span>}
&nbsp;
<span key={`pa-${reply.cid}`} className="poster-address">
<span key={`pa-${reply.cid}`} className="poster-address address-desktop"
id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(reply.author?.shortAddress)}
>
(u/
<span key={`mob-ha-${reply.cid}`}>
{reply.author?.shortAddress ?? reply.author.address}
@@ -649,7 +655,10 @@ const Thread = () => {
: <span key={`mob-n-${comment.cid}`} className="name-mobile">
Anonymous</span>}
&nbsp;
<span key={`mob-pa-${comment.cid}`} className="poster-address-mobile">
<span key={`mob-pa-${comment.cid}`} className="poster-address-mobile address-mobile"
id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(comment.author?.shortAddress)}
>
(u/
<span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile">
{comment.author?.shortAddress}
@@ -745,7 +754,10 @@ const Thread = () => {
: <span key={`mob-n-${reply.cid}`} className="name-mobile">
Anonymous</span>}
&nbsp;
<span key={`mob-pa-${reply.cid}`} className="poster-address-mobile">
<span key={`mob-pa-${reply.cid}`} className="poster-address-mobile address-mobile"
id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(reply.author?.shortAddress)}
>
(u/
<span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile">
{reply.author?.shortAddress}
src/utils/handleAddressClick.js
+29
View File
@@ -0,0 +1,29 @@
function handleAddressClick(shortAddress) {
const isMobile = window.innerWidth <= 480;
const addressSelector = isMobile ? '.address-mobile' : '.address-desktop';
const postReplySelector = isMobile ? '.post-reply-mobile' : '.post-reply-desktop';
const opSelector = isMobile ? '.op-mobile' : '.op-desktop';
const matchingElements = [...document.querySelectorAll(postReplySelector + ',' + opSelector)].filter(el => {
const addressElement = el.querySelector(addressSelector);
return addressElement && addressElement.textContent.includes(shortAddress);
});
if (matchingElements.length === 0) {
console.log('Could not find any matching elements');
return;
}
const highlightedElements = document.querySelectorAll('.highlighted');
highlightedElements.forEach(el => {
el.classList.remove('highlighted');
});
matchingElements.forEach(el => {
if (!el.classList.contains('op-mobile') && !el.classList.contains('op-desktop')) {
el.classList.add('highlighted');
}
});
}
export default handleAddressClick;