meteoric / meteor-ionic

Ionic components for Meteor. No Angular!
http://meteoric.github.io
MIT License
1.51k stars 219 forks source link

Sortable deletable #299

Closed jorjordandan closed 9 years ago

jorjordandan commented 9 years ago

So here's where this is at:

This PR adds a component ionListButton which is used inside a list item like this:

   {{#ionListButton action='delete' side='left'}}
      <i class="ion-minus-circled button icon button-icon"></i>
   {{/ionListButton}}

You can use these hide-able buttons for anything, for instance, if you wanted to use them for a share button, you could add action="share" and then create a event on the item-share class that's generated. They are pretty much decoupled from the sortable/deletable stuff.

The sortable/deleteable functionality requires that you pass the collection as an argument into ionList, for example {{#ionList ionSortable=collection}} In an updated contacts example app collection is a helper method that simply returns the Contacts collection:

collection: function() {
  return Contacts; 
}

In addition to passing the collection into the sort and delete events, the ionSortable argument also sets a Session variable flag that is used to prevent unwanted behaviour, most importantly preventing a new Slip.js object from being initialized if unneeded.

jorjordandan commented 9 years ago

added the ability to pass "both" to the [data-ion-list-toggle] in a button, which will show the hidden buttons on both sides of the list, so that you can sort and delete at the same time.

jorjordandan commented 9 years ago

Demo repo at http://reorderable_contacts.meteor.com/

nickw commented 9 years ago

Looks great @jorjordandan! Would you be able to update the README and check off these components? Also if you have time, it'd be great to add this to the demo.

jorjordandan commented 9 years ago

Absolutely, thanks! I'll do both asap.