refactor(item): restructure item component to separate modules

restructure item component to separate modules

src/components/item/item-content.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+
+/**
+ * @private
+ */
+@Directive({
+  selector: 'ion-item,[ion-item]',
+  host: {
+    'class': 'item-block'
+  }
+})
+export class ItemContent { }

src/components/item/item-divider.ts

@@ -0,0 +1,41 @@
+import { Directive, ElementRef, Input, Renderer } from '@angular/core';
+
+import { Config } from '../../config/config';
+import { Form } from '../../util/form';
+import { Ion } from '../ion';
+
+/**
+ * @private
+ */
+@Directive({
+  selector: 'ion-item-divider',
+  host: {
+    'class': 'item-divider'
+  }
+})
+export class ItemDivider extends Ion {
+
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
+   */
+  @Input()
+  set color(val: string) {
+    this._setColor(val);
+  }
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
+  */
+  @Input()
+  set mode(val: string) {
+    this._setMode(val);
+  }
+
+  constructor(form: Form, config: Config, elementRef: ElementRef, renderer: Renderer) {
+    super(config, elementRef, renderer, 'item-divider');
+  }
+}

src/components/item/item-group.ts

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+
+/**
+  * @private
+  */
+@Directive({
+  selector: 'ion-item-group'
+})
+export class ItemGroup { }

src/components/item/item-options.ts

@@ -0,0 +1,60 @@
+import { Directive, ElementRef, EventEmitter, Input, Output, Renderer } from '@angular/core';
+
+import { isPresent} from '../../util/util';
+import { ITEM_SIDE_FLAG_LEFT, ITEM_SIDE_FLAG_RIGHT, ItemSliding } from './item-sliding';
+
+/**
+ * @name ItemOptions
+ * @description
+ * The option buttons for an `ion-item-sliding`. These buttons can be placed either on the left or right side.
+ * You can combine the `(ionSwipe)` event plus the `expandable` directive to create a full swipe action for the item.
+ *
+ * @usage
+ *
+ * ```html
+ * <ion-item-sliding>
+ *   <ion-item>
+ *     Item 1
+ *   </ion-item>
+ *   <ion-item-options side="right" (ionSwipe)="saveItem(item)">
+ *     <button ion-button expandable (click)="saveItem(item)">
+ *       <ion-icon name="star"></ion-icon>
+ *     </button>
+ *   </ion-item-options>
+ * </ion-item-sliding>
+ *```
+ */
+@Directive({
+  selector: 'ion-item-options',
+})
+export class ItemOptions {
+  /**
+   * @input {string} The side the option button should be on. Defaults to `"right"`.
+   * If you have multiple `ion-item-options`, a side must be provided for each.
+   */
+  @Input() side: string;
+
+  /**
+   * @output {event} Emitted when the item has been fully swiped.
+   */
+  @Output() ionSwipe: EventEmitter<ItemSliding> = new EventEmitter<ItemSliding>();
+
+  constructor(private _elementRef: ElementRef, private _renderer: Renderer) {}
+
+  /**
+   * @private
+   */
+  getSides(): number {
+    if (isPresent(this.side) && this.side === 'left') {
+      return ITEM_SIDE_FLAG_LEFT;
+    }
+    return ITEM_SIDE_FLAG_RIGHT;
+  }
+
+  /**
+   * @private
+   */
+  width() {
+    return this._elementRef.nativeElement.offsetWidth;
+  }
+}

src/components/item/item-reorder.ts

@@ -1,9 +1,8 @@
-import { Component, Directive, ElementRef, EventEmitter, HostListener, Input, NgZone, Renderer, Optional, Output } from '@angular/core';
+import { Directive, ElementRef, EventEmitter, Input, NgZone, Renderer, Optional, Output } from '@angular/core';
 
 import { Content } from '../content/content';
 import { DomController } from '../../platform/dom-controller';
 import { isTrueProperty, reorderArray } from '../../util/util';
-import { findReorderItem } from './item-reorder-util';
 import { ItemReorderGestureDelegate, ItemReorderGesture } from '../item/item-reorder-gesture';
 import { Platform } from '../../platform/platform';
 
@@ -301,28 +300,3 @@ export class ItemReorder implements ItemReorderGestureDelegate {
     return this._element;
   }
 }
