import { BackToTop } from './plugins/back' ; import { Highlight } from './plugins/highlight' ; import { Indicator } from './plugins/indicator' ; import { Responsive } from './plugins/responsive' ; const saveToDefaultRouter = ( link ) : void => { if ( window . __paper . router . default ) return ; window . __paper . router . default = link ; } ; const removeMarkdownSuffix = ( name ) => name . replace ( '.md' , '' ) ; const makeList = async ( catalogs , path , d ) => { const ul = d . createElement ( 'ul' ) ; for ( const unit of catalogs ) { const li = d . createElement ( 'li' ) ; const routerLink = ( unit . showPath + unit . name ) . replace ( path , '' ) ; if ( unit . children && unit . children . length > 0 ) { li . innerHTML = `<p class="chapter dir"><a>${ removeMarkdownSuffix ( unit . name ) }</a></p>` ; li . classList . add ( 'sub-list-container' ) ; const subList = await makeList ( unit . children , path , d ) ; subList . classList . add ( 'sub-list' ) ; li . appendChild ( subList ) ; } else { saveToDefaultRouter ( routerLink ) ; li . innerHTML = `<p class="chapter link"><a href="#${ routerLink }">${ removeMarkdownSuffix ( unit . name ) }</a></p>` ; } ul . appendChild ( li ) ; } return ul ; } ; const makeTitle = ( config ) : HTMLElement => { document . title = config . title ; const title = document . createElement ( 'div' ) ; title . classList . add ( 'side-title' ) ; title . innerHTML = `<h2>${ config . title }</h2>` ; return title ; } ; export const side = async ( catalogs , config ) : Promise < HTMLElement [ ] > => { const title = makeTitle ( config ) ; const list = await makeList ( catalogs , config . __user_source_path , document ) ; list . classList . add ( 'side-list' ) ; return [ title , list ] ; } ; const initSubList = async ( config ) => { const containers = document . querySelectorAll ( '.sub-list-container' ) ; const subList = document . querySelectorAll ( '.sub-list' ) ; const subListArr = ( < Array < Element > > Array . from ( subList ) ) ; let baseHeight = 37 ; subListArr . some ( sub => { const li = sub . querySelector ( 'li' ) ; if ( li && li . offsetHeight ) { baseHeight = li . offsetHeight ; } return ! ! li ; } ) ; const handle = ( container , first ? ) : void => { const getUlRealHeight = ( ul ) : number => { const children = ul . querySelectorAll ( 'li' ) ; return ( Array . from ( children ) . length || 0 ) * baseHeight ; } ; const list = ( < HTMLElement > container . querySelector ( '.sub-list' ) ) ; const height = getUlRealHeight ( list ) ; const isClose = list . offsetHeight > 0 ; let deep = 3 ; const syncParentsHeight = ( self ) : any => { if ( deep <= 0 ) return ; deep -- ; const parent = self . parentElement ; const isList = parent . nodeName . toLowerCase ( ) === 'ul' ; const isSubList = parent . classList . contains ( 'sub-list' ) ; if ( ! isList || ! isSubList ) return syncParentsHeight ( self . parentElement ) ; const nativeHeight = getUlRealHeight ( parent ) ; parent . style . height = `${ isClose ? nativeHeight : nativeHeight + height }px` ; deep ++ ; syncParentsHeight ( self . parentElement ) ; } ; syncParentsHeight ( list ) ; list . style . height = first ? `${ height }px` : `${ isClose ? 0 : height }px` ; } ; Array . from ( containers ) . forEach ( con => { config . expandAll && handle ( con , true ) ; con . addEventListener ( 'click' , ( ) => handle ( con ) ) ; } ) ; subListArr . forEach ( sub => { sub . addEventListener ( 'click' , ( event ) => event . stopPropagation ( ) ) ; } ) ; } ; const changTitle = ( eventHub , config ) => { const pathToTitle = ( p ) : string => { let hash = p . split ( '#/' ) . reverse ( ) [ 0 ] ; hash = hash . replace ( 'static/' , '' ) . replace ( '.html' , '' ) . replace ( '//' , '/' ) . replace ( '//' , '/' ) ; return hash . split ( '/' ) . map ( path => path . replace ( /\//g , '' ) . replace ( /^\d+_/g , '' ) ) . filter ( r => ! ! r ) . map ( str => config . alias [ str ] || str ) . join ( ' - ' ) ; } ; eventHub . listen ( 'container-changed' , ( { detail } ) => { document . title = `${ decodeURI ( pathToTitle ( detail ) ) } - ${ config . title }` ; } ) ; } ; export const event = async ( config , eventHub ) : Promise < void > => { await initSubList ( config ) ; config . backToTop && new BackToTop ( ) ; config . indicator && new Indicator ( eventHub ) ; new Highlight ( eventHub ) ; new Responsive ( ) ; changTitle ( eventHub , config ) ; } ;