Shieeet

ionic/components.ts

@@ -1,6 +1,6 @@
 
 export * from 'ionic/components/app/app'
-export * from 'ionic/components/app/register'
+export * from 'ionic/components/app/id'
 export * from 'ionic/components/action-menu/action-menu'
 export * from 'ionic/components/aside/aside'
 export * from 'ionic/components/aside/aside-toggle'

ionic/components/app/app.ts

@@ -85,27 +85,27 @@ export class IonicApp {
 
   /**
    * Register a known component with a key, for easy lookups later.
-   * @param {TODO} key  TODO
-   * @param {TODO} component  TODO
+   * @param {TODO} key  The key to use to register the component
+   * @param {TODO} component  The component to register
    */
   register(key, component) {
     this.components[key] = component;
+    console.log('Registered', key, component);
     // TODO(mlynch): We need to track the lifecycle of this component to remove it onDehydrate
   }
 
   /**
    * Unregister a known component with a key.
-   * @param {TODO} key  TODO
-   * @param {TODO} component  TODO
+   * @param {TODO} key  The key to use to unregister
    */
-   unregister(key, component) {
+  unregister(key) {
     delete this.components[key];
   }
 
   /**
-   * TODO
-   * @param {Object} cls  TODO
-   * @return TODO
+   * Get a registered component with the given type (returns the first)
+   * @param {Object} cls the type to search for
+   * @return the matching component, or undefined if none was found
    */
   getRegisteredComponent(cls) {
     for(let component of this.components) {

ionic/components/app/id.ts

@@ -0,0 +1,31 @@
+import {AppViewManager, ElementRef, Directive, Self, Type} from 'angular2/angular2';
+
+import {Ion} from '../ion';
+import {IonicApp} from './app';
+
+/**
+ * IdRef is an easy way to identify unique components in an app and access them
+ * no matter where in the UI heirarchy you are. For example, this makes toggling
+ * a global side menu feasible from any place in the application.
+ */
+@Directive({
+  selector: '[id]',
+  properties: ['id']
+})
+export class IdRef {
+
+  constructor(private app: IonicApp, private elementRef: ElementRef, private appViewManager: AppViewManager) {
+
+    // Grab the component this directive is attached to
+    this.component = appViewManager.getComponent(elementRef);
+
+  }
+
+  onInit() {
+    this.app.register(this.id, this.component);
+  }
+
+  onDestroy() {
+    this.app.unregister(this.id);
+  }
+}

ionic/components/app/test/material/index.ts

@@ -6,7 +6,7 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
   template: '<ion-navbar *navbar primary>' +
     '<ion-title>Heading</ion-title>' +
     '<ion-nav-items primary>' +
-      '<button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button>' +
+      '<button icon aside-toggle="menu"><i class="icon ion-navicon"></i></button>' +
     '</ion-nav-items>' +
     '<ion-nav-items secondary>' +
       '<button><ion-icon md="ion-android-search" ios="ion-ios-search-strong"></i></button>' +
@@ -52,10 +52,6 @@ export class FirstPage {
     this.app = app;
     this.actionMenu = actionMenu;
   }
-  toggleMenu() {
-    console.log('TOGGLE');
-    this.app.getComponent('myAside').toggle();
-  }
   showMoreMenu() {
     this.actionMenu.open({
       buttons: [
@@ -85,7 +81,7 @@ export class FirstPage {
 
 @App({
   template: `<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,500' rel='stylesheet' type='text/css'>
-    <ion-aside id="menu" side="left" [content]="content" [register]="aside" register-id="myAside" #aside>
+    <ion-aside id="menu" side="left" [content]="content">
       <ion-toolbar primary><ion-title>Menu</ion-title></ion-toolbar>
       <ion-list>
         <ion-item>Your Profile</ion-item>

ionic/components/app/test/sink/index.ts

@@ -94,14 +94,12 @@ class MyApp {
       { title: 'Slides', component: SlidePage},
       { title: 'Action Menu', component: ActionMenuPage },
     ];
-
-    //this.rootView = ButtonPage
   }
 
   openPage(aside, component) {
     aside.close();
 
     let nav = this.app.getComponent('myNav');
-    nav.setRoot(component.component);
+    nav.setItems([component.component]);
   }
 }

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

@@ -1,4 +1,4 @@
-<ion-aside #aside [content]="content" [register]="aside" register-id="mainMenu">
+<ion-aside #aside [content]="content" id="mainMenu">
   <ion-toolbar><ion-title>Ionic 2.0</ion-title></ion-toolbar>
   <ion-content>
     <ion-list>
@@ -9,7 +9,7 @@
   </ion-content>
 </ion-aside>
 
-<ion-nav #content [register]="content" register-id="myNav" swipe-back-enabled="false"></ion-nav>
+<ion-nav #content swipe-back-enabled="false"></ion-nav>
 
 <style>
 my-modal {

ionic/components/aside/aside-toggle.ts

@@ -7,6 +7,9 @@ import {IonicApp} from '../app/app';
 */
 @Directive({
   selector: '[aside-toggle]',
+  properties: [
+    'asideToggle'
+  ],
   host: {
     '(^click)': 'toggle($event)'
   }
@@ -16,11 +19,14 @@ export class AsideToggle {
   * TODO
   * @param {IonicApp} app  TODO
   */
-  constructor(app: IonicApp) {
-    //TODO(mlynch): don't hard code this, evaluate with ref system
-    this.aside = app.getComponent('menu');
+  constructor(private app: IonicApp) {
   }
+  onInit() {
+    let toggleTarget = this.asideToggle;
 
+    // Get the component with this toggleTarget tag, or use "menu" if none
+    this.aside = this.app.getComponent(toggleTarget || 'menu');
+  }
   /**
   * TODO
   * @param {TODO} event  TODO
@@ -28,5 +34,4 @@ export class AsideToggle {
   toggle(event) {
     this.aside && this.aside.toggle();
   }
-
 }

ionic/components/aside/aside.scss

@@ -32,7 +32,7 @@ $aside-shadow: -1px 0px 8px rgba(0, 0, 0, 0.2) !default;
       transition: none;
     }
   }
-  
+
   ion-aside-backdrop {
     z-index: $z-index-aside-backdrop;
     transition: $aside-backdrop-transition;
@@ -48,11 +48,12 @@ $aside-shadow: -1px 0px 8px rgba(0, 0, 0, 0.2) !default;
 
   &[type=overlay] {
     z-index: $z-index-aside-overlay;
+
+    &:not(.open):not(.changing) {
+      display: none;
+    }
   }
 
-  &:not(.open):not(.changing) {
-    display: none;
-  }
 
   &[type=reveal] {
     left: 0;

ionic/components/aside/aside.ts

@@ -6,6 +6,7 @@ import {IonicConfig} from '../../config/config';
 import {IonicComponent} from '../../config/annotations';
 import * as types from './extensions/types'
 import * as gestures from  './extensions/gestures'
+import * as util from 'ionic/util/util'
 import {dom} from 'ionic/util'
 
 /**
@@ -31,7 +32,7 @@ import {dom} from 'ionic/util'
     type: [
       [instance => instance.type == 'overlay', types.AsideTypeOverlay],
       [instance => instance.type == 'reveal', types.AsideTypeReveal],
-      [instance => instance.type == 'push', types.AsideTypePush],
+      //[instance => instance.type == 'push', types.AsideTypePush],
     ]
   },
   events: ['opening']
@@ -51,14 +52,20 @@ export class Aside extends Ion {
 
     this.app = app;
 
-    // TODO(mlynch): We need to build out the ref system
-    app.register('menu', this);
-
     this.opening = new EventEmitter('opening');
 
+    //this.animation = new Animation(element.querySelector('backdrop'));
+
+    let finishChanging = util.debounce(() => {
+      console.log('FINISH');
+      this.setChanging(false);
+    });
+
     // TODO: Use Animation Class
     this.getNativeElement().addEventListener('transitionend', ev => {
-      this.setChanging(false)
+      //this.setChanging(false)
+      clearTimeout(this.setChangeTimeout);
+      this.setChangeTimeout = setInterval(finishChanging, 500);
     })
   }
 
@@ -127,9 +134,15 @@ export class Aside extends Ion {
    * @param {boolean} isChanging  TODO
    */
   setChanging(isChanging) {
+    console.log('Set changing', isChanging, this.isChanging);
+
+    // Stop any last changing end operations
+    clearTimeout(this.setChangeTimeout);
+
     if (isChanging !== this.isChanging) {
       this.isChanging = isChanging
       this.getNativeElement().classList[isChanging ? 'add' : 'remove']('changing');
+
     }
   }
 
@@ -140,8 +153,8 @@ export class Aside extends Ion {
    */
   setOpen(isOpen) {
     if (isOpen !== this.isOpen) {
-      this.isOpen = isOpen
-      this.setChanging(true)
+      this.isOpen = isOpen;
+      this.setChanging(true);
 
       // Set full or closed amount
       this.setOpenAmt(isOpen ? 1 : 0);

ionic/components/aside/extensions/types.ts

@@ -110,6 +110,7 @@ export class AsideTypeReveal extends AsideType {
     contentManipulator.setSliding.call(this, sliding);
   }
   setOpen(sliding) {
+    console.log('Reveal setting open', sliding);
     contentManipulator.setOpen.call(this, sliding);
   }
   setTransform(t) {

ionic/components/aside/test/basic/main.html

@@ -1,5 +1,4 @@
-
-<ion-aside #aside [content]="content">
+<ion-aside #aside [content]="content" id="menu" type="overlay">
 
   <ion-toolbar secondary>
     <ion-title>Left Menu</ion-title>
@@ -13,7 +12,7 @@
         {{p.title}}
       </button>
 
-      <button ion-item aside-toggle id="e2eCloseMenu">
+      <button ion-item aside-toggle="menu" id="e2eCloseMenu">
         Close Menu
       </button>
 
@@ -24,4 +23,4 @@
 </ion-aside>
 
 
-<ion-nav [root]="rootView" #content [register]="content" register-id="nav" swipe-back-enabled="false"></ion-nav>
+<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

ionic/components/aside/test/basic/page1.html

@@ -3,7 +3,7 @@
 
   <ion-nav-items primary>
     <button aside-toggle id="e2eHeaderToggleAside">
-      <icon name="ion-navicon"></icon>
+      <icon navicon></icon>
     </button>
   </ion-nav-items>
 

ionic/components/aside/test/basic/page2.html

@@ -3,7 +3,7 @@
 
   <ion-nav-items primary>
     <button aside-toggle id="e2eHeaderToggleAside">
-      <icon name="ion-navicon"></icon>
+      <icon navicon></icon>
     </button>
   </ion-nav-items>
 
@@ -18,7 +18,7 @@
   <h3>Page 2</h3>
 
   <p>
-    <button id="e2eContentToggleAside" aside-toggle>Toggle Aside</button>
+    <button aside-toggle id="e2eContentToggleAside">Toggle Aside</button>
   </p>
 
 </ion-content>

ionic/config/annotations.ts

@@ -16,7 +16,7 @@ import {
   RadioGroup, RadioButton, SearchBar,
   Nav, NavbarTemplate, Navbar, NavPush, NavPop, NavRouter,
   TapClick, TapDisabled,
-  Register,
+  IdRef,
   ShowWhen, HideWhen,
 
   MaterialButton
@@ -81,7 +81,7 @@ export const IonicDirectives = [
   forwardRef(() => NavPush),
   forwardRef(() => NavPop),
   forwardRef(() => NavRouter),
-  forwardRef(() => Register),
+  forwardRef(() => IdRef),
   //forwardRef(() => Ref),
 
   forwardRef(() => ShowWhen),

ionic/util/util.ts

@@ -51,6 +51,31 @@ function _baseExtend(dst, objs, deep) {
   return dst;
 }
 
+export function debounce(func, wait, immediate) {
+ var timeout, args, context, timestamp, result;
+ return function() {
+   context = this;
+   args = arguments;
+   timestamp = new Date();
+   var later = function() {
+     var last = (new Date()) - timestamp;
+     if (last < wait) {
+       timeout = setTimeout(later, wait - last);
+     } else {
+       timeout = null;
+       if (!immediate) result = func.apply(context, args);
+     }
+   };
+   var callNow = immediate && !timeout;
+   if (!timeout) {
+     timeout = setTimeout(later, wait);
+   }
+   if (callNow) result = func.apply(context, args);
+   return result;
+ };
+}
+
+
 /**
  * Apply default arguments if they don't exist in
  * the first object.