chore(demos): add a demo for FAB

demos/package.json

@@ -6,12 +6,11 @@
   "author": "Ionic Team <hi@ionic.io> (http://ionic.io)",
   "license": "MIT",
   "dependencies": {
-    "ionic-angular": "2.0.0-beta.11-201609161747",
+    "@ionic/storage": "^1.0.3",
-    "ionicons": "3.0.0",
+    "ionic-angular": "nightly",
-    "rxjs": "5.0.0-beta.12"
+    "ionicons": "^3.0.0"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "0.6.2",
+    "typescript": "^2.0.3"
-    "typescript": "rc"
   }
 }

demos/src/fab/app.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { FabContainer } from 'ionic-angular';
+
+@Component({
+  templateUrl: 'page.html'
+})
+export class ApiDemoPage {
+  array: number[] = [];
+
+  add() {
+    this.array.push(1);
+  }
+
+  clickMainFAB() {
+    console.log('Clicked open social menu');
+  }
+
+  openSocial(network: string, fab: FabContainer) {
+    console.log('Share in ' + network);
+    fab.close();
+  }
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}

demos/src/fab/app.module.ts

@@ -1,12 +1,11 @@
 import { NgModule } from '@angular/core';
 import { IonicApp, IonicModule } from 'ionic-angular';
-import { ApiDemoApp, ApiDemoPage, CleanLocalDataPipe } from './app.component';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
 
 @NgModule({
   declarations: [
     ApiDemoApp,
-    ApiDemoPage,
+    ApiDemoPage
-    CleanLocalDataPipe
   ],
   imports: [
     IonicModule.forRoot(ApiDemoApp)
@@ -17,3 +16,4 @@ import { ApiDemoApp, ApiDemoPage, CleanLocalDataPipe } from './app.component';
   ]
 })
 export class AppModule {}
+

demos/src/fab/page.html

@@ -0,0 +1,72 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Floating Action Buttons</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content fullscreen>
+  <div f></div>
+  <div f></div>
+  <div f *ngFor="let a of array"></div>
+
+  <ion-fab top right edge #fab1>
+    <button ion-fab mini (click)="clickMainFAB()"><ion-icon name="add"></ion-icon></button>
+    <ion-fab-list>
+      <button ion-fab (click)="openSocial('facebook', fab1)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab1)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab1)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab1)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab right bottom #fab2>
+    <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
+    <ion-fab-list side="left">
+      <button ion-fab (click)="openSocial('facebook', fab2)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab2)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab2)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab2)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab left top #fab3>
+    <button ion-fab color="secondary"><ion-icon name="arrow-dropright"></ion-icon></button>
+    <ion-fab-list side="right">
+      <button ion-fab (click)="openSocial('facebook', fab3)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab3)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab3)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab3)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab left bottom #fab4>
+    <button ion-fab color="dark"><ion-icon name="arrow-dropup"></ion-icon></button>
+    <ion-fab-list side="top">
+      <button ion-fab (click)="openSocial('facebook', fab4)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab4)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab4)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab4)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab center middle #fab5>
+    <button ion-fab color="danger" (click)="clickMainFAB()"><ion-icon name="md-share"></ion-icon></button>
+    <ion-fab-list side="top">
+      <button ion-fab (click)="openSocial('vimeo', fab5)" color="primary"><ion-icon name="logo-vimeo"></ion-icon></button>
+    </ion-fab-list>
+    <ion-fab-list side="bottom">
+      <button ion-fab (click)="openSocial('facebook', fab5)" color="secondary"><ion-icon name="logo-facebook"></ion-icon></button>
+    </ion-fab-list>
+    <ion-fab-list side="left">
+      <button ion-fab (click)="openSocial('googleplus', fab5)" color="light"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+    <ion-fab-list side="right">
+      <button ion-fab (click)="openSocial('twitter', fab5)" color="dark"><ion-icon name="logo-twitter"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab right middle>
+    <button ion-fab color="danger" (click)="add()"><ion-icon name="add"></ion-icon></button>
+  </ion-fab>
+
+</ion-content>

demos/src/local-storage/app.component.ts

