diff --git a/src/components/item/item-content.ts b/src/components/item/item-content.ts new file mode 100644 index 0000000000..672482eb03 --- /dev/null +++ b/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 { } diff --git a/src/components/item/item-divider.ts b/src/components/item/item-divider.ts new file mode 100644 index 0000000000..9c568117da --- /dev/null +++ b/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'); + } +} diff --git a/src/components/item/item-group.ts b/src/components/item/item-group.ts new file mode 100644 index 0000000000..60ad3028f1 --- /dev/null +++ b/src/components/item/item-group.ts @@ -0,0 +1,9 @@ +import { Directive } from '@angular/core'; + +/** + * @private + */ +@Directive({ + selector: 'ion-item-group' +}) +export class ItemGroup { } diff --git a/src/components/item/item-options.ts b/src/components/item/item-options.ts new file mode 100644 index 0000000000..784fe71b56 --- /dev/null +++ b/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 + * + * + * Item 1 + * + * + * + * + * + *``` + */ +@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 = new EventEmitter(); + + 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; + } +} diff --git a/src/components/item/item-reorder.ts b/src/components/item/item-reorder.ts index 158849f67a..4b952df69b 100644 --- a/src/components/item/item-reorder.ts +++ b/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: `` -}) -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(); - } -} diff --git a/src/components/item/item-sliding-gesture.ts b/src/components/item/item-sliding-gesture.ts index 853830caa4..a1d3cc4037 100644 --- a/src/components/item/item-sliding-gesture.ts +++ b/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 }) }); diff --git a/src/components/item/item-sliding.ts b/src/components/item/item-sliding.ts index 09d6d9f436..a9c42d0fa8 100644 --- a/src/components/item/item-sliding.ts +++ b/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 { - None = 0, - Left = 1 << 0, - Right = 1 << 1, - Both = Left | Right -} +export const ITEM_SIDE_FLAG_NONE = 0; +export const ITEM_SIDE_FLAG_LEFT = 1 << 0; +export const ITEM_SIDE_FLAG_RIGHT = 1 << 1; +export const ITEM_SIDE_FLAG_BOTH = ITEM_SIDE_FLAG_LEFT | ITEM_SIDE_FLAG_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 - * - * - * Item 1 - * - * - * - * - * - *``` - */ -@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 = new EventEmitter(); - - 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 { +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 ItemSideFlags.Left: openAmount = Math.min(0, openAmount); break; - case ItemSideFlags.Both: break; - case ItemSideFlags.None: return; + case ITEM_SIDE_FLAG_RIGHT: openAmount = Math.max(0, openAmount); break; + case ITEM_SIDE_FLAG_LEFT: openAmount = Math.min(0, openAmount); break; + case ITEM_SIDE_FLAG_BOTH: break; + case ITEM_SIDE_FLAG_NONE: return; default: assert(false, 'invalid ItemSideFlags value'); break; } diff --git a/src/components/item/item.ts b/src/components/item/item.ts index 3d52d4d671..d3cc977e17 100644 --- a/src/components/item/item.ts +++ b/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 { } diff --git a/src/components/item/reorder.ts b/src/components/item/reorder.ts new file mode 100644 index 0000000000..b6793bb935 --- /dev/null +++ b/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: `` +}) +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(); + } +}