ion-list: upcoming 1.0.0 syntax #1024

ajoslin · 2014-04-02T21:24:02Z

List refactor:

Declarative syntax
More flexibility
Performance increase for scrolling - will only make the DOM for the item more complex as elements are added (eg delete button section only if delete button is added)

Simple case:

<ion-list>
  <ion-item ng-repeat="i in items">Hello!</ion-item>
</ion-list>

Everything case:

<ion-list show-reorder="shouldReorder" 
  show-delete="shouldDelete"
  can-swipe="swipeIsAllowed">
  <ion-item ng-repeat="i in items" on-reorder="onReorder()">
    {{i}}
    <ion-option-button class="button-positive">Hello!</ion-option-button>
    <ion-option-button class="button-assertive">Goodbye!</ion-option-button>
    <ion-delete-button ng-click="items.splice($index, 1)" class="ion-minus-circled"></ion-delete-button>
    <ion-reorder-button class="ion-navicon"></ion-reorder-button>
  </ion-item>
</ion-list>

Thoughts, questions, concerns, complaints, insults, death threats?

/cc @adamdbradley @mlynch @mhartington @CoenWarmer @rvanbaalen @D3CK3R @calendee and anyone else who has a comment

adamdbradley · 2014-04-02T13:52:20Z

What does the final markup look like when everything is used?

I do like the idea of item-content not being added if there are no option or delete buttons, that'll be nice to reduce the elements. But the item directive is already using ng-if for options and deletes, they are not always added to the dom as it stands.

Right now item-content is currently always an <a> element. It'd be nice to only have it an anchor when there was an href assigned.

Also, when ng-click is assigned to the directive, it's assigning it to the entire item, but that's not ideal when there are things like optional buttons and deletes. Can you look into having ng-click only assigned to item-content and not the entire row? Right now there are pointer-event tricks so not everything is clickable.

ajoslin · 2014-04-02T13:56:38Z

ngIf and ng-repeat for the option buttons add additional nodes and processing, even if they are blank (it's probably negligible when compiling, but when scrolling I bet it could reduce perf). I think this will be quicker to compile and scroll.
I did make it so it's only an <a> if there's a href or ngHref present
Good idea about the click, I'll see if it's doable

One more change I forgot to list: delete buttons and reorder buttons are actually display: none instead of just opacity 0 while not used now, which will definitely increase scrolling perf

CoenWarmer · 2014-04-02T13:57:17Z

I think this is great @ajoslin. I see very little reason for death threats this time around. ;)

Performance increases sound very good.

Perhaps some things to consider for a next version are sticky list headers (yup I had to mention them) and perhaps even inclusion of bindonce if dirty checking isn't needed. But I heard you were also thinking of implementing virtual scroll in the next big release so that might cover the reason for using bindonce in the first place.

CoenWarmer · 2014-04-02T14:01:25Z

Also: how can we set if an item is a divider?

ajoslin · 2014-04-02T14:03:17Z

Sticky items (I think just sticky elements in general) would be good to have
Virtual scroll is a yes! Starting work on it very soon
type is now just a class name. I'll be sure to give adequate examples in the docs.

CoenWarmer · 2014-04-02T14:11:37Z

Looking forward to it!

mhartington · 2014-04-02T14:20:39Z

@ajoslin

I did make it so it's only an if there's a href or ngHref presen

Will this work if you use ui-routers ui-sref?

And +1 for sticky item headers

ajoslin · 2014-04-02T14:21:03Z

Yes, normal click events on a div will work for everything except hrefs.

mlynch · 2014-04-02T14:25:13Z

I have an old branch with a version of sticky headers kind of implemented (needs polish).

Maybe we could have two options for that:

Or on item:

Cats

We can move that to a different discussion issue just got all excited :)

Sent from my iPhone

On Apr 2, 2014, at 9:21 AM, Andy Joslin notifications@github.com wrote:

Yes, normal click events on a div will work for everything except hrefs.

—
Reply to this email directly or view it on GitHub.

