├── demo.gif
├── src
    ├── ion-alpha-scroll.css
    └── ion-alpha-scroll.js
├── bower.json
└── README.md


/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aquint/ion-alpha-scroll/HEAD/demo.gif


--------------------------------------------------------------------------------
/src/ion-alpha-scroll.css:
--------------------------------------------------------------------------------
 1 | .ion_alpha_list_outer .list{
 2 | 	padding-right: 15px;
 3 | }
 4 | .ion_alpha_list_outer .item{
 5 | 	border-right: none;
 6 | }
 7 | .ion_alpha_sidebar{
 8 | 	position: fixed;
 9 | 	right: 0;
10 | 	top: 0;
11 | 	height: 100%;
12 | }
13 | .ion_alpha_sidebar li{
14 | 	line-height: 1.1;
15 | }


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ion-alpha-scroll",
 3 |   "version": "0.1.2",
 4 |   "authors": [
 5 |     "aquint <anthonyquinton92@gmail.com>"
 6 |   ],
 7 |   "description": "Alphabetical indexing and scrolling for ionic lists",
 8 |   "main": "./src/ion-alpha-scroll.js",
 9 |   "keywords": [
10 |     "ionic",
11 |     "ion",
12 |     "angular",
13 |     "alphabetical",
14 |     "alphabet",
15 |     "scrolling",
16 |     "index"
17 |   ],
18 |   "license": "MIT",
19 |   "ignore": [
20 |     "**/.*",
21 |     "node_modules",
22 |     "bower_components",
23 |     "test",
24 |     "tests",
25 |     "demo.gif"
26 |   ]
27 | }
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ion-alpha-scroll
  2 | ================
  3 | 
  4 | > Configurable Ionic directive for alphabetically indexed list with an alpha scroll bar.
  5 | 
  6 | #Table of contents
  7 | 
  8 | - [Demo](#demo)
  9 | - [Installation](#installation)
 10 | - [Usage](#usage)
 11 | - [Acknowledgements](#acknowledgements)
 12 | - [License](#license)
 13 | 
 14 | # Demo
 15 | 
 16 | ![Animated demo](https://github.com/aquint/ion-alpha-scroll/raw/master/demo.gif)
 17 | 
 18 | # Installation
 19 | 
 20 | 1. Use bower to install the new module:
 21 | ```bash
 22 | bower install ion-alpha-scroll --save
 23 | ```
 24 | 2. Import the `ion-alpha-scroll` javascript and css file into your HTML file:
 25 | ```html
 26 | <script src="bower_components/ion-alpha-scroll/dist/ion-alpha-scroll.js"></script>
 27 | <link href="bower_components/ion-alpha-scroll/dist/ion-alpha-scroll.css" rel="stylesheet">
 28 | ```
 29 | 3. Add `ion-alpha-scroll` as a dependency on your Ionic app:
 30 | ```javascript
 31 | angular.module('myApp', [
 32 |   'ionic',
 33 |   'ion-alpha-scroll'
 34 | ]);
 35 | ```
 36 | 
 37 | # Usage
 38 | 
 39 | To use the `ion-alpha-scroll` directive simply add the following snippet to your template:
 40 | ```html
 41 | <ion-alpha-scroll ng-model="model" key="keyName" subheader="true">
 42 |   Content Goes here...
 43 | </ion-alpha-scroll>
 44 | ```
 45 | where 'ng-model' is the model you would like to sort and 'key' is the name of the key you would like to sort by.
 46 | 
 47 | The 'subheader' attribute is optional, to be set if using a subheader in the view to allow proper scroll height.
 48 | 
 49 | To display the properties of each item in the model, you can use the 'item' object within the directive:
 50 | ```html
 51 | 	<ion-alpha-scroll ng-model="model" key="keyName">
 52 | 	  <div>Name: {{item.name}}</div>
 53 | 	  <div>Address: {{item.address}}</div>
 54 | 	</ion-alpha-scroll>
 55 | ```
 56 | 
 57 | Heres a quick example:
 58 | 
 59 | services.js
 60 | ```javascript
 61 | angular.module('example.services', [])
 62 | 
 63 | .factory('Contacts', function() {
 64 | 
 65 |   // Some fake testing data
 66 |   var contacts = [
 67 |   {
 68 |     id: 0,
 69 |     name: 'Ben Sparrow',
 70 |     address: '123 Fake St.'
 71 |     face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
 72 |   }, {
 73 |     id: 1,
 74 |     name: 'Max Lynx',
 75 |     address: '123 Fake St.'
 76 |     face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460'
 77 |   },{
 78 |     id: 2,
 79 |     name: 'Adam Bradleyson',
 80 |     address: '123 Fake St.'
 81 |     face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg'
 82 |   }, {
 83 |     id: 3,
 84 |     name: 'Perry Governor',
 85 |     address: '123 Fake St.'
 86 |     face: 'https://pbs.twimg.com/profile_images/491995398135767040/ie2Z_V6e.jpeg'
 87 |   }, {
 88 |     id: 4,
 89 |     name: 'Mike Harrington',
 90 |     address: '123 Fake St.'
 91 |     face: 'https://pbs.twimg.com/profile_images/578237281384841216/R3ae1n61.png'
 92 |   }
 93 | 
 94 |   ...
 95 | 
 96 |   ];
 97 | 
 98 | 
 99 |   return {
100 |     all: function() {
101 |       return contacts;
102 |     },
103 |     remove: function(contact) {
104 |       contacts.splice(contacts.indexOf(contact), 1);
105 |     },
106 |     get: function(contactId) {
107 |       for (var i = 0; i < contacts.length; i++) {
108 |         if (contacts[i].id === parseInt(contactId)) {
109 |           return contacts[i];
110 |         }
111 |       }
112 |       return null;
113 |     }
114 |   };
115 | });
116 | 
117 | ```
118 | controllers.js
119 | ```javascript
120 | angular.module('example.controllers', [])
121 | 
122 | .controller('contactsCtrl', ['$scope','Contacts',function($scope, Contacts) {
123 |  
124 | 	$scope.contacts = Contacts.all();
125 | 
126 | )]};
127 | 
128 | ```
129 | contacts-list.html
130 | ```html
131 | <ion-view view-title="Contacts">
132 |   <ion-content>
133 |     <ion-alpha-scroll ng-model="contacts" key="name">
134 |       <div>{{item.name}}</div>
135 |       <div>{{item.description}}</div>
136 |     </ion-alpha-scroll>
137 |   </ion-content>
138 | </ion-view>
139 | ```
140 | 
141 | # Acknowledgements
142 | 
143 | Initial inspiration and code taken from [this codepen](http://codepen.io/mikelucid/pen/mqzLc) by mikelucid
144 | 
145 | # License
146 | 
147 | The Ionic alpha-scroll directive is available under the MIT license.
148 | 


--------------------------------------------------------------------------------
/src/ion-alpha-scroll.js:
--------------------------------------------------------------------------------
 1 | angular.module('ion-alpha-scroll', [])
 2 | .directive('ionAlphaScroll', [
 3 |     '$ionicScrollDelegate', '$location', '$timeout', '$document',
 4 |     function($ionicScrollDelegate, $location, $timeout, $document) {
 5 |         return {
 6 |             require: '?ngModel',
 7 |             restrict: 'AE',
 8 |             replace: true,
 9 |             compile: function(tElement, tAttrs, tTransclude) {
10 |                 var children = tElement.contents();
11 |                 var template = angular.element([
12 |                     '<ion-list class="ion_alpha_list_outer">',
13 |                     '<ion-scroll delegate-handle="alphaScroll">',
14 |                     '<div data-ng-repeat="(letter, items) in sorted_items" class="ion_alpha_list">',
15 |                     '<ion-item class="item item-divider" id="index_{{letter}}">{{letter}}</ion-item>',
16 |                     '<ion-item ng-repeat="item in items"></ion-item>',
17 |                     '</div>',
18 |                     '</ion-scroll>',
19 |                     '<ul class="ion_alpha_sidebar">',
20 |                     '<li ng-click="alphaScrollGoToList(\'index_{{letter}}\')" ng-repeat="letter in alphabet | orderBy: letter">{{ letter }}</li>',
21 |                     '</ul>',
22 |                     '</ion-list>'
23 |                 ].join(''));
24 | 
25 |                 var headerHeight = $document[0].body.querySelector('.bar-header').offsetHeight;
26 |                 var subHeaderHeight = tAttrs.subheader === "true" ? 44 : 0;
27 |                 var tabHeight = $document[0].body.querySelector('.tab-nav') ? $document[0].body.querySelector('.tab-nav').offsetHeight : 0;
28 |                 var windowHeight = window.innerHeight;
29 | 
30 |                 var contentHeight = windowHeight - headerHeight - subHeaderHeight - tabHeight;
31 | 
32 |                 angular.element(template.find('ion-item')[1]).append(children);
33 |                 tElement.html('');
34 |                 tElement.append(template);
35 | 
36 |                 tElement.find('ion-scroll').css({
37 |                     "height": contentHeight + 'px'
38 |                 });
39 | 
40 |                 return function(scope, element, attrs, ngModel) {
41 |                     var count = 0;
42 |                     var scrollContainer = element.find('ion-scroll');
43 | 
44 |                     var ionicScroll = scrollContainer.controller('$ionicScroll');
45 | 
46 |                     // do nothing if the model is not set
47 |                     if (!ngModel) return;
48 | 
49 |                     ngModel.$render = function() {
50 |                         scope.items = [];
51 |                         scope.items = ngModel.$viewValue;
52 |                         var tmp = {};
53 |                         for (i = 0; i < scope.items.length; i++) {
54 |                             var letter = scope.items[i][attrs.key].toUpperCase().charAt(0);
55 |                             if (tmp[letter] == undefined) {
56 |                                 tmp[letter] = []
57 |                             }
58 |                             tmp[letter].push(scope.items[i]);
59 |                         }
60 |                         scope.alphabet = iterateAlphabet(tmp);
61 |                         scope.sorted_items = tmp;
62 | 
63 |                         scope.alphaScrollGoToList = function(id) {
64 |                             $location.hash(id);
65 |                             $ionicScrollDelegate.$getByHandle('alphaScroll').anchorScroll();
66 |                         }
67 | 
68 |                         //Create alphabet object
69 |                         function iterateAlphabet(alphabet) {
70 |                             var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
71 |                             if (Object.keys(alphabet).length != 0) {
72 |                                 str = '';
73 |                                 for (var i = 0; i < Object.keys(alphabet).length; i++) {
74 |                                     str += Object.keys(alphabet)[i];
75 |                                 }
76 |                             }
77 |                             var numbers = new Array();
78 |                             for (var i = 0; i < str.length; i++) {
79 |                                 var nextChar = str.charAt(i);
80 |                                 numbers.push(nextChar);
81 |                             }
82 |                             return numbers;
83 |                         }
84 | 
85 |                     };
86 |                 }
87 |             }
88 |         };
89 |     }
90 | ]);
91 | 


--------------------------------------------------------------------------------