/*******************************************************************************
 * Copyright (c) 2017 QNX Software Systems and others.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *******************************************************************************/ import customElements from 'ui/customElements' ; export interface TabItem extends HTMLElement { tabContent : HTMLElement ; close ( ) : boolean ; } class TabElement extends HTMLElement { static tag = 'two-tab' ; tabItem : HTMLElement ; activateTab ( ) { this . tabItem . style . display = 'block' ; this . classList . add ( TabFolder . classActive ) ; } deactivateTab ( ) { this . tabItem . style . display = 'none' ; this . classList . remove ( TabFolder . classActive ) ; } connectedCallback ( ) { if ( ! this . tabItem ) { return ; } if ( ( < TabItem > this . tabItem ) . tabContent ) { this . appendChild ( ( < TabItem > this . tabItem ) . tabContent ) ; } else { let label = this . tabItem . getAttribute ( TabFolder . attributeLabel ) ; if ( ! label ) { label = this . tabItem . nodeName ; } const closable = this . tabItem . classList . contains ( TabFolder . classClosable ) ; const labelElement = document . createElement ( 'a' ) ; labelElement . href = '#' ; labelElement . textContent = label ; this . appendChild ( labelElement ) ; if ( closable ) { const close = document . createElement ( 'span' ) ; this . classList . add ( 'fa' , 'fa-close' ) ; this . appendChild ( close ) ; } } this . deactivateTab ( ) ; } } customElements . define ( TabElement . tag , TabElement ) ; export default class TabFolder extends HTMLElement { static tag = 'two-tab-folder' ; static attributeLabel = 'two-class-label' ; static classClosable = 'two-tab-closable' ; static classActive = 'two-tab-active' ; static classHeader = 'two-tab-header' ; currentTab : TabElement ; private addItem ( element ) { const header = this . children [ 0 ] ; const tab = new TabElement ( ) ; tab . tabItem = element ; tab . addEventListener ( 'click' , e => { this . activateTab ( tab ) ; } ) ; header . appendChild ( tab ) ; element . style . height = '100%' ; if ( header . children . length == 1 || element . classList . contains ( TabFolder . classActive ) ) { this . activateTab ( tab ) ; } } private activateTab ( tab ) { if ( this . currentTab ) { this . currentTab . deactivateTab ( ) ; } this . currentTab = tab ; tab . activateTab ( ) ; } activateItem ( item ) { const header = this . querySelector ( `.${ TabFolder . classHeader }` ) ; for ( let i = 0 ; i < header . children . length ; i ++ ) { const tab = < TabElement > header . children [ i ] ; if ( tab . tabItem === item ) { this . activateTab ( tab ) ; return ; } } } connectedCallback ( ) { const header = document . createElement ( 'ul' ) ; header . classList . add ( TabFolder . classHeader ) ; if ( this . children . length > 0 ) { document . insertBefore ( header , this . children [ 0 ] ) ; } else { this . appendChild ( header ) ; } for ( let i = 1 ; i < this . children . length ; i ++ ) { if ( this . children [ i ] instanceof HTMLElement ) { this . addItem ( < HTMLElement > this . children [ i ] ) ; } } const observer = new MutationObserver ( mutations => { mutations . forEach ( mutation => { for ( let i = 0 ; i < mutation . addedNodes . length ; i ++ ) { if ( mutation . addedNodes [ i ] instanceof HTMLElement ) { this . addItem ( < HTMLElement > mutation . addedNodes [ i ] ) ; } } } ) ; } ) ; observer . observe ( this , { childList : true } ) ; } } customElements . define ( TabFolder . tag , TabFolder ) ;