feat: add ionEnd event to refresher

[WhatsThatItsPat]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

I would like the refresher to have an ionEnd event.

I need to know when the refresher has returned to the inactive state to do some jiggery-pokery with my backgrounds. But watching the refresher progress isn’t good enough because hitting zero doesn’t necessarily mean the user has completed the pull gesture. So, I need to know both when the user is no longer touching the screen AND when the refresher is ready to be pulled again.

I'll have a PR to look at shortly.

Describe the Use Case

I have a background that bleeds from the header to the content (it looks like one continuous image before you scroll). When I scroll the content up, the bg that's in the content should scroll up under the header along with the content.

But when I pull down to refresh, I don't want the background in the content to separate from the header and leave a gap. I just want the content to move down.

I have a few solutions for this. One of them involves having two bgs in different places and swapping their visibility based on when the user is interacting with the refresher.

Watching the progress doesn't quite work, while having an ionEnd event should.

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

The issue can be seen in the "BG Swap" page of this Ionic application.

https://github.com/WhatsThatItsPat/pull-to-refresh-with-bg

Additional Information

No response

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.

In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[liamdebeasi]

Thanks for the issue. For the problem you described, is that something you would expect Ionic to handle automatically? If so, it might be better to address that issue rather than add an API to workaround the behavior.

[WhatsThatItsPat]

Thanks for taking a look at my issue.

I'm not sure if Ionic should do this automatically. There are multiple things in the way of getting the background(s) and refresher working together the way our design calls for.

When I try to use the --background custom property, it looks like the background shadow part doesn't know the height of the scrolling content. Its height ends up as 100% of the window and doesn't / can't scroll. And using background-attachment settings don't do anything because of this, and/or because the background and content are in separate places.

If I use css to put a background on &::part(scroll) I can get the bg to scroll with the content, though the background will also move down when everything is pulled down with the refresher causing the unwanted separation between header and content background images. The scroll content is aware if its own height here, so I can use it if needed.

I can use css to put a background on ion-content (not using the custom property). Setting its position to absolute keeps it at the top when pulling down. I guess this works because it's separate from the background and scroll parts.

If I hack these last two together, I can almost get things working. There's just a minor edge case when deciding to reverse the pull down.

There are also layering issues because when I am able to keep the background at the top during a pull down, the refresher is behind the background. So, this still requires some z-index tweaking to keep the refresher above the background and below the scrolling content.

I was playing around with setCss() which manipulates the y of the scroll area along with the background. If you take out the background stuff here, it stays at the top when pulling down. You could have a property on the refresher that tells the bg to stay at the top and you'd check if that's set here. But that would just be a different API change. And you'd still have to deal with layering issues, along with telling the bg the height of the content so it can scroll up.

On top of all that, the collapsable header is used between the header and the content so keeping the bg of the content stationary in that scenario wouldn't work. I don't need that to work, I'm just bringing up another complication.

It seems that having backgrounds in the header and at the top of the content that match up with one another isn't a standard use case.

[WhatsThatItsPat]

I made a brief video which explains my issue and addresses whether Ionic should handle this behavior automatically.

[liamdebeasi]

Thanks for the detailed explanations! I discussed this with the team, and we agree that the ionEnd event would be valuable for Ionic to have.

[piotr-cz]

There is another case (https://github.com/ionic-team/ionic-framework/issues/29580) where the ionEnd event would be helpful.

In short - it can help with dealing of the side effect on desktop when puling down the refresher makes content text that is below it to be selected