Operate list option buttons by clicking an icon


#1

In the codepen below I’ve taken the standard list/option-button demo and added a left-facing arrow icon at the right side of each item, as a hint to the user that the item has drag left functionality. When you drag left to reveal the option buttons, the icon changes to a right-facing arrow because now you can drag it right to hide the option buttons.

However, it seems likely that some users will expect something to happen when they touch/click the arrow icon, so I’d like to hide/reveal the option buttons with that event as well. The close part works, it was easy because of the $ionicListDelegate.closeOptionButtons() function. But I haven’t been able to reveal the option buttons on a touch of the left-facing arrow. I made it trigger a dragleft event followed by a dragend event, just like happens when you actually drag the item, but it’s not doing anything. How can I make this work?

Part 2: Given that we make it work, how can I extend the ion-item or whatever to add this enhancement to all of my items that have option buttons, instead of having to duplicate the code in all of my templates and controllers?

(BTW, yes, I know I broke the demo in that it no longer drills down into the item, but I just left that part out for the purposes of this issue.)

See the Pen dPMNXr by Elaine Rhodes (@elainerhodes) on CodePen.


#2

Hey @lannie, please check out this topic, where me and other people had the same question, which was beautifully resolved by @flavordaaave !


#3

Link to “this topic” please?


#4

Sorry, I’ve updated my reply to include the topic :slight_smile:


#5

Nice, thanks. Wish I’d found that before, would have saved me a day. Oh well, a good learning experience.