💡 [REQUEST] - Implement cross button functionality for desktop devices

[Gauravdarkslayer]

Start Date

No response

Implementation PR

No response

Reference Issues

No response

Summary

Currently, the ngx-stories component provides a seamless experience for viewing stories on mobile devices, allowing users to swipe between stories and swiping down the story to close it. However, there is no explicit way for users on desktop devices to close the story viewer manually.

For desktop users, it would be useful to implement a cross (close) button in the ngx-stories component to allow for manual dismissal of the story viewer.

Button Design & Placement:

A cross icon (X) should be displayed in the top-right corner of the story viewer. The icon should be clearly visible and appropriately sized for desktop screens but should remain unobtrusive so as not to interfere with the story content. On smaller devices (mobile/tablet), the close button can remain hidden.

Functionality:

Clicking the cross button should fire onExit event. This will allow developers to implement custom logic, such as navigating back to a specific view or updating the UI state.

Responsiveness:

The close button should only be displayed on larger screen sizes (desktop and tablet) and hidden for mobile devices, where the swipe gesture is the primary navigation tool. The display of the button should be controlled by media queries.

Additional Considerations: Customization Options: Provide a way to customize the style of the close button (e.g., color, size, icon) through the component’s input properties or by allowing developers to provide their own template for the button. Accessibility: Ensure the close button is accessible, with proper ARIA labels and keyboard navigation (i.e., allowing users to press the Esc key to close the viewer).

Acceptance Criteria:

• A visible cross (close) button appears on the top-right of the story viewer for desktop devices.
• Clicking the close button should emit an event.
• The close button should be responsive and configurable, allowing it to be hidden on mobile devices.
• The close button should be customizable and accessible, with support for keyboard interaction (i.e., Esc key).

Unresolved questions

Should we disable the swipe down event which is calling onExit event as well on desktop devices currently ?

[github-actions[bot]]

Hey @Gauravdarkslayer, Thanks for contributing and Congrats on opening Issue :tada:

We will try to review as soon as possible and a maintainer will get back to you soon!

[Piyush-Goenka]

Hey @Gauravdarkslayer , I’ll take on the task of implementing a close (X) button in the ngx-stories component for desktop users. This will provide a manual way to dismiss the story viewer. I’ll ensure the button is appropriately placed in the top-right corner, visible on larger screens, and hidden on mobile devices. Additionally, clicking the button will trigger the onExit event, allowing for custom logic. I'll also consider customization options for the button’s style and ensure accessibility features are included. Please assign this issue to me .