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
@iwantwin Sorry for not replying earlier, but I had to solve other problems with my app first
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.
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 ;))
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.
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 -
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);