search

yiliansource / party-js

A JavaScript library to brighten up your user's site experience with visual effects!
https://party.js.org
MIT License
986 stars 45 forks source link

RTL Support #88

Open sanadnajjar opened 2 years ago

sanadnajjar commented 2 years ago

Describe the bug when the website or mobile is on rtl the confetti doesnt appear.

To Reproduce in html tag add dir="rtl" fire confetti event

You can try on https://party.js.org/ example template

Expected behavior confetti should appear when an event is fired whether its ltr or rtl

sanadnajjar commented 2 years ago

@yiliansource is there a solution for this?

yiliansource commented 2 years ago

Hi, sorry, uni exams got the better of me.

I'll have to look into this, I'm not too familiar with the effects of dir="rtl". I'll let you know what I'll come up with.

yuval-herman commented 1 year ago

My solution was to put the rtl property on the text div directly. The most simple solution for this would be to add dir="ltr" to the div containing the canvas element directly in the library, this should not have any effect for ltr sites as far as I can tell. For now, here is a code snippet to fix this for anyone else, just paste it anywhere...

party.forceInit()
setTimeout(
() =>
    document
        .getElementById("party-js-container")
        .setAttribute("dir", "ltr"),
500
)

This is obviously very crude but it works for me, I might open a fix pr later.