Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ionic fast scroll
fast-scroll {
position: fixed;
top: 102px;
right: 5px;
padding: 10px 5px;
background: #f8f8f8;
border-radius: 10px;
border: 1px solid #ddd;
span {
display: block;
margin-bottom: 70%;
}
a {
text-decoration: none;
}
}
.fast-scroll-container {
text-align: center;
}
import {Component, Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'fast-scroll',
template: `
<div class="fast-scrollr-container">
<span *ngFor="let index of indexes"><a href="#{{index}}">{{index.toUpperCase()}}</a></span>
</div>
`,
})
export class FastScroll {
@Input() indexes: string[];
}
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({name: 'keys'})
export class Keys implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
// One dimensional array
let myContacts = [{}...{}];
// One dimensional array but sorted by last name
let contactsSorted = myContacts.sort(compare);
// Two dimensional array sorted and grouped by last name
let contactsGrouped = groupByLastname(contactsSorted);
const compare = (a,b) => {
if (a.lastName < b.lastName)
return -1;
if (a.lastName > b.lastName)
return 1;
return 0;
}
const groupByLastname = (contacts) => {
var contactsGrouped = [],
tmpArray = [];
for (var i = 0; i < contacts.length; i++) {
if (i !== 0 && contacts[i].lastName.charAt(0).toLowerCase() !== contacts[i - 1].lastName.charAt(0).toLowerCase()) {
contactsGrouped[contacts[i - 1].lastName.charAt(0).toLowerCase()] = tmpArray;
tmpArray = [];
tmpArray.push(contacts[i]);
} else tmpArray.push(contacts[i]);
if (i == contacts.length - 1 && contacts.length !== 1) {
contactsGrouped[contacts[i - 1].lastName.charAt(0).toLowerCase()] = tmpArray;
tmpArray = [];
} else if (contacts.length == 1) {
contactsGrouped[contacts[i].lastName.charAt(0).toLowerCase()] = tmpArray;
tmpArray = [];
}
}
return contactsGrouped;
}
import {Component} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
import {Keys} from '../common/pipes/keys.pipe';
import {FastScroll} from 'MY_PATH/fast-scroll';
@Component({
template: `
<ion-header>
<ion-navbar hideBackButton="true">
<ion-title>Contacts</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<div *ngFor="let contactSet of contacts | keys">
<ion-item-divider light id="{{contactSet.key}}">{{contactSet.key.toUpperCase()}}</ion-item-divider>
<ion-item *ngFor="let contactItem of contactSet.value"></ion-item>
</div>
</ion-list>
<fast-scroll [indexes]="Object.keys(contacts)"></fast-scroll>
</ion-content>
`,
directives: [FastScroll],
pipes: [Keys]
})
export class ContactPage {
@Input() contacts;
constructor() {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment