Spyke
general-discussion·General Discussionbyklockprat

Use readmore.js for blockquotes

Hi!

I'm migrating from another forum to hosted nodeBB but need som help with one important feature.

We have some users that make long posts, and when someone quotes, the quote become equally long, this makes it cumbersome to scroll throught the topic.

Other forums solve this by fading out, and a clickable "read more..." text that expands the big quotes.

I was hoping to do this as well, but am failing. Mainly I hope due to my lacking knowledge in javascript.

So I tried uploading readmore.min.js to /assets/uploads/... and added the following to custon javascript:

function onLoad() {
    require(['/assets/uploads/readmore.min.js']);
    console.log('yeah it works');
    console.log($('blockquote'));
    $('blockquote').readmore();
}

$(document).ready(onLoad);
$(window).on('action:ajaxify.end', onLoad);

This gives me the following output in the console:

Any help is much appreciated!

View original on community.nodebb.org
0
Comments10
Moshe
community.nodebb.org

@baris I would appreciate a more detailed explanation! I guess I didn't understand the whole thread. Is there a way to add a read more button to very long quotes? If so, what is the whole process you had to do?

2
<baris>
community.nodebb.org

The latest file is here https://github.com/jedfoster/Readmore.js/blob/master/readmore.min.js, I tried using it with the latest version of nodebb and found some issues. Create a pull request with my fixes at https://github.com/jedfoster/Readmore.js/pull/265/changes.

So with that updated file in public/uploads folder and the below custom javascript in the ACP it works.

$(window).on('action:topic.loaded action:posts.loaded', function() {
   function enableReadMore() {
       $('blockquote').readmore({});
   } 
   if (!$.readmore) {
       $.getScript('/foren/assets/uploads/readmore.min.js').then(enableReadMore);
   } else {
       enableReadMore();
   }
});

2
<baris>
community.nodebb.org

Core no longer uses requirejs so that syntax will no longer work. If you put the readmore.min.js file in public/uploads then you can load it and use it with $.getScript().

$.getScript('/assets/uploads/readmore.min.js', function () {
  $('<div>').readmore();
})
```</div>
1

You reached the end

Use readmore.js for blockquotes | Spyke