Collapsible Merit Received in threads and replies (Show more/less...)

[PX-Z]

I have just suggested this one on PowerGlave thread Little things that bug you/me about the forum earlier, after i posted it there, I thought it would be great to read your thoughts about this to be implemented.

Here's my actual post (edited some text)...

Idk if this was suggested before, but i noticed that most merited (by users) thread/reply with multiple rows is a mess. While its good way to show off the merits received and the ones who give merits on that thread/reply. This will be more mess when time goes by knowing we have thousands of users here, imagine if half of all the members give merits to a thread/reply, it will be a long list/rows to show.

That's why I would like to suggest about the showing of received merits from users on a thread/reply to be limited by one row or two three with others as collapsible content, with collapse button/anchor "Show More..." by default, then "Show Less..."

Check the difference of the image result below how neat a two three rows showing merits received from this thread Merit & new rank requirements







I did some tweaking on the codes using CSS for ellipsis and JS for toggle button

Insert HTML class and id with the "Show more..." button

HTML elements to be added:

Code:

id="collapsible-content"
class="merit-content"
html: <span class="toggle-button" id="toggle-button">Show more...</span>

Code:

<td valign="middle" id="collapsible-content">
    <div class="smalltext merit-content">
        <i><span style="color:green">Merited</span> 
            .....
        </i>
    <div>
    <span class="toggle-button" id="toggle-button">Show more...</span>
</td>

CSS

Code:

.merit-content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit to 3 rows/lines */
    -webkit-box-orient: vertical;
}

.expanded .merit-content {
    height: auto; /* Show full content when expanded */
    -webkit-line-clamp: unset; /* Remove line clamp when expanded */
}

.toggle-button {
    display: inline-block;
    color: #476C8E;
    cursor: pointer;
    font-size: 11px;
    margin-top: 5px;
}

JS

Code:

const toggleButton = document.getElementById('toggle-button');
const collapsibleContent = document.getElementById('collapsible-content');

toggleButton.addEventListener('click', function() {
    if (collapsibleContent.classList.contains('expanded')) {
        collapsibleContent.classList.remove('expanded');
        toggleButton.textContent = 'Show more...';
    } else {
        collapsibleContent.classList.add('expanded');
        toggleButton.textContent = 'Show less...';
    }
});

Updated code to be used on userscript extension for three rows.

Code:

// ==UserScript==
// @name     Collapsible Received Merits
// @description     Collapse multiple rows of received merits in Bitcointalk
// @author  PX-Z
// @match  https://bitcointalk.org/index.php?topic=*
// @version  1
// @grant       none
// @run-at      document-end
// ==/UserScript==

(function() {
    'use strict';

    function injectToggleButtonScript() {
        const script = document.createElement('script');
        script.textContent = `
            window.toggleFunc = function(id) {
                const collapsibleContent = document.getElementById(\`collapsible_content_\${id}\`);
                const toggleButtonId = document.getElementById(\`clickid_\${id}\`);
                if (collapsibleContent.classList.contains('expanded')) {
                    collapsibleContent.classList.remove('expanded');
                    toggleButtonId.textContent = 'Show more...';
                } else {
                    collapsibleContent.classList.add('expanded');
                    toggleButtonId.textContent = 'Show less...';
                }
            };
        `;
        document.body.appendChild(script);
    }
    injectToggleButtonScript();

    let url = window.location.href;
    if( url.indexOf("bitcointalk.org/index.php?topic=") > 0){
        console.log('Collapsible Received Merits Initialized');
        // Select all div elements with IDs starting with "subject_"
        const subjectDivs = document.querySelectorAll('div[id^="subject_"]');
        // Iterate through each div and process the ID
        subjectDivs.forEach(div => {
        const fullId = div.id;
        const msgId = fullId.replace('subject_', '');
        const collpaseId = `collapsible_content_${msgId}`;
        let tbodyTr = div.closest('td.td_headerandpost table tbody tr');
            if (tbodyTr) {
                let tds = tbodyTr.querySelectorAll('td[valign="middle"]');
                let secondTd = tds[1];
                secondTd.setAttribute('id', collpaseId);
  
                let smalltextDivs = secondTd.querySelectorAll('div.smalltext');
                if (smalltextDivs.length === 2) {
                let secondSmalltextDivs = smalltextDivs[1];
                secondSmalltextDivs.setAttribute('class', `smalltext merit-content merit-h-${msgId}`);
  
                const dynamicDiv = document.querySelector(`.merit-h-${msgId}`);
                const height = dynamicDiv.offsetHeight; 
                    if(height > 45){
                        secondSmalltextDivs.insertAdjacentHTML('afterend', `<span class="toggle-button" onclick="toggleFunc('${msgId}')"><span id="clickid_${msgId}">Show more...</span></span>`);
                    }
                    else{
                        // To avoid id errors
                        secondSmalltextDivs.insertAdjacentHTML('afterend', `<span class="toggle-button" id="toggle_button"></span>`);
                    }
                }
            }
        });

        document.getElementById('toggle_button').addEventListener('click', function() {
            const id = this.getAttribute('data-msgid');
            const collapsibleContent = document.getElementById(`collapsible_content_${id}`);
            const toggleButtonId = document.getElementById(`clickid_${id}`);
            if (collapsibleContent.classList.contains('expanded')) {
                collapsibleContent.classList.remove('expanded');
                toggleButtonId.textContent = 'Show more...';
            } else {
                collapsibleContent.classList.add('expanded');
                toggleButtonId.textContent = 'Show less...';
            }
        });

        const style = document.createElement('style');
        style.textContent = `
        .merit-content {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3; /* Limit to 3 rows/line */
            -webkit-box-orient: vertical;
        }
        .expanded .merit-content {
            height: auto; /* Show full content when expanded */
            -webkit-line-clamp: unset; /* Remove line clamp when expanded */
        }
        .toggle-button {
            display: inline-block;
            color: #476C8E;
            cursor: pointer;
            font-size: 11px;
            margin-top: 2px;
        }
        `;
        document.head.appendChild(style);
    }
})();

