Ionic-framework: ion-item-sliding programatic open method

[karaggeorge]

Feature Request

Ionic version:
[x] 4.x

Describe the Feature Request

ion-item-sliding currently has no way of opening programatically. The components methods include close, but there's no open.

That's usually fine for mobile, but when rendering on desktop, it's not natural to click and drag, so it's really often that a programatic way to open it is required.

I've seen a ton of work arounds trying to mimic the internal behavior, but this should probably be an api method that exists on the component. Even if there's no animation it literally just translates the item to the right position.

Describe Preferred Solution

Offer a open method on the slide item

Describe Alternatives

Trying to manually mimic the behavior, which is different for each ionic version, and doesn't seem to be possible in Ionic 4

[shreeshbhat]

@brandyscarney : I would like to pick this up if this is beginner friendly.
How should I go about tackling this?
I am planning to add open() method in this file :
https://github.com/ionic-team/ionic/blob/master/core/src/components/item-sliding/item-sliding.tsx

Not sure about implementation though.

[ionitron-bot[bot]]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

[shreeshbhat]

Yep, I would like to work on this and submit a pull request.

[untilbit]

I need this to migrate from Ionic 3 to Ionic 4.

In v3 i used something like this to open it:

const swipeAmount = 100;
itemSliding.startSliding(swipeAmount);
itemSliding.moveSliding(swipeAmount);
itemSliding.setElementClass('active-options-right', true);
itemSliding.setElementClass('active-swipe-right', true);
item.setElementStyle('transition', null);
item.setElementStyle('transform', 'translate3d(-' + swipeAmount + '%, 0px, 0px)');

[shreeshbhat]

@brandyscarney : Should I make changes to list.tsx as well to open all closed sliding items?

[brandyscarney]

Thanks @shreeshbhat! So I would say to begin with we should just add the open() function the item sliding, similar to close but it will require some calculations:

  /**
   * Close the sliding item. Items can also be closed from the [List](../../list/List).
   */
  @Method()
  async close() {
    this.setOpenAmount(0, true);
  }

I would say hold off on adding a method to list since that would require passing in an element since opening all sliding items shouldn't be possible at the same time. The open method will likely need to close open sliding items when it gets called.

[shreeshbhat]

@brandyscarney : Thanks for the prompt response.
I saw in the folder test/preview/index.html, there was a closeOpened() method in list, that was calling item-sliding's method.
Should I create a separate test for open() in basic or standalone?

The open method will likely need to close open sliding items when it gets called.

This open method should behave like a toggle?

[brandyscarney]

@shreeshbhat Yeah if you could add a test for the open method, either test works. We have interactive tests that check that the dragging of item sliding opens it: https://github.com/ionic-team/ionic/blob/master/core/src/components/item-sliding/test/interactive/e2e.ts

This open method should behave like a toggle?

I would think the method would work the same as the drag without the need to drag. If you try to drag open an item sliding while one is open, you'll see the open one gets closed. Like the following:

I guess it's up for discussion based on how it's planning to be used. Alternatively, we could just require that you call close before opening one if that's the desired behavior. cc @liamdebeasi

[liamdebeasi]

Yeah what @brandyscarney said sounds good.

Regarding the open method: I would expect it to behave the same way as if I were to slide an item open manually. So I think the open method by default should automatically close the open sliding items. To me it would seem weird for the manual behavior to close other items but not the programatic one. Thoughts?

[shreeshbhat]

@brandyscarney : Ah you mean close other open items.
That makes sense. I was not aware of this behavior.
Also, screenshot helped in visualizing.

@liamdebeasi : yes, I do agree programmatic behavior should stick with swiping behavior for accessibility & consistent design reasons.

Yep, will make this change and test it out today.

[liamdebeasi]

Hi there,

This issue has been resolved via https://github.com/ionic-team/ionic/pull/17964, and will be in the next release of Ionic.

Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.