add util/dom

src/components/aside/aside.js

@@ -1,6 +1,7 @@
 import {Component, Template, Inject, Parent, NgElement} from 'angular2/angular2'
 import * as types from 'ionic2/components/aside/extensions/types'
 import * as gestures from  'ionic2/components/aside/extensions/gestures';
+import {dom} from 'ionic2/util'
 import {IonicComponent} from 'ionic2/config/component'
 
 @Component({
@@ -50,7 +51,7 @@ export class Aside {
     if (isOpen !== this.isOpen) {
       this.isOpen = isOpen
       this.setChanging(true)
-      requestAnimationFrame(() => {
+      return dom.rafPromise().then(() => {
         this.typeDelegate.setOpen(isOpen)
       })
     }

src/components/ion.js

@@ -1,5 +1,3 @@
-import * as util from 'ionic2/util';
-
 export class Ion {}
 
 // export class IonElement extends Ion {

src/components/item/extensions/ios.scss

@@ -18,7 +18,6 @@ $item-ios-border-color:          $list-ios-border-color !default;
   .item {
     background: $item-ios-background-color;
     min-height: $item-ios-min-height;
-    padding-left: $item-ios-padding-left;
   }
 
   .item-media + .item-content {
@@ -27,7 +26,7 @@ $item-ios-border-color:          $list-ios-border-color !default;
 
   .item-content {
     min-height: $item-ios-min-height;
-    padding: 0;
+    padding: 0 0 0 $item-ios-padding-left;
 
     &:after {
       position: absolute;

src/components/item/item-options.js

@@ -0,0 +1,13 @@
+
+@Decorator({
+  selector: 'ion-primary-options'
+})
+export class ItemPrimaryOptions {
+}
+
+@Decorator({
+  selector: 'ion-secondary-options'
+})
+export class ItemSecondaryOptions {
+}
+

src/components/item/item-swipe-buttons.js

@@ -0,0 +1,74 @@
+import {Parent, NgElement, Decorator} from 'angular2/angular2'
+import {Item} from 'ionic2/components'
+import {SlideGesture} from 'ionic2/gestures/slide-gesture'
+
+@Decorator({
+  selector: 'ion-primary-swipe-buttons'
+})
+export class ItemPrimarySwipeButtons {
+  constructor(
+    @NgElement() element: NgElement,
+    @Parent() item: Item
+  ) {
+    this.domElement = element.domElement
+    this.parentItem = item
+    this.gesture = new ItemSlideGesture(this)
+    this.gesture.listen()
+
+    this.domElement.addEventListener('transitionend', () => {
+      this.domElement.classList.remove('changing')
+    })
+  }
+
+  setOpen(isOpen) {
+    if (isOpen !== this.isOpen) {
+      this.isOpen = isOpen
+      requestAnimationFrame(() => {
+        this.domElement.classList[isOpen?'add':'remove'](isOpen)
+      })
+    }
+  }
+}
+
+@Decorator({
+  selector: 'ion-secondary-swipe-buttons'
+})
+export class ItemSecondarySwipeButtons {
+}
+
+class ItemSlideGesture extends SlideGesture {
+  constructor(buttons) {
+    super(buttons.parentItem.domElement)
+    this.buttons = buttons
+  }
+  
+  getSlideBoundaries() {
+    return {
+      min: -this.buttons.domElement.offsetWidth,
+      max: 0,
+    };
+  }
+
+  getElementStartPos(slide, ev) {
+    return this.buttons.isOpen ? slide.max : slide.min;
+  }
+
+  onSlideBeforeStart() {
+    this.buttons.domElement.classList.add('changing')
+    this.buttons.domElement.classList.add('no-transition')
+    return new Promise(resolve => {
+      requestAnimationFrame(resolve)
+    })
+  }
+  onSlide(slide, ev) {
+    this.buttons.domElement.style.transform = 'translate3d(' + slide.distance + 'px,0,0)';
+  }
+  onSlideEnd(slide, ev) {
+    this.buttons.domElement.style.transform = ''
+    this.buttons.domElement.classList.remove('no-transition')
+    if (Math.abs(ev.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5) {
+      this.buttons.setOpen(!this.buttons.isOpen);
+    }
+  }
+
+}

src/components/item/item.js

@@ -1,22 +1,44 @@
 import {NgElement, Component, Template} from 'angular2/angular2'
 import {IonicComponent} from 'ionic2/config/component'
+import {
+  ItemPrimaryOptions, ItemSecondaryOptions
+} from 'ionic2/components/item/item-options'
+import {
+  ItemPrimarySwipeButtons, ItemSecondarySwipeButtons
+} from 'ionic2/components/item/item-swipe-buttons'
 
 @Component({
   selector: 'ion-item'
 })
 @Template({
-  inline: `<div class="item-content">
-            <div class="item-media">
-            </div>
-            <div class="item-title">
-              <content></content>
-            </div>
-            <div class="item-accessory">
-            </div>
-          </div>`
+  inline: `
+    <content select="ion-primary-options"></content>
+    <content select="ion-primary-swipe-buttons"></content>
+    <div class="item-content">
+      <div class="item-media">
+      </div>
+      <div class="item-accessory">
+        <content select="ion-item-accessory"></content>
+      </div>
+      <div class="item-title">
+        <content></content>
+      </div>
+    </div>
+    <content select="ion-secondary-options"></content>
+    <content select="ion-secondary-swipe-buttons"></content>
+  `,
+  direcetives: [
+    ItemPrimarySwipeButtons, 
+    ItemSecondarySwipeButtons, 
+    ItemPrimaryOptions,
+    ItemSecondaryOptions
+  ]
 })
 export class Item {
-  constructor(@NgElement() ele:NgElement) {
+  constructor(
+    @NgElement() ele:NgElement
+  ) {
+    this.domElement = ele.domElement
     Item.config.invoke(this)
   }
 }

src/components/item/item.scss

@@ -17,7 +17,32 @@ $item-min-height:         44px !default;
   padding: 0;
 }
 
+ion-primary-swipe-buttons,
 .item-content {
+  transition: transform 0.3s;
+}
+
+ion-primary-swipe-buttons {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 100;
+  transform: translate3d(-100%,0,0);
+
+  &:not(.open):not(.changing) {
+    display: none;
+  }
+  &.open {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.item-content {
+  // TODO add proper bg to cover up swipe buttons
+  background: white;
+  transform: translate3d(0,0,0);
+
   position: relative;
 
   @include flex-display();
@@ -36,6 +61,7 @@ $item-min-height:         44px !default;
   @include flex-shrink(0);
   @include flex-wrap(nowrap);
   @include flex-align-items(center);
+  @include flex-order(1);
 
   min-height: $item-min-height;
 
@@ -47,6 +73,7 @@ $item-min-height:         44px !default;
 
   @include flex(1);
   @include flex-shrink(1);
+  @include flex-order(2);
 
   max-width: 100%;
 
@@ -58,6 +85,7 @@ $item-min-height:         44px !default;
 .item-accessory {
   @include flex-display();
   @include flex-shrink(0);
+  @include flex-order(3);
 
   margin-left: 5px;
   max-height: 28px;

src/components/item/test/basic/main.html

@@ -1,65 +1,19 @@
-<div class="pane" style="background: #efeff4">
+<ion-view view-title="List of Items">
+  <ion-list>
+    <ion-list-header>
+      List Header
+    </ion-list-header>
 
-  <div class="pane-container">
-
-    <div class="bar">
-      iOS List/Item Default CSS Tests
-    </div>
-
-    <div class="content">
-
-      <div class="list list-ios">
-
-        <div class="list-header">
-          List Header
+    <ion-item *for="#item of items">
+      <ion-primary-swipe-buttons>
+        <div style="width: 200px; background: red; height: 100%">
         </div>
+      </ion-primary-swipe-buttons>
+      Item {{item}}
+      <ion-item-accessory>
+        Label {{item}}
+      </ion-item-accessory>
+    </ion-item>
 
-        <ul class="list-content">
-
-          <li class="item">
-            <div class="item-content">
-              <div class="item-title">
-                Item 1
-              </div>
-              <div class="item-accessory">
-                Label
-              </div>
-            </div>
-          </li>
-
-          <li class="item">
-            <div class="item-content">
-              <div class="item-title">
-                Item 2
-              </div>
-              <div class="item-accessory">
-                Label
-              </div>
-            </div>
-          </li>
-
-          <li class="item">
-            <div class="item-content">
-              <div class="item-title">
-                Item 3
-              </div>
-              <div class="item-accessory">
-                Label
-              </div>
-            </div>
-          </li>
-
-        </ul>
-
-        <div class="list-footer">
-          List Footer
-        </div>
-
-      </div>
-
-
-    </div>
-
-  </div>
-
-</div>
+  </ion-list>
+</ion-view>

src/components/item/test/basic/main.js

@@ -0,0 +1,21 @@
+import {bootstrap} from 'angular2/core'
+import {Component, Template, For} from 'angular2/angular2'
+import {Item, View, List} from 'ionic2/components'
+
+import {ItemPrimarySwipeButtons} from 'ionic2/components/item/item-swipe-buttons'
+
+@Component({
+  selector: '[ion-app]'
+})
+@Template({
+  url: 'main.html',
+  directives: [Item, View, List, For, ItemPrimarySwipeButtons]
+})
+class App{
+  constructor() {
+    this.items = [1, 2, 3, 4, 5]
+  }
+}
+
+bootstrap(App)
+