Profile app

ionic/components/app/test/profile/index.js

@@ -0,0 +1,54 @@
+import {bind, Injector} from 'angular2/di';
+import {bootstrap, ElementRef, NgFor} from 'angular2/angular2'
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
+
+import {Modal, ModalRef, Nav, Segment, Animation,
+  SegmentButton, Slides, Slide, Content, Button, List, Item} from 'ionic/ionic';
+import {NavController, NavbarTemplate, NavParams, Navbar} from 'ionic/ionic';
+
+@Component({ selector: 'ion-app' })
+@View({
+  templateUrl: 'main.html',
+  directives: [formDirectives, Nav, Slides, Slide, Content, Button, List, Item, NgFor, ParallaxEffect]
+})
+export class IonicApp {
+  constructor() {
+
+    this.items = [];
+    for(let i = 0; i < 100; i++) {
+      this.items.push({
+        title: 'Item ' + i
+      })
+    }
+  }
+}
+
+@Directive({
+  selector: '[parallax]',
+  properties: [
+    'parallax',
+    'counter'
+  ]
+})
+export class ParallaxEffect {
+  constructor(
+    content: Content,
+    elementRef: ElementRef
+  ) {
+    this.domElement = elementRef.domElement;
+    this.scroller = this.domElement.querySelector('.scroll-content');
+    this.scroller.addEventListener('scroll', (e) => {
+      this.counter.innerHTML = e.target.scrollTop;
+    });
+
+    setTimeout(() => {
+      console.log('Watching', this.parallax, this.counter);
+    })
+  }
+}
+
+export function main() {
+  bootstrap(IonicApp);
+}

ionic/components/app/test/profile/main.html

@@ -0,0 +1,53 @@
+<ion-view>
+  <div id="profile" #profile>
+    <div id="face">
+    </div>
+  </div>
+  <ion-content [parallax]="profile" [counter]="counter">
+    <ion-list inset>
+      <ion-item *ng-for="#item of items">
+        {{item.title}}
+      </ion-item>
+    </ion-list>
+  </ion-content>
+  <div id="counter" #counter></div>
+</ion-view>
+
+
+<style>
+#counter {
+  position: fixed;
+  bottom: 15px;
+  right: 15px;
+  background: black;
+  color: #fff;
+  font-size: 11px;
+  padding: 5px;
+  border-radius: 5px;
+}
+#profile {
+  position: absolute;
+  top: 0;
+  height: 250px;
+  width: 100%;
+  background: url('http://ionic-io-assets.s3.amazonaws.com/demos/bus.jpg') no-repeat transparent;
+  background-size: cover;
+}
+#face {
+  background: url('http://ionic-io-assets.s3.amazonaws.com/demos/face.jpg') no-repeat transparent;
+  background-size: cover;
+  background-position: 50%;
+  width: 96px;
+  height: 96px;
+  border-radius: 96px;
+  border: 2px solid #fff;
+  box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
+  margin: 100px auto 0 auto;
+}
+ion-content {
+  background: transparent !important;
+}
+.scroll-content {
+  padding-top: 250px;
+}
+</style>