ajoslin · 2014-04-02T14:35:02Z

@mlynch We could also consider having a generic 'sticky' option to apply to any old element.

mhartington · 2014-04-02T14:38:34Z

@ajoslin I like that idea better. Though I'm not sure what other situations where a sticky element could be used except lists, it's better to abstract it so it could implemented anywhere

ajoslin · 2014-04-02T14:48:57Z

Also, $ionicListDelegate is coming :-)

.showReorder(boolean) (syncs with ionList directive attribute)
.showDelete(boolean) (syncs with ionList directive attribute)
.canSwipeItems(boolean) (syncs with ionList directive attribute)
.closeOptionButtons()

Any other useful methods to add?

mhartington · 2014-04-02T14:52:59Z

.swipeDirection() ?
I've seen a few people on the forum asking for how to change the swipe direction, mostly for RTL

mlynch · 2014-04-02T14:57:26Z

@ajoslin, maybe there's room for two? For a list, you often generate a group for quick sorting (same goes for that collection view stuff we talked about). The tricky part is you are moving multiple stickies in and out (each group header "pushes" the last one up, for example)

A sticky to me is just a way to make position: sticky work with our scroll system, which would be totally awesome but maybe two separate things?

ajoslin · 2014-04-02T14:58:16Z

Good point, you do usually do groups. I'll get this initial version pushed out, let's open a new issue for stickies. #1025

adamdbradley · 2014-04-02T15:24:55Z

@ajoslin Oh, and be sure to test the animations of the delete and reorder icons when they are first animate in. That's they're start out using opacity: 0.

ajoslin · 2014-04-02T15:32:22Z

👍

ajoslin · 2014-04-02T21:24:40Z

Added a PR. Still TODO:

