Ion-option-button in list, toggle by icon click instead of swipe?

Hey all,

I have a similair list with option buttons as in the example on http://ionicframework.com/docs/api/directive/ionList/

I would want to not only trigger the option buttons on swipe, but also on click of a part of the list item, for example an list-item-icon :wink: Anyone has a good idea on this?

I found some methods in the http://ionicframework.com/docs/api/service/$ionicListDelegate/ but instead of the closeOptionButtons() i would want a showOptionsButtons on the icon for example :wink: Of course, only the option buttons should be shown for a given item. If the $ionicListDelegate would have a showOptionsButtons(index) method with an index to fix this in a less useful way, that would be fine for me :wink: A directive to toggle the options buttons for a given list item would be even more awesome :smile:
I would opt for this as a default ionic option in the framework of course, that would be te best haha.

Thanks in advacne!

1 Like

Did you find any method to do this:?

Not yet, Iā€™m still waiting for anyone to come up with itā€¦ Havenā€™t figured it out either.

I would need a functionality like this as well! I guess you guys didnā€™t find a solution yet, have you?

Nopes :frowning:
@mhartington seems like many people need this, any idea on how to accomplish this?

I created a custom directive (clickForOptions) which can be set as an attribute to the ion-item. Perhaps not the cleanest way but itā€™s working ;). (Note: The item itself should not have any ng-click or href attribute anymore)

5 Likes

And if you donā€™t want the swipe to reveal the option buttons anymore, just add ā€œcan-swipe=ā€œfalseā€ā€ to the list.

Thats pretty cool!

Instead, I would want to have an icon on the right side of the item with the menu ionicon, which gives the user an idea that there are options beneath the button, when clicking the button, the options are shown. This would enable a click action on the item as well, which is really necessary in my projectā€¦ Any chance this could be (easily) implemented with your directive @flavordaaave?

Yes, should work as well if you append this attribute to the button and then in the directive get the element and the option buttons with the parent() selector. Iā€™ve created a rough codepen here:

1 Like

But it seems that the ionic item has some problems with an item that has this button on the right side and the option buttons. Perhaps it would be better to put a custom button inside the content of the item instead of using the ionic item with button on the right side.

I updated the codepen (see above) with something that works better :wink:

The only Thing thatā€™s still missing, is that ng-click on the item now still triggers when you ā€œjustā€ click/tap the button, could we prevent this from bubbling?

See what I mean here, when you click on the ā€œphoneā€ icon, it still executes the alert of the item ng-click.

@iwantwin good point! You could use the stopPropagation() method. Unfortunately this doesnā€™t seem to work when binding the ā€˜tapā€™ event with $ionicGesture. But if you bind the standard ā€˜clickā€™ event to the button element, the stopPropagation() works perfectly. See the codepen example below:

2 Likes

You just made my day :slight_smile: Exactly as I intended to have it work! This should be included into ionic frameworkā€¦ Itā€™s really an addition to the already great functionallity!

Iā€™m way to inexperienced with writing directivesā€¦ Gotta practice on that :frowning:

Thanks @flavordaaave!

One more problemā€¦ When opening with the button, the item stays open. If you swipe the item to open the option buttons, the previous item is closed.

Question:

  • The items opened with the button, should close all previously opened items. (I could do this myself)
  • Toggling the button should close any item that was opened with the swipe opening for the option buttons (No clue how to interact with this existing directive)
  • Swiping an items hould close any items that were opened with the button (No clue how to interact with this existing directive)

Could you do this or send me to some resource explaining how to do this? Not only would it be very nice, it would increase my understanding of directive development as well :smile:

@iwantwin thatā€™s a problem Iā€™m still working on with my on project. Iā€™ll keep you updated.

1 Like

@iwantwin Sorry for not replying earlier, but I had to solve other problems with my app first :wink:
Iā€™ve build a rough example how this could be done using a parent directive that broadcasts an event to all the items to close when one is clicked:

Itā€™s working so for now you could adapt my solution but it seems pretty wrong and overcomplicated which is why I created a question on stackoverflow to get some help.

10 Likes

Aww dave, youā€™re awesome for coming back at this! No problem for the waitā€¦ It was already working perfectly, functionally it was perfect, this is ā€œjustā€ a nice finishing touch, (which is pretty important for user experience, but functionality is just more important ;))

Thanks for sharing this! Itā€™s great!

Dave, thanks for the great work. I hate to bug you one more time on this topic, but do you know of a way to close the open options when a user swipes on an item? For instance, if I click on an item now and then click on a second, the first options list closes. However, if I click on an item and then swipe on another, the first options list stays open.

@flavordaaave
Thanks for your solution to open the option buttons using tap

I am developing application using ionic on windows phone 8.
First issue that i face was scrolling, i was unable to scroll ion-list. I fixed it by putting overflow-scroll=ā€œtrueā€ attribute in ā€œion-contentā€ tag, and list started to scroll. There is ion-list in ā€œion-contentā€ and each item has option buttons(need to be show on swipe).

By fixing my scrolling issue i am not able to swipe list item. list-item is not swiping.

but when i remove overflow-scroll=ā€œtrueā€ from ā€œion-contentā€ tag, then swipe start working for list item but scrolling stop working

I am not facing any difficulty like this in android and ios, in both scroll and swipe is working fine, But not working in windows phone 8

For this i use your solution and now it working for me.so scroll as well as on swipe i am showing the option button. But after use this solution my scrolling of ion-list is too slow down and sticky.

It was working fine before. have you any idea why this happens.

here i had my topic
Topic that i raised day before for that content code

Thanks in advance