import { Injectable } from 'angular2/core' ; import { FlexItemFactory } from '../services/FlexItemFactory' ; import { containerOptions , containerDefaults } from '../utils/data' ; @ Injectable ( ) export class FlexContainer { public list : any = [ ] ; public styles : any ; public styleOptions : any ; constructor ( private _flexItemFactory ) { this . styles = containerDefaults ; this . styleOptions = containerOptions ; } createFlexItem ( ) { if ( this . list . length === 0 ) { this . hideMasthead ( ) ; } let newItem = this . _flexItemFactory . create ( ) ; newItem [ 'index' ] = this . list . length ; this . list . push ( newItem ) ; } removeItem ( idx ? ) { let list = this . list ; if ( idx ) { list . pop ( idx ) ; } else { list . pop ( ) ; } } removeAll ( ) { this . list = [ ] ; } resizeContainer ( ) { let notEmpty = this . list . length > 0 ; if ( notEmpty ) { this . collapseContainer ( ) ; } } collapseContainer ( ) { var self = this ; setTimeout ( function ( ) { let width = self . styles . width ; let cur = Number ( width . substr ( 0 , width . length - 1 ) ) ; let bottom = 45 ; if ( cur > bottom ) { self . styles . width = cur - .25 + '%' ; self . collapseContainer ( ) ; } else { self . expandContainer ( ) ; } } , 5 ) ; } expandContainer ( ) { var self = this ; setTimeout ( function ( ) { let width = self . styles . width ; let cur = Number ( width . substr ( 0 , width . length - 1 ) ) ; let top = 100 ; if ( cur < top ) { self . styles . width = cur + .25 + '%' ; self . expandContainer ( ) ; } } , 5 ) ; } hideMasthead ( ) { document . querySelector ( '.masthead' ) . className += ' hidden' ; } }