namespace BrickyEditor { export class BlockUI { public $editor : JQuery ; public $tools : JQuery ; public $block : JQuery ; private onSelect : ( ) => void ; public delete ( ) { this . $editor . remove ( ) ; } constructor ( $block , preview , actions , onSelect ? ) { this . $block = $block ; this . onSelect = onSelect ; if ( ! preview ) { this . buildEditorUI ( actions ) ; } } public toggleSelection ( isOn ) { this . $editor . toggleClass ( "bre-selected" , isOn ) ; } /**
         * Generate block editor wrapper with block tools.
         */ private buildEditorUI ( actions ) { this . $tools = $ ( '<div class="bre-block-tools bre-btn-deck"></div>' ) ; actions . forEach ( action => { var $btn = this . buildButton ( action ) ; this . $tools . append ( $btn ) ; } ) ; UI . initBtnDeck ( this . $tools ) ; this . $editor = $ ( '<div class="bre-block-wrapper"></div>' ) ; this . $editor . append ( this . $tools ) ; this . $editor . append ( this . $block ) ; this . $editor . hover ( ( ) => { this . $editor . addClass ( 'bre-active' ) ; } , ( ) => { this . $editor . removeClass ( 'bre-active' ) ; } ) ; this . $block . on ( 'click' , ( ) => this . onSelect ( ) ) ; } param action private buildButton ( action ) { let $el = $ ( `<button type="button" class="bre-btn"><i class="fa fa-${ action . icon }"></i></button>` ) ; if ( action . action ) { $el . on ( 'click' , ( ev ) => { action . action ( ) ; ev . stopPropagation ( ) ; return false ; } ) ; } return $el ; } } }