-
-/**
- * @private
- */
-@Component({
-  selector: 'ion-reorder',
-  template: `<ion-icon name="reorder"></ion-icon>`
-})
-export class Reorder {
-  constructor(
-    private elementRef: ElementRef) {
-    elementRef.nativeElement['$ionComponent'] = this;
-  }
-
-  getReorderNode(): HTMLElement {
-    return findReorderItem(this.elementRef.nativeElement, null);
-  }
-
-  @HostListener('click', ['$event'])
-  onClick(ev: UIEvent) {
-    // Stop propagation if click event reaches ion-reorder
-    ev.preventDefault();
-    ev.stopPropagation();
-  }
-}

src/components/item/item-sliding-gesture.ts

@@ -1,7 +1,7 @@
 import { ItemSliding } from './item-sliding';
 import { List } from '../list/list';
 import { DomController } from '../../platform/dom-controller';
-import { GestureController, GesturePriority, GESTURE_ITEM_SWIPE } from '../../gestures/gesture-controller';
+import { GestureController, GESTURE_PRIORITY_SLIDING_ITEM, GESTURE_ITEM_SWIPE } from '../../gestures/gesture-controller';
 import { PanGesture } from '../../gestures/drag-gesture';
 import { Platform } from '../../platform/platform';
 import { pointerCoord } from '../../util/dom';
@@ -32,7 +32,7 @@ export class ItemSlidingGesture extends PanGesture {
       domController: domCtrl,
       gesture: gestureCtrl.createGesture({
         name: GESTURE_ITEM_SWIPE,
-        priority: GesturePriority.SlidingItem,
+        priority: GESTURE_PRIORITY_SLIDING_ITEM,
         disableScroll: true
       })
     });

src/components/item/item-sliding.ts

@@ -1,80 +1,22 @@
-import { ChangeDetectionStrategy, Component, ContentChildren, ContentChild, Directive, ElementRef, EventEmitter, Input, Optional, Output, QueryList, Renderer, ViewEncapsulation, NgZone } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChildren, ContentChild, ElementRef, EventEmitter, Optional, Output, QueryList, Renderer, ViewEncapsulation, NgZone } from '@angular/core';
 
-import { isPresent, swipeShouldReset, assert } from '../../util/util';
+import { swipeShouldReset, assert } from '../../util/util';
 import { Item } from './item';
 import { List } from '../list/list';
 import { Platform } from '../../platform/platform';
 import { DomController } from '../../platform/dom-controller';
+import { ItemOptions } from './item-options';
 
 const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
 
-export const enum ItemSideFlags {
+export const ITEM_SIDE_FLAG_NONE = 0;
-  None = 0,
+export const ITEM_SIDE_FLAG_LEFT = 1 << 0;
-  Left = 1 << 0,
+export const ITEM_SIDE_FLAG_RIGHT = 1 << 1;
-  Right = 1 << 1,
+export const ITEM_SIDE_FLAG_BOTH = ITEM_SIDE_FLAG_LEFT | ITEM_SIDE_FLAG_RIGHT;
-  Both = Left | Right
-}
 