What's your thoughts on this...

Note: This is only a temporary solution, there will be much better approach if sever-side script is included to enhance the code...

[Apocollapse]

That's a good one.

When I opened the thread, I can only see my profile, @OP and the list of users who merit the thread lol. 2-3 lines is enough to show the merited users.

Maybe it would be better if it shows the total received merit too.

[hugeblack]

+ 1 support this suggestion, most of the topics that get a lot of merits are historical topics and some articles take screenshots of them, so hiding the list of who sent merits (if the list is long) would be good.

[rachael9385]

+ 1 support this suggestion, most of the topics that get a lot of merits are historical topics and some articles take screenshots of them, so hiding the list of who sent merits (if the list is long) would be good.

Yes exactly, this is exactly what I figured out after making some few searches.
However, I have no doubt that there's a fresh topic that will earn more merits in future, we just have to wait for the topic to be created, and as Theymos and joker_josue have earn much merits in some of their threads, they probably have more threads that will give them much merits to create.
I support this suggestion.

[Oshosondy]

This is a good suggestion. I have been thinking about good approach to this. There are some threads that the people that gives merits are too many, making the merit space on the OP thread to look not good at all. But I think some people may not agree to this because they just like their name to show easily as one of the people that merit a post. Just like the Satoshi post which is legendary. But if this change, it would be good.

[Justbillywitt]

It is a very good suggestion that you have come up with. For me two lines is even much. It can be done in a way that it will just show the name of the first person that merited the post and number of merits it received and others.

For example, it can be in this form; Merited by Justbillywitt and x others, View all. This way it will just be limited to one line. So if a user decides to view all, he/she can click on view all to see the other users that merited the post.

[PX-Z]

I have enhanced the code, The "Show more..." button will only show in posts with merits received more than two rows.

This will work if entered on browser's developers tab or entered in browser extension userscript like GreaseMonkey for firefox and Tampermonkey for chrome-based browsers.

Code:

// ==UserScript==
// @name     Collapsible Received Merits
// @description     Collapse multiple rows of received merits in Bitcointalk
// @author  PX-Z
// @match  https://bitcointalk.org/index.php?topic=*
// @version  1
// @grant       none
// @run-at      document-end
// ==/UserScript==

