import { Directive , ElementRef , EventEmitter , Input , NgZone , Optional , Output , Renderer } from '@angular/core' ; import { Content } from '../content/content' ; import { DomController } from '../../platform/dom-controller' ; import { isTrueProperty , reorderArray } from '../../util/util' ; import { ItemReorderGesture , ItemReorderGestureDelegate } from './item-reorder-gesture' ; import { Platform } from '../../platform/platform' ; export class ReorderIndexes { constructor ( public from , public to ) { } applyTo ( array ) { reorderArray ( array , this ) ; } } name description usage demo see {@link /docs/components#lists List Component Docs} see {@link ../../list/List List API Docs} see {@link ../Item Item API Docs} @ Directive ( { selector : 'ion-list[reorder],ion-item-group[reorder]' , host : { '[class.reorder-enabled]' : '_enableReorder' , '[class.reorder-visible]' : '_visibleReorder' , '[class.reorder-side-start]' : '_isStart' } } ) export class ItemReorder implements ItemReorderGestureDelegate { _enableReorder : boolean = false ; _visibleReorder : boolean = false ; _isStart : boolean = false ; _reorderGesture : ItemReorderGesture ; _lastToIndex : number = - 1 ; _element : HTMLElement ; output @ Output ( ) ionItemReorder : EventEmitter < ReorderIndexes > = new EventEmitter < ReorderIndexes > ( ) ; input @ Input ( 'side' ) set side ( side ) { this . _isStart = side === 'start' ; } constructor ( private _plt , private _dom , elementRef , private _rendered , private _zone , @ Optional ( ) private _content ) { this . _element = elementRef . nativeElement ; } hidden ngOnDestroy ( ) { this . _element = null ; this . _reorderGesture && this . _reorderGesture . destroy ( ) ; } hidden @ Input ( ) get reorder ( ) : boolean { return this . _enableReorder ; } set reorder ( val ) { let enabled = isTrueProperty ( val ) ; if ( ! enabled && this . _reorderGesture ) { this . _reorderGesture . destroy ( ) ; this . _reorderGesture = null ; this . _visibleReorder = false ; setTimeout ( ( ) => this . _enableReorder = false , 400 ) ; } else if ( enabled && ! this . _reorderGesture ) { console . debug ( 'enableReorderItems' ) ; this . _reorderGesture = new ItemReorderGesture ( this . _plt , this ) ; this . _enableReorder = true ; this . _dom . write ( ( ) => { this . _zone . run ( ( ) => { this . _visibleReorder = true ; } ) ; } , 16 ) ; } } _reorderPrepare ( ) { let ele = this . _element ; let children = ele . children ; for ( let i = 0 , ilen = children . length ; i < ilen ; i ++ ) { var child = children [ i ] ; child . $ionIndex = i ; child . $ionReorderList = ele ; } } _reorderStart ( ) { this . setElementClass ( 'reorder-list-active' , true ) ; } _reorderEmit ( fromIndex , toIndex ) { this . _reorderReset ( ) ; if ( fromIndex !== toIndex ) { this . _zone . run ( ( ) => { const indexes = new ReorderIndexes ( fromIndex , toIndex ) ; this . ionItemReorder . emit ( indexes ) ; } ) ; } } _scrollContent ( scroll ) { const scrollTop = this . _content . scrollTop + scroll ; if ( scroll !== 0 ) { this . _content . scrollTo ( 0 , scrollTop , 0 ) ; } return scrollTop ; } _reorderReset ( ) { let children = this . _element . children ; let len = children . length ; this . setElementClass ( 'reorder-list-active' , false ) ; let transform = this . _plt . Css . transform ; for ( let i = 0 ; i < len ; i ++ ) { ( < any > children [ i ] ) . style [ transform ] = '' ; } this . _lastToIndex = - 1 ; } _reorderMove ( fromIndex , toIndex , itemHeight ) { if ( this . _lastToIndex === - 1 ) { this . _lastToIndex = fromIndex ; } let lastToIndex = this . _lastToIndex ; this . _lastToIndex = toIndex ; /********* DOM READ ********** */ let children = this . _element . children ; /********* DOM WRITE ********* */ let transform = this . _plt . Css . transform ; if ( toIndex >= lastToIndex ) { for ( let i = lastToIndex ; i <= toIndex ; i ++ ) { if ( i !== fromIndex ) { ( < any > children [ i ] ) . style [ transform ] = ( i > fromIndex ) ? `translateY(${ - itemHeight }px)` : '' ; } } } if ( toIndex <= lastToIndex ) { for ( let i = toIndex ; i <= lastToIndex ; i ++ ) { if ( i !== fromIndex ) { ( < any > children [ i ] ) . style [ transform ] = ( i < fromIndex ) ? `translateY(${ itemHeight }px)` : '' ; } } } } hidden setElementClass ( classname , add ) { this . _rendered . setElementClass ( this . _element , classname , add ) ; } hidden getNativeElement ( ) { return this . _element ; } }