import { EventHub } from '../event' ; export class Indicator { private indicatorElement : HTMLElement ; static toggleIndicator ( indicatorElement , show ) { if ( ! indicatorElement ) return ; indicatorElement . classList . toggle ( 'show' , show ) ; } static makeIndicatorElement ( d ) { const _div = d . createElement ( 'div' ) ; _div . classList . add ( 'loading-indicator' ) ; _div . innerHTML = `<div class="loading-indicator-container"><span>Loading</span></div>` ; return _div ; } constructor ( eventHub ) { this . init ( ) ; eventHub . listen ( 'container-will-change' , ( ) => this . willChange ( ) ) ; eventHub . listen ( 'container-changed' , ( ) => this . changed ( ) ) ; } willChange ( ) { Indicator . toggleIndicator ( this . indicatorElement , true ) ; } changed ( ) { Indicator . toggleIndicator ( this . indicatorElement , false ) ; } private init ( ) { const main = document . querySelector ( '.main' ) ; this . indicatorElement = Indicator . makeIndicatorElement ( document ) ; main . appendChild ( this . indicatorElement ) ; } }