-/**
- * @name ItemOptions
- * @description
- * The option buttons for an `ion-item-sliding`. These buttons can be placed either on the left or right side.
- * You can combine the `(ionSwipe)` event plus the `expandable` directive to create a full swipe action for the item.
- *
- * @usage
- *
- * ```html
- * <ion-item-sliding>
- *   <ion-item>
- *     Item 1
- *   </ion-item>
- *   <ion-item-options side="right" (ionSwipe)="saveItem(item)">
- *     <button ion-button expandable (click)="saveItem(item)">
- *       <ion-icon name="star"></ion-icon>
- *     </button>
- *   </ion-item-options>
- * </ion-item-sliding>
- *```
- */
-@Directive({
-  selector: 'ion-item-options',
-})
-export class ItemOptions {
-  /**
-   * @input {string} The side the option button should be on. Defaults to `"right"`.
-   * If you have multiple `ion-item-options`, a side must be provided for each.
-   */
-  @Input() side: string;
 
-  /**
+const enum SlidingState {
-   * @output {event} Emitted when the item has been fully swiped.
-   */
-  @Output() ionSwipe: EventEmitter<ItemSliding> = new EventEmitter<ItemSliding>();
-
-  constructor(private _elementRef: ElementRef, private _renderer: Renderer) {}
-
-  /**
-   * @private
-   */
-  getSides(): ItemSideFlags {
-    if (isPresent(this.side) && this.side === 'left') {
-      return ItemSideFlags.Left;
-    } else {
-      return ItemSideFlags.Right;
-    }
-  }
-
-  /**
-   * @private
-   */
-  width() {
-    return this._elementRef.nativeElement.offsetWidth;
-  }
-
-}
-
-export const enum SlidingState {
   Disabled = 1 << 1,
   Enabled = 1 << 2,
   Right = 1 << 3,
@@ -183,7 +125,7 @@ export class ItemSliding {
   private _startX: number = 0;
   private _optsWidthRightSide: number = 0;
   private _optsWidthLeftSide: number = 0;
-  private _sides: ItemSideFlags;
+  private _sides: number;
   private _tmr: number = null;
   private _leftOptions: ItemOptions;
   private _rightOptions: ItemOptions;
@@ -239,7 +181,7 @@ export class ItemSliding {
 
     for (var item of itemOptions.toArray()) {
       var side = item.getSides();
-      if (side === ItemSideFlags.Left) {
+      if (side === ITEM_SIDE_FLAG_LEFT) {
         this._leftOptions = item;
       } else {
         this._rightOptions = item;
@@ -299,10 +241,10 @@ export class ItemSliding {
     let openAmount = (this._startX - x);
 
     switch (this._sides) {
-      case ItemSideFlags.Right: openAmount = Math.max(0, openAmount); break;
+      case ITEM_SIDE_FLAG_RIGHT: openAmount = Math.max(0, openAmount); break;
-      case ItemSideFlags.Left: openAmount = Math.min(0, openAmount); break;
+      case ITEM_SIDE_FLAG_LEFT: openAmount = Math.min(0, openAmount); break;
-      case ItemSideFlags.Both: break;
+      case ITEM_SIDE_FLAG_BOTH: break;
-      case ItemSideFlags.None: return;
+      case ITEM_SIDE_FLAG_NONE: return;
       default: assert(false, 'invalid ItemSideFlags value'); break;
     }
 

src/components/item/item.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Directive, ElementRef, Input, QueryList, Renderer, Optional, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ElementRef, Input, QueryList, Renderer, Optional, ViewChild, ViewEncapsulation } from '@angular/core';
 
 import { Button } from '../button/button';
 import { Config } from '../../config/config';
@@ -451,60 +451,3 @@ export class Item extends Ion {
     });
   }
 }
-
-/**
- * @private
- */
-@Directive({
-  selector: 'ion-item-divider',
-  host: {
-    'class': 'item-divider'
-  }
-})
-export class ItemDivider extends Ion {
-
-  /**
-   * @input {string} The color to use from your Sass `$colors` map.
-   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
-   */
-  @Input()
-  set color(val: string) {
-    this._setColor(val);
-  }
-
-  /**
-   * @input {string} The mode determines which platform styles to use.
-   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
-   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
-  */
-  @Input()
-  set mode(val: string) {
-    this._setMode(val);
-  }
-
-  constructor(form: Form, config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer, 'item-divider');
-  }
-
-}
-
-/**
- * @private
- */
-@Directive({
-  selector: 'ion-item,[ion-item]',
-  host: {
-    'class': 'item-block'
-  }
-})
-export class ItemContent { }
-
-
-/**
-  * @private
-  */
-@Directive({
-  selector: 'ion-item-group'
-})
-export class ItemGroup { }

src/components/item/reorder.ts

@@ -0,0 +1,28 @@
+import { Component, ElementRef, HostListener } from '@angular/core';
+
+import { findReorderItem } from './item-reorder-util';
+
+/**
+ * @private
+ */
+@Component({
+  selector: 'ion-reorder',
+  template: `<ion-icon name="reorder"></ion-icon>`
+})
+export class Reorder {
+  constructor(
+    private elementRef: ElementRef) {
+    elementRef.nativeElement['$ionComponent'] = this;
+  }
+
+  getReorderNode(): HTMLElement {
+    return findReorderItem(this.elementRef.nativeElement, null);
+  }
+
+  @HostListener('click', ['$event'])
+  onClick(ev: UIEvent) {
+    // Stop propagation if click event reaches ion-reorder
+    ev.preventDefault();
+    ev.stopPropagation();
+  }
+}