ion-list: sticky items

[ajoslin]

Initially discussed in #1024

@mlynch's initial idea for syntax:

<ion-list>
  <ion-item-group>Cats</ion-item>
  <ion-item ng-repeat="i in group1">{{i}}</ion-item>
  <ion-item-group>Dogs</ion-item>
  <ion-item ng-repeat="i in group2">{{i}}</ion-item>
</ion-list>

[gastonbesada]

<ion-list-group>
  <ion-item-group-container>
    <ion-item-header>Cats</ion-item-header>
    <ion-item ng-repeat="i in group1">{{i}}</ion-item>
  </ion-item-group-container>
  <ion-item-group-container>
    <ion-item-header>Dogs</ion-item-header>
    <ion-item ng-repeat="i in group2">{{i}}</ion-item>
  </ion-item-group-container>
</ion-list-group>

http://brianhadaway.github.io/iOSList/

[gastonbesada]

Also, Is possible to smartize the list groups at these ways?:
http://plnkr.co/edit/A43eAvZetieRUBLWm2xT?p=preview
http://plnkr.co/edit/nIrRR4yi14Ecv6FkODjs?p=preview
http://plnkr.co/edit/ZdPPmJeMrklXCLhEmJVu?p=preview

[jimthedev]

+1 Look forward to seeing this feature.

Another advanced idea for smart groupings would be date filters.

Future
Today
Past

This is most likely outside the scope of this issue.

[jimthedev]

Also @ajoslin can you give an update if anything has been worked on for this. There is an AngularMN hackathon coming up and I was going to suggest that this be a project for someone to work on.

[jimthedev]

I am researching how to accomplish this since the scroll transform is done using -webkit-transform: translate3d. It appears that we might have a hard time based on this discussion regarding non-js based scroll callbacks:

jakiestfu/Snap.js#24

[ajoslin]

The idea is to adjust the transform of a sticky element every time a scroll event fires. It's rather simple to get a basic version working, but getting it to smoothly transition between sticky elements like iOS does is slightly more complicated. I have a solution in my head.

[jimthedev]

Thanks for the detail. Would that smooth transition be the act of pushing one sticky item out of the way while the other slides up into its place?

[drastick]

+1

Is anyone actively working on this?

[cranesandcaff]

Ditto on the +1.

Very interested in this, I think it's a common use case.

[gastonbesada]

Some work here too http://forum.ionicframework.com/t/sticky-list-headers/689/

[perrygovier]

A quick update. I've seen a 3rd party directive for Ionic in the wild, but I can't seem to find it right now.

I'm hoping, with recent browser developments, we can abandon JS scrolling soon, in which case the webkit prefixed class will work.

If you want to roll your own, this directive could be used as a starting point.

Lastly, we're moving feature requests to a Trello Board to keep the GH issues related only to "issues". Please vote for it here.

[colllin]

If anyone else finds this, here's the directive I put together over the weekend. It should get you pretty far:
https://gist.github.com/colllin/1a0c3a91cc641d8e578f

[jimthedev]

@colllin nice! Are you using this with ng-repeat or collection-repeat and if collection-repeat have you seen any issues?

[colllin]

@jimthedev I only tested with ng-repeat... Thanks for reminding me about collection-repeat. I'll make a note in the gist.

Also I forgot to cleanup the cloned element if the scope is destroyed. Added that just now. I also need to make a note that you might need to edit your CSS if it doesn't already apply correctly to the cloned element (which is appended between the outer scroll container and inner scroll container -- as a sibling of the scrollbar, for reference).

[RouR]

see also http://forum.ionicframework.com/t/sticky-list-headers/689/39 and https://github.com/chalettu/ionic-sticky-list-dividers

[aliok]

FYI, I improved the code of @colllin and converted into a project (bower, demos, etc).

See the project page: http://www.aliok.com.tr/projects/2015-04-17-ion-affix.html
Demos: http://codepen.io/collection/DrxWPr/

[jimthedev]

@aliok Awesome! Looks fantastic. Now I can go back to our designers and let them know not to avoid this design pattern. :D

One bit of feedback. The scrolling on the demos in the project page is funky for me in Chrome. Works perfectly in codepen when not embedded.

[w3development-kn]

This plugin does not work with newer versions of ionic & angular. This should be looked at again.