Get some code review action (anyone and everyone who wants to, please berate and insult and criticize the code in the PR, it's important list is done right)
Add breaking changes
Update codepens/demos
Update internal html tests

calendee · 2014-04-02T21:43:59Z

Also need some method to close the swiped list item. That's been requested
several times on the forum.

User swipes to expose buttons. Clicks something. List should
automatically close or give the developer an API to close it after some
action completed.

On Wed, Apr 2, 2014 at 4:24 PM, Andy Joslin notifications@github.comwrote:

Added a PR. Still TODO:

Get some code review action

Add breaking changes

Update codepens/demos

Update internal tests

Reply to this email directly or view it on GitHubhttps://github.com//pull/1024#issuecomment-39385722
.

Thanks,
Justin Noel
http://kidsintouch.com
http://calendee.com
@calendee
@kidsintouch

ajoslin · 2014-04-03T01:26:43Z

@calendee $ionicListDelegate.closeOptionButtons() is available with the change 👍

BREAKING CHANGE: ion-list syntax has changed in favor of simplicity & flexibility. Relevant documentation: [ionList](http://ionicframework.com/docs/api/directive/ionList), [ionItem](http://ionicframework.com/docs/api/directive/ionItem), [ionOptionButton](http://ionicframework.com/docs/api/directive/ionOptionButton), [ionReorderButton](http://ionicframework.com/docs/api/directive/ionReorderButton), [ionDeleteButton](http://ionicframework.com/docs/api/directive/ionDeleteButton), [$ionicListDelegate](http://ionicframework.com/docs/api/service/$ionicListDelegate). To migrate, change your code from this: ```html <ion-list option-buttons="[{text:'hello',type:'button-positive',onTap:tap()}]" on-delete="onDelete(el)" delete-icon="ion-minus-circled" can-delete="true" show-delete="shouldShowDelete" on-reorder="onReorder(el, startIndex, toIndex)" reorder-icon="ion-navicon" can-reorder="true" show-reorder="shouldShowReorder"> <ion-item ng-repeat="item in items"> {{item}} </ion-item> </ion-list> ``` To this: ```html <ion-list show-delete="shouldShowDelete" show-reorder="shouldShowReorder"> <ion-item ng-repeat="item in items"> {{item}} <ion-delete-button class="ion-minus-circled" ng-click="onDelete(item)"> </ion-delete-button> <ion-reorder-button class="ion-navicon" ng-click="onReorder(item, $fromIndex, $toIndex)"> </ion-reorder-button> <ion-option-button class="button-positive" ng-click="tap()"> Hello </ion-option-button> </ion-item> </ion-list> ```

ajoslin · 2014-04-04T16:12:50Z

Merged!

leandroz · 2014-12-02T05:36:46Z

@ajoslin

.showOptionButtons(boolean)

maybe? I want the same behavior of WhatsApp, when you click on Edit and then in the delete button, it shows the option button to actually erase the message.

argyleink · 2015-03-04T23:57:53Z

I would like to the ability to programmatically open and close list item drawers. For example, Android should be able to listen for a long tap, and invoke the opening of the option buttons for that applicable list item. Thanks for all the rad work!

ajoslin changed the title ~~ion-list: upcoming 1.0.0-beta.2 syntax~~ ion-list: upcoming 1.0.0 syntax Apr 2, 2014

ajoslin mentioned this pull request Apr 2, 2014

ion-list: sticky items #1025

Closed

adamdbradley assigned ajoslin Apr 2, 2014

adamdbradley added the directive label Apr 2, 2014

calendee mentioned this pull request Apr 3, 2014

Close Ion List Swipe Buttons #887

Closed

ajoslin added 2 commits April 4, 2014 09:58

tests(): update html tests for new ionList syntax

2c73184

ajoslin closed this in 986dbac Apr 4, 2014

gastonbesada mentioned this pull request Apr 24, 2014

[bug] Issues with ion-list in last nightly version #1202

Closed

11 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ion-list: upcoming 1.0.0 syntax #1024

ion-list: upcoming 1.0.0 syntax #1024

ajoslin commented Apr 2, 2014

adamdbradley commented Apr 2, 2014

ajoslin commented Apr 2, 2014

CoenWarmer commented Apr 2, 2014

CoenWarmer commented Apr 2, 2014

ajoslin commented Apr 2, 2014

CoenWarmer commented Apr 2, 2014

mhartington commented Apr 2, 2014

ajoslin commented Apr 2, 2014

mlynch commented Apr 2, 2014

ajoslin commented Apr 2, 2014

mhartington commented Apr 2, 2014

ajoslin commented Apr 2, 2014

mhartington commented Apr 2, 2014

mlynch commented Apr 2, 2014

ajoslin commented Apr 2, 2014

adamdbradley commented Apr 2, 2014

ajoslin commented Apr 2, 2014

ajoslin commented Apr 2, 2014

calendee commented Apr 2, 2014

ajoslin commented Apr 3, 2014

ajoslin commented Apr 4, 2014

leandroz commented Dec 2, 2014

argyleink commented Mar 4, 2015

ion-list: upcoming 1.0.0 syntax #1024

ion-list: upcoming 1.0.0 syntax #1024

Conversation

ajoslin commented Apr 2, 2014

adamdbradley commented Apr 2, 2014

ajoslin commented Apr 2, 2014

CoenWarmer commented Apr 2, 2014

CoenWarmer commented Apr 2, 2014

ajoslin commented Apr 2, 2014

CoenWarmer commented Apr 2, 2014

mhartington commented Apr 2, 2014

ajoslin commented Apr 2, 2014

mlynch commented Apr 2, 2014

ajoslin commented Apr 2, 2014

mhartington commented Apr 2, 2014

ajoslin commented Apr 2, 2014

mhartington commented Apr 2, 2014

mlynch commented Apr 2, 2014

ajoslin commented Apr 2, 2014

adamdbradley commented Apr 2, 2014

ajoslin commented Apr 2, 2014

ajoslin commented Apr 2, 2014

calendee commented Apr 2, 2014

ajoslin commented Apr 3, 2014

ajoslin commented Apr 4, 2014

leandroz commented Dec 2, 2014

argyleink commented Mar 4, 2015