add util/dom

src/components.js

@@ -1,7 +1,11 @@
 // export all components as array
 
-import {Aside} from 'ionic2/components/aside/aside';
-
-export let ionicComponents = [
-  Aside,
-];
+export * from 'ionic2/components/aside/aside'
+export * from 'ionic2/components/checkbox/checkbox'
+export * from 'ionic2/components/content/content'
+export * from 'ionic2/components/icon/icon'
+export * from 'ionic2/components/item/item'
+export * from 'ionic2/components/list/list'
+export * from 'ionic2/components/nav-view/nav-view'
+export * from 'ionic2/components/toolbar/toolbar'
+export * from 'ionic2/components/view/view'

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)
+

src/util.js

@@ -1,82 +1,4 @@
-export function noop() {}
+import * as domUtil from 'ionic2/util/dom'
+export const dom = domUtil
 
-export function clamp(min, n, max) {
-  return Math.max(min, Math.min(n, max));
-}
-
-export function extend(dest) {
-  for (var i = 1, ii = arguments.length; i < ii; i++) {
-    var source = arguments[i] || {};
-    for (var key in source) {
-      if (source.hasOwnProperty(key)) {
-        dest[key] = source[key];
-      }
-    }
-  }
-  return dest;
-}
-
-export function defaults(dest) {
-  for (let i = arguments.length - 1; i >= 1; i--) {
-    let source = arguments[i] || {};
-    for (let key in source) {
-      if (source.hasOwnProperty(key) && !dest.hasOwnProperty(key)) {
-        dest[key] = source[key];
-      }
-    }
-  }
-  return dest;
-}
-
-export const isString = val => typeof val === 'string'
-export const isFunction = val => typeof val === 'function'
-export const isDefined = val => typeof val === 'undefined'
-export const isObject = val => typeof val === 'object'
-export const isArray = Array.isArray
-
-export function pascalCaseToDashCase(str = '') {
-  return str.charAt(0).toLowerCase() + str.substring(1).replace(/[A-Z]/g, match => {
-    return '-' + match.toLowerCase()
-  })
-}
-
-export let array = {
-  unique(array) {
-    return array.filter((value, index) => {
-      return array.indexOf(value) === index
-    })
-  }
-}
-
-export class Log {
-  static log(...args) {
-    console.log.apply(console, args)
-  }
-  static info(...args) {
-    console.info.apply(console, args)
-  }
-  static dir(...args) {
-    console.dir.apply(console, args)
-  }
-  static warn(...args) {
-    console.warn.apply(console, args)
-  }
-  static error(...args) {
-    console.error.apply(console, args)
-  }
-}
-
-export function readQueryParams() {
-  var queryParams = {}
-  const startIndex = window.location.href.indexOf('?')
-  if (startIndex !== -1) {
-    const queries = window.location.href.slice(startIndex + 1).split('&')
-    if (queries.length) {
-      queries.forEach((param) => {
-        var split = param.split('=')
-        queryParams[split[0]] = split[1]
-      })
-    }
-  }
-  return queryParams
-}
+export * from 'ionic2/util/util'

src/util/dom.js

@@ -0,0 +1,33 @@
+
+const nativeRaf= window.requestAnimationFrame ||
+   window.webkitRequestAnimationFrame ||
+   window.mozRequestAnimationFrame
+const nativeCancelRaf = window.cancelAnimationFrame ||
+  window.webkitCancelAnimationFrame ||
+  window.webkitCancelRequestAnimationFrame
+
+export const raf = nativeRaf || function(callback) { 
+  return window.setTimeout(callback, 16.6667)
+}
+export const rafCancel = nativeRaf ? nativeCancelRaf : function(id) {
+  return window.cancelTimeout(id)
+}
+
+export function rafPromise() {
+  return new Promise(resolve => raf(resolve))
+}
+
+
+// We only need to test for webkit in our supported browsers. Webkit is the only browser still
+// using prefixes.
+// Code adapted from angular-animate.js
+export let css = {}
+if (window.ontransitionend === undefined && window.onwebkittransitionend !== undefined) {
+  css.prefix = 'webkit'
+  css.transition = 'webkitTransition'
+  css.transitionEnd = 'webkitTransitionEnd transitionend'
+} else {
+  css.prefix = ''
+  css.transition = 'transition'
+  css.transitionEnd = 'tranistionend'
+}

src/util/util.js

@@ -0,0 +1,71 @@
+export function noop() {}
+
+export function clamp(min, n, max) {
+  return Math.max(min, Math.min(n, max));
+}
+
+export function extend(dest) {
+  for (var i = 1, ii = arguments.length; i < ii; i++) {
+    var source = arguments[i] || {};
+    for (var key in source) {
+      if (source.hasOwnProperty(key)) {
+        dest[key] = source[key];
+      }
+    }
+  }
+  return dest;
+}
+
+export function defaults(dest) {
+  for (let i = arguments.length - 1; i >= 1; i--) {
+    let source = arguments[i] || {};
+    for (let key in source) {
+      if (source.hasOwnProperty(key) && !dest.hasOwnProperty(key)) {
+        dest[key] = source[key];
+      }
+    }
+  }
+  return dest;
+}
+
+export const isString = val => typeof val === 'string'
+export const isFunction = val => typeof val === 'function'
+export const isDefined = val => typeof val === 'undefined'
+export const isObject = val => typeof val === 'object'
+export const isArray = Array.isArray
+
+export function pascalCaseToDashCase(str = '') {
+  return str.charAt(0).toLowerCase() + str.substring(1).replace(/[A-Z]/g, match => {
+    return '-' + match.toLowerCase()
+  })
+}
+
+export class Log {
+  static log(...args) {
+    console.log.apply(console, args)
+  }
+  static info(...args) {
+    console.info.apply(console, args)
+  }
+  static warn(...args) {
+    console.warn.apply(console, args)
+  }
+  static error(...args) {
+    console.error.apply(console, args)
+  }
+}
+
+export function readQueryParams() {
+  var queryParams = {}
+  const startIndex = window.location.href.indexOf('?')
+  if (startIndex !== -1) {
+    const queries = window.location.href.slice(startIndex + 1).split('&')
+    if (queries.length) {
+      queries.forEach((param) => {
+        var split = param.split('=')
+        queryParams[split[0]] = split[1]
+      })
+    }
+  }
+  return queryParams
+}