import { ContentChildren , Directive , ElementRef , EventEmitter , Input , NgZone , Output , QueryList , Renderer , forwardRef } from '@angular/core' ; import { Ion } from '../ion' ; import { assert , isTrueProperty } from '../../util/util' ; import { Config } from '../../config/config' ; import { Platform } from '../../platform/platform' ; const QUERY = { xs : '(min-width: 0px)' , sm : '(min-width: 576px)' , md : '(min-width: 768px)' , lg : '(min-width: 992px)' , xl : '(min-width: 1200px)' , never : '' } ; hidden export abstract class RootNode { abstract getElementRef ( ) ; abstract initPane ( ) ; abstract paneChanged ? ( visible ) ; } name description usage @ Directive ( { selector : 'ion-split-pane' , providers : [ { provide : RootNode , useExisting : forwardRef ( ( ) => SplitPane ) } ] } ) export class SplitPane extends Ion implements RootNode { _init : boolean = false ; _visible : boolean = false ; _isEnabled : boolean = true ; _rmListener : any ; _mediaQuery : string | boolean = QUERY [ 'md' ] ; _children : RootNode [ ] ; hidden sideContent : RootNode = null ; hidden mainContent : RootNode = null ; hidden @ ContentChildren ( RootNode , { descendants : false } ) set _setchildren ( query ) { const children = this . _children = query . filter ( ( child => child !== this ) ) ; children . forEach ( child => { var isMain = child . initPane ( ) ; this . _setPaneCSSClass ( child . getElementRef ( ) , isMain ) ; } ) ; } input @ Input ( ) set when ( query ) { if ( typeof query === 'boolean' ) { this . _mediaQuery = query ; } else { const defaultQuery = QUERY [ query ] ; this . _mediaQuery = ( defaultQuery ) ? defaultQuery : query ; } this . _update ( ) ; } get when ( ) : string | boolean { return this . _mediaQuery ; } input @ Input ( ) set enabled ( val ) { this . _isEnabled = isTrueProperty ( val ) ; this . _update ( ) ; } get enabled ( ) : boolean { return this . _isEnabled ; } output @ Output ( ) ionChange : EventEmitter < SplitPane > = new EventEmitter < SplitPane > ( ) ; constructor ( private _zone , private _plt , config , elementRef , renderer ) { super ( config , elementRef , renderer , 'split-pane' ) ; } hidden _register ( node , isMain , callback ) { if ( this . getElementRef ( ) . nativeElement !== node . getElementRef ( ) . nativeElement . parentNode ) { return false ; } this . _setPaneCSSClass ( node . getElementRef ( ) , isMain ) ; if ( callback ) { this . ionChange . subscribe ( callback ) ; } if ( isMain ) { if ( this . mainContent ) { console . error ( 'split pane: main content was already set' ) ; } this . mainContent = node ; } return true ; } hidden ngAfterViewInit ( ) { this . _init = true ; this . _update ( ) ; } hidden _update ( ) { if ( ! this . _init ) { return ; } this . _rmListener && this . _rmListener ( ) ; this . _rmListener = null ; if ( ! this . _isEnabled ) { this . _setVisible ( false ) ; return ; } const query = this . _mediaQuery ; if ( typeof query === 'boolean' ) { this . _setVisible ( query ) ; return ; } if ( query && query . length > 0 ) { const callback = ( query ) => this . _setVisible ( query . matches ) ; const mediaList = this . _plt . win ( ) . matchMedia ( query ) ; mediaList . addListener ( callback ) ; this . _setVisible ( mediaList . matches ) ; this . _rmListener = function ( ) { mediaList . removeListener ( callback ) ; } ; } else { this . _setVisible ( false ) ; } } hidden _updateChildren ( ) { this . mainContent = null ; this . sideContent = null ; const visible = this . _visible ; this . _children . forEach ( child => child . paneChanged && child . paneChanged ( visible ) ) ; } hidden _setVisible ( visible ) { if ( this . _visible === visible ) { return ; } this . _visible = visible ; this . setElementClass ( 'split-pane-visible' , visible ) ; this . _updateChildren ( ) ; this . _zone . run ( ( ) => { this . ionChange . emit ( this ) ; } ) ; } hidden isVisible ( ) { return this . _visible ; } hidden setElementClass ( className , add ) { this . _renderer . setElementClass ( this . _elementRef . nativeElement , className , add ) ; } hidden _setPaneCSSClass ( elementRef , isMain ) { const ele = elementRef . nativeElement ; this . _renderer . setElementClass ( ele , 'split-pane-main' , isMain ) ; this . _renderer . setElementClass ( ele , 'split-pane-side' , ! isMain ) ; } hidden ngOnDestroy ( ) { assert ( this . _rmListener , 'at this point _rmListerner should be valid' ) ; this . _rmListener && this . _rmListener ( ) ; this . _rmListener = null ; } hidden initPane ( ) { return true ; } }