tvanc/lineclamp

usage for toggling?

Closed this issue · 5 comments

MartinMalinda commented

Thanks for the lib, it seems to do the job well in quite a few lines of JS.

But since it replaces the text in place, it makes it a bit harder to implement any kind of toggling functionality. If there was a function to return the clamped text instead of mutating the element, it would make the toggling easier to implement for me in Vue.

tvanc commented

From the order of the issues you opened, I'm guessing you attempted to implement the requested functionality by saving the clamped element's original markup/text and then listening for clamping events, saving the resulting markup and then restoring?

Are you able to achieve the desired outcome more easily now that the clamp events don't fire unless clamping actually occurs?

MartinMalinda commented

@tvanc thanks, I did managed to implement it now! The only issue now is that the algorithm is too good at clamping at the end of line, while I would like to leave space for the "show more" button. But I'll see if I could apply an adhoc mutation to fix that case.

MartinMalinda commented 
el.addEventListener("lineclamp.clamp", () => {
  isClamped.value = true;
  el.textContent = el.textContent?.slice(0, -20) + "... ";
});

Not flawless, but it seems like it does the job! I was afraid that I'd be continously losing the text on toggling but it's not the case.

tvanc commented

Excellent! I'm glad to hear it. If your use of my lib is public I wouldn't mind seeing it?

MartinMalinda commented

So far it's not public, but I might later release it as something like vue-lineclamp or something like that. Will share a link here when that happens!

  • ❤️1