blinx.js icon indicating copy to clipboard operation
blinx.js copied to clipboard

Better support for dynamic content

Open n4bb12 opened this issue 2 years ago • 0 comments

When loading blinx on a page with only static text, it works great.

But sometimes we show verses in areas that are rendered dynamically. Think of accordions, dialogs, sidebars, etc. This content is likely not in the DOM until the user interacts.

In such a case, it is possible to re-trigger blinx by calling await window.blinx?.execute(). However, this will not only match new elements but also existing elements that already have a tippy attached. In consequence, blinx will attach a second, third, fourth, etc. tippy each time it is called.

To work around this, we need to jump through some hoops, e.g. we can remove data-osis attributes before calling execute() and then add them back afterward. But this is cumbersome, brittle, and unnecessarily slow.

An easy way to fix this in the library would be to select on "[data-osis]:not([data-tippy])" instead of "[data-osis]" here.

n4bb12 avatar Oct 01 '23 14:10 n4bb12