rename to aside

playground/basic-example/main.html

@@ -1,5 +1,5 @@
-<ion-side-menu-parent>
+<ion-aside-parent>
-  <ion-side-menu side="left">
+  <ion-aside side="left">
     Hello ...
     <p>...</p>
     <p>...</p>
@@ -7,7 +7,7 @@
     <p>...</p>
     <p>...</p>
     Side menu!
-  </ion-side-menu>
+  </ion-aside>
   <div class="content">
     <ion-tabbar view-title="My Tabs"></ion-tabbar>
     <ion-tabbar view-title="Tabs 2"></ion-tabbar>
@@ -29,4 +29,4 @@
     </ion-modal>
     -->
   </div>
-</ion-side-menu-content>
+</ion-aside-parent>

playground/basic-example/main.js

@@ -1,13 +1,13 @@
 import {bootstrap} from 'angular2/core';
 import {Component, Template} from 'angular2/angular2';
-import {SideMenu, SideMenuParent} from 'ionic/components';
+import {Aside, AsideParent} from 'ionic/components';
 
 // import 'ionic/components/tabbar/mixins/android/android-tabbar';
 
 @Component({ selector: '[playground-main]' })
 @Template({
   url: 'main.html',
-  directives: [SideMenu, SideMenuParent]
+  directives: [Aside, AsideParent]
 })
 class PlaygroundMain {
   constructor() {

src/components/app/ionic.scss

@@ -20,7 +20,7 @@
 @import
   "../button/button",
   "../modal/modal",
-  "../sidemenu/sidemenu",
+  "../aside/aside",
   "../switch/switch",
   "../tabs/tabs",
   "../tool-bar/tool-bar";

src/components/aside/aside.js

@@ -4,34 +4,34 @@ import {IonConfig} from '../../config';
 import {DragGesture} from '../../core/gestures/drag-gesture';
 import * as util from '../../util';
 
-export var sideMenuConfig = new IonConfig();
+export var asideConfig = new IonConfig('sidemenu')
 
 // TODO defaults or bindings?
-sideMenuConfig.defaults({
+asideConfig.defaults({
   side: 'left',
-  dragThreshold: '50'
+  dragThreshold: 50
 });
 
 @Component({
-  selector: 'ion-side-menu',
+  selector: 'ion-aside',
   bind: {
-    side: 'side',
+    edge: 'side',
     dragThreshold: 'dragThreshold'
   },
 })
 @Template({
   inline: `<content></content>`
 })
-export class SideMenu extends Ion {
+export class Aside extends Ion {
   constructor(
-    @Parent() sideMenuParent: SideMenuParent,
+    @Parent() asideParent: AsideParent,
     @NgElement() element: NgElement
   ) {
     this.domElement = element.domElement;
 
     this._drag = {};
 
-    this.gesture = new DragGesture(sideMenuParent.domElement, {
+    this.gesture = new DragGesture(asideParent.domElement, {
       onDrag: this.onDrag.bind(this),
       onDragStart: this.onDragStart.bind(this),
       onDragEnd: this.onDragEnd.bind(this)
@@ -46,7 +46,7 @@ export class SideMenu extends Ion {
       this.setChanging(false);
     })
 
-    sideMenuConfig(this);
+    asideConfig(this);
   }
   onDragStart(ev) {
     if (!this.dragMethods.canStart(ev)) {
@@ -97,12 +97,12 @@ export class SideMenu extends Ion {
 }
 
 @Component({
-  selector: 'ion-side-menu-parent'
+  selector: 'ion-aside-parent'
 })
 @Template({
   inline: '<content></content>'
 })
-export class SideMenuParent {
+export class AsideParent {
   constructor(@NgElement() element: NgElement) {
     this.domElement = element.domElement;
     super();

src/components/aside/aside.scss

@@ -1,7 +1,7 @@
-$side-menu-width: 304px;
+$aside-width: 304px;
-$side-menu-height: 304px;
+$aside-height: 304px;
 
-ion-side-menu {
+ion-aside {
   display: block;
   position: absolute;
 
@@ -17,45 +17,45 @@ ion-side-menu {
   }
 
   &.left {
-    width: $side-menu-width;
+    width: $aside-width;
     left: 0;
     top: 0;
     bottom: 0;
 
-    transform: translate3d(-$side-menu-width, 0, 0);
+    transform: translate3d(-$aside-width, 0, 0);
     &.open {
       transform: translate3d(0,0,0);
     }
   }
   &.right {
-    width: $side-menu-width;
+    width: $aside-width;
     right: 0;
     top: 0;
     bottom: 0;
 
-    transform: translate3d($side-menu-width,0,0);
+    transform: translate3d($aside-width,0,0);
     &.open {
       transform: translate3d(0,0,0);
     }
   }
   &.top {
-    height: $side-menu-width;
+    height: $aside-width;
     top: 0;
     left: 0;
     right: 0;
     
-    transform: translate3d(0,-$side-menu-width,0);
+    transform: translate3d(0,-$aside-width,0);
     &.open {
       transform: translate3d(0,0,0);
     }
   }
   &.bottom {
-    height: $side-menu-width;
+    height: $aside-width;
     bottom: 0;
     left: 0;
     right: 0;
 
-    transform: translate3d(0,$side-menu-width,0);
+    transform: translate3d(0,$aside-width,0);
     &.open {
       transform: translate3d(0,0,0);
     }
@@ -63,7 +63,7 @@ ion-side-menu {
 
 }
 
-ion-side-menu-parent {
+ion-aside-parent {
   position: absolute;
   top: 0;
   left: 0;

src/components/aside/behaviors/direction/direction.js

@@ -1,7 +1,7 @@
-import {sideMenuConfig} from '../../sidemenu';
+import {asideConfig} from '../../sidemenu';
 import * as util from '../../../../util';
 
-sideMenuConfig.when(instance => instance.side === 'bottom')
+asideConfig.when(instance => instance.side === 'bottom')
   .mixin(function() {
 
     this.gesture.options({
@@ -30,7 +30,7 @@ sideMenuConfig.when(instance => instance.side === 'bottom')
 
   });
 
-sideMenuConfig.when(instance => instance.side === 'left')
+asideConfig.when(instance => instance.side === 'left')
   .mixin(function() {
 
     this.domElement.classList.add('left');
@@ -55,7 +55,7 @@ sideMenuConfig.when(instance => instance.side === 'left')
 
   });
 
-sideMenuConfig.when(instance => instance.side === 'right')
+asideConfig.when(instance => instance.side === 'right')
   .mixin(function() {
 
     this.domElement.classList.add('right');
@@ -78,7 +78,7 @@ sideMenuConfig.when(instance => instance.side === 'right')
 
   });
 
-sideMenuConfig.when(instance => instance.side === 'top')
+asideConfig.when(instance => instance.side === 'top')
   .mixin(function() {
 
     this.domElement.classList.add('top');

src/config.js

@@ -1,13 +1,16 @@
 import * as Platform from './platform';
 import * as util from './util';
 
-export function IonConfig() {
+export function IonConfig(name) {
 
   // TODO automatically add platform class
   // TODO do bindings/defaults have to be written twice?
   // TODO maybe add config to IonicComponent annotation
   // TODO map options to config
-  function Config(instance) {
+  function Config(instance, element) {
+    var platformName = Platform.getPlatform();
+    (element.domElement || element).classList.add(`${name}-${platformName}`);
+
     util.defaults(instance, Config._defaults || {});
     var conditions = Config._conditions;
     for (var i = 0, ii = conditions.length; i < ii; i++) {

src/core/config/config.js

@@ -0,0 +1,54 @@
+import * as Platform from '../../platform';
+import * as util from '../../util';
+
+export function IonConfig() {
+
+  // TODO automatically add platform class
+  // TODO do bindings/defaults have to be written twice?
+  // TODO maybe add config to IonicComponent annotation
+  // TODO map options to config
+  function Config(instance, element) {
+    (element.domElement || element).classList.add('platform-' + Platform.getPlatform());
+
+    util.defaults(instance, Config._defaults || {});
+    var conditions = Config._conditions;
+    for (var i = 0, ii = conditions.length; i < ii; i++) {
+      if (conditions[i]._callback(instance)) {
+        for (var j = 0, jj = conditions[i]._mixins.length; j < jj; j++) {
+          conditions[i]._mixins[j].call(instance);
+        }
+      }
+    }
+  }
+
+  Config._conditions = [];
+  Config.defaults = function(defaults) {
+    Config._defaults = defaults;
+  };
+  Config.when = function when(callback) {
+    var condition = new ConfigCondition(callback);
+    Config._conditions.push(condition);
+    return condition;
+  };
+  Config.platform = function platform(name) {
+    return Config.when(() => Platform.getPlatform() === name);
+  };
+
+  return Config;
+}
+
+class ConfigCondition {
+  constructor(callback, mixins = [], template = '') {
+    this._callback = callback;
+    this._mixins = mixins;
+    this._template = template;
+  }
+  mixin(mixinFn) {
+    this._mixins.push(mixinFn);
+    return this;
+  }
+  template(url) {
+    this._template = url;
+    return this;
+  }
+}

src/core/config/config_spec.js

@@ -0,0 +1,4 @@
+import {Config} from './config';
+
+export function main() {
+}