@@ -1,86 +0,0 @@
-import { Component, Injectable, Pipe, PipeTransform } from '@angular/core';
-import { LocalStorage, Storage } from 'ionic-angular';
-
-@Pipe({
-  name: 'cleanLocalData'
-})
-@Injectable()
-export class CleanLocalDataPipe implements PipeTransform {
-  validKeys: string[];
-  output: any;
-  data: any;
-
-  transform(obj: any): any {
-    this.validKeys = ['username', 'name', 'email', 'address'];
-    this.output = {};
-    this.data = JSON.parse(obj);
-    for (var i = 0; i < Object.keys(this.data).length; i++) {
-      if (this.validKeys.indexOf( Object.keys(this.data)[i] ) > -1) {
-        this.output[Object.keys(this.data)[i]] = this.data[Object.keys(this.data)[i]];
-      }
-    }
-    return JSON.stringify(this.output, null, 2);
-  }
-}
-
-
-@Component({
-  templateUrl: 'page.html'
-})
-export class ApiDemoPage {
-  local: Storage;
-  localStorageDemo: string;
-  myItem: any;
-  keys = ['username', 'name', 'email', 'address'];
-  values = ['admin', 'Administrator', 'admin@administrator.com', '123 Admin St'];
-  addedKeys = [];
-  delKey: any;
-
-  constructor() {
-    this.local = new Storage(LocalStorage);
-    this.localStorageDemo = '{}';
-    window.localStorage.clear();
-
-    this.myItem = {
-      key: 'username',
-      value: 'admin'
-    };
-  }
-
-  set() {
-    if (this.myItem.key) {
-      let added = false;
-
-      for (let i = 0; i < this.addedKeys.length; i++) {
-        if (this.addedKeys[i] === this.myItem.key) {
-          added = true;
-        }
-      }
-
-      if (added === false) {
-        this.addedKeys.push(this.myItem.key);
-        this.delKey = this.myItem.key;
-        this.local.set(this.myItem.key, this.myItem.value );
-        this.localStorageDemo = JSON.stringify(window.localStorage, null, 2);
-      }
-    }
-  }
-
-  remove() {
-    this.local.remove(this.delKey);
-    this.localStorageDemo = JSON.stringify(window.localStorage, null, 2);
-
-    let index = this.addedKeys.indexOf(this.delKey);
-    if (index > -1) {
-      this.addedKeys.splice(index, 1);
-    }
-  }
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-export class ApiDemoApp {
-  root = ApiDemoPage;
-}

demos/src/local-storage/page.html

@@ -1,68 +0,0 @@
-<ion-header>
-
-  <ion-navbar>
-    <ion-title>Local Storage</ion-title>
-  </ion-navbar>
-
-</ion-header>
-
-
-<ion-content class="local-storage-demo outer-content">
-
-  <ion-list no-margin>
-    <ion-list-header>Add to Local Storage</ion-list-header>
-
-    <ion-item>
-      <ion-label>Key</ion-label>
-      <ion-select [(ngModel)]="myItem.key">
-        <ion-option *ngFor="let key of keys" [value]="key">
-          {{ key }}
-        </ion-option>
-      </ion-select>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Value</ion-label>
-      <ion-select [(ngModel)]="myItem.value">
-        <ion-option *ngFor="let value of values" [value]="value">
-          {{ value }}
-        </ion-option>
-      </ion-select>
-    </ion-item>
-
-  </ion-list>
-
-  <div padding>
-    <button ion-button icon-left block color="secondary" (click)="set()">
-      <ion-icon name="add"></ion-icon>
-      Add
-    </button>
-  </div>
-
-  <ion-list no-margin>
-    <ion-list-header>Delete from Local Storage</ion-list-header>
-
-    <ion-item>
-      <ion-label>Key</ion-label>
-      <ion-select [(ngModel)]="delKey">
-        <ion-option selected>Select a Key</ion-option>
-        <ion-option *ngFor="let key of addedKeys" [value]="key">
-          {{ key }}
-        </ion-option>
-      </ion-select>
-    </ion-item>
-  </ion-list>
-
-  <div padding>
-    <button ion-button icon-left block color="danger" (click)="remove()">
-      <ion-icon name="remove"></ion-icon>
-      Delete
-    </button>
-  </div>
-
-  <div padding>
-    <h5>Local Storage:</h5>
-    <pre>local: {{ localStorageDemo | cleanLocalData }}</pre>
-  </div>
-
-</ion-content>

scripts/gulp/tasks/demos.ts

@@ -125,6 +125,7 @@ function buildDemos(done: Function) {
 
 function cleanDemos(done: Function) {
   deleteFiles([`${DEMOS_SRC_ROOT}/**/*.js`,
+    `${DEMOS_SRC_ROOT}/**/*.js.map`,
     `${DEMOS_SRC_ROOT}/**/*.d.ts`,
     `${DEMOS_SRC_ROOT}/**/*.ngfactory.ts`,
     `${DEMOS_SRC_ROOT}/**/*.metadata.json`,