import { append , create , h } from 'stage1' ; import { BookmarkNode , Folder , FolderProps } from './BookmarkNode' ; declare global { interface HTMLElement { /**
         * BookmarkBar synthetic `mouseenter` event handler. Note the property is
         * named `__mouseover` but it actually works like `mouseenter`.
         */ __mouseover ( event ) : void ; /**
         * BookmarkBar synthetic `mouseleave` event handler. Note the property is
         * named `__mouseout` but it actually works like `mouseleave`.
         */ __mouseout ( event ) : void ; } } type BookmarkBarComponent = HTMLDivElement ; export const BookmarkBar = ( ) : BookmarkBarComponent => { const root = create ( 'div' ) ; root . id = 'b' ; chrome . bookmarks . getTree ( ( tree ) => { const [ { children : bookmarks } , otherBookmarks ] = tree [ 0 ] . children ! ; const len = bookmarks ! . length ; const resize = ( ) => { root . textContent = '' ; let otherBookmarksFolder ; let currentWidth = 0 ; if ( otherBookmarks . children ! . length ) { ( otherBookmarks as FolderProps ) . end = true ; otherBookmarksFolder = append ( Folder ( otherBookmarks ) , root ) ; currentWidth = otherBookmarksFolder . clientWidth ; } if ( len ) { const maxWidth = root . clientWidth - 66 ; let index = 0 ; for ( ; index < len ; index ++ ) { const item = bookmarks ! [ index ] ; const node = append ( BookmarkNode ( item ) , root ) ; currentWidth += node . clientWidth ; if ( currentWidth >= maxWidth ) { node . remove ( ) ; break ; } } if ( index < len ) { const overflowBookmarksFolder = append ( Folder ( { children : bookmarks ! . slice ( index ) . map ( ( item ) => { item . parentId = 2 as unknown as string ; return item ; } ) , end : true , title : '' , } ) , root ) ; append ( h ( `
              <svg id=io>
                <polyline points="10 15 15 20 20 15"/>
                <path d="M4 4h7a4 4 0 0 1 4 4v12"/>
              </svg>
            ` ) , overflowBookmarksFolder ) ; } if ( otherBookmarksFolder ) { append ( otherBookmarksFolder , root ) ; } } } ; resize ( ) ; window . onresize = resize ; } ) ; root . onmouseover = root . onmouseout = ( event ) => { const eventKey = '__' + event . type ; const related = event . relatedTarget as Node | null ; let node = event . target as Node | null ; while ( node ) { const eventHandler = node [ eventKey ] ; if ( eventHandler && ( ! related || ! node . contains ( related ) ) ) { eventHandler ( event ) ; } node = node . parentNode ; } } ; return root ; } ;