georapbox / ReadMore.js

JavaScript library that adds a 'read more' functionality on the text blocks that is applied to.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Feature request: Able to use character count as well as word count.

Beagon opened this issue · comments

Hello,

Would it be possible to add a function so we could use both wordsCount and a count based on characters? If we could use them both at the same time that would even be better.

This would prevent the edge-case of people on purpose not using spaces to not trigger the read more script.

Hi @Beagon ,

I guess that an option to use characters count instead of words count, would make sense, although I don't find a scenario that both of them could be used at the same time. One of them would need to take precedence against the other. So, could you please add more detail on what you mean exactly by using both at the same time?

Regarding the second argument, I don't really understand why anyone would do such a thing on an actual website. Wouldn't that lead in having a piece of text that is not readable at all?

Hi @Beagon ,

I guess that an option to use characters count instead of words count, would make sense, although I don't find a scenario that both of them could be used at the same time. One of them would need to take precedence against the other. So, could you please add more detail on what you mean exactly by using both at the same time?

Regarding the second argument, I don't really understand why anyone would do such a thing on an actual website. Wouldn't that lead in having a piece of text that is not readable at all?

Hi @georapbox ,

Using them both at the same time would cover the edge-case for user generated content where they on "purpose" make a post/submission with the content being: "LetsMakeThisVeryLongSoItDoesn'tGetCutOffBecauseIWantToShowEverythingOnThePreview" while it would also allow to cut-off when a user does use the correct format e.g.: "Lets make this very long so it does get cut off after 5 words". It would be a nice to have though, it's something that can of course be managed server-side but I'd rather not waste the resources to check how long a certain word is.

The first example would get cut off after lets say 20 characters e.g: "LetsMakeThisVeryL..." while the second would be "Lets make this very long..."

I hope this clears it up a bit. Even having 1 of the 2 options be usable at a time would be great though. This is a very nice library and better than most others I came across in my research so thank you very much for building it!

Having both options applied at the same time seems to over-complicate things because it would mean that the library makes assumptions on when to use one of the two and not the other. The way I think of it, in order to support additional option for characters count, would be to have the developer explicitly define which of the 2 options they want "wordsCount" VS "charactersCount". If both provided by mistake, one of the 2 should be used eg "wordsCount" and the other be ignored.

What do you think for a solution like this?

That would not solve the issue I proposed but I do get that it would complicate things.

Would it maybe be possible to do it like this if both are enabled:

var destroy = $readMoreJS({
   target: '.container p',
   wordsCount: 50,
   letterCount: 25,
   toggle: true,
   moreLink: 'Read more',
   lessLink: 'Read less',
   linkClass: 'rm-link-classname'
});

foreach (word) { if (word.length >= destroy.letterCount) { USE_LETTERCOUNT } else { USE WORDCOUNT }

Don't mind my pseudocode haha

Again, thanks for putting your time and effort into this. You're a legend!

The problem with this approach is that it's not deterministic and explicit. The option that is used wordsCount or charactersCount must be explicitly defined by the user and not decided by the library depending on the words or characters count.

Your use case is a bit rare to be honest, although I understand that it's an actual problem you need to solve, but I would prefer to keep the library as generic as possible.

On the other hand, there is nothing stopping you from using the library and selecting the appropriate option between the 2 depending on what's the case every time.

The pseudocode below demonstrates how to deal with a scenario that you described above where the content is on submitted as one word.

var contentLength = document.querySelector('#element').textContent.split(' ').filter(Boolean).length;

$readMoreJS({
   target: '#element',
   ...(contentLength === 1 ? { charactersCount: 100 } : { wordsCount : 50 }) 
});

Keep in mind though, that if you follow such an approach the target option should be a selector that matches only one element and not a NodeList. Otherwise it would result that the option applies to all elements that are matched by the selector.

Does a solution like this make any sense?

PS As of v3.0.0 the charactersCount option is available.

Closing this issue, but feel free to let me know if there is anything else I could do.