(function() {
    'use strict';

    function injectToggleButtonScript() {
        const script = document.createElement('script');
        script.textContent = `
            window.toggleFunc = function(id) {
                const collapsibleContent = document.getElementById(\`collapsible_content_\${id}\`);
                const toggleButtonId = document.getElementById(\`clickid_\${id}\`);
                if (collapsibleContent.classList.contains('expanded')) {
                    collapsibleContent.classList.remove('expanded');
                    toggleButtonId.textContent = 'Show more...';
                } else {
                    collapsibleContent.classList.add('expanded');
                    toggleButtonId.textContent = 'Show less...';
                }
            };
        `;
        document.body.appendChild(script);
    }
    injectToggleButtonScript();

    let url = window.location.href;
    if( url.indexOf("bitcointalk.org/index.php?topic=") > 0){
        console.log('Collapsible Received Merits Initialized');
        // Select all div elements with IDs starting with "subject_"
        const subjectDivs = document.querySelectorAll('div[id^="subject_"]');
        // Iterate through each div and process the ID
        subjectDivs.forEach(div => {
        const fullId = div.id;
        const msgId = fullId.replace('subject_', '');
        const collpaseId = `collapsible_content_${msgId}`;
        let tbodyTr = div.closest('td.td_headerandpost table tbody tr');
            if (tbodyTr) {
                let tds = tbodyTr.querySelectorAll('td[valign="middle"]');
                let secondTd = tds[1];
                secondTd.setAttribute('id', collpaseId);
  
                let smalltextDivs = secondTd.querySelectorAll('div.smalltext');
                if (smalltextDivs.length === 2) {
                let secondSmalltextDivs = smalltextDivs[1];
                secondSmalltextDivs.setAttribute('class', `smalltext merit-content merit-h-${msgId}`);
  
                const dynamicDiv = document.querySelector(`.merit-h-${msgId}`);
                const height = dynamicDiv.offsetHeight; 
                    if(height > 55){
                        secondSmalltextDivs.insertAdjacentHTML('afterend', `<span class="toggle-button" onclick="toggleFunc('${msgId}')"><span id="clickid_${msgId}">Show more...</span></span>`);
                    }
                    else{
                        // To avoid id errors
                        secondSmalltextDivs.insertAdjacentHTML('afterend', `<span class="toggle-button" id="toggle_button"></span>`);
                    }
                }
            }
        });

        document.getElementById('toggle_button').addEventListener('click', function() {
            const id = this.getAttribute('data-msgid');
            const collapsibleContent = document.getElementById(`collapsible_content_${id}`);
            const toggleButtonId = document.getElementById(`clickid_${id}`);
            if (collapsibleContent.classList.contains('expanded')) {
                collapsibleContent.classList.remove('expanded');
                toggleButtonId.textContent = 'Show more...';
            } else {
                collapsibleContent.classList.add('expanded');
                toggleButtonId.textContent = 'Show less...';
            }
        });

        const style = document.createElement('style');
        style.textContent = `
        .merit-content {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4; /* Limit to 4 rows/line */
            -webkit-box-orient: vertical;
        }
        .expanded .merit-content {
            height: auto; /* Show full content when expanded */
            -webkit-line-clamp: unset; /* Remove line clamp when expanded */
        }
        .toggle-button {
            display: inline-block;
            color: #476C8E;
            cursor: pointer;
            font-size: 11px;
            margin-top: 2px;
        }
        `;
        document.head.appendChild(style);
    }
})();

[Accardo]

That's why I would like to suggest about the showing of received merits from users on a thread/reply to be limited by one row or two with others as collapsible content, with collapse button/anchor "Show More..." by default, then "Show Less..."

Your contribution is quite effective and enlivens top merited threads, as some readers may be sidetracked by the long list of merit senders. But, the one or two row limitation can be extended to 4-5 rows, so that the threads with mega merits can still be recognized at first glance. If you keep it at that two rows it'll be dry to click the "show more" button and it drops down to show an extra one row; for threads that ended with just 3 rows of merits.

[uchegod-21]

But I think some people may not agree to this because they just like their name to show easily as one of the people that merit a post. Just like the Satoshi post which is legendary. But if this change, it would be good.

Unfortunately, I'm among this group of people, but not for my name to show as a merit giver, because of what Accardo said below.

Your contribution is quite effective and enlivens top merited threads, as some readers may be sidetracked by the long list of merit senders. But, the one or two row limitation can be extended to 4-5 rows, so that the threads with mega merits can still be recognized at first glance. If you keep it at that two rows it'll be dry to click the "show more" button and it drops down to show an extra one row; for threads that ended with just 3 rows of merits.

This is where my concern is. The beauty of a mega merit thread is the mega rows of thread. This does not limit the forum, rather it beautifies and dignifies the thread. Hiding the rows will make it difficult to differentiate a mega merit thread and an average merit thread. Besides it is only 1 in a 10 that will click show more just to see how long the merit row is.

[Alpha Marine]

This is not a bad idea if it won't be too much work, since we're talking about little things.
Instead of collapsing, it can be made to show just a few of the merits received. It could be like a "show more" or "show less". By default, the first two or 3 lines of the merit received on the post will be visible to all.
I don't think making all the merits hidden makes a lot of sense, people need to see that the post has received a certain amount of merits. Also, if the post has only been merited by a couple of accounts, it won't make sense to make them invisible because the "show more" button is used when you have seen something but there is more and you want to see more of it.   

[Faisal2202]

I have just suggested this one on PowerGlave thread Little things that bug you/me about the forum earlier, after i posted it there, I thought it would be great to read your thoughts about this to be implemented.

Thanks a lot for this contribution. I mean, it is not a big problem though, but if this update gets approved by the admin, then the forum will look more cool and user-friendly. There are a lot of things we can add to the UI of this forum, and this is one of the steps.

