From f3f8121f80e4ad0dbc6488ece9635b07fefc4246 Mon Sep 17 00:00:00 2001 From: Jordan Davis Date: Sun, 30 Aug 2015 19:51:44 -0700 Subject: [PATCH 1/8] Update Readme & Guide --- GUIDE.md | 4 +++- README.md | 12 ++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/GUIDE.md b/GUIDE.md index 883a866..658608c 100644 --- a/GUIDE.md +++ b/GUIDE.md @@ -343,7 +343,9 @@ Lastly you can also pass a raw url by including the `href` attribute. {{/each}} {{/ionList}} ``` - +###Lists with sort and delete +To add the ability to sort and delete lists, you need to pass your collection into the `ionList` component, and add the buttons that will be shown inside the list item. +For example: ## Modals diff --git a/README.md b/README.md index 611869b..d58aa93 100644 --- a/README.md +++ b/README.md @@ -60,13 +60,13 @@ You can also keep track of the various other repos from the [Meteoric team](http * [x] ion-header-bar * [x] ion-footer-bar * [x] Keyboard (requires [cordova](http://cordova.apache.org/) integration) -* [ ] Lists (needs edit/remove/sort functionality) - * [ ] ion-list - * [ ] ion-item - * [ ] ion-delete-button - * [ ] ion-reorder-button +* [X] Lists (needs edit/remove/sort functionality) + * [X] ion-list + * [X] ion-item + * [X] ion-delete-button + * [X] ion-reorder-button * [ ] ion-option-button - * [x] collection-repeat (not needed with Blaze/Spacebars) + * [ ] collection-repeat * [x] Loading * [x] Modal * [x] Navigation (requires [iron:router](https://github.com/EventedMind/iron-router) integration) From 49bf0b5802f7b9e9189a78ee5ddaff97c879fb6e Mon Sep 17 00:00:00 2001 From: Jordan Davis Date: Sun, 30 Aug 2015 19:54:02 -0700 Subject: [PATCH 2/8] Rest of guide update --- GUIDE.md | 39 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/GUIDE.md b/GUIDE.md index 658608c..edaaf90 100644 --- a/GUIDE.md +++ b/GUIDE.md @@ -344,8 +344,43 @@ Lastly you can also pass a raw url by including the `href` attribute. {{/ionList}} ``` ###Lists with sort and delete -To add the ability to sort and delete lists, you need to pass your collection into the `ionList` component, and add the buttons that will be shown inside the list item. -For example: + +To add the ability to sort and delete lists, you need to supply your collection to the the`ionSortable` argument of the `ionList` component, and also add the `ionListButtons` components that will be shown inside the list item. + +Here is an example from the contacts demo app: +``` +{{#ionList ionSortable=collection}} + {{#each contacts}} + + {{#ionItem path="contacts.show" buttonRight=true avatar=true class="item-icon-right"}} + + + {{name.first}} {{name.last}} + + {{> ionIcon icon="ios-arrow-forward" class="positive"}} + + {{#ionListButton action="delete" side='left'}} + {{>ionIcon icon="ion-minus-circled"}} + {{/ionListButton}} + + {{#ionListButton action="reorder" side="right"}} + {{>ionIcon icon="drag"}} + {{/ionListButton}} + + {{/ionItem}} + {{/each}} +{{/ionList}} +``` +In this example, the `collection` argument in `ionSortable=collection` is a helper method that returns the Contacts collection: +``` +Template.contacts.helpers({ + collection: function() { + return Contacts; + }, + //other helper methods... +}); +``` +You will also need a button somewhere that triggers the icon reveal animation. To do that set a `data-ion-list-toggle' attribute on a button or icon, with the value "left", "right" or "both" to indicate which sides you wish to toggle. ## Modals From b9e55a848b386674911a4394604d2eed12525a11 Mon Sep 17 00:00:00 2001 From: jorjordandan Date: Sun, 30 Aug 2015 19:58:15 -0700 Subject: [PATCH 3/8] Update guide --- GUIDE.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/GUIDE.md b/GUIDE.md index edaaf90..9146b66 100644 --- a/GUIDE.md +++ b/GUIDE.md @@ -345,7 +345,7 @@ Lastly you can also pass a raw url by including the `href` attribute. ``` ###Lists with sort and delete -To add the ability to sort and delete lists, you need to supply your collection to the the`ionSortable` argument of the `ionList` component, and also add the `ionListButtons` components that will be shown inside the list item. +To add the ability to sort and delete lists, you need to supply your collection to the the`ionSortable` argument of the `ionList` component, and also add the `ionListButton` components that will be shown inside the list item. Here is an example from the contacts demo app: ``` @@ -380,7 +380,7 @@ Template.contacts.helpers({ //other helper methods... }); ``` -You will also need a button somewhere that triggers the icon reveal animation. To do that set a `data-ion-list-toggle' attribute on a button or icon, with the value "left", "right" or "both" to indicate which sides you wish to toggle. +You will also need a button somewhere that triggers the reveal animation. To do that, set a `data-ion-list-toggle' attribute on a button or icon, with the value "left", "right" or "both" to indicate which sides you wish to toggle. ## Modals From da1a832364421c3c1cdbf3fae9d48a85404b9e98 Mon Sep 17 00:00:00 2001 From: jorjordandan Date: Sun, 30 Aug 2015 20:05:30 -0700 Subject: [PATCH 4/8] missing backtick --- GUIDE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/GUIDE.md b/GUIDE.md index 9146b66..2862dc1 100644 --- a/GUIDE.md +++ b/GUIDE.md @@ -380,7 +380,7 @@ Template.contacts.helpers({ //other helper methods... }); ``` -You will also need a button somewhere that triggers the reveal animation. To do that, set a `data-ion-list-toggle' attribute on a button or icon, with the value "left", "right" or "both" to indicate which sides you wish to toggle. +You will also need a button somewhere that triggers the reveal animation. To do that, set a `data-ion-list-toggle` attribute on a button or icon, with the value "left", "right" or "both" to indicate which sides you wish to toggle. ## Modals From c9c56d53ddc7d124aa692bf1a2a0737d4b6d49c4 Mon Sep 17 00:00:00 2001 From: jorjordandan Date: Sun, 30 Aug 2015 20:55:08 -0700 Subject: [PATCH 5/8] Add info about using listButtons to guide --- GUIDE.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/GUIDE.md b/GUIDE.md index 2862dc1..fea75e0 100644 --- a/GUIDE.md +++ b/GUIDE.md @@ -380,7 +380,9 @@ Template.contacts.helpers({ //other helper methods... }); ``` -You will also need a button somewhere that triggers the reveal animation. To do that, set a `data-ion-list-toggle` attribute on a button or icon, with the value "left", "right" or "both" to indicate which sides you wish to toggle. +You will also need a button somewhere that triggers the reveal animation. To do that, set a `data-ion-list-toggle` attribute on a button or icon, with the value "left", "right" or "both" to indicate which sides you wish to toggle. + +If you want, you can use also the hidable buttons on the `ionItems` for actions other than sorting and deleting. For example, you could add `{{#ionListButton action="share" side="right"}}` and then attach an your own event to the class using `'click .item-share' :` in you event map. ## Modals From 7ed9534ac427684e0e1b24f8df974251f3064a1a Mon Sep 17 00:00:00 2001 From: jorjordandan Date: Sun, 30 Aug 2015 20:57:46 -0700 Subject: [PATCH 6/8] Minor copy edits to guide --- GUIDE.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/GUIDE.md b/GUIDE.md index fea75e0..e614408 100644 --- a/GUIDE.md +++ b/GUIDE.md @@ -380,9 +380,9 @@ Template.contacts.helpers({ //other helper methods... }); ``` -You will also need a button somewhere that triggers the reveal animation. To do that, set a `data-ion-list-toggle` attribute on a button or icon, with the value "left", "right" or "both" to indicate which sides you wish to toggle. +You will also need a button somewhere that triggers the reveal animation. To do that, set a `data-ion-list-toggle` attribute on a button or icon, with the value `"left"`, `"right"` or `"both"` to indicate which sides you wish to toggle. -If you want, you can use also the hidable buttons on the `ionItems` for actions other than sorting and deleting. For example, you could add `{{#ionListButton action="share" side="right"}}` and then attach an your own event to the class using `'click .item-share' :` in you event map. +If you want, you can use also the hidable buttons on `ionItem` for actions other than sorting and deleting. For example, you could add `{{#ionListButton action="share" side="right"}}` and then attach an your own event to the class using `'click .item-share' :` in you event map. ## Modals From cffc880fffe50145b3c3d93c771aba442e78c8e7 Mon Sep 17 00:00:00 2001 From: jorjordandan Date: Sun, 30 Aug 2015 20:58:57 -0700 Subject: [PATCH 7/8] missing space. --- GUIDE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/GUIDE.md b/GUIDE.md index e614408..f27cf20 100644 --- a/GUIDE.md +++ b/GUIDE.md @@ -345,7 +345,7 @@ Lastly you can also pass a raw url by including the `href` attribute. ``` ###Lists with sort and delete -To add the ability to sort and delete lists, you need to supply your collection to the the`ionSortable` argument of the `ionList` component, and also add the `ionListButton` components that will be shown inside the list item. +To add the ability to sort and delete lists, you need to supply your collection to the the `ionSortable` argument of the `ionList` component, and also add the `ionListButton` components that will be shown inside the list item. Here is an example from the contacts demo app: ``` From 5405e6039410681edbb8db1571c6d442f5ec164f Mon Sep 17 00:00:00 2001 From: jorjordandan Date: Sun, 30 Aug 2015 21:01:39 -0700 Subject: [PATCH 8/8] spelling --- GUIDE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/GUIDE.md b/GUIDE.md index f27cf20..530088a 100644 --- a/GUIDE.md +++ b/GUIDE.md @@ -382,7 +382,7 @@ Template.contacts.helpers({ ``` You will also need a button somewhere that triggers the reveal animation. To do that, set a `data-ion-list-toggle` attribute on a button or icon, with the value `"left"`, `"right"` or `"both"` to indicate which sides you wish to toggle. -If you want, you can use also the hidable buttons on `ionItem` for actions other than sorting and deleting. For example, you could add `{{#ionListButton action="share" side="right"}}` and then attach an your own event to the class using `'click .item-share' :` in you event map. +If you want, you can use also the hidable buttons on `ionItem` for actions other than sorting and deleting. For example, you could add `{{#ionListButton action="share" side="right"}}` and then attach an your own event to the class using `'click .item-share' :` in your event map. ## Modals