fix: reverse is not doing great in Arabic

[kingmui]

🤔 This is a ...

• 🐞 Bug fix

🔗 Related Issues

• fix reverse is not doing great #295

💡 Background and Solution

1. Reverse is not doing great in Arabic

Typically Arabic web pages require a dir attribute on the html tags to indicate the direction of the text, which you were unable to reproduce when you originally tested in issue #295 because the dir attribute was not specified to set the direction of the text.

2. Can't click pause on mobile device

Add touchstart and touchend events to support the click pause feature on mobile device.
Since the mouseleave event is unreliable on mobile, the mouseenter event is blocked on mobile device.

Before

After

📝 Change Log

• Fixed Arabic display issue. closes reverse is not doing great #295
• Fix the issue of not being able to click pause on mobile

Summary by Sourcery

Fix text direction issues in RTL languages like Arabic, and improve pause functionality on mobile devices. Toggle the text direction by adding a dir attribute to the html element. Add touchstart and touchend event listeners to the marquee component to support pausing on click on mobile devices. Remove the mouseenter event listener on mobile devices to avoid blocking the marquee. Add a button to toggle the text direction between left-to-right and right-to-left.

Bug Fixes:

• Fix reversed text direction in right-to-left languages such as Arabic.
• Fix pause on click for mobile devices by adding touch event listeners and removing unreliable mouse listeners for mobile devices

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vue3-marquee	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 14, 2025 10:40am

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request addresses two key issues: the incorrect display of reversed Arabic text and the inability to pause the marquee on mobile devices. RTL support was implemented by adding a toggle to change the dir attribute on the html element, and touch event listeners were added to enable the click-to-pause feature on mobile devices.

Sequence Diagram for Mobile Pause/Resume

sequenceDiagram
    participant User
    participant Vue3Marquee Component

    User->>Vue3Marquee Component: touchstart (Touch on Marquee)
    activate Vue3Marquee Component
    Vue3Marquee Component->>Vue3Marquee Component: mouseDown()
    Vue3Marquee Component->>Vue3Marquee Component: pause()
    Vue3Marquee Component-->>User: Marquee Paused
    deactivate Vue3Marquee Component

    User->>Vue3Marquee Component: touchend (Release Touch)
    activate Vue3Marquee Component
    Vue3Marquee Component->>Vue3Marquee Component: mouseUp()
    Vue3Marquee Component->>Vue3Marquee Component: resume()
    Vue3Marquee Component-->>User: Marquee Resumed
    deactivate Vue3Marquee Component

Loading

File-Level Changes

Change	Details	Files
Implemented RTL (right-to-left) support for Arabic text, including a toggle button to switch text direction.	Added a toggle button to switch the text direction. Added isRTL state to manage text direction. Added arabicList to display Arabic text. Modified the marquee direction based on the isRTL state. Added styles to support RTL layout using CSS variables. Added a handleToggleDirection method to toggle the dir attribute on the html element.	packages/playground/vite-project/src/App.vue packages/vue3-marquee/src/vue3-marquee.vue
Added touch event listeners to enable click-to-pause functionality on mobile devices and disabled mouseenter event on mobile.	Added touchstart and touchend event listeners to the marquee. Added a check for mobile devices to disable mouseenter event. Defined isMobile to check if the device is mobile.	packages/vue3-marquee/src/vue3-marquee.vue

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#295	When the reverse direction is set, the text should loop in reverse, similar to how normal works in the forward direction.	✅
#295	When the reverse direction is set, the text should loop in reverse, similar to how normal works in the forward direction.	✅

Possibly linked issues

• reverse is not doing great #295: The PR fixes the reverse issue mentioned in the issue by handling RTL text direction.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!
• Generate a plan of action for an issue: Comment @sourcery-ai plan on
  an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @kingmui - I've reviewed your changes - here's some feedback:

Overall Comments:

• The CSS variables for scroll direction are a nice touch, but consider if they might conflict with other CSS in the project.
• The mobile pause/play fix looks good, but it might be better to use a more robust method for detecting mobile devices.

Here's what I looked at during the review

• 🟢 General issues: all looks good
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}