I liked this update, and I hope admins will approve it soon. The show less and show more option is a good one can you also add another option of "select" for copying the signature or any other kind of content written inside the code tags? We see such feature on ALTT and I liked that very much maybe you have think of it already.

[skarais]

+ 1 support this suggestion, most of the topics that get a lot of merits are historical topics and some articles take screenshots of them, so hiding the list of who sent merits (if the list is long) would be good.

I also agree with the OP's idea and of course this is a good solution to make the main appearance of thread that receive many merit more neatly organized. All merit senders can still be seen especially when they press the show more button. Showing information on the total number of merits received would also be nice to insert at the end, so I agree and appreciate the great work.

[dkbit98]

I have enhanced the code, The "Show more..." button will only show in posts with merits received more than two rows.

It looks good now and it does save a lot of space for posts with a lot of merits received, but I think you could add one or two more visible rows by default.
Show more button should also turn to Hide button when all merits become visible.
I don't see any negative sides of adding this update, unless it breaks something in forum code.

[SmartGold01]

What's your thoughts on this...

Note: This is only a temporary solution, there will be much better approach if sever-side script is included to enhance the code...

Sincerely when I came across that topic it was like I can't view everything clearly because it affects my eyes with the merits bath over there so, if there would be a final solution to it then it will be more better. The show less/more options makes it look cool to view although we hardly have topics with more merits bath except from the older post maybe if someone wants to read from those old post then there will be need to implement that solution otherwise, it's still fine the way to was, just that anytime someone comes across those topics they would need less it and to continue reading and it look very messed up.

[Upgrade00]

I have enhanced the code, The "Show more..." button will only show in posts with merits received more than two rows.

This will be a great improvement to the forum, one of the best fix suggestions we have had in a while and I see no reason why this should not get implemented (I think this should get priority too).

[Smartvirus]

This is by far a harmless suggestion that would serve well as intended. While we might have very few threads that might pose with lots of merits on it, having this option to collapse and elaborate on the merits when it’s enormous is a good feature. The patch surely should be looked into and implemented.
Nice one PX-Z, having to come up with this suggestion and isn’t leave it there but, went ahead to write the patch for its implementation, using some of the best examples to illustrate just how well this would fix the existing system.

[PowerGlove]

Probably I'm in a ratty mood, and a little frustrated at seemingly never being able to get theymos to merge what I consider to be worthwhile fixes, so please factor that into what I'm about to say, but...

WTF are you guys smoking? You're getting all pumped about something that affects, like, what, 1 awesome post for every ~gazillion ordinary posts?

I mean, don't you want those really rare posts that very many people have appreciated to stand out? How often do you organically land on posts like that, anyway? A couple times a year?

I don't get it. What am I missing here?

This will be a great improvement to the forum, one of the best fix suggestions we have had in a while and I see no reason why this should not get implemented (I think this should get priority too).

One of the best fix suggestions we've had in a while? And one that you think that either theymos or I should push to the front of the queue?

[Josefjix]

This will be a great improvement to the forum, one of the best fix suggestions we have had in a while and I see no reason why this should not get implemented (I think this should get priority too).

One of the best fix suggestions we've had in a while? And one that you think that either theymos or I should push to the front of the queue?

2fa is the best fix and nothing come close

Topics look better with those merits and senders visible, and I believe this feature might be used to aid merit abuse. Imagine visiting a thread you merited and can't find your username; I doubt anyone would want that.

[PX-Z]

...But, the one or two row limitation can be extended to 4-5 rows, so that the threads with mega merits can still be recognized at first glance. If you keep it at that two rows it'll be dry to click the "show more" button and it drops down to show an extra one row; for threads that ended with just 3 rows of merits.

Some guys have the same thoughts, this is considerable and noted, 

Show more button should also turn to Hide button when all merits become visible.

The "Show more" button will turn to "Show less" once clicked, it's collapsible like what can be seen on most website's FAQ page.

Topics look better with those merits and senders visible, and I believe this feature might be used to aid merit abuse.
Imagine visiting a thread you merited and can't find your username; I doubt anyone would want that.

This will not totally hide those usernames who give merits, this will just optionally hide them, as you can hide and check them using the Show more/less button.

I appreciate the words guys and gals but don't forget that the best we had is having PowerGlove's on his forum fixes, improvements and developments, this is just me having development thoughts and try to develop once in a blue moon. Haha

[Amphenomenon]

-Snip-

Don't feel shocked or bad man, I have been in a contradicting ideas, I guessed most times, what I likes others might see an issue with it, from your view I think it's great since it doesn't happen quite often but I think it can be implemented to suit's both parties with the show more option, it will be similar to the previous.
I often like  to see all who merited those mega merit threads is great though but sometimes it may be bulky, especially when you're on a mobile device and so I stand with both sides.