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

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

Thanks a lot @flavordaaave

Thanks @flavordaaave! Much appreciated. :smile:

The on-click swiping works great, but it gives me an angular error of:

Error: [$compile:ctreq] Controller 'clickForOptionsWrapper', required by directive 'clickForOptions', can't be found!

Though it works as it should! Have you encountered it before?

You can put the icon so they know there is more, and let the user tap anywhere. :wink:

Awesome…it made my day…i was really wanted this functionality…thanks guys…:slight_smile:

Thanks @flavordaaave this is awesome!

Ohhh thanks @flavordaaave See my example with hold gesture :smile: => http://codepen.io/jdnichollsc/pen/YXOqEw

Hey guys, I needed a way to delete input list items so I mashed a few Codepens together to make this one.

Also I don’t know how to embed a Codepen in the forum. :smile:

Hey guys,
Any chance there’s a way to toggle the swipe only when clicking on the avatar image?
I’d like to have the area right of the image do something else…
See example -

See the Pen Click to show option buttons with parentController by Asaf Novak (@SafiX) on CodePen.

Hi,
Any chance there’s a way to have an image to the left of the text which enables the option buttons? -
I tried adding the directive to an image tag with no luck…

You could just attach the tap event to the image instead of the whole item with something like this:

  // Get the avatar image element
  var avatar = element[0].querySelector('.avatar');
  
  // Change the open attribute on tap
  avatar.addEventListener('tap', function(e) {
	clicked = true;
	if (attrs.optionButtons == 'show') {
		attrs.$set('optionButtons', 'hidden');
	} else {
		attrs.$set('optionButtons', 'show');
	}
  }, false);